解决vue-codemirror编辑器需要点击一下才显示数据问题
bug描述:codemirror的数据已经赋值成功了,但是初始状态不渲染数据,需要点击编辑框获取焦点后才展示,如下百度了很多答案都是:设置一个setTimeout延时手动刷新下<codemirrorv-model="value":options="cmOption"ref="myCodemirror"></codemirror>setTimeout(() => {th
·
bug描述:codemirror的数据已经赋值成功了,但是初始状态不渲染数据,需要点击编辑框获取焦点后才展示,如下
百度了很多答案都是:设置一个setTimeout延时手动刷新下
<codemirror
v-model="value"
:options="cmOption"
ref="myCodemirror">
</codemirror>
setTimeout(() => {
this.$refs.myCodemirror.refresh()
}, 1)
这样的确在组件正常的显示的情况下是有效果的,但是我是多步骤多codemirror 编辑器,并且有父组件嵌套子组件嵌套子组件子组件.....这让我如何一个个遍历去手动刷新呢???页面如下:第一个步骤默认是打开的,所以渲染正常,不用点一下才显示,但是后面的步骤默认都是关闭!父组件控制(v-show)也是就是元素是display:none
所以让我一个个手动刷新是不可能了,原来。。。有自动刷新!上代码
<codemirror
v-model="value"
:options="cmOption"
ref="myCodemirror">
</codemirror>
------------------------------------------------
// 引入自动刷新
import 'codemirror/addon/display/autorefresh'
data () {
return {
cmOption: {
autoRefresh: true, // 重点是这句,为true
scrollbarStyle: null,
mode: 'text/x-java',
theme: 'eclipse',
autofocus: false,
readOnly: false,
lineNumbers: true,
smartIndent: true,
autoCloseBrackets: true
}
}
搞定~
更多推荐
所有评论(0)