這里說一下 vue-layer-mobile插件的使用

一、npm 安裝

// 當前最新版本 1.2.0 npm install vue-layer-mobile // 如新版遇到問題可回退舊版本 npm install vue-layer-mobile@1.0.0

---

二、調整配置：因為這個組件中有woff,ttf,eto,svg類型文件，所以要配置一些loader

//在webpack.config.js中配置如下，首先安裝url-loader和file-loader： { test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /\.ttf$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" }, { test: /\.eot$/, loader: "file-loader" }, { test: /\.svg$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }

---

三、引入和使用

import 'vue-layer-mobile/need/layer.css' import layer from 'vue-layer-mobile' Vue.use(layer)

四、具體使用介紹：

——這個組件一共有6個方法，并不是完全仿layer-mobile,一些簡單的彈框還是很好用的。

　// toast: 文字和圖標:testLayerToast(){ this.$layer.toast({icon: 'icon-check', // 圖標clssName 如果為空 toast位置位于下方,否則居中 content: '提示文字',time: 2000 // 自動消失時間 toast類型默認消失時間為2000毫秒 })},// loading:testLayerLoading1(){var _this = this;this.$layer.loading('加載中...');setTimeout(function(){_this.$layer.close();},3000);},// dialog:testLayerDialog(){this.$layer.dialog({title: ['這是標題', 'background:red;'], // 第一個是標題內容 第二個是標題欄的style(可以為空) content: '這是內容',contentClass: 'className',btn: ['取消','確定'],// time: 2000})// 如果有btn .then(function (res){// res為0時是用戶點擊了左邊 為1時用戶點擊了右邊 let position = res === 0 ? 'left' : 'right'console.log(position)})},// footer:testLayerFooter(){this.$layer.footer({content: '這是內容',btn: ['取消', '選項1', '選項2']})// 如果有btn .then(function (res){var text = res==0 ? '取消' : '選項'+resconsole.log(text)})},//opentestLayerOpen(){this.$layer.open({style: 'border:none; background-color:#78BA32; color:#fff;',content:'內容'})},//closetestLayerClose(){var _this = this;this.$layer.loading('測試關閉方法');setTimeout(function(){_this.$layer.close();},3000);}

實例演示：

操作：

main.js

import 'vue-layer-mobile/need/layer.css' import layer from 'vue-layer-mobile' Vue.use(layer)

xxx.vue (組件內)

methods: {showTip() {this.$layer.toast({icon: 'icon-check',content: '這是最后一頁啦，可以往前翻看哦~',time: 2000,})}, }

總結

以上是生活随笔為你收集整理的vue移动端弹框组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。