首页 / 脚本样式 / Vue / vue项目中使用vue-layer弹框插件

安装

npm i --save vue-layer

引用

import layer from 'vue-layer'

Vue.prototype.$layer = layer(Vue)

参数说明

{

  type: 0, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）

  title: '信息',

  content: '',

  area: 'auto',

  offset: 'auto',

  icon: -1,

  btn: '确定',

  time: 0,

  shade: true,//是否显示遮罩

  yes: '',

  cancel: '',

  tips: [0,{}],//支持上右下左四个方向，通过1-4进行方向设定,可以设定tips: [1, '#c00']

  tipsMore: false,//是否允许多个tips

  shadeClose: true,//点击遮罩是否关闭

}

使用

import editFrom from './edir-form.vue';

methods:{

   eidt() {

      this.$layer.iframe({

        content: {

          content: editForm, //传递的组件对象

          parent: this,//当前的vue对象

          data:{

        info:{a:1}

      }//props

        },

        area:['800px','600px'],

        title:"editForm"

      });

  }

}

// data参数可认为是componentName的props，同时 该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接用来关闭该层

// options参数直接写到json里即可，比如title