如何在 iView 中自定义输入元素的 CSS？答案

【问题标题】：How to customize CSS of input element in iView?如何在 iView 中自定义输入元素的 CSS？
【发布时间】：2018-07-01 13:20:30
【问题描述】：

我使用Vue的单文件组件，想试试iView UI框架。考虑有以下代码：

<template>
  <div>
    <i-input class="cred"/>
  </div>
</template>

然后我想更改输入的宽度。例如，检查更改是否生效：

<style scoped>
input {
  width: 10px;
}
</style>

但它没有效果。也试过i-input。

<style scoped>
.cred {
  width: 10px;
}
</style>

按预期工作。
我应该使用哪个 CSS 选择器？

【问题讨论】：

也许是.ivu-input。您可以在developer tools中查看元素的类
是的，它有效，但对我来说仍然有点奇怪，为什么它对纯“输入”选择器没有影响
这是因为选择器Specificity。看起来<i-input> 具有宽度 css-rule，它比您输入的 css-rule 更具体。在开发者工具中，您还可以查看所有 css-rules 以及哪个更具体。

标签： css vue.js iview-ui

【解决方案1】：

Vue/iView 允许您使用内联 style 属性并为其传递一个宽度，或者您可以更改 .ivu-input-wrapper CSS 类并给它您想要的 with。

Vue.use(iview);
new Vue({
  data() {
    return {
      value: ''
    }
  }
}).$mount('#app')

@import url("//unpkg.com/iview/dist/styles/iview.css");
#app {
  padding: 32px;
}

.ivu-input-wrapper {
  width: 400px;
}

<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
  <i-input v-model="value" placeholder="CSS changed..."></i-input>
  <i-input v-model="value" placeholder="Inline style changed..." style="width: 200px"></i-input>
</div>

【讨论】：