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 相关文章推荐
document.documentElement的一些使用技巧
Apr 18 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
Angular通过指令动态添加组件问题
Jul 09 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
javascript利用键盘控制小方块的移动
Apr 20 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
基于文本的访客签到簿
2006/10/09 PHP
PHP 事件机制(2)
2011/03/23 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
php-msf源码详解
2017/12/25 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
Javascript Objects详解
2014/09/04 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
python @property的用法及含义全面解析
2018/02/01 Python
python实现停车管理系统
2018/11/30 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
Python如何用filter函数筛选数据
2020/03/05 Python
Python 忽略文件名编码的方法
2020/08/01 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
新大陆软件面试题
2016/11/24 面试题
小学门卫岗位职责
2013/12/17 职场文书
公益活动邀请函
2014/02/05 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
英语辞职信范文
2015/02/28 职场文书
物业接待员岗位职责
2015/04/15 职场文书
刮痧观后感
2015/06/05 职场文书
西游记读书笔记
2015/06/25 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python