阴阳符号

​ 如果你懒得找 UI 切图，可以试试这个没什么卵用的组件，O(∩_∩)O哈哈~

<template>
	<fx67ll-shape-yinyang shapeColorYin="#000000" shapeColorYang="#ffffff" :shapeSize="1" />
</template>

<script>
	export default {
		name: 'fx67llDemo',
		data() {
			return {}
		},
		methods: {}
	};
</script>

<style>
</style>

显示代码 复制代码 复制代码

配色与尺寸对比

阴阳符号通过 shapeColorYin（阴）与 shapeColorYang（阳）分别设置两半颜色，shapeSize 控制大小。

不同阴/阳配色与尺寸对比。

<template>
	<div class="shape-compare">
		<div class="shape-compare__group">
			<div class="shape-compare__item"><fx67ll-shape-yinyang shapeColorYin="#000000" shapeColorYang="#ffffff" :shapeSize="1" /></div>
			<div class="shape-compare__item"><fx67ll-shape-yinyang shapeColorYin="#42b983" shapeColorYang="#ef8e81" :shapeSize="1" /></div>
			<div class="shape-compare__item"><fx67ll-shape-yinyang shapeColorYin="#9b7ad5" shapeColorYang="#f6d860" :shapeSize="1" /></div>
		</div>
		<div class="shape-compare__group">
			<div class="shape-compare__item"><fx67ll-shape-yinyang :shapeSize="0.6" /></div>
			<div class="shape-compare__item"><fx67ll-shape-yinyang :shapeSize="1" /></div>
			<div class="shape-compare__item"><fx67ll-shape-yinyang :shapeSize="1.6" /></div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'fx67llDemo',
		data() {
			return {}
		},
		methods: {}
	};
</script>

<style>
.shape-compare {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	justify-content: center;
	padding: 24px;
	background: #f7f8fa;
	border-radius: 8px;
}
.shape-compare__group {
	display: flex;
	gap: 24px;
	align-items: center;
}
.shape-compare__item {
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>

显示代码 复制代码 复制代码

快速上手

<fx67ll-shape-yinyang shapeColorYin="#000000" shapeColorYang="#ffffff" :shapeSize="1" />

属性说明

参数	说明	类型	可选值	默认值
shapeSize	符号的大小，支持数字，包括小数	Number	-	1
shapeColorYin	阴阳符号阴的颜色，十六进制颜色代码	String	-	#000000
shapeColorYang	阴阳符号阳的颜色，十六进制颜色代码	String	-	#ffffff

感谢使用

我是 fx67ll.com (opens new window)，如果您发现本组件有什么错误，欢迎提交issure，感谢您的阅读！
如果您喜欢这个组件，欢迎访问 本组件github仓库地址 (opens new window)，为我点一颗Star，Thanks~ 😃
转发请注明参考地址，非常感谢！！！