contenteditable实现需要一个像文本域一样的可编辑框

我这里是因为左上和右下有一个固定的模板,所有用textarea有点不方便,查了下还有一个方法可以解决就是在需要编辑的元素上加上

:contenteditable="true"

完整代码如下,因为这个弹窗是两用的,所以用messageType做了一下判断

复制代码
<el-dialog v-model="showMessageDialog" width="500px">
      <div
        class="message-dialog"
        :style="{ border: messageType ? '1px solid #409EFF' : 'none' }"
      >
        <div>XXX先生/女士:</div>
        <p :contenteditable="messageType === 1 ?true :false" style="outline: none;">{{ dataForm.reason }}</p>
        <span class="provenance">xxx</span>
      </div>
      <template #footer>
        <div v-if="messageType">
          <el-button @click="showMessageDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmMessage">确认发送</el-button>
        </div>
        <el-button v-else @click="showMessageDialog = false">关闭</el-button>
      </template>
    </el-dialog>
相关推荐
土豆12501 分钟前
Tailwind CSS 精通指南:提升效率、可维护性与最佳实践
前端·css
花生了什么树lll1 分钟前
面试中被问到过的前端八股(四)
前端·面试
zqlcoding2 分钟前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
爱吃的强哥13 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
谈不譚网安22 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板28 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩28 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真34 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端