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 相关文章推荐
Array.prototype 的泛型应用分析
Apr 30 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
js+audio实现音乐播放器
Sep 13 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面向对象分析设计的经验原则
2008/09/20 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
python学习数据结构实例代码
2015/05/11 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
列车长先进事迹材料
2014/01/25 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
服务理念口号
2014/06/11 职场文书
主题党日活动总结
2014/07/08 职场文书
基层党员对照检查材料
2014/09/24 职场文书
融资合作协议书范本
2014/10/17 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
妇产科护理心得体会
2016/01/22 职场文书
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android