Shulou(Shulou.com)06/03 Report--

This article mainly introduces "the example of Vue combined with ElementUI to achieve skin change function". In daily operation, I believe that many people have doubts about the example of realizing skin change function by combining Vue with ElementUI. The editor has consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "Vue combined with ElementUI to achieve skin change function". Next, please follow the editor to study!

Catalogue

Write at the front

Option 1. Use global style coverage (front-end universal)

Plan 2. Customize your own Element-ui color matching.

Plan 3. Quickly change the color of the website.

Scheme 4. Change the main tone in real time.

Write at the front

Skin change is not very common, but it is also in demand, so here are several front-end skin change solutions for your reference.

This article will introduce several skin replacement schemes based on Vue and Element-UI, which are easy to understand and easy to use. I hope you like it.

Option 1. Use global style coverage (front-end universal)

This should be the most common, the easiest to think of, and the easiest to implement.

We write a separate stylesheet (css file Deep Blue .css), start with a specific name (such as. Blue-theme), and then in this css file, complete our second set of skin style code, and then when we click on skinning, we add blue-theme this class to the body tag, then our skinning effect comes out.

When we click Deep Blue here, we add class science-blue to body, and when we click Bronze Green, we remove science-blue, because our default is Bronze Green.

Plan 2. Customize your own Element-ui color matching.

The default Element color scheme is:

Element-UI also provides a custom color matching tool and configuration page, through this tool or this page, we can customize the above five primary colors and auxiliary colors.

After matching, if it is a tool, it will be generated, if it is a web page, it will be downloaded. Get a style file, which is the theme style file we configured.

Keep the relationship between the css file and the fonts directory unchanged (ps: this is important) and put it in our project. (you can change the css file to your favorite name, for example, I changed it to: theme-summer.css)

Then in the main.js of our project, comment out the original css file of Element-UI and introduce the css file we just put into the project.

At this time, the color of Element-UI in the project has become the color matching that we have just customized. Here is a set of colors I customized. what do you think? )

However, have you noticed that this is just changing the default color matching of the Element-UI in our project to what we want; but what we need to do is to change the skin function and hope that the color can be switched.

So, we still use the above method to add a unique naming prefix to each css style in the generated css file, and then when we change the skin, we add the class to the body. In this way, we can also achieve a very rich skin change function (because we can match many sets of beautiful colors ourselves).

Now a question that needs to be solved is: how to add the namespace to this css file?

Let's take a look at the css file generated by this tool or exported from the configuration page, confusing the compressed code, and manually wrapping a class for each style as a namespace is not realistic, so we need to use a gulp plug-in gulp-css-wrap here, which can help us achieve this result.

First of all:

Npm i gulp gulp-clean-css gulp-css-wrap-D

Then, write gulpfile.js

/ gulpfile.jsvar path = require ('path') var gulp = require (' gulp') var cleanCSS = require ('gulp-clean-css') var cssWrap = require (' gulp-css-wrap') var customThemeName = '.theme-summer'gulp.task (' default', function () {return gulp.src (path.resolve ('. / index.css')) .pipe (cssWrap ({selector: customThemeName})) .pipe (cleanCSS ()) .pipe (gulp.dest ('dist')}))

Then run gulp

This gives you a custom theme with the. theme-summer namespace

After the addition, we can achieve the skin switching function by following the method of switching the class of the body element described earlier.

Plan 3. Quickly change the color of the website.

According to the official website of Element, Element is written in SCSS. If your project also uses SCSS, you can directly change the Element style variables in the project. Create a new element-variables.scss style file. (warm reminder: please make sure you have installed node-sass and sass-loader)

The element-variables.scss file will not be posted here. You can see here: element-variables.scss, which defines a lot of color variables.

This method is easy to use, you just need to introduce it

Modify the color variable inside to take effect.

This method is fast and takes effect by modifying several color variables. (then you can deploy ~)

Here is a question, how to modify the variables in this element-variables.scss file in js? If it can be achieved, then you can achieve real-time dynamic color change.

Additional note: there is a plan for js to modify the scss variable, but it is impossible to change color dynamically in our project, why? Because all the css precompiled languages (sass,less,stylus) in our project will eventually be compiled into css;, that is, there are only compiled css files in the packaged project. Then your method of js changing scss variables will not work in the packaged project.

Scheme 4. Change the main tone in real time.

We have already introduced several ways to change the skin, but all of them are within the range of skin provided by our limit; but we have a need to pop up a color picker, and then what color we choose, the main tone of the page will be changed to what color immediately.

ElementUI official website has the implementation of dynamic skin change, it allows users to customize color values, and the display effect is more elegant. Let's take a look at how he implements it (the official implementation explanation is quoted here)

Get the style file of the current version of Element-UI (get online XHR)

According to the theme color selected by the user, generate a series of corresponding colors (for example, choose green, generate different degrees of light green, dark green … )

Color replacement (replace the color in the style file with the color you just generated)

Add the style tag directly to the page and fill in the generated style

Let's take a look at the technical implementation details, and it is strongly recommended that you open the code and take a look at it: https://github.com/Neveryu/vue-cms/blob/master/src/views/theme/index.vue#L167-L297)

1. First of all, we need to get the version number of element-ui obtained through package.json, and request the corresponding style according to the version number.

/ / if it is the first time to change color without chalk, you need to obtain the css file remotely and assign it to the subsequent color change operation of chalk//. There is no need to remotely obtain if (! this.chalk) {const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css` await this.getCSSString (url, 'chalk')}.

The getCSSString method is a common XHR that is used to get remote css resource files.

2. Generate the corresponding color according to the color selected by the user

/ * pass in a HEX of a color to get an array of dark and light colors of this color * We know that our default dominant blue is blue. In practice, we also need the corresponding light blue and dark blue * @ param {[string]]} theme [color] * @ return {[array]} [corresponding dark color array] * / getThemeCluster (theme) {/ / look at the code I won't write here / /.}

3. Color replacement

/ * Update style-replace the previous * / updateStyle (style, oldCluster, newCluster) {let newStyle = style oldCluster.forEach ((color, index) = > {newStyle = newStyle.replace (new RegExp (color, 'ig'), newCluster [index])}) return newStyle} with a new color variable

4. Add the style tag on the page and fill in the generated style

Let styleTag = document.getElementById (id) if (! styleTag) {styleTag = document.createElement ('style') styleTag.setAttribute (' id', id) document.head.appendChild (styleTag)} styleTag.innerText = newStyle

The first time you change the color, you need to create a style tag, add it to the body, then change the color, and you don't need it.

OK, let's see the effect:

Insert a picture description here

At this point, the study of "the example of Vue combined with ElementUI to achieve skin replacement function" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.