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 相关文章推荐
jquery 锁定弹出层实现代码
Feb 23 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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
MySQL相关说明
2007/01/15 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
jquery获取节点名称
2015/04/26 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
js实现楼层导航功能
2017/02/23 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
详解Python3.1版本带来的核心变化
2015/04/07 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
python实现字符串和字典的转换
2018/09/29 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
大专自我鉴定范文
2013/10/01 职场文书
工作求职信
2014/07/04 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server
详解PyTorch模型保存与加载
2022/04/28 Python
Mysql 一主多从的部署
2022/05/20 MySQL