在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue中，頁面的公共樣式。

vue中，頁面的公共樣式。

給pages下面所有的.vue設(shè)置公共樣式。

我今天在做測試的時候：

在home.vue:

<template>
  <div class="home">
    <i-header></i-header>
    <i-footer></i-footer>
  </div>
</template>

<script>

  import Header from '../../components/header/header.vue'
  import Footer from '../../components/footer/footer.vue'

  export default{
    data(){
      return {msg: 'hello vue'}
    },
    components: {
      'i-header': Header,
      'i-footer': Footer
    }
  }
</script>

<style scoped>
  .home {
    min-width: 1221px;
  }
</style>

我這里要寫一個頁面的樣式：min-width: 1221px;，其他頁面也需要這個樣式，所以它應(yīng)該是公共樣式。那么怎么才能在其他頁面方便地做呢？
每個page都寫就比較冗余。

回答
編輯回答
孤巷

1是新增一個公共樣式文件，需要用到的地方就引入；2是如果你使用css預(yù)處理器的話，可以使用mixin功能,非常棒，而且靈活，這也是用我個人挺喜歡的方式。

2018年6月29日 19:56
編輯回答
溫衫

兩種方式咯：

  1. 第一種方式就是樓上說的，去掉style中的scoped，這樣其他組件也能共用此組件的樣式了，
<style>
  .home {
    min-width: 1221px;
  }
</style>

2.第二種方式就是在公共模塊中新增一個公用樣式文件，把所有公用樣式都放到里面，比如新建base.css文件，然后全局引入base.css

base.css
  .home {
    min-width: 1221px;
  }

一般來說會選擇第二種，單個組件不建議把scoped放開，不然往后維護會不小心刪了這個組件那就出問題了，再有就是放開會這個組件的樣式會覆蓋其他組件的樣式，不是很好。

2017年7月5日 04:13
編輯回答
執(zhí)念

后來我發(fā)現(xiàn)可以在頁面@import公共樣式：

<style scoped>

  @import '../../styles/common/common.css';

</style>
2018年2月9日 05:03
編輯回答
失魂人

放到外層組件里，style不要加上scoped

2018年5月2日 21:47