vue移动端弹框组件的实例

// 当前最新版本 1.2.0 
npm install vue- -mobile
// 如新版遇到问题可回退旧版本 
npm install vue- -mobile@1.0.0

//在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+ " }

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

// toast: 文字和图标:
  test Toast(){  
   this.$ .toast({
    icon: 'icon-check', // 图标clssName 如果为空 toast位置位于下方,否则居中 
    content: '提示文字',
    time: 2000 // 自动消失时间 toast类型默认消失时间为2000毫秒 
   })
  },
  // loading:
  test Loading1(){
   var _this = this;
   this.$ .loading('加载中...');
   setTimeout(function(){
    _this.$ .close();
   },3000);
  },
  // dialog:
  test Dialog(){
   this.$ .dialog({
     : ['这是标题', '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:
  test Footer(){
   this.$ .footer({
    content: '这是内容',
    btn: ['取消', '选项1', '选项2']
   })
   // 如果有btn 
   .then(function (res){
    var text = res==0 ? '取消' : '选项'+res
    console.log(text)
   })
  },
  //open
  test Open(){
   this.$ .open({
    style: 'border:none; background-color:#78BA32; color:#fff;',
    content:'内容'
   })
  },
  //close
  test Close(){
   var _this = this;
   this.$ .loading('测试关闭方法');
   setTimeout(function(){
    _this.$ .close();
   },3000);
  }