zoukankan      html  css  js  c++  java
  • vue-layer

    1、安装插件

    npm i --save vue-layer

    2、main.js中添加

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

    3、调用

    this.$layer.confirm(`html内容`, {
      btn: ['确定','取消'] ,//按钮
        area:['400px','280px'],
            title:"修改处方",
    },
    this.$layer.confirm('您是如何看待前端开发?', {
      btn: ['重要','奇葩'] //按钮
    }, function(){
      that.$layer.closeAll();
      that.$layer.msg('的确很重要', {icon: 1});
    }, function(){
      that.$layer.closeAll();
      that.$layer.msg('也可以这样',
      {
        time: 1000, //20s后自动关闭
        btn: ['明白了', '知道了'],  //btn不起作用,待修改
      }
      );
    });
    this.$layer.msg(111);
    this.$layer.alter(111)

    Attribut

    {
      type0//0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
      title'信息',
      content'',
      area'auto',
      offset'auto',
      icon-1,
      btn'确定',
      time0,
      shadetrue,//是否显示遮罩
      yes'',
      cancel'',
      tips[0,{}],//支持上右下左四个方向,通过1-4进行方向设定,可以设定tips: [1, '#c00']
      tipsMorefalse,//是否允许多个tips
      shadeClosetrue,//点击遮罩是否关闭
      maxmintrue,//开启最大化最小化
      scrollbartrue//是否允许浏览器出现滚动条:默认是允许
      resizefalse //是否允许拉伸,默认是不允许
    }

    注:vue-layer-npm官网:https://www.npmjs.com/package/vue-layer

           layer官网:https://layer.layui.com/

          在vue-layer中layer.open无法使用

  • 相关阅读:
    main函数的实现解析
    srand()和rand()函数的使用
    shell编程总结
    自动创建字符设备,不需mknod
    linux使用i/o内存访问外设
    Flink之state processor api原理
    Flink之state processor api实践
    软件架构被高估,清晰简单的设计被低估
    技术架构的战略和战术
    Flink task之间的数据交换
  • 原文地址:https://www.cnblogs.com/wangyue6/p/13050847.html
Copyright © 2011-2022 走看看