css样式使用vue定义值

在vue中想要修改组件的值本来就很麻烦了

在你的dom节点使用 /deep/ 或者 >>>来穿透样式：

.inputSearch >>> input {
  border-radius: 3px 0px 0px 3px;
}

.inputSearch /deep/ input {
  border-radius: 3px 0px 0px 3px;
}

要想在这种情况下修改穿透样式里面的值就很麻烦，至少常规办法不行

--就算你通过ref获取了dom节点也不行

下面就介绍一种方法 使用vue定义值改变样式

  1.在:style中定义

 <t-input
        :style="{'--fonWidth':fonWidth+'px'}"
        v-model="value"
        class="inputSearch"
        clearable
        placeholder="搜索内容"
      >

2.date中声明fonWidth

data () {
    return {
      value: '',
      fonWidth: 20,
      fonVisible: false,
      fonText: '标准地址'
    }
  },

3.在穿透中使用

.inputSearch >>> input {
  border-radius: 3px 0px 0px 3px;
  padding-left: var(--fonWidth) !important;
}