0

我用 Vue.js 编写了一个网站并处理用户界面，我想使用 Vue Formulate。总而言之，它可以工作，但我很难设置输入错误的样式。所以，我试着做一个非常简单的例子来改变错误列表中的背景颜色，但它不起作用。

这是我的简单组件：

<template>
  <div>
    <p>Test for VueFormulate</p>
    <FormulateInput
      type="text"
      validation="required"
    />
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
  li.formulate-input-error {
    background-color:green;
  }
</style>

加载站点并且存在错误列表元素后，我可以在 Google Chrome 开发工具中更改背景颜色。但不是宠爱。

我希望有人可以解释我必须做些什么才能使它工作。

4

1 回答 1

1

您的样式块是有范围的，这意味着您不能对不在您直接范围内的元素进行样式设置<template>（这就是范围的重点）。你有三个选择：

  1. 删除块的scoped一部分<style>。我真的不推荐这个。
  2. 将您的常规表单样式移动到全局 css 文件。如果您使用超过 1 个输入，我会推荐这个。
  3. 使用像::v-deep. _ 这对于逐个覆盖非常有用，并允许您选择比当前“范围”更深的元素。这是一个例子：
<style scoped>
.formulate-input::v-deep li.formulate-input-error {
  background-color: green;
}
</style>
于 2020-11-27T04:15:14.397 回答