如何使用手写笔自定义Vuejs 2.0的样式

Question

我正在使用v-text-field，而无需vuetify.min.css，只需使用手写笔。

这是我的代码。

<template>
  <v-text-field type="text" name="password"></v-text-field>
</template>
<style lang="stylus" scoped="scoped">
 .input-group_details {
  XXX
 }
</style>

我试图隐藏一些divs。

但是我什么都没有改变。

Answer 1

使用范围的样式不可能(这是范围的重点(

您可以做的是向prop传递，这表明DIV是隐藏的，或者是全球处理。

传递道具：

const textField = {
  template: `
    <div>
      <div>Always shown</div>
      <div v-if="shown">
        Conditionally shown
      </div>
    </div>
  `,
  props: { shown: Boolean }
};
Vue.component('v-text-field', textField);
new Vue({}).$mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <b>shown = true:</b>
  <v-text-field :shown="true"></v-text-field>
  <br>
  <b>shown = false:</b>
  <v-text-field :shown="false"></v-text-field>
</div>

Answer 2

按https://vue-loader.vuejs.org/en/features/scoped-coped-css.html#notes您需要将>>>操作员用于CSS

所以这应该有效：

<style scoped>
>>> .input-group_details {
 //your css
}
</style>

您可以使用lang="stylus"，并且可以使用，但是您的IDE可能会丢弃一些语法错误。

我不确定这是什么正确的手写笔法。

---

请注意，它是在v12.2.0