Vue + Element UI 前端篇(六):更换皮肤主题

这篇具有很好参考价值的文章主要介绍了Vue + Element UI 前端篇(六):更换皮肤主题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

自定义主题

命令行主题工具

1.安装主题工具

首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动。

yarn add element-theme --dev
2.安装chalk主题

安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码,这里从 npm 安装。

yarn add element-theme-chalk -D
3.初始化变量文件 

主题生成工具安装成功后,如果全局安装可以在命令行里通过 et 调用工具,如果安装在当前目录下,需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss,当然你可以传参数指定文件输出目录。

node_modules/.bin/et -i

执行命令

Vue + Element UI 前端篇(六):更换皮肤主题,前端,vue.js,ui

命令执行成功之后,会在根目录生成 scss文件 element-variables.scss 。

 

Vue + Element UI 前端篇(六):更换皮肤主题,前端,vue.js,ui

4、修改主题色 

在 element-variables.scss 文件里修改 $–color-primary:#4b5f6e,即你想要的主题颜色

Vue + Element UI 前端篇(六):更换皮肤主题,前端,vue.js,ui

5、编译主题 

执行主题编译命令生成主题,根目录会生成一个theme的文件夹 。

node_modules/.bin/et

Vue + Element UI 前端篇(六):更换皮肤主题,前端,vue.js,ui

6、引入自定义主题 

把生成的主题按颜色改名放置 src/theme 目录下。

在 main.js 中 import ‘所在路径/index.css’。

Vue + Element UI 前端篇(六):更换皮肤主题,前端,vue.js,ui

7、效果展示

重新加载后,我们看到按钮颜色已经不是默认的蓝色了。

 

Vue + Element UI 前端篇(六):更换皮肤主题,前端,vue.js,ui

动态换肤器方式

1. 在下图位置添加封装的换肤组件。

Vue + Element UI 前端篇(六):更换皮肤主题,前端,vue.js,ui

index.vue

Vue + Element UI 前端篇(六):更换皮肤主题,前端,vue.js,ui

<template>
  <el-color-picker
    class="theme-picker"
    popper-class="theme-picker-dropdown"
    v-model="theme"></el-color-picker>
</template>

<script>

const version = require('element-ui/package.json').version // element-ui version from node_modules
const ORIGINAL_THEME = '#409EFF' // default color

export 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: '换肤成功',
        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) => {
        let red = parseInt(color.slice(0, 2), 16)
        let green = parseInt(color.slice(2, 4), 16)
        let blue = parseInt(color.slice(4, 6), 16)

        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}${blue}`
      }

      const clusters = [theme]
      for (let i = 0; i <= 9; i++) {
        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
      }
      clusters.push(shadeColor(theme, 0.1))
      return clusters
    }
  }
}
</script>

<style>
.theme-picker .el-color-picker__trigger {
  vertical-align: middle;
}

.theme-picker-dropdown .el-color-dropdown__link-btn {
  display: none;
}
</style>
 2.直接在组件中引用

 在 Home.vue 中引入

Vue + Element UI 前端篇(六):更换皮肤主题,前端,vue.js,ui

在语言切换左边添加换肤组件

Vue + Element UI 前端篇(六):更换皮肤主题,前端,vue.js,ui

 3.换肤测试

点击组件,选择一个颜色确定

Vue + Element UI 前端篇(六):更换皮肤主题,前端,vue.js,ui

我们看到相关主题颜色即刻生效

Vue + Element UI 前端篇(六):更换皮肤主题,前端,vue.js,ui

退回登录界面查看

 

Vue + Element UI 前端篇(六):更换皮肤主题,前端,vue.js,ui文章来源地址https://www.toymoban.com/news/detail-701057.html

到了这里,关于Vue + Element UI 前端篇(六):更换皮肤主题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue2使用element-ui引入自定义主题的方法(使用在线主题生成工具)

    第一步 :按照官方文档使用npm安装element-ui,并完整引入Element-ui npm i element-ui -S  main.js中所有的内容删去,改为 随便写点东西,run一下 成功引入element-ui,但是不喜欢默认的蓝色,看起来很烂大街,想换掉。 第二步 :由于不喜欢默认的蓝色主题,可以使用在线主题生成工具

    2024年02月14日
    浏览(23)
  • vue3 更换 elemnt-ui / element-plus 版本npm命令

    1. 安装 / 更换 element-ui 版本 [ 在 @ 后面指定想要安装的版本 ]  2. 安装 / 更换 element-plus 版本 [ 在 @ 后面指定想要安装的版本 ] 

    2024年02月04日
    浏览(24)
  • ​Vue + Element UI前端篇(二):Vue + Element 案例 ​

    打开 Visual Studio Code,File -- add Folder to Workspace,导入我们的项目。 安装依赖 Element 是国内饿了么公司提供的一套开源前端框架,简洁优雅,提供了 vue、react、angular 等多个版本,我们这里使用 vue 版本来搭建我们的界面。 访问:http://element-cn.eleme.io/#/zh-CN/component/installation ,官

    2024年02月09日
    浏览(18)
  • Vue+JS+Element UI实战(电商项目1)

    目录 1.电商业务概述 2.电商后台管理系统的功能 ​3.项目初始化步骤 4.后台项目的环境安装配置 4.1. API V1 接口说明 4.2. 支持的请求方法 4.3. 通用返回状态说明 5.测试后台接口是否正常 6.登录/退出功能 1.登录概述 1.登录业务流程 2.登录业务的相关技术点 3.token原理  2.登录功能

    2024年02月05日
    浏览(14)
  • Vue + Element UI 前端篇(十五):嵌套外部网页

    在有些时候,我们需要在我们的内容栏主区域显示外部网页。如查看服务端提供的SQL监控页面,接口文档页面等。 这个时候就要求我们的导航菜单能够解析嵌套网页的URL,并根据URL路由到相应的嵌套组件。接下来我们就讲解具体实现方案。 实现原理 1. 给菜单URL添加嵌套网页

    2024年02月08日
    浏览(17)
  • Vue + Element UI 前端篇(十二):用户管理模块

    添加接口 在 http/moduls/user.js 中添加用户管理相关接口。 模拟数据 在 mock/moduls/user.js 中添加用户管理相关mock接口。 提取根路径 为了可以统一控制mock的开启与关闭,把mock的根路径提取出来。  而具体的Mock接口,把根路径移除,因为在生成Mock的时候会自动把根路径加上去。

    2024年02月09日
    浏览(16)
  • Vue + Element UI 前端篇(七):功能组件封装

    为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度。 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航、头部和主内容三个组件。 Home.vue HeadBar.vue MenuBar.vue Main.vue 国际化语言切换也被封装成为了组

    2024年02月09日
    浏览(16)
  • Vue + Element UI 前端篇(十):动态加载菜单

    之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的。 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单。 接口模块化 我们向来讲究模块化,之前接口都集中在,interface.js,我们现在把

    2024年02月09日
    浏览(14)
  • Vue + Element UI 前端篇(九):接口格式定义

    前台显示需要后台数据,我们这里先把前后端交互接口定义好,没有后台的时候,也方便用mock模拟。 接口定义遵循几个规范: 1. 接口按功能模块划分。 系统登录:登录相关接口 用户管理:用户管理相关接口 机构管理:机构管理相关接口 角色管理 : 角色管理相关接口 菜单

    2024年02月09日
    浏览(21)
  • Vue + Element UI 前端篇(一):搭建开发环境

    开发之前,请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex,vue.js 应用状态管理库 Element,饿了么提供的UI框架 Node JS(npm) Visual Studio Code(前端IDE) 下载地址: 官网下载地址 Visual Studio Code 是一款非常优秀的开源编辑器,非常适合作为前端I

    2024年02月09日
    浏览(24)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包