首页 > 其他分享 >vue contenteditable编辑模式下,样式不生效

vue contenteditable编辑模式下,样式不生效

时间:2023-07-21 14:57:45浏览次数:37  
标签:style vue contenteditable 样式 scoped div

换行后生成div,设置的样式没有生效

 ***原因 style标签上设置了scoped

解决办法

1、去掉style的scoped属性

2、额外写一个style,不加scoped(vue支持多个style)

    <div class="mainText-body" contenteditable="true">
    </div>
<style lang="less" scoped>  // 删除scoped
.mainText-body {
     div {
        font-size: 14px;
        line-height: 1.74;
        padding: 0 0 0 10px;
        text-indent: 2em;
        border: 1px solid transparent;
      }
}
</style>

  

 

*** 相关文档

 

标签:style,vue,contenteditable,样式,scoped,div
From: https://www.cnblogs.com/bigsister/p/17571330.html

相关文章

  • Apache POI读取单元格多文本多样式
    需求:读取excel单元格数据(文本和部分样式),并拼接成html代码。代码实现/***工作簿*/privateWorkbookwb;/***导入的excel类型*/privateStringexcelType;/***2003-2007版本*/privatestaticfinalStringEXCEL_TYPE_2003="xls";/***20......
  • vue3中组合式 API_为 reactive() 标注类型
    reactive() 也会隐式地从它的参数中推导类型<template><h3>{{book.title}}</h3><h3>{{book.author}}</h3></template><scriptsetuplang="ts">import{reactive}from"vue"constbook=reactive({title......
  • Vue3 响应式全局对象json 动态绑定界面三 (Div块样式 字符串叠加)
    效果 man.js  定义响应式全局对象 globalData//全局对象constglobalData=reactive({missedCallData:"",currentUserTel:"",})app.provide('globalData',globalData);在main.js的函数中改变missedCallData 的值从而改变界面列表//改变全局变量gl......
  • Vue3 响应式全局对象json 动态绑定界面四 (Div块样式 Json数据绑定)
    效果man.js  定义响应式全局对象 globalData//全局对象constglobalData=reactive({extTelTalkData:[{userExten:"1000",userName:"刘亦菲",callStatus:"通话"},{......
  • python3 爬取 vue-ssr数据
    使用Python3爬取Vue-SSR数据介绍在Web开发中,Vue-SSR(VueServerSideRendering)是一种将Vue.js应用程序在服务器端进行渲染的技术。它允许搜索引擎爬取到完整的HTML页面,这对于SEO(搜索引擎优化)非常重要。本文将介绍如何使用Python3爬取Vue-SSR数据的方法,并提供相应的代码示例。准......
  • Vue3 响应式全局对象json 动态绑定界面二 (方块矩阵样式)
    效果main.js//全局对象constglobalData=reactive({extTelMonitorData:[{title:'用户组一',list:[{groupID:"0",groupName:"AllUsers",......
  • VUE|组件基础
    1快速体验步聚定义组件导入组件引用组件语法<template>模板</template><scriptsetup>//逻辑</script><style>/*样式*/</style>1)定义组件在components目录下,创建组件文件TheCounter.vue<template><!--组件的模板部分-->计数器:{{c......
  • VUE|组合式API
    VUE|组合式API1setup语法糖在vue项目中,通常使用setup语法简化书写setup的特点在setup语法中定义变量,可以直接在模板中使用在setup语法中定义函数,可以直接在模板中使用导入的组件对象,可以直接在模板中使用常用的组合式APIrefcomputedwatchonMounted2ref......
  • VUE|侦听器
    1侦听器1)什么是侦听器可以通过watch配置项,监听已经存在的属性的改变2)语法watch:{//监听data中的firstName属性firstName(){//执行一系列的操作},},watch:{//监听data中的firstName属性firstName(){//执行一系列的操作},},示例......
  • 第十五篇 - Vue添加图标
    参考链接:https://www.yii666.com/blog/45780.html添加图标的两种方式:1.直接使用element-plus/icons-vue(图标名称网址:https://element-plus.gitee.io/en-US/component/icon.html#icon-collection)2.使用svg-sprite-loader自己下载svg图标(SVG图标下载网址:https://www.iconfinder......