Mint UI组件库CheckList使用及踩坑总结


Posted in Javascript onDecember 20, 2018

Import

按需引入:

import { Checklist } from 'mint-ui';

Vue.component(Checklist.name, Checklist);

全局导入:全局导入后不用再导入

importMintfrom'mint-ui'

import'mint-ui/lib/style.css'

Vue.use(Mint);

API

Mint UI组件库CheckList使用及踩坑总结

示例

示例一:

xxx.vue:

<template>
 <div id="app">		
		<mt-checklist 
		v-model="value" 
		:options="options">
		</mt-checklist>
 </div>
</template>
 
<script>
export default {
 name: 'app',
 data () {
 	return {
 		//存放所选选项
			value:[],
			//checklist设置
			options : [{
		  label: '选项A',
		  value: 'A',
		  disabled: true	//可以禁用选项
			},
			{
		  label: '选项B',
		  value: 'B',
		  disabled: true
			},
			{
		  label: '选项C',
		  value: 'C'
			},
			{
		  label: '选项D',
		  value: 'D'
			}]
 	}
 },
 mounted:function(){
 	
 }
}
</script>
 
<style>
	
</style>

show:

Mint UI组件库CheckList使用及踩坑总结

示例二:

xxx.vue:

<template>
 <div id="app">
		<mt-checklist 
			title="复选框列表"
			v-model="value" 
			align="right"
			:options="options" @change="checkon">
		</mt-checklist>
		
 </div>
</template>
 
<script>
export default {
 name: 'app',
 data () {
 	return {
 		//存放所选选项
			value:[],
			//checklist设置
			options : [{
		  label: '选项A',
		  value: 'A'
			},
			{
		  label: '选项B',
		  value: 'B'
			},
			{
		  label: '选项C',
		  value: 'C'
			},
			{
		  label: '选项D',
		  value: 'D'
			}]
 	}
 },
 mounted:function(){
 	
 },
 methods:{
 	checkon: function(){
 		console.log(this.value)
 	}
 }
}
</script>
 
<style>
	
</style>

show:

Mint UI组件库CheckList使用及踩坑总结

点击“选项B”

 Mint UI组件库CheckList使用及踩坑总结

所选择内容是

 Mint UI组件库CheckList使用及踩坑总结

再点击“选项C”

 Mint UI组件库CheckList使用及踩坑总结

所选择内容是

Mint UI组件库CheckList使用及踩坑总结

demo链接:mint-ui-checklist_3water.rar

使用前输入命令:

npm install
npm run dev

在开发过程中,我们肯定遇到过这样的问题,如下图所示:

Mint UI组件库CheckList使用及踩坑总结

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

<template>
  <mt-checklist :title="多选标题" v-model="value" :options="item.options" @change="checkon($event)"></mt-checklist>
</template>

<script>
export default {
 name: 'app',
 data () {
  return {
   value: [],
   questionName: '多选标题1',
   options: [{
    label: '玩具1',
    remark: '',
    seq: 1,
    value: '2ea0bbe02e024b76aa0180d5332a2d68'
   },
   {
    label: '玩具2',
    remark: '',
    seq: 1,
    value: '2ea0bbe02e024b76aa0180d5332a2d69'
   },
   {
    label: '玩具3',
    remark: '',
    seq: 1,
    value: '2ea0bbe02e024b76aa0180d5332a2d70'
   }]
  }
 },
 methods: {
  checkon (item) {
   console.log(item)
  }
 }
}
</script>

只需在change事件中加$event, 然后打印参数就是合适的,如图

Mint UI组件库CheckList使用及踩坑总结

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
围观tangram js库
Dec 28 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
JS重载实现方法分析
Dec 16 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 #Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 #Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 #Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 #Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 #Javascript
JavaScript类的继承操作实例总结
Dec 20 #Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 #Javascript
You might like
调整PHP的性能
2013/10/30 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
JavaScript手机振动API
2016/06/11 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
Python OS模块常用函数说明
2015/05/23 Python
理解Python垃圾回收机制
2016/02/12 Python
小小聊天室Python代码实现
2016/08/17 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
Python登录系统界面实现详解
2019/06/25 Python
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
一些Solaris面试题
2015/12/22 面试题
金融行业务员的自我评价
2013/12/13 职场文书
装修五一活动策划案
2014/01/23 职场文书
优秀教师主要事迹
2014/02/01 职场文书
企业元宵节主持词
2014/03/25 职场文书
感恩教育活动总结
2014/05/05 职场文书
甜品店创业计划书
2014/08/14 职场文书
战马观后感
2015/06/08 职场文书
春节随笔
2015/08/15 职场文书
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技