有個(gè)需求是這樣的：在富文本里如何套用帶有變量的模板字符串上祈。
富文本里的內(nèi)容都是帶標(biāo)簽的模板字符串涌庭，但是如果要在富文本里套用帶有變量的模板字符串即碗，比如這種：
`<div>這是圖文文章的{{title}}</div><div>這是圖文文章的內(nèi)容{{content}}</div>`
那么我們就可以用Vue構(gòu)造器extends來解決了
data(){
return{
content: '我是內(nèi)容男应，很長很長的哦！',
title: '我是標(biāo)題哦嗤朴！'
}
}
//下面的methods里面的方法，可自行設(shè)置到需要用到的地方
_setTemplate() {
let ele = document.createElement("div");
ele.setAttribute("id", "pic-point");
let picTemplate = `<div>這是圖文文章的{{title}}</div><div>這是圖文文章的內(nèi)容{{content}}</div>`
let Profile = Vue.extend({
template: this.picTemplate,
data: () => {
return {
content: this.content,
title: this.title
};
},
});
const lincontent = new Profile().$mount(ele);
const htmlTemplate = this.nodeToString(lincontent.$el);
// htmlTemplate就是你想要的東西了虫溜，就可以直接賦值到富文本當(dāng)模板使用了雹姊，這個(gè)一般是管理端的需求
},
// 將dom對(duì)象轉(zhuǎn)換成str對(duì)象
nodeToString(node) {
//createElement()返回一個(gè)Element對(duì)象
var tmpNode = document.createElement("div");
//appendChild() 參數(shù)Node對(duì)象 返回Node對(duì)象 Element方法
//cloneNode() 參數(shù)布爾類型 返回Node對(duì)象 Element方法
tmpNode.appendChild(node.cloneNode(true));
var str = tmpNode.innerHTML;
tmpNode = node = null; // prevent memory leaks in IE
return str;
},
