ProAdvanced/components/round-menu/round-menu.vue

<template>
	<view>
		<view class="round-mask" v-if="isShow"  @click="_onClick"></view>
		<view class="uni-menu--rightBottom uni-round-menu ">
		
			<view style="position: absolute;left: 6px;top: 6px; width: 200px;height: 200px; ">
				<view :class="{'uni-menu-bg--active':isShow}" class="uni-menu-white-bg"></view>
				<view :class="{'uni-menu-bg--active':isShow}" class="uni-menu-blue-bg"></view>
				<view :class="{'uni-menu--close':!isShow}" class="uni-menu-content">
			
					<view v-for="(item, index) in content" :key="index" class="surround-box">
					
						<view class="circle-line"></view>
						<view class="circle" :style="{'--rotate':item.rotate}" @click="_onItemClick(index, item)">
							<view class="chircle-item">
								<image style="width: 20px;height: 20px;" :src="item.iconPath"></image>
								<view style="font-size: 11px; line-height: 15px; ">{{item.text}}</view>
							</view>
						</view>
					</view>
			
				</view>
			</view>
			
			<view style="position: absolute;left: 6px;top: 6px;width: 100px;height: 100px;">
				<view :class="{'uni-click-white-bg':!isShow}"></view>
				<view class="uni-click-grey-bg" :class="{'uni-click-bg-menu':!isShow}"></view>
				<view v-if="isShow" class="uni-click__circle " @click="_onClick">
					<view class="click-circle-v"></view>
					<view class="click-circle-h"></view>
				</view>
				<view v-else class="uni-click__image" @click="_onClick">
					<image style="width: 30px;height: 30px;" src="/static/round-menu/menu.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			middleIcon: {
				type: String,
				default: ''
			},
			// content: {
			// 	type: Array,
			// 	default () {
			// 		return []
			// 	}
			// },
		},
		data() {
			return {
				isShow: false,
				// 按钮
				content: [
					{
						iconPath: '/static/round-menu/home.png',
						text: '首页',
						rotate: "155deg",
						type:'persnal'
					},{
						iconPath: '/static/round-menu/video.png',
						text: '娱乐',
						rotate: "115deg",
						type:'game'
					}
				]
			}
		},
		methods: {
			_onClick() {
				// console.log("_onClick");
				this.isShow = !this.isShow
			},
			open() {
				this.isShow = true
			},
			close() {
				this.isShow = false
			},
			/**
			 * 按钮点击事件
			 */
			_onItemClick(index, item) {
				// console.log(index, item);
				this.close();
				this.$emit('trigger', {
					index,
					item
				})
			}
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.round-mask{
		position: fixed;
		background-color: rgba(0,0,0,0.3);
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		/* pointer-events: none; */
	}


	.uni-round-menu {
		position: fixed;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		z-index: 1000;

		width: 106px;
		height: 106px;
		/* background-color: #3c3e49; */
		pointer-events: none;
		overflow: hidden;
		
	}

	.uni-menu--rightBottom {
		right: 0;
		bottom: 0;
	}

	.uni-menu--leftTop {
		left: 100px;
		top: 200px;
	}
	.uni-menu-blue-bg {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 200px;
		height: 200px;
		background: #ffffff;
		box-sizing: border-box;
		border: 50px solid #33bdfb;
		border-radius: 50%;
		opacity: 0;
		transition: opacity 0.2s;
	}
	.uni-menu-white-bg {
		position: absolute;
		right: -4px;
		bottom:-4px;
		width: 208px;
		height: 208px;
		background: #ffffff;
		box-sizing: border-box;
		border: 50px solid #ffffff;
		border-radius: 50%;
		/* border-color: #ffc107;
		border-bottom: 60px solid transparent;
		border-left: 60px solid #99edd1;
		border-top: 60px solid transparent;
		border-right: 60px solid transparent;
		border-radius: 100% 0 0 0; */
		opacity: 0;
		transition: opacity 0.2s;
		box-shadow:0px 0px 5px #888888;
	}

	.uni-menu-bg--active {
		opacity: 1;
	}

	.uni-menu-content {
		position: absolute;
		z-index: 20;
		width: 200px;
		height: 200px;
		display: flex;
		transform: rotate(0);
		transition: transform 0.2s;

	}

	.uni-menu--close {
		transform: rotate(100deg);
	}

	

	.uni-click-white-bg {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 50px;
		height: 50px;
		border-radius: 100% 0 0 0;
		border: 2px solid rgba(255,255,255,0.5);
		box-shadow:0px 0px 5px #888888;
	}

	.uni-click-grey-bg {
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 11;
		width: 48px;
		height: 48px;
		border-radius: 100% 0 0 0;
		background-color: rgba(0, 0, 0, 0.3);
		transition: background-color 0.2s;
	}

	.uni-click-bg-menu {
		background-color: rgba(117, 117, 249, 255);
	}

	.uni-click__circle {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 0;
		bottom: 0;
		width: 55px;
		height: 55px;
		z-index: 30;
		transform: rotate(135deg) scale(0.5) translateY(-20px);
		pointer-events: all;
	}

	.uni-click__image {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		position: absolute;
		right: -8px;
		bottom: -2px;
		width: 55px;
		height: 55px;
		z-index: 29;
		transform: scale(0.5) translateY(10px);
		pointer-events: all;
	}

	.click-circle-v {
		position: absolute;
		width: 3px;
		height: 31px;
		left: 26px;
		top: 12px;
		background-color: white;
	}

	.click-circle-h {
		position: absolute;
		width: 31px;
		height: 3px;
		left: 12px;
		top: 26px;
		background-color: white;
	}

	.uni-fab__item--active {
		opacity: 1;
	}

	.uni-content__item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 55px;
		height: 55px;
		opacity: 1;
		/* transition: opacity 0.2s; */
	}

	.content-child {
		position: absolute;
		top: 0;
		left: 0;
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 50%;
		text-align: center;
		color: #fff;
		/* border: 1rpx solid #000000; */
		background-color: red;
		transform: rotateZ(var(--rotate)) translateY(80px);
	}




	.surround-box {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 20px;
		margin-left: -10px;
		margin-top: -10px;
		border-radius: 50%;
		z-index: 50;
		/* background-color: #000; */
	}

	.circle {
		/* 这里一定要绝对定位，这样位置才能铺开来 */
		position: absolute;
		top: -10px;
		left: -10px;
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 50%;
		text-align: center;
		z-index: 50;
		color: #fff;
		transform: rotateZ(var(--rotate)) translateY(80px);
		pointer-events: all;
	}

	.circle-line {
		position: absolute;
		top: -15px;
		left: 10px;
		width: 1px;
		height: 50px;
		text-align: center;
		background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
		color: #fff;
		transform: rotateZ(135deg) translateY(80px);
	}

	.chircle-item {
		transform: rotate(180deg);
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
</style>