vue select下拉框选择组件

typescript+vue开发的下拉框选择组件，使用模拟的增强下拉选择器来代替浏览器原生的选择器，简单易用

代码示例

使用v-model来进行数据双向绑定，控制组件的显示与隐藏，详情看以下代码

• 安装组件包

    npm install vuets-component-select --save-dev

• js代码

  import Vue from 'vue';
  import { VueSelect, VueOption } from "vuets-component-select";
  
  new Vue({
    el: '#app',
    components: {
      VueSelect,
      VueOption
    },
    data() {
      return {
        visible: false,
        defaultValue: "2",
        data: [{
          value: "1",
          text: "2017-10-31"
        }, {
          value: "2",
          text: "2018-10-31"
        }],
        option: {
          title: "请选择时间",
          cancelText: "再想想",
        }
      }
    },
    methods: {
      confirmHandle(selectedValue) {
        alert(selectedValue);
      }
    }
  });

• html模板

  <div id="app">
      <button @click="visible=true">点击测试</button>
      <vue-select v-model="visible" :option="option" @on-change="confirmHandle">
        <vue-option v-for="item in data" 
          :value="item.value" 
          :selected="item.value == defaultValue">
          {{item.text}}
        </vue-option>
      </vue-select>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="./dist/index.js"></script>

组件API

• select props

  | 属性 | 说明 | 类型 | 默认值 | | ------ | ---------------------------------------- | ------ | ---- | | option | option对象提供3个属性值：title(标题)，cancelText(【取消】按钮文案)，confirmText(【确定】按钮文案) | object | 空对象 |

• select events

  | 方法名称 | 说明 | 参数 | | --------- | ------------- | ------------- | | on-change | 点击【确定】按钮触发的方法 | 选中的下拉框的value值 |

• option props

  | 属性 | 说明 | 类型 | 默认值 | | -------- | ---------------- | ---------------- | ----- | | value | 下拉框每一项的value值 | string | number | 空字符 | | selected | 默认选中的下拉框option项 | boolean | false | | text | 下拉框每个option显示的文案 | string | 空字符 |

组件开发说明

• 安装依赖

  npm/cnpm install

• 编译

  npm run build

• demo运行

  # cd test
  # npm/cnpm install
  # npm run build
  
  #把test目录的index.html在浏览器打开，切换到移动的端模拟器，可以预览在手机端的展示结果

  ​