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

This article mainly explains "the method of dynamic skin change based on element-ui". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the method of dynamic skin change based on element-ui".

1. After installing element-ui@2.x, install sass-loader first

Npm I sass-loader node-sass-D

2. Install element-theme

Npm I element-theme-D

3. Install theme-chalk

Npm I element-theme-chalk-D# or from githubnpm i https://github.com/ElementUI/theme-chalk-D

4. Initialize the variable file

Et-I / / the default file is element-variables.scss, or you can customize the file name et-- init [file path]

After the installation is successful, an element-variables.scss file is automatically generated in the project, as shown below:

It defines all the color variables.

Of course, this step may also fail, and the command line prompt cannot find the command et. At this time, you need to reinstall sass-loader according to step 1.

5. Modify variables

Edit the element-variables.scss file directly, such as changing the theme color to red

6. Compilation theme

After saving the file, execute the et compilation theme on the command line. If you want to enable watch mode, compile the theme in real time and add the-w parameter; if you specify a custom variable file during initialization, you need to add the-c parameter with your variable file name

At this point, a theme folder is automatically generated in the project, which contains all the compiled font files and style files

7. Introduce a custom theme

By default, the compiled theme directory is placed under. / theme, and you can specify the package directory with the-o parameter. Just like introducing a default theme, you can reference the theme/index.css file directly in your code.

Import'.. / theme/index.css'import ElementUI from 'element-ui'import Vue from' vue'Vue.use (ElementUI)

When you start the project, you will find that the default blue will turn red

The method provided by the official website is only suitable for changing the global theme color at once. If you want to achieve the upper right corner of version 2.0 of the official website, use the ColorPicker color selector to change the skin dynamically. Then it is suggested to refer to vue-element-admin, the author's series of articles entitled "touching your hand, taking you backstage with vue" is very wonderful.

ThemePicker.vue const version = require ('element-ui/package.json'). Version / / element-ui version from node_modulesconst ORIGINAL_THEME =' # 409EFF' / / default colorexport default {data () {return {chalk:', / / content of theme-chalk css theme: ORIGINAL_THEME}}, watch: {theme (val) OldVal) {if (typeof val! = = 'string') return const themeCluster = this.getThemeCluster (val.replace (' #',')) const originalCluster = this.getThemeCluster (oldVal.replace ('#',')) console.log (themeCluster, originalCluster) const getHandler = (variable, id) = > {return () = > {const originalCluster = this.getThemeCluster (ORIGINAL_THEME.replace ('#') '') const newStyle = this.updateStyle (this [variable], originalCluster, themeCluster) let styleTag = document.getElementById (id) if (! styleTag) {styleTag = document.createElement ('style') styleTag.setAttribute (' id') Id) document.head.appendChild (styleTag)} styleTag.innerText = newStyle}} const chalkHandler = getHandler ('chalk',' chalk-style') if (! this.chalk) {const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css` this.getCSSString (url, chalkHandler) 'chalk')} else {chalkHandler () const styles = [] .slice.call (document.querySelectorAll (' style')) .filter (style = > {const text = style.innerText return new RegExp (oldVal) 'i') .test (text) & &! / Chalk Variables/.test (text)}) styles.forEach (style = > {const {innerText} = style if (typeof innerText! = = 'string') return style.innerText = this.updateStyle (innerText, originalCluster, themeCluster)}) this.$message ({message:' skin change successfully', type: 'success' methods: {updateStyle (style, oldCluster) NewCluster) {let newStyle = style oldCluster.forEach ((color, index) = > {newStyle = newStyle.replace (new RegExp (color, 'ig'), newCluster [index]) return newStyle}, getCSSString (url, callback) Variable) {const xhr = new XMLHttpRequest () xhr.onreadystatechange = () > {if (xhr.readyState = 4 & & xhr.status = 200) {this [variable] = xhr.responseText.replace (/ @ font-face {[^}] +} /,') callback () xhr.open ('GET', url) xhr.send () getThemeCluster (theme) {const tintColor = (color) Tint) = > {let red = parseInt (color.slice (0,2), 16) let green = parseInt (color.slice (2,4), 16) let blue = parseInt (color.slice (4,6), 16) if (tint = = 0) {/ / when primary color is in its rgb space return [red, green, blue] .join (' ')} else {red + = Math.round (tint * (255-red)) green + = Math.round (tint * (255-green)) blue + = Math.round (tint * (255-blue)) red = red.toString (16) green = green.toString (16) blue = blue.toString (16) return `# ${red} ${green} ${blue} `const shadeColor = (color Shade) = > {red = Math.round ((1-shade) * red) green = Math.round ((1-shade) * green) blue = Math.round ((1-shade) * blue) red = red.toString (16) green = green.toString (16) blue = blue.toString (16) return `# ${red} ${green}` const Clusters = [theme] for (let I = 0 I

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.