Vuets component select

typescript+vue开发的下拉框选择组件,简单易用

Version: 1.0.1 Updated: 07/31/2018

By: ljcheibao License: MIT

Downloads Last 30 Days: 21

vue select下拉框选择组件

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

npm NPM Version npm

代码示例

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

image

  • 安装组件包

      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在浏览器打开,切换到移动的端模拟器,可以预览在手机端的展示结果

Categories: Vue js