[你可能不知道的Vue]-scoped Css

webfansplz發表於2018-06-11
VueCSS

what's scoped CSS ?

當 <style> 標籤有 scoped 屬性時，它的 CSS 只作用於當前元件中的元素。

場景一:

在 scoped CSS 下 改不動樣式!!!

例: (我們嘗試修改 element-ui 的 input 元件的樣式並只在 app.vue 下生效)

ok...拿起鍵盤...

<template>
  <div id="app">
    <el-input  class="text-box" v-model="text"></el-input>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      text: 'hello'
    };
  }
};
</script>

<style lang="less" scoped>
.text-box {
   input {
    width: 166px;
    text-align: center;
  }
}
</style>
複製程式碼

嗖嗖一頓敲...

滿懷期待的看向瀏覽器...

WC.. 沒效果???

原因:

使用 scoped 後，父元件的樣式將不會滲透到子元件中。

解決方法:

使用深度作用選擇器 /deep/

<template>
  <div id="app">
    <el-input v-model="text" class="text-box"></el-input>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      text: 'hello'
    };
  }
};
</script>

<style lang="less" scoped>
.text-box {
  /deep/ input {
    width: 166px;
    text-align: center;
  }
}
</style>
複製程式碼

大功告成

場景二:

動態生成的DOM類名樣式不作用!

解決方法:

<template>
  <div id="app">
    <div v-html="text"></div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      text: '<span class="red">紅色<span>'
    };
  }
};
</script>

<style lang="less" scoped>
/deep/ .red {
  color: #f33;
}
</style>
複製程式碼

參考文件

相關文章