feat(selector): code refactor

lizzie0802 · Sep 22, 2018 · 5c11f49 · 5c11f49
1 parent 33a9183
commit 5c11f49
Show file tree

Hide file tree

Showing 9 changed files with 238 additions and 223 deletions.
diff --git a/components/selector/README.en-US.md b/components/selector/README.en-US.md
@@ -24,17 +24,14 @@ Vue.component(Selector.name, Selector)
 |----|-----|------|------|------|
 |v-model|display selector or not|Boolean|false|-|
 |data|data source|Array<{value,text,...}>|`[]`|`label` can be a `html` fragment|
-|default-index|the index of initially selected item|Number|-|-|
-|invalid-index|the index of disabled item|Number|-|-|
+|default-value|the value of initially selected item|String|-|-|
 |title|the title of selector|String|-|-|
 |ok-text|confirmation text|String|-|if empty, it will be `confirmed mode`, that is, click to select directly|
 |cancel-text|cancellation text|String|`cancel`|-|
 |mask-closable<sup class="version-after">1.3.0+</sup>|if the popup will be closed when clicking mask|Boolean|`true`|-|
 |is-check|has a `check` icon or not|Boolean|`false`|only for `confirmed mode`|
-|option-render|return rendering contents of each option|Function({value, text ,...}):String|-|`vue 2.1.0+` can use `slot-scope`, refer to `Radio`|
 |max-height<sup class="version-after">1.3.0+</sup>|the maximum height of selectable area|Number|`400`|unit `px`|
 
-
 #### Selector Events
 
 #### @choose({value, text, ...})
@@ -51,3 +48,12 @@ Show selector
 
 #### @hide()
 Hide selector
+
+#### Selector Slots
+```html
+<md-selector>
+  <template slot-scope="{ option }">
+    <div class="md-selector-custom-title">Hello, {{ option.text }}</div>
+  </template>
+</md-selector>
+```
diff --git a/components/selector/README.md b/components/selector/README.md
@@ -24,17 +24,14 @@ Vue.component(Selector.name, Selector)
 |----|-----|------|------|------|
 |v-model|选择器是否可见|Boolean|false|-|
 |data|数据源|Array<{value,text,...}>|`[]`|`label`可为`html`片段|
-|default-index|选择器初始选中项索引|Number|-|-|
-|invalid-index|选择器不可用选项索引|Number|-|-|
+|default-value|选择器初始选中项的值|String|-|-|
 |title|选择器标题|String|-|-|
 |ok-text|选择器确认文案|String|-|若为空则为`确认模式`，即点击选项直接选择|
 |cancel-text|选择器取消文案|String|`取消`|-|
 |mask-closable<sup class="version-after">1.3.0+</sup>|点击蒙层是否可关闭弹出层|Boolean|`true`|-|
 |is-check|是否有`check`图标|Boolean|`false`|仅`确认模式`|
-|option-render|返回各选项渲染内容|Function({value, text ,...}):String|-|`vue 2.1.0+`可使用`slot-scope`，参考`Radio`|
 |max-height<sup class="version-after">1.3.0+</sup>|选择器内容区域最高高度, 超出后可滚动|Number|400|单位`px`|
 
-
 #### Selector Events
 
 #### @choose({value, text, ...})
@@ -51,3 +48,12 @@ Vue.component(Selector.name, Selector)
 
 #### @hide()
 选择器隐藏事件
+
+#### Selector Slots
+```html
+<md-selector>
+  <template slot-scope="{ option }">
+    <div class="md-selector-custom-title">Hello, {{ option.text }}</div>
+  </template>
+</md-selector>
+```
diff --git a/components/selector/demo/cases/demo0.vue b/components/selector/demo/cases/demo0.vue
@@ -2,21 +2,19 @@
   <div class="md-example-child md-example-child-selector md-example-child-selector-0">
     <md-field>
       <md-field-item
-        name="name"
         title="普通模式"
-        arrow="arrow-right"
-        align="right"
-        :value="selectorValue"
-        @click.native="showSelector">
-      </md-field-item>
+        :content="selectorValue"
+        @click="showSelector"
+        arrow
+        align-right
+      />
     </md-field>
     <md-selector
       v-model="isSelectorShow"
+      default-value="2"
       :data="data[0]"
-      :default-index="1"
-      :invalid-index="2"
       title="普通模式"
-      @choose="onSelectorChoose($event)"
+      @choose="onSelectorChoose"
     ></md-selector>
   </div>
 </template>
@@ -41,33 +39,43 @@ export default {
       data: [
         [
           {
+            value: '1',
             text: '选项一',
           },
           {
+            value: '2',
             text: '选项二',
           },
           {
+            value: '3',
             text: '选项三',
           },
           {
+            value: '4',
             text: '选项四',
           },
           {
+            value: '5',
             text: '选项五',
           },
           {
+            value: '6',
             text: '选项六',
           },
           {
+            value: '7',
             text: '选项七',
           },
           {
+            value: '8',
             text: '选项八',
           },
           {
+            value: '9',
             text: '选项九',
           },
           {
+            value: '10',
             text: '选项十',
           },
         ],
@@ -84,4 +92,4 @@ export default {
     },
   },
 }
-</script>
+</script>

diff --git a/components/selector/demo/cases/demo1.vue b/components/selector/demo/cases/demo1.vue
@@ -2,25 +2,23 @@
   <div class="md-example-child md-example-child-selector md-example-child-selector-1">
     <md-field>
       <md-field-item
-        name="name"
         title="自定义选项"
-        arrow="arrow-right"
-        align="right"
-        :value="selectorValue"
-        @click.native="showSelector">
-      </md-field-item>
+        :content="selectorValue"
+        @click="showSelector"
+        arrow
+        align-right
+      />
     </md-field>
     <md-selector
       v-model="isSelectorShow"
       :data="data[0]"
       title="自定义选项"
-      :optionRender="optionRender"
-      @choose="onSelectorChoose($event)"
+      @choose="onSelectorChoose"
     >
-      <!-- <template slot-scope="{ option }">
+      <template slot-scope="{ option }">
         <div class="md-selector-custom-title" v-text="option.text"></div>
         <div class="md-selector-custom-brief">{{ option.text }}使用slot-scooped的自定义描述</div>
-      </template> -->
+      </template>
     </md-selector>
   </div>
 </template>
@@ -45,14 +43,21 @@ export default {
       data: [
         [
           {
+            value: '1',
             text: '选项一',
           },
           {
+            value: '2',
             text: '选项二',
           },
           {
+            value: '3',
             text: '选项三',
           },
+          {
+            value: '4',
+            text: '选项四',
+          },
         ],
       ],
       selectorValue: '',
@@ -62,9 +67,6 @@ export default {
     showSelector() {
       this.isSelectorShow = true
     },
-    optionRender({text}) {
-      return `<div class="md-selector-custom-title">${text}</div><div class="md-selector-custom-brief">${text}使用option-render的的自定义描述</div>`
-    },
     onSelectorChoose({text}) {
       this.selectorValue = text
     },
@@ -79,4 +81,4 @@ export default {
   .md-selector-custom-brief
     font-size 20px
     color #999
-</style>
+</style>

diff --git a/components/selector/demo/cases/demo2.vue b/components/selector/demo/cases/demo2.vue
@@ -2,21 +2,19 @@
   <div class="md-example-child md-example-child-selector md-example-child-selector-2">
     <md-field>
       <md-field-item
-        name="name"
         title="确认模式"
-        arrow="arrow-right"
-        align="right"
-        :value="selectorValue"
-        @click.native="showSelector">
-      </md-field-item>
+        :content="selectorValue"
+        @click="showSelector"
+        align-right
+        arrow
+      />
     </md-field>
     <md-selector
       v-model="isSelectorShow"
       :data="data[0]"
-      :default-index="1"
       title="确认模式"
       okText="确认"
-      @confirm="onSelectorConfirm($event)"
+      @confirm="onSelectorConfirm"
     ></md-selector>
   </div>
 </template>
@@ -41,15 +39,19 @@ export default {
       data: [
         [
           {
+            value: '1',
             text: '选项一',
           },
           {
+            value: '2',
             text: '选项二',
           },
           {
+            value: '3',
             text: '选项三',
           },
           {
+            value: '4',
             text: '选项四',
           },
         ],
@@ -66,4 +68,4 @@ export default {
     },
   },
 }
-</script>
+</script>

diff --git a/components/selector/demo/cases/demo3.vue b/components/selector/demo/cases/demo3.vue
@@ -2,22 +2,20 @@
   <div class="md-example-child md-example-child-selector md-example-child-selector-3">
     <md-field>
       <md-field-item
-        name="name"
         title="Check模式"
-        arrow="arrow-right"
-        align="right"
-        :value="selectorValue"
-        @click.native="showSelector">
-      </md-field-item>
+        :content="selectorValue"
+        @click="showSelector"
+        arrow
+        align-right
+      />
     </md-field>
     <md-selector
       v-model="isSelectorShow"
       :data="data[0]"
-      :invalid-index="2"
       title="Check模式"
       okText="确认"
       cancelText="取消"
-      @confirm="onSelectorConfirm($event)"
+      @confirm="onSelectorConfirm"
       is-check
     ></md-selector>
   </div>
@@ -43,15 +41,19 @@ export default {
       data: [
         [
           {
+            value: '1',
             text: '选项一',
           },
           {
+            value: '2',
             text: '选项二',
           },
           {
+            value: '3',
             text: '选项三',
           },
           {
+            value: '4',
             text: '选项四',
           },
         ],
@@ -68,4 +70,4 @@ export default {
     },
   },
 }
-</script>
+</script>

diff --git a/components/selector/demo/index.vue b/components/selector/demo/index.vue
@@ -18,13 +18,3 @@ import Demo3 from './cases/demo3'
 
 export default {...createDemoModule('selecotor', [Demo0, Demo1, Demo2, Demo3])}
 </script>
-
-<style lang="stylus">
-.md-example-child-selecotor
-  .md-field-item-custom-title
-    font-weight font-weight-medium
-    text-align center
-  .md-field-item-custom-brief
-    font-size font-minor-normal
-    text-align center
-</style>