這篇文章給大家介紹vue中怎么實(shí)現(xiàn)一個(gè)換膚功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站制作、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)大城免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

1 色值的選取和原則

推薦大家看下螞蟻金服的設(shè)計(jì)指引，里面對(duì)常見(jiàn)的交互和界面設(shè)計(jì)有一套不錯(cuò)的指引和建議，喜歡看書(shū)的也可以看看《寫(xiě)給大家看的設(shè)計(jì)書(shū)》。

對(duì)于界面中的色彩元素，我們一般要保持視覺(jué)的連續(xù)性，即同一套色彩，盡量采取同一個(gè)色環(huán)上的色值

 

同一個(gè)圓環(huán)上的色值作為一套顏色會(huì)顯得更協(xié)調(diào)

所以這里采取ant design 的建議，取某一列色值作為我們的系列主題顏色（具體色值參照它的官網(wǎng)吧~）

 

而在某些特殊場(chǎng)合，需要表現(xiàn)出顏色的差異，如拋硬幣頁(yè)面的兩個(gè)顏色，

 

2 將格式色值轉(zhuǎn)換成十六進(jìn)制顏色值

這里我們通過(guò)設(shè)置主題顏色的透明度來(lái)實(shí)現(xiàn)區(qū)分不同顏色， 然后我們是通過(guò)存儲(chǔ)一個(gè)諸如 #123456 的16進(jìn)制顏色全局變量作為我們主題，這里就需要我們把這樣一個(gè)格式的色值轉(zhuǎn)化成 rgba 表示的顏色值啦，代碼如下，備用

hexToRgba (hex, opacity = 0.3) {
  let color = []
  let rgb = []
  hex = hex.replace(/#/, '')
  for (let i = 0; i < 3; i++) {
   color[i] = '0x' + hex.substr(i * 2, 2)
   rgb.push(parseInt(Number(color[i])))
  }
  return `rgba(${rgb.join(',')},${opacity})`
 }

3 scss 的一些小眾用法

我們最終拿到這么一串我們想要的主題顏色

復(fù)制代碼 代碼如下:

$colors: #f04134, #00a854, #108ee9, #f5317f, #f56a00, #7265e6, #ffbf00, #00a2ae, #2e3238;

一個(gè)很直接的思路，我們需要在各個(gè)view頁(yè)面里面，去定義我們需要設(shè)置主題的元素的顏色，比如文字和icon的color, 以及頭部的background 等。 于是我們?cè)赼pp 里面定義一個(gè)color變量，派發(fā)到各個(gè)view組件里面去，通過(guò)這個(gè)全局的變量來(lái)控制所有路由頁(yè)面的顏色，以實(shí)現(xiàn)不同的主題效果。

派發(fā)的實(shí)現(xiàn)在下一個(gè)部分說(shuō)，這里我們先來(lái)完成我們的第一步，我們可以容易提取出我們的需求：

4 設(shè)置并保存一個(gè)全局顏色

界面的小事：

我在首頁(yè)直接實(shí)現(xiàn)這個(gè)功能，項(xiàng)目中我引入了mint-ui 框架（餓了么團(tuán)隊(duì)的移動(dòng)端框架，稍微遺憾使用感覺(jué)沒(méi)有element.ui 的舒服）， 設(shè)置的交互就用彈層 mt-popup 的形式好了，然后直接點(diǎn)擊色塊便設(shè)置對(duì)應(yīng)顏色值

<!-- 設(shè)置顏色 -->
  <mt-popup v-model="changColor" position="bottom" class="color-panel">
   <div class="color-items">
     <span class="color-item" v-for="(item, $index) in colors" :key="$index" @click="chooseColor(item)">
      <span class="color-cycle" :class="'bg-color' + ($index + 1)"></span>
      </span>
   </div>
  </mt-popup>

接著就是色塊div的呈現(xiàn)，從上面代碼發(fā)現(xiàn)，我會(huì)很容易出現(xiàn)類(lèi)似這樣的css樣式表

.bg-color1 {background: #f04134}
.bg-color2 {background: #f04134}
.bg-color3 {background: #f04134}
.bg-color4 {background: #f04134}
···

寫(xiě)代碼時(shí)候如果我們一般發(fā)現(xiàn)，一件類(lèi)似的東西重復(fù)出現(xiàn)了，就總隱隱覺(jué)得可以開(kāi)始表演了，然后可預(yù)見(jiàn)的是，這樣的情況意味著在項(xiàng)目增長(zhǎng)后，還可能出現(xiàn)許多單一設(shè)置字體顏色或border顏色的樣式表，諸如color1, borderColor1···，這樣每種形式的表現(xiàn)我們都需要根據(jù)我們主題顏色的數(shù)組去逐條書(shū)寫(xiě)，修改成本也會(huì)變高 。于是我的書(shū)寫(xiě)風(fēng)格是這樣的，

// mixin.scss:
$colors: #f04134, #00a854, #108ee9, #f5317f, #f56a00, #7265e6, #ffbf00, #00a2ae, #2e3238;

// setColor.vue:
@import '~@/assets/mixin.scss';
···
@for $i from 1 to 10 {
    .bg-color#{$i} {
     background-color: nth($colors, $i)
    }
   }

scss 除了常用的類(lèi)名嵌套書(shū)寫(xiě)外，還有許多···低調(diào)奢華的語(yǔ)法， 對(duì)于這類(lèi)需要重復(fù)書(shū)寫(xiě)的樣式類(lèi)型，我的約定是添加一個(gè)scss變量在mixin 文件中, 在需要書(shū)寫(xiě)重復(fù)循環(huán)樣式時(shí)候作為變量引入，并在書(shū)寫(xiě)樣式時(shí)候，利用sass的循環(huán)，引用其中對(duì)應(yīng)的值，這樣無(wú)論設(shè)置顏色的樣式怎么拓展和變化，變成顏色背景邊框都好，我都只需要維護(hù)一份mixin的的文件里的色值就行了， 同樣的實(shí)踐也可以應(yīng)用于項(xiàng)目里面字體大小和間距值的統(tǒng)一之類(lèi)，總之我們多嘗試體驗(yàn)下吧

5 邏輯的小事

這個(gè)項(xiàng)目里面localstorage 基本被當(dāng)成數(shù)據(jù)庫(kù)使用了，所以點(diǎn)擊色塊設(shè)置主題時(shí)候，我們假裝發(fā)出請(qǐng)求，在localstorage存儲(chǔ)我們改變的顏色就好了( ./static/api.json 是一個(gè)返回helloword 的json， 為了寫(xiě)實(shí)在這里這么用，$bus 事件巴士下面說(shuō)， 作用就是設(shè)置全局的主題顏色變量，localStorage 模擬我們把設(shè)置存儲(chǔ)到后臺(tái)，每次重新打開(kāi)頁(yè)面就去獲取這些設(shè)置值）， 目前為止，我們的設(shè)置頁(yè)面就大致完成了

// 假裝調(diào)用接口設(shè)置顏色
  chooseColor (color) {
   this.$axios.get('./static/api.json')
    .then((data) => {
     this.$bus.$emit('set-theme', color)
     this.changColor = false
     localStorage.setItem('themeColor', color)
    })
    .catch((data) => {
     console.log(data)
    })
  }

6 事件巴士的運(yùn)用

在上一步最后我們有個(gè)關(guān)鍵的東西沒(méi)完成， this.$bus.$emit('set-theme', color) ，將選取的顏色設(shè)置到全局，我的代碼結(jié)構(gòu)是這樣的

 

子組件

<setColor> 是 home 頁(yè)面 的一個(gè)子組件，而在一開(kāi)始我們已經(jīng)說(shuō)了，我們想在我們?cè)赼pp.vue (home.vue和其他view的父組件） 里面定義一個(gè)color變量，派發(fā)到各個(gè)view組件里面去。 于是這其實(shí)就是個(gè)，從 setColor 觸發(fā) app.vue 的設(shè)置顏色事件， 子組件向父組件通信的問(wèn)題。

我們可以很直接地用綁定事件配合 emit() 的做法，在 app.vue 定義一個(gè) setglobalColor 方法， 并綁定到router-view(包含了home.vue)，接著在home組件繼續(xù)定義一個(gè) setglobalColor 方法， 實(shí)現(xiàn)的功能就是 emit('setglobalColor') 去觸發(fā)app.vue的方法， 并把 home.vue 的這個(gè) setglobalColor 繼續(xù)綁定到組件， 組件里面點(diǎn)選顏色時(shí)候，直接emit這個(gè)方法就行了。

為什么我想用事件巴士.vue 的事件巴士和 vuex， 在一些有追求的程序員手里總是小心翼翼的，我也一樣，因?yàn)樽鳛樯婕叭值臇|西，一般覺(jué)得能不用就不用，代碼能精簡(jiǎn)就精簡(jiǎn)，我們經(jīng)常用一個(gè)詞，不提倡。

可是有朝一日我經(jīng)常在想，代碼的可讀性可維護(hù)性，和性能以及“風(fēng)險(xiǎn)”相對(duì)比，到底哪個(gè)更重要。對(duì)于事件巴士和vuex 這類(lèi)全局性質(zhì)的方案的主要擔(dān)憂大部分在于， 他們是全局的，可能因?yàn)橐粋€(gè)事件名變量名一致就造成沖突，在小型項(xiàng)目還會(huì)造成冗余和額外開(kāi)銷(xiāo)。 但事實(shí)上，事件和變量的命名我們都可以通過(guò)約定去規(guī)范，而在表現(xiàn)上，使用了事件巴士和vuex的項(xiàng)目，在性能上和直接 props 傳遞數(shù)據(jù)，emit 回調(diào)事件的項(xiàng)目相比，其實(shí)并沒(méi)有太大區(qū)別，反而是無(wú)止境的 props 和 emit ，給人一種麻煩難以維護(hù)的感覺(jué)。 像上述的 setglobalColor , 僅僅是跨越了兩層組件， 過(guò)程就顯得繁瑣了。所以我建議在出現(xiàn)兩級(jí)以上組件層次，數(shù)據(jù)流稍微多的項(xiàng)目中都可以這么去做，定義一個(gè)全局的事件巴士

export default (Vue) => {
 let eventHub = new Vue()
 Vue.prototype.$bus = {
  $on (...arg) {
   eventHub.$on(...arg)
  },
  $off (...arg) {
   eventHub.$off(...arg)
  },
  $emit (...arg) {
   eventHub.$emit(...arg)
  }
 }
}

將事件巴士綁定到當(dāng)前vue對(duì)象，使用時(shí)候只需要:

this.$bus.$on('set-theme', (color) => {··· })
this.$bus.$emit('set-theme', '#000000')

在這個(gè)demo中，我在app.vue 綁定了

this.$bus.$on('set-theme', (color) => {
   this.loadingColor = color
   this.userinfo.color = color
  })

而在 setColor.vue 則在點(diǎn)擊顏色塊時(shí)候觸發(fā) this.$bus.$emit('set-theme', color)， 則能實(shí)現(xiàn)我們?cè)O(shè)置全局顏色的效果。這樣的好處在于，對(duì)于跨了多個(gè)層次，或者兄弟組件的通信，我們不再需要太繁瑣的props，比如我在header.vue 也綁定了 this.$bus.$on('set-theme', (color) => { }) ，在 this.$bus.$emit 發(fā)生時(shí)候，header 的背景顏色就能直接改變，而不需要等待app.vue 將 全局的color值props傳遞到header.vue里面（僅做示例，這里 header.vue 只是 app.vue 的下一層級(jí)，通過(guò)props數(shù)據(jù)流會(huì)更清晰）

而對(duì)于其他路由頁(yè)面組件，和 app.vue 都是直接上下級(jí)關(guān)系，我們依然采用props保持一個(gè)清晰的數(shù)據(jù)流向下傳遞， demo 里我是將 color 存在userinfo(以后還有其他數(shù)據(jù)）， userinfo傳到每個(gè)子路由， 最后，每個(gè)頁(yè)面在創(chuàng)建時(shí)候，通過(guò)拿到這個(gè)全局的顏色，再用dom去更改對(duì)應(yīng)的樣式就好啦，例如

mounted () {
  this.$nextTick(() => {
   // 綁定設(shè)置主題的事件，一旦觸發(fā)修改主題，則將當(dāng)前字體顏色改為對(duì)應(yīng)顏色
   this.$el.querySelector('.myTitle').style.color = this.userinfo.color
   this.$el.querySelector('.weui-btn_primary').style.backgroundColor = this.userinfo.color
   this.$el.querySelector('.add_icon').style.color = this.userinfo.color
  })
 }

關(guān)于vue中怎么實(shí)現(xiàn)一個(gè)換膚功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

本文標(biāo)題：vue中怎么實(shí)現(xiàn)一個(gè)換膚功能
分享鏈接：http://www.rwnh.cn/article4/gopdie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、App設(shè)計(jì)、面包屑導(dǎo)航、建站公司、微信小程序、App開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)