mint-ui —— checklist的使用

Import

按需引入：

import { Checklist } from 'mint-ui';

Vue.component(Checklist.name, Checklist);

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

importMint from'mint-ui'

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

Vue.use(Mint);

API

示例

示例一：

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：

示例二：

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：

点击“选项B”

所选择内容是

再点击“选项C”

所选择内容是

demo链接：http://download.csdn.net/detail/michael_ouyang/9915065

使用前输入命令:

npm install

npm run dev

mint-ui —— checklist的使用相关推荐

Mint UI 使用指南
上来直接在webpack里将Mint UI引入项目,发现各种问题.饿了么组件库文档太坑了,好多地方写错,有些该说明的地方没说,比如例子里单文件.vue组件里用的类post-css处理器,我一直使用SA ...
在基于nuxt的移动端页面中引用mint UI的popup组件之父子组件传值
最近在做移动端的wap页面,考虑到要做SEO,所以选定了nuxt+vue+mint ui. 有一个需求是这样的,点击头部菜单栏,出现一个气泡,点击返回首页. 由于一些页面没有统一引用mint的mt-h ...
【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
看了下饿了么团队开发的PC端vue ui框架Element ui之后,顺便看了看同团队开发的移动端的vue ui框架mint ui,那么在vue项目中应该如何使用mint ui呢?以下做简单的记录. ...
基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现
一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...
上拉加载_如何用Vue + Mint UI实现上拉加载更多
引言: 上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的,以下是 mint-ui 中上拉加载更多的总结. 一.在项目中使用 mint-ui 需要先安装查看官网 (1)安装:npm ...
vue 自定义键盘组件_vue 自定义数字键盘+mint UI MessageBox的应用
功能: 实现自定义数字键盘,输入数字超过两位时不可输入点击清空清空输入框内的值提交时弹出提示框,并显示所输入的数字用--mint UI实现效果图: 9. //将变量numberval赋给valu ...
VUE—下载安装并使用mint ui（图文详情）
VUE-下载安装并使用mint ui 第一步:输入指令 mac在前面加上sudo cnpm i mint-ui -S 第二步:在main.js输入 import MintUI from 'mint-u ...
【Vue学习总结】22.使用Mint UI的infinite-scroll实现上拉分页加载
接上篇<21.Vue-UI框架之Mint UI的使用> 上一篇我们讲解了Vue的UI框架Mint UI的使用,本篇我们来通过Mint UI提供的infinite-scroll组件结合api ...
Mint UI—loadmore—Pull down下拉刷新将下拉刷新的箭头标志更换成其他图片（图文）
Mint UI-loadmore-Pull down下拉刷新将下拉刷新的箭头标志更换成其他图片 <div slot="top" class="mint-loadmo ...
Mint UI组件教程
官网:https://mint-ui.github.io/#!/zh-cn Github: https://github.com/ElemeFE/mint-ui/ 前面两节说到,从搭建环境,引入Min ...

mint-ui —— checklist的使用

Import

API

示例

示例一：

示例二：

mint-ui —— checklist的使用相关推荐

最新文章

热门文章