vue select下拉框选择组件
typescript+vue开发的下拉框选择组件,使用模拟的增强下拉选择器来代替浏览器原生的选择器,简单易用
代码示例
使用v-model来进行数据双向绑定,控制组件的显示与隐藏,详情看以下代码
-
安装组件包
npm install vuets-component-select --save-dev
-
js代码
;;el: '#app'components:VueSelectVueOption{returnvisible: falsedefaultValue: "2"data:value: "1"text: "2017-10-31"value: "2"text: "2018-10-31"option:title: "请选择时间"cancelText: "再想想"}methods:{;}; -
html模板
点击测试{{item.text}}
组件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在浏览器打开,切换到移动的端模拟器,可以预览在手机端的展示结果