Vue?Mint?UI?mt-swipe如何使用

這篇文章主要講解了“Vue Mint UI mt-swipe如何使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Vue Mint UI mt-swipe如何使用”吧！

Mint UI mt-swipe的使用

Mint UI的安裝使用

1、安裝 npm install mint-ui -S

-S表示 --save

2、在main.js中引入mint Ui的css 和 插件 （全局引用）

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

3、在main.js中引入mint Ui的css 和 插件 （按需引用，有的可能要按需引css）

import { Swipe, SwipeItem } from ‘mint-ui';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

輪播圖mt-swipe組件使用

<mt-swipe :auto="4000" @change="IMGChange" > 
//auto輪播時(shí)間  //輪播圖切換時(shí)會(huì)觸發(fā) change 事件，參數(shù)為切入輪播圖的索引  
//speed 動(dòng)畫(huà)持時(shí)（毫秒）  
  <mt-swipe-item v-for="item in bannerArr" :key="item.id">
     <img :src="item.img_url" alt="">
  </mt-swipe-item>
</mt-swipe>
IMGChange(index){  //參數(shù)為當(dāng)前輪播圖的索引 
	console.log(index)
}

使用mint-ui遇到的坑

1.按需引入：文檔上寫(xiě)

將 .babelrc 修改為：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

實(shí)際操作項(xiàng)目報(bào)錯(cuò)，應(yīng)該改為：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", 
      "transform-runtime",
      ["component", [
        {
          "libraryName": "mint-ui",
          "style": true
        }
    ]]
  ]
}

引入組件報(bào)錯(cuò)

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或?qū)憺?
 * Vue.use(Button)
 * Vue.use(Cell)
 */

發(fā)現(xiàn)使用Vue.use(Button) 報(bào)錯(cuò)

解決方案：還是使用Vue.component(Button)

2.Header組件的返回問(wèn)題

1.將router-link to置空；2.用@click正常處理 

3.cell的click不起作用

解決方法：

v-on:click.native="showSelect()"

原因：

4.mintUI中indicator報(bào)錯(cuò)

1、在main.js中引入mint-ui框架。我用的是按需引用。

import { Indicator } from 'mint-ui'

好了，已經(jīng)引入了。但是當(dāng)我發(fā)起請(qǐng)求時(shí)，顯示indicator is not defined！呵呵……fuck臉。

百度也沒(méi)有什么具體的因果。但是還好本人也用了mint-ui的日期模板。所以就瞎模仿……哈哈哈，上代碼。

2、你得把這個(gè)東西綁定給vue，然后才能用?。。?！

Vue.prototype.$Indicator = Indicator

3、然后加上官網(wǎng)的寫(xiě)法，變通一下。

this.$Indicator.open({
	text: 'Loading...',
	spinnerType: 'fading-circle'
});

感謝各位的閱讀，以上就是“Vue Mint UI mt-swipe如何使用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Vue Mint UI mt-swipe如何使用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！