欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue移动端弹框组件

程序员文章站 2022-05-31 12:04:53
...

这里说一下 vue-layer-mobile插件的使用

一、npm 安装

// 当前最新版本 1.2.0 
npm install vue-layer-mobile
// 如新版遇到问题可回退旧版本 
npm install vue-layer-aaa@qq.com1.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 ? '取消' : '选项'+res
        console.log(text)
      })
  },
  //open
  testLayerOpen(){
      this.$layer.open({
          style: 'border:none; background-color:#78BA32; color:#fff;',
          content:'内容'
      })
  },
  //close
  testLayerClose(){
      var _this = this;
      this.$layer.loading('测试关闭方法');
      setTimeout(function(){
          _this.$layer.close();
      },3000);
  }

vue移动端弹框组件

实例演示:

vue移动端弹框组件

操作:

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,
    })
  },
}