搜尋
首頁web前端js教程vue換膚功能實例教程

vue換膚功能實例教程

Jan 26, 2018 am 10:43 AM
功能實例教學

最近在做的一個幾月vue的移動端小demo,其中有一塊是實現各個頁面的統一換膚功能的。本文主要介紹了基於vue的換膚功能的範例程式碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧。

一先看一下實現效果吧

 

#設定主題顏色

講道理這麼一個功能,我覺得這麼幾點可以說下,逐步實現:

1. 色值的選取

2. scss 的一些小眾用法(多變數CSS值的批次設定)

3. 全域事件巴士的應用

1 色值的選取與原則

推薦大家看下螞蟻金服的設計指引,裡面對常見的互動和介面設計有一套不錯的指引和建議,喜歡看書的也可以看看《寫給大家的設計書》。

對於介面中的色彩元素,我們一般要保持視覺的連續性,也就是同一套色彩,盡量採取同一個色環上的色值

 

同一個圓環上的色值作為一組顏色會顯得更協調

所以這裡採取ant design 的建議,取某一列色值作為我們的系列主題顏色(具體色值參照它的官網吧~)

 

而在某些特殊場合,需要表現出顏色的差異,如拋硬幣頁面的兩個顏色,

 

2 將格式色值轉換成十六進位顏色值

這裡我們透過設定主題顏色的透明度來實現區分不同顏色, 然後我們是透過儲存一個諸如#123456 的16進位顏色全域變數作為我們主題,這裡就需要我們把這樣一個格式的色值轉換成rgba 表示的顏色值啦,程式碼如下,備用


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

3 scss 的一些小眾用法

我們最後拿到這麼一串我們想要的主題顏色

複製程式碼 程式碼如下:


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

##一個很直接的思路,我們需要在各個view頁裡面,去定義我們需要設定主題的元素的顏色,例如文字和icon的color, 以及頭部的background 等。 於是我們在app 裡面定義一個color變量,派發到各個view組件裡面去,透過這個全域的變數來控制所有路由頁面的顏色,以實現不同的主題效果。

派發的實作在下一個部分說,這裡我們先來完成我們的第一步,我們可以輕鬆提取出我們的需求:

4 設定並儲存一個全域顏色

介面的小事:

我在首頁直接實現這個功能,專案中我引入了mint-ui 框架(餓了麼團隊的行動裝置框架,稍微遺憾使用感覺沒有element.ui 的舒服), 設定的互動就用彈層mt-popup 的形式好了,然後直接點擊色塊便設定對應顏色值


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

接著就是色塊p的呈現,從上面程式碼發現,我會很容易出現類似這樣的css樣式表


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

寫程式碼時候如果我們一般發現,一件類似的東西重複出現了,就總隱隱覺得可以開始表演了,然後可預見的是,這樣的情況意味著在項目增長後,還可能出現許多單一設定字體顏色或border顏色的樣式表,諸如color1, borderColor1 ···,這樣每種形式的表現我們都需要根據我們主題顏色的陣列去逐條書寫,修改成本也會變高。於是我的書寫風格是這樣的,


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

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

scss 除了常用的類別名稱嵌套書寫外,還有許多···低調奢華的語法, 對於這類需要重複書寫的樣式類型,我的約定是添加一個scss變數在mixin 文件中, 在需要書寫重複循環樣式時候作為變數引入,並在書寫樣式時候,利用sass的循環,引用其中對應的值,這樣無論設定顏色的樣式怎麼拓展和變化,變成顏色背景邊框都好,我都只需要維護一份mixin的的文件裡的色值就行了, 同樣的實踐也可以應用於項目裡面字體大小和間距值的統一之類,總之我們多嘗試體驗下吧

5 邏輯的小事#

这个项目里面localstorage 基本被当成数据库使用了,所以点击色块设置主题时候,我们假装发出请求,在localstorage存储我们改变的颜色就好了( ./static/api.json 是一个返回helloword 的json, 为了写实在这里这么用,$bus 事件巴士下面说, 作用就是设置全局的主题颜色变量,localStorage 模拟我们把设置存储到后台,每次重新打开页面就去获取这些设置值), 目前为止,我们的设置页面就大致完成了


// 假装调用接口设置颜色
  chooseColor (color) {
   this.$axios.get(&#39;./static/api.json&#39;)
    .then((data) => {
     this.$bus.$emit(&#39;set-theme&#39;, color)
     this.changColor = false
     localStorage.setItem(&#39;themeColor&#39;, color)
    })
    .catch((data) => {
     console.log(data)
    })
  }

6 事件巴士的运用

在上一步最后我们有个关键的东西没完成, this.$bus.$emit('set-theme', color) ,将选取的颜色设置到全局,我的代码结构是这样的

 

子组件

是 home 页面 的一个子组件,而在一开始我们已经说了,我们想在我们在app.vue (home.vue和其他view的父组件) 里面定义一个color变量,派发到各个view组件里面去。 于是这其实就是个,从 setColor 触发 app.vue 的设置颜色事件, 子组件向父组件通信的问题。

我们可以很直接地用绑定事件配合 emit() 的做法,在 app.vue 定义一个 setglobalColor 方法, 并绑定到router-view(包含了home.vue),接着在home组件继续定义一个 setglobalColor 方法, 实现的功能就是 emit('setglobalColor') 去触发app.vue的方法, 并把 home.vue 的这个 setglobalColor 继续绑定到组件, 组件里面点选颜色时候,直接emit这个方法就行了。

为什么我想用事件巴士.vue 的事件巴士和 vuex, 在一些有追求的程序员手里总是小心翼翼的,我也一样,因为作为涉及全局的东西,一般觉得能不用就不用,代码能精简就精简,我们经常用一个词,不提倡。

可是有朝一日我经常在想,代码的可读性可维护性,和性能以及“风险”相对比,到底哪个更重要。对于事件巴士和vuex 这类全局性质的方案的主要担忧大部分在于, 他们是全局的,可能因为一个事件名变量名一致就造成冲突,在小型项目还会造成冗余和额外开销。 但事实上,事件和变量的命名我们都可以通过约定去规范,而在表现上,使用了事件巴士和vuex的项目,在性能上和直接 props 传递数据,emit 回调事件的项目相比,其实并没有太大区别,反而是无止境的 props 和 emit ,给人一种麻烦难以维护的感觉。 像上述的 setglobalColor , 仅仅是跨越了两层组件, 过程就显得繁琐了。所以我建议在出现两级以上组件层次,数据流稍微多的项目中都可以这么去做,定义一个全局的事件巴士


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)
  }
 }
}

将事件巴士绑定到当前vue对象,使用时候只需要:


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

在这个demo中,我在app.vue 绑定了


this.$bus.$on(&#39;set-theme&#39;, (color) => {
   this.loadingColor = color
   this.userinfo.color = color
  })

而在 setColor.vue 则在点击颜色块时候触发 this.$bus.$emit('set-theme', color), 则能实现我们设置全局颜色的效果。这样的好处在于,对于跨了多个层次,或者兄弟组件的通信,我们不再需要太繁琐的props,比如我在header.vue 也绑定了 this.$bus.$on('set-theme', (color) => { }) ,在 this.$bus.$emit 发生时候,header 的背景颜色就能直接改变,而不需要等待app.vue 将 全局的color值props传递到header.vue里面(仅做示例,这里 header.vue 只是 app.vue 的下一层级,通过props数据流会更清晰)

而对于其他路由页面组件,和 app.vue 都是直接上下级关系,我们依然采用props保持一个清晰的数据流向下传递, demo 里我是将 color 存在userinfo(以后还有其他数据), userinfo传到每个子路由, 最后,每个页面在创建时候,通过拿到这个全局的颜色,再用dom去更改对应的样式就好啦,例如


mounted () {
  this.$nextTick(() => {
   // 绑定设置主题的事件,一旦触发修改主题,则将当前字体颜色改为对应颜色
   this.$el.querySelector(&#39;.myTitle&#39;).style.color = this.userinfo.color
   this.$el.querySelector(&#39;.weui-btn_primary&#39;).style.backgroundColor = this.userinfo.color
   this.$el.querySelector(&#39;.add_icon&#39;).style.color = this.userinfo.color
  })
 }

详细的实现请参照项目代码,这里我只挑一些比较清奇的点出来讨论,项目和代码的一些规范和习惯还是挺重要的,希望有好的实践能互相借鉴进步~

相关推荐:

jQuery结合jQuery.cookie.js插件实现换肤功能示例

Javascript结合css实现网页换肤功能_javascript技巧

JQuery 网站换肤功能实现代码_jquery

以上是vue換膚功能實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Python vs. JavaScript:學習曲線和易用性Python vs. JavaScript:學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

Python vs. JavaScript:社區,圖書館和資源Python vs. JavaScript:社區,圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好,適合初學者,但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大,JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富,但Python適合從官方文檔開始,JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript:所有工作方式從C/C到JavaScript:所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

JavaScript引擎:比較實施JavaScript引擎:比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

超越瀏覽器:現實世界中的JavaScript超越瀏覽器:現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。

使用Next.js(後端集成)構建多租戶SaaS應用程序使用Next.js(後端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js(前端集成)構建多租戶SaaS應用程序如何使用Next.js(前端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript:探索網絡語言的多功能性JavaScript:探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具