有没有办法从输入类型中删除箭头，但使其范围仅限于特定组件？

Question

我想从输入字段中删除箭头，但我想将其范围限制为仅此组件的文本字段。

<v-text-field
  class="inputPrice"
  type="number"
  v-model="$data._value"
  @change="sendValue"
  > 
</v-text-field>

<style scoped>

.inputPrice input[type='number'] {
    -moz-appearance:textfield;
}
.inputPrice input::-webkit-outer-spin-button,
.inputPrice input::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;  
}

</style>

我的文本字段

我尝试从类似的问题中使用此解决方案：https://github.com/vuejs/vue-loader/issues/559#issuecomment-271491472

以及这个： https: //github.com/vuetifyjs/vuetify/issues/6157#issue-399264114

但它们似乎并没有真正发挥作用。

Answer 1

Vuetify v-text-field 有一个名为“hide-spin-buttons”的选项，允许您在输入字段为数字时隐藏向上和向下箭头。

点击此处查看 Vuetify 选项的说明

<v-text-field 
    hide-details 
    outlined 
    dense 
    v-model="propVModel"
    type="number"
    hide-spin-buttons
    :prepend-inner-icon="showDollarSign ?  'mdi-currency-usd' : '' "
    :append-icon="showPercentSign && 'mdi-percent'"
    >
</v-text-field>

Answer 2

scoped样式被设计为仅影响组件本身，而不影响子组件。

文档

使用scoped，父组件的样式不会泄漏到子组件中。但是，子组件的根节点将同时受到父级作用域 CSS 和子级作用域 CSS 的影响。这是设计使然，以便父级可以设置子根元素的样式以实现布局目的。

这里的问题是<input>不确定根元素v-text-field

您可能可以尝试使用链接问题中提到的深层选择器，但是如果需要特定类的应用程序来触发行为，是否有任何理由使用作用域样式？

工作代码笔（没有scopedstypes）

以下是如何使用作用域样式来做到这一点：

<style scoped>
.inputPrice >>> input[type="number"] {
  -moz-appearance: textfield;
}
.inputPrice >>> input::-webkit-outer-spin-button,
.inputPrice >>> input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
</style>