Vue Mint UI mt-swipe的使用方式
更新時(shí)間：2022年06月05日 10:16:54 作者：a57521
這篇文章主要介紹了Vue Mint UI mt-swipe的使用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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í)會觸發(fā) change 事件，參數(shù)為切入輪播圖的索引
//speed 動畫持時(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.按需引入：文檔上寫
將 .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組件的返回問題
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ā)起請求時(shí)，顯示indicator is not defined！呵呵……fuck臉。
百度也沒有什么具體的因果。但是還好本人也用了mint-ui的日期模板。所以就瞎模仿……哈哈哈，上代碼。
2、你得把這個(gè)東西綁定給vue，然后才能用?。。。?/p>
Vue.prototype.$Indicator = Indicator
3、然后加上官網(wǎng)的寫法，變通一下。
this.$Indicator.open({
text: 'Loading...',
spinnerType: 'fading-circle'
});以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue數(shù)字金額動態(tài)變化功能實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vue實(shí)現(xiàn)數(shù)字金額動態(tài)變化效果，數(shù)字動態(tài)變化是我們在前端開發(fā)中經(jīng)常需要做的效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目啟動白屏問題的幾種解決辦法,Vue項(xiàng)目打包后出現(xiàn)白屏的可能原因有很多,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue3腳手架簡單靜態(tài)路由,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)評論列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
bootstrap vue.js實(shí)現(xiàn)tab效果
這篇文章主要為大家詳細(xì)介紹了bootstrap vue.js實(shí)現(xiàn)tab效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了從零開始搭建vue移動端項(xiàng)目到上線的步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
Vue3監(jiān)聽屬性與Computed的區(qū)別詳解
在 Vue 3 中,watch 和 computed 都是非常重要的概念,它們都可以用于觀察和響應(yīng)數(shù)據(jù)的變化,但在使用場景和原理上存在明顯的區(qū)別,本文將詳細(xì)解析 Vue 3 中監(jiān)聽屬性 (watch) 和計(jì)算屬性 (computed) 的區(qū)別,需要的朋友可以參考下2024-02-02
解決Vue+Element ui開發(fā)中碰到的IE問題
今天小編就為大家分享一篇解決Vue+Element ui開發(fā)中碰到的IE問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了VueRouter導(dǎo)航守衛(wèi)的詳細(xì)用法以及分類介紹，有興趣的朋友學(xué)習(xí)參考下吧。2017-12-12
這篇文章主要介紹了Vue.js之render函數(shù)使用詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09