Vue 动态换肤_vex换肤

作者：Gausst松鼠会 | 2024-02-23 04:07:06

踩

vex换肤

效果如图：

请添加图片描述

设计思路：

规划几套样式，通过动态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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

源代码（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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

其它应用场景如：天地图自定义覆盖物，轮播图自定义指示点
相关图片如下：

在这里插入图片描述

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

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

推荐阅读：

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/133520