vue移动端弹框组件

心已赠人 2023-02-10 12:26 44阅读 0赞

这里说一下 `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 ? '取消' : '选项'+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);
      }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]

#### 实例演示： ####

![在这里插入图片描述][20200520213637102.gif]

##### 操作： #####

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200520213339541.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx,size_16,color_FFFFFF,t_70
[20200520213637102.gif]: https://img-blog.csdnimg.cn/20200520213637102.gif