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

Question

我使用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选择器？

Answer 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>