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
        
   }
}

搞定~

Logo

前往低代码交流专区

更多推荐