前端文档在线编辑

需求

展示一个模板文档，管理员可以对模板文档进行一定的修改，模板文档关键处需要有input，方便客户填写，支持打印功能

需求1:模板文档在线修改

通过设置修改内容区域的 contentEditable ，即可控制是否允许编辑

contentEditableTrue() {
  this.msgSuccess('当前为修改模式，允许修改')
  this.$refs['contentEdit'].contentEditable = 'true'
},
contentEditableFalse() {
  this.msgSuccess('当前为查看模式，禁用修改')
  this.$refs['contentEdit'].contentEditable = 'false'
},

需求2:模板文档关键处需要有input

使用 v-if 或者 v-show

<el-input v-if="editInput" v-model="itemTxt"></el-input>
<span v-else>{{ itemTxt }}</span>

// 不允许修改
this.editInput = false
// 允许修改
this.editInput = true

需求3:打印功能

print.js

this.$print(this.$refs['contentEdit'], {})