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

已于 2023-02-14 13:59:44 修改
阅读量346 收藏
点赞数 1
文章标签： vue Powered by 金山文档
于 2023-02-14 13:49:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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中定义

会飞的老虎.
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue中render函数的使用方法
08-28
本篇文章主要介绍了Vue中render函数的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
4-总结vue
zhouzhou20002000的博客
09-27 329
复习
vue render 函数详解 (配参数详解)
最新发布
weixin_45563734的博客
03-31 1998
vue render 函数详解 (配参数详解)
Vue 中的 Render 全面详解 (渲染函数 & JSX)
热门推荐
小太阳的博客
11-03 2万+
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。简单的说，在 Vue 中我们使用模板 HTML 语法组建页面的，使用 Render 函数我们可以用 Js 语言来构建 DOM。因为 Vue 是虚拟 DOM，所以在拿到 Template 模板时也要转译成 VNode 的函数，而用 Render 函数构建 DOM，Vue 就免去了转译的过程。
render函数使用和详解
菜鸡的博客
09-08 2191
在平时编程时，大部分是通过template来创建html。但是在一些特殊的情况下，使用template方式时，就无法很好的满足需求，在这个时候就需要 通过JavaScript的编程能力来进行操作。此时，就到了render函数展示拳脚去时候了。
Vue render函数
weixin_50926750的博客
04-09 1155
一般Vue组件HTML代码都是写在template模板里 <template> <span>template123</span> </template> <script> export default { }; </script> <style></style> 通过Vue提供的render函数可以不写templa标签也能实现上面的效果 <script> ex
【Vuejs】render函数的使用
小太阳
01-07 3402
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。 render 基本写法 export default { name: 'renderTest', data() {}, render: (createElement) => { ...
Vue2x的自定义指令和render函数使用自定义指令
菜鸡的博客
01-11 1177
常用两种方式进行自定义指令，一种是全局定义，另一种在当前组件中定义// 局部定义data(){return {}},focus: {},},methos:{}// 全局定义// 使 v-focus 在所有组件中都可用},});// 全局和局部的调用方式相同钩子函数钩子函数就是拦截模块渲染流程的“挂钩”，在不同的节点拦截或监听事件，以完成自定义指令的操作。五种钩子拦截的事件分别是初始化、插入节点、渲染完成，监听绑定值的变化和销毁节点。bind。
vue.js 的 自定义指令directives
weixin_47353884的博客
02-11 279
参考官方链接 https://cn.vuejs.org/v2/guide/custom-directive.html 注册一个全局自定义指令 Vue.directive(‘xxx’,{}) Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) 使用时添加v-前缀 可以在模板中任何元素上使用新的 v-focus <input v-fo
Vue3--自定义指令---directive
聪明勇敢有力气的博客
09-18 1364
快速上手vue3，学会如何 自定义指令，如何使用directive，自动获取input输入框焦点
浅谈在vue项目中如何定义全局变量和全局函数
08-29
本篇文章主要介绍了浅谈在vue项目中如何定义全局变量和全局函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue.js 2.0中文离线手册（CHM版）
04-21
Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue ...Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）
10-19
主要给大家介绍了关于vue.js内部自定义指令与全局自定义指令的实现方法，vue.js中实现自定义指令的主要是利用directive，directive这个单词是我们写自定义指令的关键字，需要的朋友们下面跟着小编来一起学习学习吧。
Vue.js 2.0 中文参考手册
08-23
Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 ...
render函数的使用，层层深入
m0_61042126的博客
03-20 722
有一点要注意：正如 v-bind:class 和 v-bind:style 在模板语法中会被特别对待一样，它们在 VNode 数据对象中也有对应的顶层字段。该对象也允许你绑定普通的 HTML 特性，也允许绑定如 innerHTML 这样的 DOM 属性 (这会覆盖 v-html 指令)。// 如果你在渲染函数中给多个元素都应用了相同的 ref 名，// 如果组件是其它组件的子组件，需为插槽指定名称。// 接受一个字符串、对象，或对象组成的数组。// 子级虚拟节点 (VNodes)，由。
Vue---自定义指令directive的全局注册和局部注册（含vue3）
COCOLI_BK的博客
10-14 3677
实现自动获取焦点(autofocus) // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) directives(局部组件自定义事件属性) 注意focus处的字段名要是事件名，而非自定义的名字 directives: { focus: { // 指令的定义 bind..
vue中自定义全局指令报错
ann4752518的博客
06-23 974
vue初学者，可能会遇到的问题。 报错信息为Failed to resolve directive：所定义的指令
vue3 自定义全局指令
qq_42451776的博客
07-01 914
文章目录src下新建 minixs文件夹，minixs下新建 directives.jscomponents下新建common文件夹，commonx下新建Loading组件在app.vue中导入Loading组件在main.js中导入directives.js实际使用 src下新建 minixs文件夹，minixs下新建 directives.js directives.js function loading(app){ app.directive('loading', (el, binding)
vue2.0项目中使用插件机制自定义全局弹框
04-28
在Vue2.0项目中，可以使用插件机制自定义全局弹框，具体步骤如下： 1. 创建一个插件文件，比如 `my-plugin.js`，在其中定义一个 `install` 方法，该方法接收 `Vue` 对象作为参数，用于注册全局组件、指令、过滤器等。同时，可以在该方法中定义全局方法、属性、混入等。 ``` // my-plugin.js import MyDialog from './MyDialog.vue' export default { install(Vue) { Vue.component('my-dialog', MyDialog) Vue.prototype.$myDialog = function(options) { // ... } } } ``` 2. 在 `main.js` 中引入插件，并使用 `Vue.use()` 方法安装插件。 ``` // main.js import Vue from 'vue' import MyPlugin from './my-plugin' Vue.use(MyPlugin) ``` 3. 在需要使用弹框的组件中，可以直接使用 `<my-dialog>` 组件，并在组件中通过 `$myDialog` 方法调用全局方法。 ``` // MyComponent.vue <template> <div> <my-dialog :title="dialogTitle" :content="dialogContent"></my-dialog> <button @click="showDialog">Show dialog</button> </div> </template> <script> export default { data() { return { dialogTitle: '', dialogContent: '' } }, methods: { showDialog() { this.$myDialog({ title: 'My Dialog', content: 'This is my custom dialog!' }) } } } </script> ``` 这样，在整个项目中就可以通过 `<my-dialog>` 组件或 `$myDialog` 方法来显示自定义的全局弹框了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值