vuejs 如何将渲染后的组件插入到任意指定的Dom位置中,而不是引用组件

不同于一般的组件引用方法。
现在有个需求,就是将图片插入到html中,位置是光标的位置,不是一般的直接插入dom的操作方式
这里的图片使用的是vue组件,是将渲染的组件插入到html标签内,

img组件没有固定引用位置,直接生成
如同利用document.createElement(‘img’)生成img标签,然后将img插入到任意位置

而插入图片这个动作是
1、将图片src传递给img组件,
2、img组件根据传入的参数渲染成img标签,
3、在当前光标的位置,将渲染的img标签插入进来,

要求是:img要用组件实现,这样方便管理,每个图片有自己的属性,保持各组件之间的数据同步

比如:
下图为组件和传入的参数,图中的File是直接从input[type=file]获取的
clipboard.png

单个组件渲染后的内容imgDom

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/**********" />

使用execCommand操作插入动作,

document.execCommand('insertHtml', false, imgDom) // 此处的imgDom即为生成的组件

懂的请不吝赐教,多谢!!

回答:

你需要$compiler服务,具体操作也很简单:

const template = `<div>{{name}}</div>`;
const render = Vue.compile(template).render;

然后创建对应的实例,append到对应的dom上面。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注