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)畫持時(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ā)起請(qǐng)求時(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)文章
簡(jiǎn)單談?wù)刅ue3中的ref和reactive
vue3中實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法是就是使用ref和reactive,所謂響應(yīng)式就是界面和數(shù)據(jù)同步,能實(shí)現(xiàn)實(shí)時(shí)更新,下面這篇文章主要給大家介紹了關(guān)于Vue3中ref和reactive的相關(guān)資料,需要的朋友可以參考下2023-04-04
vue 地區(qū)選擇器v-distpicker的常用功能
這篇文章主要介紹了vue 地區(qū)選擇器v-distpicker的常用功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
vue elementUi+sortable.js實(shí)現(xiàn)嵌套表格拖拽問題
這篇文章主要介紹了vue elementUi+sortable.js實(shí)現(xiàn)嵌套表格拖拽問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
文章主要介紹在 Vue3 中實(shí)現(xiàn)虛擬列表的方法,包括原理和代碼實(shí)現(xiàn),原理是只渲染可視區(qū)域內(nèi)的列表項(xiàng),通過設(shè)置子數(shù)據(jù)項(xiàng)高度、計(jì)算可視區(qū)域、渲染可視區(qū)域、滾動(dòng)監(jiān)聽、設(shè)置緩沖列表項(xiàng)等提升性能,感興趣的小伙伴跟著小編一起來看看吧2025-01-01
本篇文章主要介紹了詳解Vue.js分發(fā)之作用域槽，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
vuex 中輔助函數(shù)mapGetters的基本用法詳解
mapGetters輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性，在組件或界面中不使用mapGetter調(diào)用映射vuex中的getter，在組件或界面中使用mapGetter調(diào)用映射vuex中的getter，具體內(nèi)容跟隨小編一起通過本文學(xué)習(xí)吧2021-07-07
Vue+Node實(shí)現(xiàn)商品列表的分頁(yè)、排序、篩選，添加購(gòu)物車功能詳解
這篇文章主要介紹了Vue+Node實(shí)現(xiàn)商品列表的分頁(yè)、排序、篩選，添加購(gòu)物車功能,結(jié)合實(shí)例形式分析了vue.js前臺(tái)商品分頁(yè)、排序、篩選等功能及后臺(tái)node.js處理技巧,需要的朋友可以參考下2019-12-12
本篇文章主要介紹了基于vue.js 2.x的虛擬滾動(dòng)條的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Vue路由傳參的兩種方式query和params,介紹了query和params區(qū)別與總結(jié)，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
Vue3.x如何操作v-html指令中HTML的DOM和樣式
在 Vue3.x 中,v-html 指令用于將 HTML 字符串渲染為真實(shí)的 DOM 元素,下面我們來看看具體如何操作v-html指令中HTML的DOM和樣式吧2025-04-04