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

会飞的老虎.

已于 2023-02-14 13:59:44 修改

阅读量417

点赞数 1

文章标签： vue Powered by 金山文档

于 2023-02-14 13:49:00 首次发布

本文链接：https://blog.csdn.net/ggaisd/article/details/129025424

版权

我这个是在消息提示中使用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中定义