vue实战-实现换主题/皮肤功能

最新推荐文章于 2024-08-06 03:14:36 发布

我的小熊不见了

最新推荐文章于 2024-08-06 03:14:36 发布

阅读量1.5k

点赞数

分类专栏： vue 文章标签： vue 换皮肤

本文链接：https://blog.csdn.net/qq1311256696/article/details/87716484

版权

本文介绍如何在 Vue 项目中实现换肤功能。核心思路是动态更改 HTML 中引用 CSS 的路径，通过提取并压缩需要换肤的 CSS，结合 webpack 配置实现动态加载。文章详细阐述了实现过程，包括 PC 端和移动端的实现细节，并提供了关键代码示例。

摘要由CSDN通过智能技术生成

现在的app和pc网站做的越来越花哨，但是有时候用户并不喜欢你给他挑选好的主题颜色，这个时候就需要一个换皮肤的功能了。

那么我们怎么在vue中实现这个换皮肤的功能呢？
项目结构

实现思路
- 我们用vue一般都是写单页面程序，因此在实际发布的时候只有一个html以及一堆静态文件（js、css、img之类）。而在html中引用了这些js和css。我们要换皮肤的话其实就是动态的去切换css，所以在这里实现换皮肤其实也就是动态的更改html中引用css的路径，使得当用户选择了不同的皮肤，页面引用的css不同从而呈现的样式也不一样。
优化策略
- 其实在实际场景中，需要通过切换皮肤来改变css的元素占所有css的比重并不会很多，因此我们需要把需要通过切换改变的css单独提取出来，在动态改变css路径时只需要去改变这个控制皮肤的css就可以了。
- 把皮肤相关的css压缩。
实现代码分析
如下是我们的html代码，注意其中的<link rel="stylesheet" name="theme" href="">，其他的都是正常引用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <title>iView admin</title>
   <meta charset="UTF-8">
   <!--  -->
   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
   <!-- 引入的css -->
   <link rel="stylesheet" href="/dist/main.css">
   <!-- 注意这是我们换皮肤需要的css -->
   <link rel="stylesheet" name="theme" href="">
   <!-- 图标 -->
   <link rel="icon" href="./td_icon.ico" type="image/x-icon"/>
</head>
<body>
<div id="app"></div>
<!-- 用到的js -->
<script type="text/javascript" src="/dist/vender-base.js"></script>
<script type="text/javascript" src="/dist/vender-exten.js"></script>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>

接下来就是具体实现换皮肤功能了，换皮肤一般都是点击一个按钮弹出一些皮肤的选项，选中选项后皮肤生效。
我们将换皮肤功能抽成一个组件theme-switch。pc端使用iview，手机端使用了vant。一共有3套皮肤用于切换。
目录结构

pc端

<template>
    <div style="display:inline-block;padding:0 6px;">
        <Dropdown trigger="click" @on-click="setTheme">
            <a href="javascript:void(0)">
                <Icon :style="{marginTop: '-2px', verticalAlign: 'middle'}" color="#495060" :size="18" type="paintbucket"></Icon>
                <Icon type="arrow-down-b"></Icon>
            </a>
            <DropdownMenu slot="list">
                <Dropd