@laomao800/vue-dropdown-selector v1.0.5

vue-dropdown-selector

安装

# npm
npm install --save @laomao800/vue-dropdown-selector

# yarn
yarn add @laomao800/vue-dropdown-selector

使用方法

Single

<template>
  <div>
    <dropdown-selector
      :selection.sync="selectionSingle"
      :multilple="false"
      :width="400"
      placeholder="Select single value"
      >
      <div class="selector" style="padding:15px">
        <label style="margin-right:10px">
          <input v-model="selectionSingle" name="selectionSingle" type="radio" value="value1" />value1
        </label>
        <label style="margin-right:10px">
          <input v-model="selectionSingle" name="selectionSingle" type="radio" value="value2" />value2
        </label>
        <label style="margin-right:10px">
          <input v-model="selectionSingle" name="selectionSingle" type="radio" value="value3" />value3
        </label>
        <label style="margin-right:10px">
          <input v-model="selectionSingle" name="selectionSingle" type="radio" value="value4" />value4
        </label>
      </div>
    </dropdown-selector>
    <pre>{{ selectionSingle }}</pre>
  </div>
</template>

<script>
import DropdownSelector from '@laomao800/vue-dropdown-selector'

export default {
  components: { DropdownSelector },
  data () {
    return { selectionSingle: '' }
  }
}
</script>

Multiple

<template>
  <div>
    <dropdown-selector
      :selection.sync="selectionMultiple"
      :multilple="true"
      :width="400"
      placeholder="Select multiple value"
      >
      <div class="selector" style="padding:15px">
        <label style="margin-right:10px">
          <input v-model="selectionMultiple" name="selectionMultiple" type="checkbox" value="value1" />value1
        </label>
        <label style="margin-right:10px">
          <input v-model="selectionMultiple" name="selectionMultiple" type="checkbox" value="value2" />value2
        </label>
        <label style="margin-right:10px">
          <input v-model="selectionMultiple" name="selectionMultiple" type="checkbox" value="value3" />value3
        </label>
        <label style="margin-right:10px">
          <input v-model="selectionMultiple" name="selectionMultiple" type="checkbox" value="value4" />value4
        </label>
      </div>
    </dropdown-selector>
    <pre>{{ selectionMultiple }}</pre>
  </div>
</template>

<script>
import DropdownSelector from '@laomao800/vue-dropdown-selector'

export default {
  components: { DropdownSelector },
  data () {
    return { selectionMultiple: [] }
  }
}
</script>

Object data

<template>
  <div>
    <dropdown-selector
      :selection.sync="selectionObject"
      :multilple="true"
      :width="400"
      placeholder="Select months"
      >
      <template slot="selection" slot-scope="props">{{ props.selection.short }}</template>
      <div class="selector" style="padding:15px">
        <label
          v-for="month in months"
          :key="month.value" style="display:inline-block;width:30%;
          margin-right:10px"
        >
          <input
            type="checkbox"
            :checked="selectionObject.indexOf(month) > -1"
            @change="handleMonthSelect($event, month)"
          />
          {{ month.label }}
        </label>
      </div>
    </dropdown-selector>
    <pre>{{ selectionObject }}</pre>
  </div>
</template>

<script>
import DropdownSelector from '@laomao800/vue-dropdown-selector'

export default {
  components: {
    DropdownSelector
  },
  data () {
    return {
      months: [
        { label: 'January', short: 'Jan', value: 1 },
        { label: 'February', short: 'Feb', value: 2 },
        { label: 'March', short: 'Mar', value: 3 },
        { label: 'April', short: 'Apr', value: 4 },
        { label: 'May', short: 'May', value: 5 },
        { label: 'June', short: 'Jun', value: 6 },
        { label: 'July', short: 'Jul', value: 7 },
        { label: 'August', short: 'Aug', value: 8 },
        { label: 'September', short: 'Sep', value: 9 },
        { label: 'October', short: 'Oct', value: 10 },
        { label: 'November', short: 'Nov', value: 11 },
        { label: 'December', short: 'Dec', value: 12 }
      ]
    }
  },
  methods: {
    handleMonthSelect ($event, month) {
      if ($event.target.checked) {
        this.selectionObject.push(month)
      } else {
        this.selectionObject.slice(this.selectionObject.findIndex(month), 1)
      }
    }
  }
}
</script>

Props

Slot

可通过 slot selection 自定义选项展示格式， slot-scope 上接受一个 selection 的值，在多选场景下，接受的是每一项子项的数据；单选场景下，接受的是 prop 的 selection 。

<template slot="selection" slot-scope="props">{{ props.selection.otherPropertyName }}</template>

Methods

Events