Vue 动态换肤

已于 2022-11-11 10:13:04 修改
阅读量1.5k 收藏 3
点赞数 3
分类专栏： Vue CSS 文章标签： vue.js css
于 2022-10-10 20:57:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45820444/article/details/127251816
版权
Vue 同时被 2 个专栏收录
23 篇文章 3 订阅
订阅专栏
CSS
23 篇文章 2 订阅
订阅专栏

效果如图：

请添加图片描述

设计思路：

规划几套样式，通过动态class 或 scss 混入 @include 等方式进行赋值，给最外层的父元素添加全局样式。涉及到跨页面操作，可以将class转化为JSON字符串存在storage 或vuex 里，或者封装进公用组件，把每个页面不同的内容以插槽的形式插入。

源代码（vue 版）：

<template>
  <div :class="[`son${temp}`]" class="demo3">
      <div v-if="temp === 1" class="head jus">
        <span></span>
        <span>标题</span>
        <span></span>
      </div>
      <div v-else-if="temp === 2" class="head jus">
        <span>标题</span>
        <input type="text" placeholder="请输入关键字搜索" class="head-input">
      </div>
      <div v-else-if="temp === 3" class="head jus">
        <img src="https://img0.baidu.com/it/u=236085137,1979895699&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360" alt="" class="head-icon">
        <span style="margin-left: 20px">昵称</span>
        <input type="text" placeholder="请输入关键字搜索" class="head-input">
      </div>
      <div v-else-if="temp === 4" class="head jus">
        <img src="https://img0.baidu.com/it/u=2776049540,4161189450&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500" alt="" class="head-icon">
        <span style="margin: 0 20px">标题</span>
        <marquee style="flex: 1"> 君埋泉下泥销骨，我寄人间雪满头</marquee >
        <img src="https://img-blog.csdnimg.cn/7d53b4c7612b47dcbb604680dca1508e.png" alt="" class="head-icon">
      </div>
      <div class="banner flex">
        <img :src="list[temp - 1]" alt="">
      </div>
      <div class="content">
        <p>一花一世界</p>
        <p class="er">一叶一菩提</p>
      </div>
      <div class="footer">
        <div v-for="(i,d) in 4" :key="d" @click="temp = i" :class="[`son${temp}`]" class="button">皮肤{{i}}</div>
      </div>
    </div>
</template>
<script>
export default {
  data() {
    return { 
      temp: 1, // 皮肤参数
      list: [
        'https://img0.baidu.com/it/u=3178510979,425083974&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400',
        'https://img0.baidu.com/it/u=2937864225,3744149905&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400',
        'https://img0.baidu.com/it/u=3254616311,515815880&fm=253&fmt=auto&app=138&f=JPEG?w=1371&h=500',
        'https://img0.baidu.com/it/u=1513041657,3964511766&fm=253&fmt=auto&app=138&f=JPEG?w=1205&h=500'
      ]
    }
  }
}
</script>
<style scoped>
.footer {
  position: fixed; 
  left: 10vw;
  bottom: 10vh;
  display: flex;
  
}
.head-input {
  flex: 1;
  margin: 0 20px;
  border-radius: 6px;
}
.head-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #fff;
}
.button {
  width: 80px;
  height: 40px;
  margin-right: 20px;
  border-radius: 6px;
}
.banner img{
  width: 100%;
  margin: 20px 0;
}
.son1 {
  font-family: 华文彩云,仿宋;
  font-size: 22px;
  line-height: 2;
  background-image: linear-gradient(35deg, #f99 50%, #99f 100%);
}
.son1 .er {
  font-size: 18px;
  font-style: italic;
}
.son2 {
  font-family: 华文琥珀,方正舒体;
  font-size: 26px;
  line-height: 2;
  background-image: linear-gradient(-60deg, rgb(168, 135, 135) 50%, rgb(122, 122, 156) 100%);
}
.son2 .er {
  font-size: 20px;
  font-style: italic;
}
.son3 {
  font-family: 隶书;
  font-size: 20px;
  line-height: 2;
  background-image: linear-gradient(135deg, rgb(181, 196, 132) 50%, rgb(78, 78, 173) 100%);
}
.son3 .er {
  font-size: 16px;
  font-style: italic;
}
.son4 {
  font-family: 宋体;
  font-size: 26px;
  line-height: 2;
  background-image: linear-gradient(60deg, rgb(214, 232, 157) 50%, rgb(149, 170, 134) 100%);
}
.son4 .er {
  font-size: 20px;
  font-style: italic;
}
.demo3 {
  width: 600px;
  height: 100vh;
  padding: 20px;
}
.flex {
  display: flex;
  align-items: center;
}
.jus {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* input */
input{
  width: 235px;
  height: 32px;
  padding-left:15px;
  box-sizing: border-box;
  border:none;
  background: #f2f3f5;
  outline: 1px solid transparent;
  transition: all .2s;
}
input:hover{
  background: #e5e6eb;
}
</style>

源代码（html 版）：

<html>
  <head></head>
  <body>
    <div id="app" :class="[`son${temp}`]" class="demo3">
      <div v-if="temp === 1" class="head jus">
        <span></span>
        <span>标题</span>
        <span></span>
      </div>
      <div v-else-if="temp === 2" class="head jus">
        <span>标题</span>
        <input type="text" placeholder="请输入关键字搜索" class="head-input">
      </div>
      <div v-else-if="temp === 3" class="head jus">
        <img src="https://img0.baidu.com/it/u=236085137,1979895699&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360" alt="" class="head-icon">
        <span style="margin-left: 20px">昵称</span>
        <input type="text" placeholder="请输入关键字搜索" class="head-input">
      </div>
      <div v-else-if="temp === 4" class="head jus">
        <img src="https://img0.baidu.com/it/u=2776049540,4161189450&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500" alt="" class="head-icon">
        <span style="margin: 0 20px">标题</span>
        <marquee style="flex: 1"> 君埋泉下泥销骨，我寄人间雪满头</marquee >
        <img src="https://img-blog.csdnimg.cn/7d53b4c7612b47dcbb604680dca1508e.png" alt="" class="head-icon">
      </div>
      <div class="banner flex">
        <img :src="list[temp - 1]" alt="">
      </div>
      <div class="content">
        <p>一花一世界</p>
        <p class="er">一叶一菩提</p>
      </div>
      <div class="footer">
        <div v-for="(i,d) in 4" :key="d" @click="temp = i" :class="[`son${temp}`]" class="button">皮肤{{i}}</div>
      </div>
    </div>
  </body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    temp: 1,  // 皮肤参数
    list: [
      'https://img0.baidu.com/it/u=3178510979,425083974&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400',
      'https://img0.baidu.com/it/u=2937864225,3744149905&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400',
      'https://img0.baidu.com/it/u=3254616311,515815880&fm=253&fmt=auto&app=138&f=JPEG?w=1371&h=500',
      'https://img0.baidu.com/it/u=1513041657,3964511766&fm=253&fmt=auto&app=138&f=JPEG?w=1205&h=500'
    ]
  }
})
</script>
<style>
.footer {
  position: fixed; 
  left: 10vw;
  bottom: 10vh;
  display: flex;
  
}
.head-input {
  flex: 1;
  margin: 0 20px;
  border-radius: 6px;
}
.head-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #fff;
}
.button {
  width: 80px;
  height: 40px;
  margin-right: 20px;
  border-radius: 6px;
}
.banner img{
  width: 100%;
  margin: 20px 0;
}
.son1 {
  font-family: 华文彩云,仿宋;
  font-size: 22px;
  line-height: 2;
  background-image: linear-gradient(35deg, #f99 50%, #99f 100%);
}
.son1 .er {
  font-size: 18px;
  font-style: italic;
}
.son2 {
  font-family: 华文琥珀,方正舒体;
  font-size: 26px;
  line-height: 2;
  background-image: linear-gradient(-60deg, rgb(168, 135, 135) 50%, rgb(122, 122, 156) 100%);
}
.son2 .er {
  font-size: 20px;
  font-style: italic;
}
.son3 {
  font-family: 隶书;
  font-size: 20px;
  line-height: 2;
  background-image: linear-gradient(135deg, rgb(181, 196, 132) 50%, rgb(78, 78, 173) 100%);
}
.son3 .er {
  font-size: 16px;
  font-style: italic;
}
.son4 {
  font-family: 宋体;
  font-size: 26px;
  line-height: 2;
  background-image: linear-gradient(60deg, rgb(214, 232, 157) 50%, rgb(149, 170, 134) 100%);
}
.son4 .er {
  font-size: 20px;
  font-style: italic;
}
.demo3 {
  width: 600px;
  height: 100vh;
  padding: 20px;
}
.flex {
  display: flex;
  align-items: center;
}
.jus {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* input */
input{
  width: 235px;
  height: 32px;
  padding-left:15px;
  box-sizing: border-box;
  border:none;
  background: #f2f3f5;
  outline: 1px solid transparent;
  transition: all .2s;
}
input:hover{
  background: #e5e6eb;
}
</style>
其它应用场景如： 天地图自定义覆盖物，轮播图自定义指示点
相关图片如下：

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

到底了！原创不易，转载请注明出处。
请添加图片描述

  前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获

推荐阅读：

在一个区间里求素数
小鲨鱼
Css手绘图形
Dom树 CSS树 渲染树
Git 基础命令与事件详解

我不是费圆
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
vue项目中实现动态换肤
nick_zhang的博客
07-15 893
换肤是一个常见的需求，换肤涉及的面很多，总的涉及到的有自定义的组件样式，外部引入的组件(element，百度地图等等)，但其实只需要我们分模块去解决，就能迎刃而解。
基于vue的换肤功能的示例代码
11-26
最近在做的一个几月vue的移动端小demo,其中有一块是实现各个页面的统一换肤功能的。想着写一篇文章，来写一写实现过程中遇到的一些问题。 项目github地址 项目github地址 一 先看一下实现效果吧   设置主题颜色 讲道理这么一个功能，我觉得这么几点可以说下，分步实现： 1. 色值的选取 2. scss 的一些小众用法(多变量CSS值的批量设置) 3. 全局事件巴士的应用 1 色值的选取和原则 推荐大家看下蚂蚁金服的设计指引，里面对常见的交互和界面设计有一套不错的指引和建议，喜欢看书的也可以看看《写给大家看的设计书》。 对于界面中的色彩元素，我们一般要保持视觉的连续性，即同一套色彩，
Vue + Element UI+Scss + Vuex一键换肤 , 一键换字体大小 ,动态替换全局主题颜色
疑问 搜索 动手 解决 记录
12-08 9631
一、前言 其实我这个写法每个UI库都通用 , 不局限于ElementUI , 看明白思路就知道怎么写了 一键换肤 , 动态替换全局主题颜色功能已经实现很久了 , 在项目验收的时候出现了一个小问题 , 想改动一下 , 于是来记录一下 前段时间公司项目里需要实现一键换服 , 换主题颜色 , 网上看了一部分 大多数都是用js获取标签元素添加Attribute , 如document.XXXXXXX ,或者是建theme.css文件什么的 , 不太符合我想要实现的用最少的代码实现换肤的功能 , 如果用了框架 , 还
vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解（纯干huo）
热门推荐
qq_42753705的博客
12-26 1万+
方式1：定义全局的CSS变量 App.vue： <style> /* 定义全局的css变量 */ :root { /* 背景色 */ --theme_bg_color: red; /* 按钮颜色 */ --theme_button_color: yellowgreen; } </style> demo.vue（css）： <style scoped> /* 使用全局的css变量设置颜色 */ .myButton { background: va.
vue切换不同主题（换肤）
weixin_66619918的博客
06-06 8794
vue切换不同主题风格
详解Vue 换肤方案验证
10-16
主要介绍了Vue 换肤方案验证，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue + Scss 动态切换主题颜色实现换肤的示例代码
10-15
主要介绍了Vue + Scss 动态切换主题颜色实现换肤的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 换肤的示例实践
08-28
本篇文章主要介绍了Vue 换肤的示例实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue + less 实现动态主题换肤功能
weixin_44784401的博客
08-14 2435
vue + less 实现动态主题换肤功能
Vue中实现换肤功能
weixin_44090040的博客
06-04 2986
首先，在assets下css里创建了两个文件，一个theme.less，就是控制样式的函数，一个color.less，用来调用函数传值。 // theme.less文件 // 实现换肤的样式函数 /* 1.主色调，整体项目的主要颜色。 2.首页的背景颜色。 3.字体颜色。主要是和主色调来配合使用。 4.表格滑过的颜色。 5.表格选中的颜色。 6/7.首页每一项渐变的颜色，待定。 */ //将项目中所有需要更改样式的css全部提取出来写在这个函数中，将其他地.
vue中如何实现换肤？
dcl199728的博客
03-18 4509
vue中css配合vuex实现主题皮肤切换
vue动态换肤(自定义主题)
温情
10-20 1663
有时候一个项目的主题并不能满足所有人的审美, 所以这个时候就需要换肤功能登场了。 下面是一个换肤`demo`, 思路很简单，定义一个全局`css变量`，然后在页面根元素获取变量并动态修改这个变量值即可完成。
vue 一键换肤（切换主题样式）
朝阳39的博客
01-04 9624
目录 方法一：动态修改全局CSS变量 方法二：切换主题CSS文件 方法三：切换顶级CSS类名 方法一：动态修改全局CSS变量 1. 在全局css文件或 app.vue中定义全局CSS变量 <style> :root{ --theme_bg_color:red } </style> 2. 使用全局CSS变量定义元素样式 <style scoped> .myTitle{ background: var(--theme..
前端vue项目一键换肤主题技术方案
weixin_40454791的博客
12-26 1461
1、建一个存放公共css变量的js文件，将需要定义的css变量存放到该js文件，通过css-vars-ponyfill 插件换肤。提供多种样式，给不同的主题定义一个对应的 CSS 选择器。在组件中保留不变的样式，将需要变化的样式进行抽离。3、安装css-vars-ponyfill 插件。根据不同主题通过切换CSS选择器设置不同的样式。提取公共CSS样式, 通过变量的形式切换主题。5、main.js中调用theme.js。选择器的方式实现主题样式的切换.2、页面中使用css变量。4、封装切换主题的js。
#Vue2篇：动态换肤
...
12-14 226
css 文件路径： node_modules\element-ui\lib\theme-chalk\index.css。动态调用可以批量处理基本的element按钮颜色。ElementUiCSS.js 的格式。
vue使用sass实现主题换肤功能
故里的博客
09-22 1215
本文只介绍深浅两种主题换肤作为参考。 1.创建配置动态样式的scss文件，路径为/src/assets/scss/_theme.scss。 $themes: ( light: ( //字体 font_color1: #000, //背景 background_color1: #fff, // 背景渐变 background_gradient1:#F8FBFD , //边框 .
Vue + Element UI 前端篇（六）：更换皮肤主题
最新发布
y19910825的博客
09-05 5459
首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。把生成的主题按颜色改名放置 src/theme 目录下。在 main.js 中 import ‘所在路径/index.css’。
vue 一键换肤 换主题
来了波，兄嘚
10-14 3910
该一键换肤只是定义好几个颜色，并进行简单的切换。 在src下的assets文件下面定义一个css文件夹，在对应的文件里面定义_handle.scss和_themes.scss文件，如下： image.png 2.在_themes.scss文件里面定义好需要用到的几个样式。如下： /** * _themes.scss * 当HTML的data-theme为blue时，样式引用blue * data-theme为其他值时，就采用对应的默认样式 * 这里我定义了5套主题方案，想要再多只需在`
vue输入换肤
05-30
要实现换肤的功能，可以通过修改页面的 CSS 样式或者动态加载不同的 CSS 文件来实现。下面是一个实现 vue 输入换肤的简单示例： 1. 在项目中创建多套皮肤的 CSS 文件，例如：skin1.css、skin2.css、skin3.css。 2....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我不是费圆

文章都是免费开源的，不用打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值