使用vue+element-ui 切换主题色

最新推荐文章于 2024-05-22 18:12:26 发布

chéng ௹

最新推荐文章于 2024-05-22 18:12:26 发布

阅读量833

点赞数 4

文章标签： vue.js ui javascript

本文链接：https://blog.csdn.net/weixin_54063136/article/details/135620903

版权

文章讲述了如何在Vue应用中实现头部组件的点击事件触发主题颜色切换，通过el-dialog展示可选主题，并通过props和计算属性实现在子组件和父组件之间的数据传递和样式更新。

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

效果：点击切换主题颜色

头部组件：

<!-- 子组件 -->
<template>
	<view class="box">
		<el-tooltip class="item" effect="dark" content="特色主题" placement="bottom">
			<i class="el-icon-s-promotion" @click="dialogVisible = true"></i>
		</el-tooltip>
		<!-- 对话框 -->
		<el-dialog title="选择" :visible.sync="dialogVisible" width="50%">
			<div>
				<el-radio-group v-model="radio" @change="switchoverClick">
					<el-radio label="1" border size="mini">默认主题</el-radio>
					<el-radio label="2" border size="mini">红色主题</el-radio>
					<el-radio label="3" border size="mini">黑色主题</el-radio>
					<el-radio label="4" border size="mini">渐变主题</el-radio>
				</el-radio-group>
			</div>
		</el-dialog>
	</view>
</template>

<script>
	export default {
		props: ["radioIndex"], //接收父组件传过来的值
		data() {
			return {
				dialogVisible: false, //弹窗默认关闭状态
				radio: this.radioIndex //赋值（获取父组件传递过来的值）
			};
		},
		methods: {
			//方法用于点击切换radio获取value
			switchoverClick(e) {
				//this.$emit子传父方法
				this.$emit('bgRadio', e)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 0 10px;
		width: 100%;
		height: 50px;
		background-color: #ffffff;
		box-shadow: 0 0 1px #000000;
		display: flex;
		align-items: center;

		.el-icon-s-promotion {
			cursor: pointer;
			font-size: 20px;
		}
	}
</style>

父组件（页面）：

<!-- 父组件（页面） -->
<template>
	<view>
		<!-- 组件 -->
		<demo @bgRadio="bgRadio" :radioIndex="radioIndex"></demo>
		<!-- 页面 -->
		<view :style="[bgComputed]" class="box2"></view>
	</view>
</template>

<script>
	// 引入子组件
	import demo from '@/components/demo/index.vue'
	export default {
		data() {
			return {
				radioIndex: '1', //默认第一项
			};
		},
		// 注册组件
		components: {
			demo
		},
		// 计算属性
		computed: {
			bgComputed() {
				let style = {}
				switch (this.radioIndex) {
					case '1':
						style.backgroundColor = '#55ff7f'
						break;
					case '2':
						style.background = 'red'
						break;
					case '3':
						style.backgroundColor = '#000000'
						break;
					case '4':
						style.background = 'linear-gradient(120deg, #bc00e3, #4efffb)';
						break;
					default:
						console.log('没有该主题色')
				}
				return style //这一步不能漏掉
			}
		},
		methods: {
			//点击事件 子组件方法传递参数，这里需要用this.radioIndex接收参数
			bgRadio(e) {
				this.radioIndex = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box2 {
		width: 100%;
		height: calc(100vh - 50px); //总高度-组件的高度=页面显示高度
	}
</style>