记录一次问题,点击详情时设置Editor不可用,点击修改时也不可用了
Editor组件的readOnly
属性只在初始化时设置,没有监听属性变化。当isDetail
状态改变时,Editor组件不会自动更新其只读状态。
解决方案
-
修改Editor组件:
- 添加了对
readOnly
属性变化的监听 - 当
readOnly
属性改变时,调用this.Quill.enable(!val)
来启用或禁用编辑器
- 添加了对
-
增强CSS样式:
- 添加了针对非详情模式下Editor组件的样式
- 确保Editor组件在非只读状态下正常工作
-
添加调试信息:
- 添加了Editor变化事件监听
- 可以在控制台查看Editor组件的状态变化
修改后的效果
现在Editor组件应该能正常工作了:
-
详情模式(
isDetail = true
):- Editor为只读状态(
readOnly = true
) - 工具栏隐藏
- 文字颜色为
#464748
- 背景色为
#f5f7fa
- Editor为只读状态(
-
修改模式(
isDetail = false
):- Editor为可编辑状态(
readOnly = false
) - 工具栏显示
- 文字颜色为
#606266
- 背景色为
#fff
- Editor为可编辑状态(