feat(selector): support multi select (#460)

feat #296
didi · Jun 13, 2019 · 9780f2f · 9780f2f
1 parent 47a8838
commit 9780f2f
Show file tree

Hide file tree

Showing 9 changed files with 353 additions and 22 deletions.
diff --git a/components/selector/README.en-US.md b/components/selector/README.en-US.md
@@ -24,7 +24,7 @@ Vue.component(Selector.name, Selector)
 |----|-----|------|------|------|
 |v-model|display selector or not|Boolean|false|-|
 |data|data source|Array<{value,text,disabled,...}>|`[]`|`text` can be a `html` fragment|
-|default-value|the value of initially selected item|any|-|-|
+|default-value|the value of initially selected item|any|-|when `multi` is `true`, `default-value` should be `array`|
 |title|title of selector|String|-|-|
 |describe|description of selector|String|-|-|
 |ok-text|confirmation text|String|-|if empty, it will be `confirmed mode`, that is, click to select directly|
@@ -39,6 +39,8 @@ Vue.component(Selector.name, Selector)
 |icon-size|the size of icon|String|`lg`|-|
 |icon-svg|use svg icon|Boolean|`false`|-|
 |icon-position|the position of icon|String|`right`|`left`, `right`|
+|multi<sup class="version-after">2.2.0+</sup>|support multi select|Boolean|`false`|`multi` must be with `ok-text` prop|
+
 
 #### Selector Events
 

diff --git a/components/selector/README.md b/components/selector/README.md
@@ -24,7 +24,7 @@ Vue.component(Selector.name, Selector)
 |----|-----|------|------|------|
 |v-model|选择器是否可见|Boolean|false|-|
 |data|数据源|Array<{value,text,disabled,...}>|`[]`|`text`可为`html`片段|
-|default-value|选择器初始选中项的值|any|-|-|
+|default-value|选择器初始选中项的值|any|-|`multi`为`true`时，`default-value`应该传数组sup class="version-after">2.3.0+</sup>|
 |title|选择器标题|String|-|-|
 |describe|选择器描述|String|-|-|
 |ok-text|选择器确认文案|String|-|若为空则为`确认模式`，即点击选项直接选择|
@@ -39,6 +39,7 @@ Vue.component(Selector.name, Selector)
 |icon-size|图标大小|String|`lg`|-|
 |icon-svg|使用svg图标|Boolean|`false`|-|
 |icon-position|图标位置|String|`right`|`left`, `right`|
+|multi<sup class="version-after">2.3.0+</sup>|支持多选|Boolean|`false`|`multi`为`true`时，`ok-text`不能为空|
 
 #### Selector Events
 

diff --git a/components/selector/demo/cases/demo4.vue b/components/selector/demo/cases/demo4.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="md-example-child md-example-child-selector md-example-child-selector-4">
+    <md-field>
+      <md-field-item
+        title="多选模式"
+        :content="selectorValue.join(',')"
+        @click="showSelector"
+        arrow
+      />
+    </md-field>
+    <md-selector
+      v-model="isSelectorShow"
+      :data="data[0]"
+      :defaultValue="selectorValue"
+      title="多选模式"
+      min-height="320px"
+      okText="确定"
+      cancelText="取消"
+      @confirm="onSelectorConfirm"
+      multi
+    ></md-selector>
+  </div>
+</template>
+
+<script>import {Selector, Field, FieldItem} from 'mand-mobile'
+
+export default {
+  name: 'selector-demo',
+  /* DELETE */
+  title: '多选模式',
+  titleEnUS: 'Multi mode',
+  height: 500,
+  /* DELETE */
+  components: {
+    [Selector.name]: Selector,
+    [Field.name]: Field,
+    [FieldItem.name]: FieldItem,
+  },
+  data() {
+    return {
+      isSelectorShow: false,
+      data: [
+        [
+          {
+            value: '1',
+            text: '选项一',
+          },
+          {
+            value: '2',
+            text: '选项二',
+          },
+          {
+            value: '3',
+            text: '选项三',
+          },
+          {
+            value: '4',
+            text: '选项四',
+          },
+        ],
+      ],
+      selectorValue: ['1'],
+    }
+  },
+  methods: {
+    showSelector() {
+      this.isSelectorShow = true
+    },
+    onSelectorConfirm(array) {
+      this.selectorValue = array
+    },
+  },
+}
+</script>

diff --git a/components/selector/demo/index.vue b/components/selector/demo/index.vue
@@ -15,6 +15,7 @@ import Demo0 from './cases/demo0'
 import Demo1 from './cases/demo1'
 import Demo2 from './cases/demo2'
 import Demo3 from './cases/demo3'
+import Demo4 from './cases/demo4'
 
-export default {...createDemoModule('selecotor', [Demo0, Demo1, Demo2, Demo3])}
+export default {...createDemoModule('selecotor', [Demo0, Demo1, Demo2, Demo3, Demo4])}
 </script>

diff --git a/components/selector/index.vue b/components/selector/index.vue
@@ -41,25 +41,49 @@
             minHeight: `${minHeight}`
           }"
         >
-          <md-radio-list
-            class="md-selector-list"
-            ref="radio"
-            :key="radioKey"
-            :value="defaultValue"
-            :options="data"
-            :is-slot-scope="hasSlot"
-            :icon="icon"
-            :icon-disabled="iconDisabled"
-            :icon-inverse="iconInverse"
-            :icon-position="iconPosition"
-            :icon-size="iconSize"
-            :icon-svg="iconSvg"
-            @change="$_onSelectorChoose"
-          >
-            <template slot-scope="{ option }">
-              <slot :option="option"></slot>
-            </template>
-          </md-radio-list>
+          <!-- audio-list with single select -->
+          <template v-if="!multi">
+            <md-radio-list
+              class="md-selector-list"
+              ref="radio"
+              :key="radioKey"
+              :value="defaultValue"
+              :options="data"
+              :is-slot-scope="hasSlot"
+              :icon="icon"
+              :icon-disabled="iconDisabled"
+              :icon-inverse="iconInverse"
+              :icon-position="iconPosition"
+              :icon-size="iconSize"
+              :icon-svg="iconSvg"
+              @change="$_onSelectorChoose"
+            >
+              <template slot-scope="{ option }">
+                <slot :option="option"></slot>
+              </template>
+            </md-radio-list>
+          </template>
+          <!-- check-list with multi select -->
+          <template v-else>
+            <md-check-list
+              class="md-selector-list"
+              ref="check"
+              :key="checkKey"
+              v-model="multiDefaultValue"
+              :options="data"
+              :is-slot-scope="hasSlot"
+              :icon="icon"
+              :icon-disabled="iconDisabled"
+              :icon-inverse="iconInverse"
+              :icon-position="iconPosition"
+              :icon-size="iconSize"
+              :icon-svg="iconSvg"
+            >
+              <template slot-scope="{ option }">
+                <slot :option="option"></slot>
+              </template>
+            </md-check-list>
+          </template>
         </md-scroll-view>
       </div>
     </md-popup>
@@ -74,6 +98,7 @@ import popupTitleBarMixin from '../popup/mixins/title-bar'
 import RadioList from '../radio-list'
 import radioMixin from '../radio/mixins'
 import ScrollView from '../scroll-view'
+import CheckList from '../check-list'
 
 export default {
   name: 'md-selector',
@@ -83,6 +108,7 @@ export default {
   components: {
     [Icon.name]: Icon,
     [RadioList.name]: RadioList,
+    [CheckList.name]: CheckList,
     [Popup.name]: Popup,
     [PopupTitlebar.name]: PopupTitlebar,
     [ScrollView.name]: ScrollView,
@@ -118,6 +144,10 @@ export default {
     iconPosition: {
       default: 'right',
     },
+    multi: {
+      type: Boolean,
+      default: false,
+    },
 
     // Mixin Props
     // value: {
@@ -170,8 +200,10 @@ export default {
     return {
       isSelectorShow: this.value,
       radioKey: Date.now(),
+      checkKey: Date.now() + 1,
       activeIndex: -1,
       tmpActiveIndex: -1,
+      multiDefaultValue: [],
     }
   },
 
@@ -191,6 +223,16 @@ export default {
     isSelectorShow(val) {
       this.$emit('input', val)
     },
+    defaultValue: {
+      handler(val) {
+        if (!this.multi || val === '') {
+          return
+        }
+
+        this.multiDefaultValue = !Array.isArray(val) ? [val] : val
+      },
+      immediate: true,
+    },
   },
 
   methods: {
@@ -200,6 +242,12 @@ export default {
     },
     // MARK: events handler
     $_onSelectorConfirm() {
+      if (this.multi) {
+        this.$emit('confirm', this.multiDefaultValue.slice())
+        this.isSelectorShow = false
+        return
+      }
+
       if (this.tmpActiveIndex > -1) {
         this.activeIndex = this.tmpActiveIndex
         this.isSelectorShow = false
@@ -215,6 +263,7 @@ export default {
       } else {
         // reset radio
         this.radioKey = Date.now()
+        this.checkKey = Date.now() + 1
       }
 
       this.$emit('cancel')
@@ -264,6 +313,9 @@ export default {
     .md-radio-item.is-selected
       .md-cell-item-title
         color inherit
+  .md-check-item
+    padding-left h-gap-sl
+    padding-right h-gap-sl
 
 
 .md-selector-container

diff --git a/components/selector/test/__snapshots__/demo.spec.js.snap b/components/selector/test/__snapshots__/demo.spec.js.snap
@@ -295,6 +295,108 @@ exports[`Selector - Demo Custom options 1`] = `
 </div>
 `;
 
+exports[`Selector - Demo Multi mode 1`] = `
+<div class="md-example-child md-example-child-selector md-example-child-selector-4">
+  <div class="md-selector is-normal">
+    <div class="md-popup inner-popup with-mask bottom" style="display:none;">
+      <div name="md-mask-fade" class="md-popup-mask" style="display:none;"></div>
+      <div name="md-slide-up" class="md-popup-box md-slide-up" style="display:none;">
+        <div class="md-popup-title-bar">
+          <div class="title-bar-left md-popup-cancel">取消</div>
+          <div class="title-bar-title">
+            <p class="title">多选模式</p>
+            <!---->
+          </div>
+          <div class="title-bar-right md-popup-confirm">确定</div>
+        </div>
+        <div class="md-selector-container">
+          <div class="md-scroll-view" style="max-height:auto;min-height:320px;">
+            <!---->
+            <div class="scroll-view-container">
+              <!---->
+              <div icon="checked" icon-disabled="check-disabled" icon-inverse="check" icon-position="right" icon-size="md" class="md-check-group md-check-list md-selector-list">
+                <div class="md-cell-item md-check-item is-checked">
+                  <div class="md-cell-item-body">
+                    <!---->
+                    <div class="md-cell-item-content">
+                      <p class="md-cell-item-title">选项一</p>
+                      <!---->
+                    </div>
+                    <div class="md-cell-item-right"><label class="md-check is-checked">
+                        <div class="md-check-icon"><i class="md-icon icon-font md-icon-right right md" style="color:;"></i></div>
+                        <!---->
+                      </label>
+                      <!---->
+                    </div>
+                  </div>
+                  <!---->
+                </div>
+                <div class="md-cell-item md-check-item">
+                  <div class="md-cell-item-body">
+                    <!---->
+                    <div class="md-cell-item-content">
+                      <p class="md-cell-item-title">选项二</p>
+                      <!---->
+                    </div>
+                    <div class="md-cell-item-right"><label class="md-check">
+                        <div class="md-check-icon">
+                          <!---->
+                        </div>
+                        <!---->
+                      </label>
+                      <!---->
+                    </div>
+                  </div>
+                  <!---->
+                </div>
+                <div class="md-cell-item md-check-item">
+                  <div class="md-cell-item-body">
+                    <!---->
+                    <div class="md-cell-item-content">
+                      <p class="md-cell-item-title">选项三</p>
+                      <!---->
+                    </div>
+                    <div class="md-cell-item-right"><label class="md-check">
+                        <div class="md-check-icon">
+                          <!---->
+                        </div>
+                        <!---->
+                      </label>
+                      <!---->
+                    </div>
+                  </div>
+                  <!---->
+                </div>
+                <div class="md-cell-item md-check-item">
+                  <div class="md-cell-item-body">
+                    <!---->
+                    <div class="md-cell-item-content">
+                      <p class="md-cell-item-title">选项四</p>
+                      <!---->
+                    </div>
+                    <div class="md-cell-item-right"><label class="md-check">
+                        <div class="md-check-icon">
+                          <!---->
+                        </div>
+                        <!---->
+                      </label>
+                      <!---->
+                    </div>
+                  </div>
+                  <!---->
+                </div>
+              </div>
+              <!---->
+            </div>
+            <!---->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Selector - Demo No need to confirm 1`] = `
 <div class="md-example-child md-example-child-selector md-example-child-selector-0">
   <div class="md-selector is-normal">