xs/xs-app/components/read/settingMenu.vue

<template>
	<view>
		<uni-popup  @touchstart="maskStart" @touchmove="maskTouch" :animation="false" mask-background-color="rgba(0,0,0,0)" ref="menu"  background-color="#fff"  @change="change">
			<view v-if="showSettingFontSizeMode==false" class="selects-box">
				<view @click="emit('clickPreChapter')">上一章</view>
				<view @click="emit('clickNextChapter')">下一章</view>
			</view>
			
			<view v-if="showSettingFontSizeMode==false" class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="items-box">
					<view class="item-box" @click="emit('clickCatalog')">
						目录
					</view>
					<view class="item-box" v-if="mode === config.read_config.readMode.Bright" @click="emit('clickMode',config.read_config.readMode.Dark)">
						夜间
					</view>
					<view class="item-box" v-if="mode === config.read_config.readMode.Dark" @click="emit('clickMode',config.read_config.readMode.Bright)">
						日间
					</view>
					<view class="item-box" @click="emit('clickOpenSetting')">
						设置
					</view>
				</view>	
			</view>
			
			<view v-if="showSettingFontSizeMode==true" class="fontSelect" >
				<view>字体大小</view>
				<view> ｜</view>
				<view></view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import {ref, onMounted,defineProps,defineEmits} from 'vue'
	import { config } from '../../config/config';
	import { ReadSetting } from '../../stores/readSetting';
	const emit = defineEmits(['clickCatalog','clickPreChapter','clickNextChapter','clickMode','clickOpenSetting','Close'])
	// const { windowWidth, windowHeight, statusBarHeight, platform, pixelRatio } = uni.getSystemInfoSync();
	let menu = ref(null)
	function change(e){
		if(e.show==false){
			emit('Close')
		}
		console.log('当前模式：' + e.type + ',状态：' + e.show);
	}
	onMounted(()=>{
		const type = 'bottom'
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		menu.value.open(type)
	})
	let mode = ref(ReadSetting().getReadSetting().readMode)
	let startPosY = ref(-1)
	function maskTouch(e){
		if(Math.abs(e.changedTouches[0].pageY-startPosY.value)>10){
			startPosY.value = -1
			emit('Close')
		}
	}
	function maskStart(e){
		startPosY.value = e.changedTouches[0].pageY
	}
	let showSettingFontSizeMode = ref(false)
	
	function showSettingFont(){
		showSettingFontSizeMode.value = true
	}
	defineExpose({showSettingFont})
</script>

<style lang="scss" scoped>
	.selects-box{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 80px;
		width: 100%;
		.item-box {
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			height: 100%;
		}
	}
	.items-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 80px;
		width: 100%;
		margin-bottom: 5%;
		.item-box {
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			height: 100%;
		}
	}
	
	.fontSelect {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 80px;
		width: 100%;
	}

</style>