Newlyweds Proposing Marriage

    vue-layer-cj

    0.0.9 • Public • Published

    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
      }
    };

    Install

    npm i vue-layer-cj

    DownloadsWeekly Downloads

    0

    Version

    0.0.9

    License

    MIT

    Unpacked Size

    1.68 MB

    Total Files

    20

    Last publish

    Collaborators

    • mjbmht