满口金牙 2022-04-24 11:38 采纳率: 92.3%
浏览 600
已结题

Vue3 element el-input 内联样式 不生效,怎么让它生效

内联样式不生效怎么解决
<el-input class="titleInput2" type="text" placeholder="标题" 
        v-model="documentJson.title.text"
        :style="{
          'font-size': documentJson.title.font_size + 'px',             这行有效
          'font-weight':'bolder',        这行无效,怎么才能让它有效??
          'letter-spacing': '2px',       这行无效 怎么才能让它有效??
        }" 
        />

外联如下
都有效。但是目的是要写内联,内联才支持 documentJson.title.font_size + 'px' 这种变量。 外联 v-bind的 变量不支 带点号的
.titleInput2 :deep(.el-input__inner){
  letter-spacing: v-bind(letterSpacing);   #v-bind中的变量不支持 documentJson.title.letter_spacing 这种,要通过增加变量来转换,所以想知道内联生效的写法
  font-weight: bolder;
  font-family: '宋体'!important; #这个不加!important 不生效
}
  • 写回答

9条回答 默认 最新

  • web修理工 2022-04-24 17:35
    关注

    你好 你这个不是不生效,而是被里面input的样式覆盖了 如果想这么写就要把里面的样式初始化 应该可以解决

    .el-input__wrapper{
    'font-weight':'inherit'; 
    'letter-spacing': 'inherit'; 
      
    }
    
    .el-input__inner{
    'font-weight':'inherit'; 
    'letter-spacing': 'inherit'; 
    }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 会飞的咕咕鱼 2022-04-25 11:39
    关注

    亲测有效 把:style改成:input-style

       <el-input class="titleInput2" type="text" placeholder="标题" 
            v-model="documentJson.title.text"
            :input-style="{
              'font-size': documentJson.title.font_size + 'px',
              'font-weight':'bolder',
              'letter-spacing': '2px',
            }" 
            />
    
    

    img

    评论 编辑记录
    1人已打赏
  • 溪风沐雪 2022-04-24 11:57
    关注

    逗号改成;试试

    评论
  • Captain!!! 2022-04-24 11:59
    关注

    css命令终止以 “;”结尾

    评论
  • 木贝西 2022-04-24 13:14
    关注

    一个是逗号改为分号 而且你直接可以写死 没必要动态style style="
    'font-size': documentJson.title.font_size + 'px'; 这行有效
    'font-weight':'bolder'; 这行无效,怎么才能让它有效??
    'letter-spacing': '2px'; 这行无效 怎么才能让它有效??
    "

    评论
  • caperxi 2022-04-24 14:18
    关注

    element 组件 内联样式没有应用在最底层的input ,所以导致你的样式没有生效,但可以通过以下方式得到你想要的效果:

    
            const input = ref(null);
            const inputTarget = input.value?.ref;
                      inputTarget.style =`font-size: ${20}px;font-weight:bolder;letter-spacing: 12px`;
    

    最终效果:

    img


    如有疑问可私信我

    评论 编辑记录
  • 野人约翰 2022-04-24 15:15
    关注

    这样,去掉 - ,下一单词首字母大写

    :style="{
              display: 'inline-block',
              width: '45%',
              position: 'absolute',
              textAlign: 'center'}"
    
    评论
  • 歇歇 2022-04-24 21:19
    关注
    <el-input
             :input-style="{'font-size': documentJson.title.font_size + 'px';           这行有效
              'font-weight':'bolder';       这行无效,怎么才能让它有效??
              'letter-spacing': '2px';       这行无效 怎么才能让它有效??
    }" 
    
    ></el-input>
    

    文档:

    img

    评论
  • 小草的味道 2022-04-25 09:27
    关注
    评论
查看更多回答(8条)

报告相同问题?

问题事件

  • 系统已结题 5月3日
  • 已采纳回答 4月25日
  • 修改了问题 4月24日
  • 修改了问题 4月24日
  • 展开全部

悬赏问题

  • ¥15 div editable中的光标问题
  • ¥15 mysql报错1415Not allowed to return a result set from a trigger 不知如何修改
  • ¥60 Python输出Excel数据整理,算法较为复杂
  • ¥15 看一下这个,可以商量
  • ¥15 回答几个问题 关于数据库
  • ¥15 51单片机串口通信问题,未完成且要修改
  • ¥15 百鸡问题 c++编程问题(相关搜索:输出数据)
  • ¥30 如何在CMD中设置代理
  • ¥15 我有一块薛定谔的硬盘
  • ¥15 微信小游戏开发2D碰撞检测问题