快捷導(dǎo)航

vue移動(dòng)端彈框組件的實(shí)例

更新時(shí)間：2018年09月25日 10:13:33 作者：嘵番茄

今天小編就為大家分享一篇vue移動(dòng)端彈框組件的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

最近做一個(gè)移動(dòng)端項(xiàng)目，彈框?qū)懙谋容^麻煩，查找資料，找到了這個(gè)組件，但是說明文檔比較少，自己研究了下，把我碰到的錯(cuò)，和詳細(xì)用法分享給大家！有疑問可以打開組件看一看，這個(gè)組件是仿layer-mobile的，很多用法都一樣，可以看看哦！

一、npm 安裝

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

二、調(diào)整配置：因?yàn)檫@個(gè)組件中有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)

四、具體使用介紹：——這個(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類型默認(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í)是用戶點(diǎn)擊了左邊 為1時(shí)用戶點(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);
  }

幾種效果展示：