diff --git a/packages/actionsheet/index.js b/packages/actionsheet/index.js index 6529aa45d..0fe05d71b 100644 --- a/packages/actionsheet/index.js +++ b/packages/actionsheet/index.js @@ -1,13 +1,12 @@ -import createSfc from '../utils/create'; -import createBem from '../utils/bem'; -import Popup from '../mixins/popup'; +import { use } from '../utils'; +import Icon from '../icon'; +import Loading from '../loading'; +import PopupMixin from '../mixins/popup'; -const bem = createBem('van-actionsheet'); +const [sfc, bem] = use('actionsheet'); -export default createSfc({ - name: 'actionsheet', - - mixins: [Popup], +export default sfc({ + mixins: [PopupMixin], props: { title: String, @@ -53,7 +52,7 @@ export default createSfc({ const Header = () => (
{title} - +
); @@ -69,7 +68,7 @@ export default createSfc({ }} > {item.loading ? ( - + ) : ( [ {item.name}, diff --git a/packages/area/index.js b/packages/area/index.js index fa0d5c443..dee749993 100644 --- a/packages/area/index.js +++ b/packages/area/index.js @@ -1,10 +1,10 @@ -import createSfc from '../utils/create'; +import { use } from '../utils'; import Picker from '../picker'; import PickerMixin from '../mixins/picker'; -export default createSfc({ - name: 'area', +const [sfc, bem] = use('area'); +export default sfc({ mixins: [PickerMixin], props: { @@ -189,7 +189,7 @@ export default createSfc({ return ( {this.$slots.default}; + return
{this.$slots.default}
; } }); diff --git a/packages/badge/index.js b/packages/badge/index.js index f07499825..a4f4404f7 100644 --- a/packages/badge/index.js +++ b/packages/badge/index.js @@ -1,12 +1,9 @@ +import { use } from '../utils'; import Info from '../info'; -import createSfc from '../utils/create'; -import createBem from '../utils/bem'; -const bem = createBem('van-badge'); - -export default createSfc({ - name: 'badge', +const [sfc, bem] = use('badge'); +export default sfc({ props: { url: String, info: [String, Number], diff --git a/packages/badge/test/__snapshots__/demo.spec.js.snap b/packages/badge/test/__snapshots__/demo.spec.js.snap index fb78ae5c5..85f87fc47 100644 --- a/packages/badge/test/__snapshots__/demo.spec.js.snap +++ b/packages/badge/test/__snapshots__/demo.spec.js.snap @@ -3,7 +3,7 @@ exports[`renders demo correctly 1`] = `
-
+
标签名称
diff --git a/packages/button/index.js b/packages/button/index.js index fcdf178fd..ce4048ec0 100644 --- a/packages/button/index.js +++ b/packages/button/index.js @@ -1,11 +1,9 @@ -import createSfc from '../utils/create'; -import createBem from '../utils/bem'; +import { use } from '../utils'; +import Loading from '../loading'; -const bem = createBem('van-button'); - -export default createSfc({ - name: 'button', +const [sfc, bem] = use('button'); +export default sfc({ props: { text: String, block: Boolean, @@ -59,7 +57,7 @@ export default createSfc({ onClick={this.onClick} > {this.loading ? ( - + ) : ( {this.$slots.default || this.text} )} diff --git a/packages/card/index.js b/packages/card/index.js index 448d6face..dc8030517 100644 --- a/packages/card/index.js +++ b/packages/card/index.js @@ -1,12 +1,9 @@ -import createSfc from '../utils/create'; -import createBem from '../utils/bem'; +import { use, isDef } from '../utils'; import Tag from '../tag'; -const bem = createBem('van-card'); - -export default createSfc({ - name: 'card', +const [sfc, bem] = use('card'); +export default sfc({ props: { tag: String, desc: String, @@ -25,7 +22,7 @@ export default createSfc({ }, render(h) { - const { thumb, isDef, $slots: slots } = this; + const { thumb, $slots: slots } = this; const Thumb = (slots.thumb || thumb) && ( diff --git a/packages/cell-group/index.js b/packages/cell-group/index.js index 9cf68c20b..25382e1c9 100644 --- a/packages/cell-group/index.js +++ b/packages/cell-group/index.js @@ -1,8 +1,8 @@ -import createSfc from '../utils/create-basic'; +import { use } from '../utils'; -export default createSfc({ - name: 'cell-group', +const [sfc, bem] = use('cell-group'); +export default sfc({ props: { border: { type: Boolean, @@ -12,7 +12,7 @@ export default createSfc({ render(h) { return ( -
+
{this.$slots.default}
); diff --git a/packages/utils/create-basic.js b/packages/utils/create-basic.js index b2acd1655..286e0aabc 100644 --- a/packages/utils/create-basic.js +++ b/packages/utils/create-basic.js @@ -1,46 +1,18 @@ /** * Create a basic component with common options */ -import '../locale'; -import createBem from './bem'; +import useSfc from './use/sfc'; +import useBem from './use/bem'; import i18n from '../mixins/i18n'; -import { isDef, camelize } from '.'; - -function install(Vue) { - const { name } = this; - Vue.component(name, this); - Vue.component((camelize(`-${name}`)), this); -} - -function returnArray() { - return []; -} - -function defaultProps(props) { - Object.keys(props).forEach(key => { - if (props[key] === Array) { - props[key] = { - type: Array, - default: returnArray - }; - } else if (props[key] === Number) { - props[key] = { - type: Number, - default: 0 - }; - } - }); -} +import { isDef } from '.'; export default function (sfc) { - sfc.name = 'van-' + sfc.name; - sfc.install = sfc.install || install; + sfc = useSfc('van-' + sfc.name)(sfc); sfc.mixins = sfc.mixins || []; sfc.mixins.push(i18n); sfc.methods = sfc.methods || {}; sfc.methods.isDef = isDef; - sfc.methods.b = createBem(sfc.name); - sfc.props && defaultProps(sfc.props); + sfc.methods.b = useBem(sfc.name); return sfc; } diff --git a/packages/utils/index.js b/packages/utils/index.js index 3240cca10..c38a41e87 100644 --- a/packages/utils/index.js +++ b/packages/utils/index.js @@ -1,4 +1,5 @@ import Vue from 'vue'; +import use from './use'; const isServer = Vue.prototype.$isServer; @@ -37,6 +38,7 @@ function range(num, min, max) { } export { + use, get, range, isObj, diff --git a/packages/utils/bem.js b/packages/utils/use/bem.js similarity index 100% rename from packages/utils/bem.js rename to packages/utils/use/bem.js diff --git a/packages/utils/use/index.js b/packages/utils/use/index.js new file mode 100644 index 000000000..bf9a6298a --- /dev/null +++ b/packages/utils/use/index.js @@ -0,0 +1,7 @@ +import useBem from './bem'; +import useSfc from './sfc'; + +export default function (name) { + name = 'van-' + name; + return [useSfc(name), useBem(name)]; +} diff --git a/packages/utils/use/sfc.js b/packages/utils/use/sfc.js new file mode 100644 index 000000000..11516b21b --- /dev/null +++ b/packages/utils/use/sfc.js @@ -0,0 +1,39 @@ +/** + * Create a basic component with common options + */ +import '../../locale'; +import { camelize } from '..'; + +const arrayProp = { + type: Array, + default: () => [] +}; + +const numberProp = { + type: Number, + default: 0 +}; + +function defaultProps(props) { + Object.keys(props).forEach(key => { + if (props[key] === Array) { + props[key] = arrayProp; + } else if (props[key] === Number) { + props[key] = numberProp; + } + }); +} + +function install(Vue) { + const { name } = this; + Vue.component(name, this); + Vue.component((camelize(`-${name}`)), this); +} + +export default name => sfc => { + sfc.name = name; + sfc.install = install; + sfc.props && defaultProps(sfc.props); + + return sfc; +};