vue-layer-cj

vue-layer-cj[^以左盐的基础上修改部分功能]

install

npm install vue-layer-cj

  // "eslint:recommended"

Quick Start

在程序入口添加

import Vue from 'vue';
import layer from 'vue-layer-cj'
import 'vue-layer/lib/vue-layer.css';

Vue.prototype.$layer = layer(Vue);

全局参数重置

import Vue from 'vue';
import layer from 'vue-layer'
Vue.prototype.$layer = layer({
    msgtime: 3,//目前只有一项，即msg方法的默认消失时间，单位：秒
});

layer.iframe({
  content: {
    content: componentName, //传递的组件对象
    parent: this,//当前的vue对象
    data:{}//props
  },
  area:['800px','600px'],
  title: 'title'，
  cancel:()=>{//关闭事件
     alert('关闭iframe');
  }
});
// data参数可认为是componentName的props，同时 该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接用来关闭该层
// options参数直接写到json里即可，比如title

//弹窗最大化
layer.full(layerid);

//弹窗最小化
layer.min(layerid);

//还原弹窗
layer.restore(layerid);

结果即为：

methods:{
   eidt() {
	  this.$layer.iframe({
		content: {
		  content: editForm, //传递的组件对象
		  parent: this,//当前的vue对象
		  data:{
        info:{a:1}
      }//props
		},
		area:['800px','600px'],
		title:"editForm"
	  });
  }
}

iframe组件中

export default {
  data() {
    return {
      form: {
      }
    };
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      }
    },
    layerid: {
      type: String,
      default: ""
    },
    lydata: {
      type: Object,
      default: () => {
        return {};
      }
    },
    lyoption: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
    onSubmit() {
      this.$layer.msg("提交成功", () => {
        this.lydata.info.name = this.form.name;
        this.$layer.close(this.layerid);
      });
    },
    cancel() {
      this.$layer.close(this.layerid);
    }
  },
  mounted() {
    this.form = this.info
  }
};