vue中引用mint-ui庫（平常筆記）

mint-ui官方api文檔

1、安裝mint-ui

npm install mint-ui --save

2、全局引入mint-ui

全局引入也就是在所有組件中均可以使用mint-ui，因此須要在vue項目的入口文件main.js中引用。

--/main.js--

import Mint from 'mint-ui';
Vue.use(Mint);
import 'mint-ui/lib/style.css';

3、在組件中引用toast

this.$toast({message: '暫無個人收藏'})

4、在組件中引用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等一樣很眼熟的方法。