最近做一個(gè)移動(dòng)端項(xiàng)目,彈框?qū)懙谋容^麻煩,查找資料,找到了這個(gè)組件,但是說(shuō)明文檔比較少,自己研究了下,把我碰到的錯(cuò),和詳細(xì)用法分享給大家!有疑問(wèn)可以打開(kāi)組件看一看,這個(gè)組件是仿layer-mobile的,很多用法都一樣,可以看看哦!
為仙桃等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù),及仙桃網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站制作、仙桃網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求,就會(huì)得到認(rèn)可,從而選擇與我們長(zhǎng)期合作。這樣,我們也可以走得更遠(yuǎn)!
一、npm 安裝
// 當(dāng)前最新版本 1.2.0 npm install vue-layer-mobile // 如新版遇到問(wèn)題可回退舊版本 npm install vue-layer-mobile@1.0.0
二、調(diào)整配置:因?yàn)檫@個(gè)組件中有woff,ttf,eto,svg類(lèi)型文件,所以要配置一些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)
四、具體使用介紹:——這個(gè)組件一共有6個(gè)方法,并不是完全仿layer-mobile,一些簡(jiǎn)單的彈框還是很好用的。
// toast: 文字和圖標(biāo): testLayerToast(){ this.$layer.toast({ icon: 'icon-check', // 圖標(biāo)clssName 如果為空 toast位置位于下方,否則居中 content: '提示文字', time: 2000 // 自動(dòng)消失時(shí)間 toast類(lèi)型默認(rèn)消失時(shí)間為2000毫秒 }) }, // loading: testLayerLoading1(){ var _this = this; this.$layer.loading('加載中...'); setTimeout(function(){ _this.$layer.close(); },3000); }, // dialog: testLayerDialog(){ this.$layer.dialog({ title: ['這是標(biāo)題', 'background:red;'], // 第一個(gè)是標(biāo)題內(nèi)容 第二個(gè)是標(biāo)題欄的style(可以為空) content: '這是內(nèi)容', contentClass: 'className', btn: ['取消','確定'], // time: 2000 }) // 如果有btn .then(function (res){ // res為0時(shí)是用戶(hù)點(diǎn)擊了左邊 為1時(shí)用戶(hù)點(diǎn)擊了右邊 let position = res === 0 ? 'left' : 'right' console.log(position) }) }, // footer: testLayerFooter(){ this.$layer.footer({ content: '這是內(nèi)容', btn: ['取消', '選項(xiàng)1', '選項(xiàng)2'] }) // 如果有btn .then(function (res){ var text = res==0 ? '取消' : '選項(xiàng)'+res console.log(text) }) }, //open testLayerOpen(){ this.$layer.open({ style: 'border:none; background-color:#78BA32; color:#fff;', content:'內(nèi)容' }) }, //close testLayerClose(){ var _this = this; this.$layer.loading('測(cè)試關(guān)閉方法'); setTimeout(function(){ _this.$layer.close(); },3000); }
幾種效果展示:
以上這篇vue移動(dòng)端彈框組件的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持創(chuàng)新互聯(lián)。
分享文章:vue移動(dòng)端彈框組件的實(shí)例
本文路徑:http://bm7419.com/article38/pcgdsp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、網(wǎng)站制作、微信小程序、搜索引擎優(yōu)化、網(wǎng)站策劃、面包屑導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)