vue中引用mint-ui库(日常笔记)

5次阅读

共计 754 个字符,预计需要花费 2 分钟才能阅读完成。

mint-ui 官方 api 文档
一、安装 mint-ui
npm install mint-ui –save
二、全局引入 mint-ui
全局引入也就是在全部组件中都可以使用 mint-ui,所以需要在 vue 项目的入口文件 main.js 中引用。
–/main.js–
import Mint from ‘mint-ui’;
Vue.use(Mint);
import ‘mint-ui/lib/style.css’;
三、在组件中引用 toast
this.$toast({message: ‘ 暂无我的收藏 ’})

四、在组件中引用 messagebox
—–html—–
<button @click=”cancel(item.favorite_id)” class=”cancel”> 取消收藏 </button>

——js——
methods: {
cancel(id) {
this.$messagebox.confirm(‘ 是否取消收藏 ’).then(action => {
if (action === ‘confirm’) {
cancelCollect(this.info.token, id).then(res => {
getCollect(this.info.token).then(res => {
this.collectobj.collectdata = res.data.data.data
})
})
}
}).catch(err => {
if (err === ‘cancel’) {}
})
}
}
效果如下:

MessageBox 提供了 alert、confirm 和 prompt 三个方法,它们都返回一个 Promise Promise 是 ES6 的内容。它是一个构造函数,自己身上有 all、reject、resolve 这几个眼熟的方法,原型上有 then、catch 等同样很眼熟的方法。

正文完
 0