解决tinymce在vue项目中keep-alive的情况下会消失的问题
需求是有多个tab切换,每个tab中都有一个编辑器,且需要用keep-alive动态组件如下:<keep-alive><component v-bind:is="viewName" ref="tabclick" ></component></keep-alive>//viewName对应几个不同的tab组件名字如果正常写会发...
·
需求是有多个tab切换,每个tab中都有一个编辑器,且需要用keep-alive动态组件如下:
<keep-alive>
<component v-bind:is="viewName" ref="tabclick" ></component>
</keep-alive>
//viewName对应几个不同的tab组件名字
如果正常写会发现在切换tab的时候keep-alive起作用了,但是编辑器却消失了。
所以,给编辑器加上一个动态的key值,:key="tinymceFlag"
<Tinymce ref="editor" :key="tinymceFlag" class="editor-content" v-model="addForm.content" />
然后初始化时tinymceFlag为1
然后在有编辑器的那个组件里边的activated中动态改变tinymceFlag。
activated(){
this.tinymceFlag++
}
这样就可以了。如图:
更多推荐
已为社区贡献4条内容
所有评论(0)