搜尋
首頁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
3分钟快速使用ChatGPT教程,用它帮我写简历,太牛了3分钟快速使用ChatGPT教程,用它帮我写简历,太牛了Apr 11, 2023 pm 07:40 PM

已经火了很久了,身边的同事也用它来进行一些调研,资源检索,工作汇报等方面都有很大的的效率提升。很多人问ChatGPT会不会取代程序员?我的回答是:不会!ChatGPT并不是我们的敌人,相反的是,它是我们的好帮手。未来人和人的竞争,可能就会从原先的我懂得更多,我实操经验更丰富,变成了我比你更会用工具,我比你更懂得提问,我比你更会发挥机器人的最大特性,所以,为了不掉队,你还不准备体验下ChatGPT吗?快速体验面试官经常会问你的项目有啥重难点?很多人不会回答,直接看看ChatGPT怎么说,真的太牛了

u盘怎么重装win11系统的步骤教程u盘怎么重装win11系统的步骤教程Jul 08, 2023 pm 09:33 PM

微软近日透露了将推出win11系统,很多用户都在期待新系统呢。网上已经有泄露关于win11的镜像安装系统。大家不知道如何安装的话,可以使用U盘来进行安装。小编现在就给大家带来了win11的U盘安装教程。1、首先准备一个8G以上大小的u盘,将它制作成系统盘。2、接着下载win11系统镜像文件,将它放入u盘中,大家可以直接点击右侧的链接进行下载。3、下载完成后装载该iso文件。4、装载完成之后会进入新的文件夹,在其中找到并运行win11的安装程序。5、在列表中选择“win11”然后点击“下一步”。6

教大家win10电脑怎么屏蔽各种弹窗广告教大家win10电脑怎么屏蔽各种弹窗广告Jul 09, 2023 pm 05:57 PM

电脑上广告弹窗太多了怎么办,有的小伙伴不想重装系统,下面就和大家讲讲关闭win10广告的方法吧,大家可以借鉴一下。1、右键点击电脑桌面下方任务栏,在弹出的菜单中选择并打开“任务管理器”。2、右键点击需要关闭的启动项,选择“禁用”。对应软件的开机启动项就关闭成功了。弹窗拦截设置1、打开毒霸,在首页点击左下方的“弹窗拦截”。2、点击“扫描”,对电脑进行全面扫描找出带有弹窗的软件。3、勾选需要拦截的软件,然后点击“一键拦截”。4、一键拦截后,对应的软件弹窗问题就已被拦截了。综上所述,如果大家电脑win

PHP基础教程:从入门到精通PHP基础教程:从入门到精通Jun 18, 2023 am 09:43 AM

PHP是一种广泛使用的开源服务器端脚本语言,它可以处理Web开发中所有的任务。PHP在网页开发中的应用广泛,尤其是在动态数据处理上表现优异,因此被众多开发者喜爱和使用。在本篇文章中,我们将一步步地讲解PHP基础知识,帮助初学者从入门到精通。一、基本语法PHP是一种解释性语言,其代码类似于HTML、CSS和JavaScript。每个PHP语句都以分号;结束,注

2023年最流行的5个php开发框架视频教程推荐2023年最流行的5个php开发框架视频教程推荐May 08, 2017 pm 04:26 PM

如果想快速进行php web开发,选择一个好用的php开发框架至关重要,一个好的php开发框架可以让开发工作变得更加快捷、安全和有效。那2023年最流行的php开发框架有哪些呢?这些php开发框架排名如何?

老电脑系统xp升级win7教程步骤老电脑系统xp升级win7教程步骤Jul 07, 2023 pm 10:21 PM

xp系统曾经是使用最多的系统,不过随着硬件的不断升级,xp系统已经不能发挥硬件的性能,所以很多朋友就想升级win7系统,下面就和大家分享一下老电脑升级win7系统的方法吧。1、在小白一键重装系统官网中下载小白三步装机版软件并打开,软件会自动帮助我们匹配合适的系统,然后点击立即重装。2、接下来软件就会帮助我们直接下载系统镜像,只需要耐心等候即可。3、下载完成后软件会帮助我们直接进行在线重装Windows系统,请根据提示操作。4、安装完成后会提示我们重启,选择立即重启。5、重启后在PE菜单中选择Xi

教你学会win10如何删除temp文件夹教你学会win10如何删除temp文件夹Jul 08, 2023 pm 04:13 PM

在win10的系统盘中,很多网友会看到一个temp文件夹,里面占用的内存非常大,占用了c盘很多空间。有网友想删除temp文件夹,但是不知道能不能删,win10如何删除temp文件夹。下面小编就教下大家win10删除temp文件夹的方法。首先,Temp是指系统临时文件夹。而很多收藏夹,浏览网页的临时文件都放在这里,这是根据你操作的过程临时保存下来的。如有需要,可以手动删除的。如何删除temp文件夹?具体步骤如下:方法一:1、按下【Win+R】组合键打开运行,在运行框中输入temp,点击确定;2、此

禁用win10更新的步骤教程禁用win10更新的步骤教程Jul 08, 2023 pm 03:21 PM

win10系统会经常推送系统自动更新,有时候正在忙的却突然弹出系统更新,非常不友好。那么如何关闭win10系统自动更新呢?下面,就随小编看看具体操作方法帮你禁用win10更新,大家快来看看是如何操作的吧。1、打开电脑的左下角,找到下方的设置点击进入,操作图片如下2、在windows设置,找到更新和安全点击进入,操作如下。3、点击windows更新,找到高级选项点击进入,操作如下。4、进入windows更新系统的高级选项,关闭更新配置就可以了,如图所示。以上就是禁用win10更新的步骤教程啦,希望

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.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具