Shulou(Shulou.com)05/31 Report--

The knowledge of this article "how to achieve a skin change function in vue" is not understood by most people, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve a skin change function in vue" article.

1 selection and principle of color value

For the color elements in the interface, we generally want to maintain visual continuity, that is, the same set of colors, and try to adopt the color values on the same color ring.

The color values on the same ring will be more coordinated as a set of colors.

So take ant design's suggestion here, take a certain column of color values as our series of theme colors (specific color values refer to its official website ~)

On some special occasions, it is necessary to show differences in colors, such as the two colors on the coin flip page.

2 convert format color values to hexadecimal color values

Here we distinguish different colors by setting the transparency of the theme color, and then we store a hexadecimal color global variable such as # 123456 as our theme. Here we need to convert the color value of such a format into the color value represented by rgba. The code is as follows.

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 的一些小众用法 我们最终拿到这么一串我们想要的主题颜色 复制代码 代码如下: $colors: #f04134, #00a854, #108ee9, #f5317f, #f56a00, #7265e6, #ffbf00, #00a2ae, #2e3238; 一个很直接的思路，我们需要在各个view页面里面，去定义我们需要设置主题的元素的颜色，比如文字和icon的color, 以及头部的background 等。 于是我们在app 里面定义一个color变量，派发到各个view组件里面去，通过这个全局的变量来控制所有路由页面的颜色，以实现不同的主题效果。 派发的实现在下一个部分说，这里我们先来完成我们的第一步，我们可以容易提取出我们的需求： 4 设置并保存一个全局颜色 界面的小事： 我在首页直接实现这个功能，项目中我引入了mint-ui 框架（饿了么团队的移动端框架，稍微遗憾使用感觉没有element.ui 的舒服）， 设置的交互就用弹层 mt-popup 的形式好了，然后直接点击色块便设置对应颜色值 接着就是色块div的呈现，从上面代码发现，我会很容易出现类似这样的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 '~@/assets/mixin.scss';···@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('./static/api.json') .then((data) =>

{this.$bus.$emit ('set-theme', color) this.changColor = false localStorage.setItem (' themeColor', color)}) .catch (data) = > {console.log (data)})}

6 use of incident buses

At the end of the last step, we have a key thing left unfinished, this.$bus.$emit ('set-theme', color), set the selected color to the global, my code structure is like this.

Sub-component

Is a child component of the home page, and as we said at the beginning, we want to define a color variable in app.vue (the parent component of home.vue and other view) and dispatch it to each view component. So this is actually a problem that the child component communicates with the parent component when the color setting event of app.vue is triggered from setColor.

We can directly use the binding event with emit () to define a setglobalColor method in app.vue and bind it to router-view (including home.vue), and then continue to define a setglobalColor method in the home component. The function is that emit ('setglobalColor') triggers the app.vue method, and the setglobalColor of home.vue continues to bind to the component. When the color is selected in the component, Direct emit this method is fine.

Why do I want to use event bus. Vue event bus and vuex are always cautious in the hands of some aspiring programmers, and I am the same, because as things related to the overall situation, they generally feel that they do not need them, and the code can be simplified as soon as they can be streamlined. We often use one word and do not advocate it.

But one day I often wonder which is more important than performance and "risk" between the readability and maintainability of the code. Most of the main concerns about global solutions such as event buses and vuex are that they are global and may cause conflicts because an event name variable name is consistent, as well as redundancy and additional overhead in small projects. But in fact, we can standardize the naming of events and variables through conventions. In terms of performance, projects that use event buses and vuex have little difference in performance compared with those that transmit data directly by props and callback events in emit. On the contrary, there are endless props and emit, giving people the impression that it is troublesome and difficult to maintain. Like the above setglobalColor, just across two layers of components, the process is tedious. So I suggest that you can do this in projects with more than two levels of components and slightly more data flow, and define a global event bus.

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

To bind the event bus to the current vue object, you only need to:

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

In this demo, I bound it in app.vue

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

In setColor.vue, when you click on the color block, you can trigger this.$bus.$emit ('set-theme', color), which can achieve the effect that we set the global color. The advantage of this is that for communications across multiple levels or sibling components, we no longer need too cumbersome props. For example, I also bind this.$bus.$on in header.vue ('set-theme', (color) = > {}). When this.$bus.$emit occurs, the background color of header can be changed directly without waiting for app.vue to pass the global color value props to header.vue (just for example) Here header.vue is only the next level of app.vue, and the data flow will be clearer through props)

For other routing page components, there is a direct parent-subordinate relationship with app.vue. We still use props to keep a clear data flow down. In demo, I store the color in userinfo (there will be other data later), and userinfo is passed to each child route. Finally, when each page is created, by getting the global color, and then using dom to change the corresponding style, for example

Mounted () {this.$nextTick (()) = > {/ / bind the event of setting the theme, once it is triggered to modify the theme Then change the current font color to the corresponding color 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})} these are the contents of this article on "how to achieve a skin-changing function in vue". I believe we all have some understanding. I hope the content shared by the editor will be helpful to all of you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.