暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

iView下,利用render函数实现自定义Modal内容

一言良语 2018-09-06
1234

iView下,利用render函数实现自定义Modal内容。

Modal是iView提供的一个对话框组件,在浮层中与用户交互。默认的组件样式不能满足要求的情况下,需要自定义Modal内容。

通过iView官方提供的api文档(https://www.iviewui.com/components/modal#API)和render函数,即可实现。


实现效果如上(已对业务敏感内容打码)。


首先将自定义的内容定义为一个组件,并在需要弹框页面中引用:

import XX from "XX.vue";


然后利用Modal的api创建一个Modal:


this.$Modal.info({

  title: "xx " ,

  width: 1200,

  okText: "xx",

  onOk: () => {

  },

  render: (h) => {

    return h(组件名, {

      props: {

        xx: xx,

      },

      on: {

        save: (xx) => {

        },

      }

    });

  },

});


上面的save方法是在xx.vue中通过$emit触发的事件:

this.$emit("save", 参数);


至此即可实现iView下利用render函数实现自定义Modal内容。


更多:关于vue的render函数

render本意为渲染,即vue的渲染函数


下图为vue的整体流程:

从上图中可以看出,首先模板通过编译生成AST,然后由AST生成Vue的render函数,render函数结合数据生成虚拟DOM树,update后生成新的UI。


模板:Vue的模板基于纯HTML。

AST:AST是Abstract Syntax Tree的简称,Vue使用HTML的Parser将HTML模板解析为AST,并且对AST进行一些优化的标记处理,提取最大的静态树,方便虚拟DOM时直接跳过Diff。

渲染函数:渲染函数是用来生成虚拟DOM的。

虚拟DOM:算法基于Snabbdom的实现,并作了很多的调整和改进。

Watcher:Vue组件有一个对应的watcher,会在组件渲染时收集组件依赖数据,并在依赖更新时,触发组件自动重新渲染。


上图中,render函数的左边为编译期,将Vue的模板转换为渲染函数;render函数的右边为运行期,基于render函数生成虚拟DOM树。


Vue推荐在绝大多数情况下使用template来创建你的HTML。然而在一些场景中,需要使用JavaScript的编程能力和创建HTML,即render函数,它比template更接近编译器。






自由,

是因为真的有方向。



文章转载自一言良语,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论