您好,欢迎来到易妖游戏网。
搜索
您的当前位置:首页vue2.0中 在render函数中使用在main.js中定义的全局directives自定义指令

vue2.0中 在render函数中使用在main.js中定义的全局directives自定义指令

来源:易妖游戏网

我这个是在消息提示中使用render函数,使用自定义指令主要是为了监听input中的内容变化,话不多说直接上代码!

that.$Modal.confirm({
        render: (h) => {
          return h("div", [
            h(
              "div",
              {
                style:
                  "margin-bottom:20px;vertical-align: middle;font-size: 12px;color: #17233d;font-weight: 700;",
              },
              "添加文案"
            ),
            h("Input", {
              props: {
                value: that.addReplyValue,
                autofocus: true,
                placeholder: "请输入评论内容,最多填写100字。",
                type: "textarea",
                rows: 6,
                maxlength: 100,
              },
              on: {
                input: (val) => {
                  that.addReplyValue = val;
                },
              },
              directives: [
                {
                  name: "showWordLimit",
                  value: { changeValue: that.addReplyValue, maxlength: 100 },
                },
              ],
            }),
          ]);
        },
        onOk: function () {
          console.log('点击确定按钮')
        },
      });

注意:directives的value属性中 变量需要是在data中定义的,使用局部变量的话directives中的update无法监听到数据变化!

showWordLimit需要在main.js中定义

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- vipyiyao.com 版权所有 湘ICP备2023022495号-8

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务