一.导言
Mint UI是一个基于Vue.js的移动组件库
Mint UI不同于Bootstrap。Bootstrap不是一个真正的组件库，而是类似于一个代码片段。
Mint-UI是一个真正的组件库，是由VUE技术封装的一整套组件。它可以与Vue项目无缝集成开发，只适用于Vue项目。
二、使用安装
安装Vue版本时必须指定Mint UI的版本。
# vue 1 . xnpm install mint-ui @ 1-s # vue 2 . 0 NPM install mint-ui-s可以通过两种方式引入:方便引入所有组件，但占用内存较大，可以根据需要引入部分组件，节省占用内存。
//从& # 39；导入所有组件；vue & # 39；从& # 39；进口薄荷mint-ui & # 39；；Vue.use(薄荷)；//引入一些组件从& # 39；导入{component name};mint-ui & # 39；；Vue.component(组件名)；Vue.component(组件名。姓名)；Mint UI有两个组件:CSS组件和JS组件。
1、CSS组件 – 以Button为例
CSS组件中有很多按钮，其中只有一个是CSS组件的特性。只要全局引入Mint UI组件，就可以直接在页面中以标签的形式使用。
main.js
//导入Mint UI的所有组件从& # 34；mint-ui & # 34；//导入Mint UI的样式(node_modules目录之前可以省略)导入& # 34；mint-ui/lib/style . CSS & # 34；//手动将Mint UI安装到Vue中。使用(民推)app。Vue:
按钮组件的默认标签名是< mt-button & gt；
& lt模板& gt& ltdiv & gt& ltmt-button type = & # 34；危险& # 34；size = & # 34大号& # 34；& gt按钮& lt/mt-button & gt；& ltmt-按钮已禁用& gt已禁用& lt/mt-button & gt；& ltmt-button plain & gt；普通& lt/mt-button & gt；& ltmt-button icon = & # 34；back & # 34& gt后退& lt/mt-button & gt；& lt图标上的mt按钮= & # 34；更多& # 34；& gt更大的
& ltmt-button type = & # 34；默认& # 34；& gt默认& lt/mt-button & gt；& ltmt-button type = & # 34；初级& # 34；& gt主要& lt/mt-button & gt；& ltmt-button type = & # 34；危险& # 34；& gt危险& lt/mt-button & gt；使用size属性更改按钮的大小:
& ltmt-button size = & # 34；小& # 34；& gtall & lt/mt-button & gt；& ltmt-button size = & # 34；大号& # 34；& gt大号& lt/mt-button & gt；& ltmt-button size = & # 34；正常& # 34；& gt正常& lt/mt-button & gt；禁用具有禁用属性的按钮:
& ltmt-按钮已禁用& gt已禁用& lt/mt-button & gt；用plain属性设置ghost按钮:
(即颜色与外侧相反，只有边框颜色为空内侧白色)。
& ltmt-button plain & gt；普通& lt/mt-button & gt；使用icon属性设置按钮的图标:
& ltmt-button icon = & # 34；back & # 34& gt后退& lt/mt-button & gt；& ltmt-button icon = & # 34；更多& # 34；& gt更大的
<mt-button> <img src="../assets/100×100.png" height="20" width="20" slot="icon"> 自定义图标</mt-button>用**.native**绑定点击事件：
用**.native**绑定点击事件：& ltmt-button & gt；& ltimg src = & # 34../assets/100 X100 . png & # 34；高度= & # 34；20"宽度= & # 34；20"slot = & # 34图标& # 34；& gt自定义图标
& ltmt-button @ click . native = & # 34；handleClick & # 34& gt点击触发
导入:
从& # 39；导入{组件名称};mint-ui & # 39；；App.vue:
& lt模板& gt& ltdiv & gt& ltmt-button type = & # 34；危险& # 34；size = & # 34大号& # 34；@ click = & # 34秀& # 34；& gt按钮& lt/mt-button & gt；& lt/div & gt；& lt/template & gt；& lt脚本& gt//按需从Mint UI导入Toast组件Import { Toast } & # 39；mint-ui & # 39；；导出默认{ data(){ return{}，方法:{ show(){ Toast(& # 34；提示& # 34；);} } } & lt/script & gt；& ltstyle & gt& lt/style & gt；调用Toast时，可以传入一个对象来配置更多选项:
toast({ message:& # 39；提示& # 39；，//弹出内容位置:& # 39；底部& # 39；，//顶部中间底部持续时间:5000//持续时间(毫秒)如果为-1，则永久显示})；IconClass属性可以设置为在Toast文本上方显示图标:
将图标的类名作为iconClass的值传递给Toast。
toast({ message:& # 39；操作成功& # 39；，icon class:& # 39；图标图标-成功& # 39；//图标的类名})；可以用className属性设置图标样式:
传入一个类的类名，实现该类的样式
app.css:
。mytoast{颜色:浅绿色；}main.js:
//导入自举风格导入& # 34；bootstrap/dist/CSS/bootstrap . CSS & # 34；//导入自定义css样式导入& # 34；。/CSS/app . CSS & # 34；App.vue:
& lt模板& gt& ltdiv & gt& ltmt-button type = & # 34；危险& # 34；@ click = & # 34秀& # 34；& gt按钮& lt/mt-button & gt；& lt/div & gt；& lt/template & gt；& lt脚本& gt//按需从Mint UI导入Toast组件Import { Toast } & # 39；mint-ui & # 39；；导出默认{ data(){ return{}，方法:{ show(){ Toast({ message:& # 39；提示& # 39；，//弹出内容位置:& # 39；中间& # 39；，//弹出窗口位置(上中下)持续时间:5000，//持续时间(毫秒)如果是-1，icon class:& # 39；glyphicon glyphicon-ok & # 39；，//图标的类名:& # 34；mytoast & # 34//自定义样式传入一个类的类名})；} } } & lt/script & gt；& ltstyle & gt& lt/style & gt；还可以设置子类选择器只修改图标的样式:
Toast中有一个I标签来携带图标，修改I标签的样式即可。
。my toast I { color:aqua；}
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。
