npm install vue-layer

在程序入口添加

   import Vue from 'vue';
import layer from 'vue-layer'
Vue.prototype.$layer = layer(Vue);

调用

this.$layer.alert("!");

Attribut

        {
  type: 0,
  title: '信息',
  content: '',
  area: 'auto',
  offset: 'auto',
  icon: -1,
  btn: '确定',
  time: 0,
  shade: true,
  yes: '',
  cancel: '',
  tips: [0,{}],
  tipsMore: false,//
  shadeClose: false,
}
layer.iframe({
  content: {
    content: componentName, //传递的组件对象
    parent: this,//当前的vue对象
    data:[]//props
  },
  area:['800px','600px']
});
layer.open(options);
layer.close(id);
layer.closeAll(type);

其实使用iframe层,除了操作方便外,主要的目的是隔离代码, 降低代码复杂度。而在vue中,组件就是功能块的基本单位了,所以vue-layer中并不存在iframe的DOM元素,这里用的都是组件。 这里的content有三个参数:1.content此参数为组件对象, 比如

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

 

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

 

Logo

前往低代码交流专区

更多推荐