薄荷用户界面组件库清单使用及踩坑总结

导入

按需引入：

从“薄荷味”导入{核对清单};Vue.component(核对清单。名称，核对清单);全局导入：全局导入后不用再导入

从' Mint-ui '导入' Mint-ui/lib/style '导入Mint。CSS ' vue。使用(薄荷)；应用程序接口

示例

示例一：

xxx.vue:

模板div id=' app ' mt-检查表v-model=' value ' : options=' options '/mt-检查表/div/模板脚本导出默认值{ name: 'app '，data () { return { //存放所选选项value:[]，//检查表设置选项： [{ label: '选项' a '，值： 'A '，禁用： true//可以禁用选项}，{ label: '选项' b '，值： 'B '，禁用： true}，{ label: '选项' c '，值：C ' }，标签: '选项D '，value: 'D'}] } }，挂载的：函数(){ } }/脚本样式/styleshow:

示例二：

xxx.vue:

模板div id=' app ' mt-检查表标题='复选框列表v-model=' value ' align=' right ' : options=' options ' @ change=' check on '/mt-checklist/div/template脚本导出默认值{ name : ' app '，data () { return { //存放所选选项value:[]，//检查表设置选项： [{ label: '选项' a '，值： 'A'}，{标签: '选项' b '，值： 'B'}，标签: '选项' c '，值：C ' }，标签: '选项D '，value: 'D'}] } }，mounted:function(){ }，methods : { check : function(){ console。日志(这个。值)} }/脚本样式/样式显示：

点击"选项b "

所选择内容是

再点击"选项“c

所选择内容是

演示链接：mint-ui-检查表_jb51.rar

使用前输入命令：

npm installnpm运行开发在开发过程中，我们肯定遇到过这样的问题，如下图所示：

我选择了两个选项，但是v型中绑定的数组只有一个，解决这个问题如下代码

模板mt-检查表' :title='多选标题v-model=' value ' : options=' item。选项' @ change=' check on($ event)'/mt-checklist/template script导出默认值{ name : ' app '，data () { return { value: []，questionName: '多选标题1 ',选项： [{ label: '玩具1 ',注释： ' '，seq: 1，值： ' 2e A0 bbe 02 e 024 b 76 a 0180d 5332 a 2d 68 ' }，标签: '玩具2 ',注释： ' '，seq: 1，值： ' 2e A0 bbe 02 e 024 b 76 a 0180d 5332 a 2d 69 ' }，标签: '玩具3 '，remark: ' '，seq: 1，值： ' 2e a0bb 02e 024 b 76 a 0180d 5332 a 2d 70 ' } } })，方法： {检查(项目){控制台。日志(项目)} } }/脚本只需在变化事件中加$事件，然后打印参数就是合适的，如图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。