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 相关文章推荐
js的逻辑运算符 ||
May 31 Javascript
为原生js Array增加each方法
Apr 07 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 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
Zerg剧情介绍
2020/03/14 星际争霸
在IIS上安装PHP4.0正式版
2006/10/09 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
Python最基本的输入输出详解
2015/04/25 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
Django发送邮件功能实例详解
2019/09/02 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
医药营销专业个人自荐信
2013/09/29 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
教师产假请假条
2014/04/10 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
2014年妇联工作总结
2014/11/21 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android