You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.1 KiB
66 lines
1.1 KiB
<template>
|
|
<view class="x-slide-menu" v-if="modelValue">
|
|
<x-mask @click="handleHide"></x-mask>
|
|
<div class="x-slide-menu__content"></div>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
const props = withDefaults(defineProps<{
|
|
contentWidth ?: string,
|
|
modelValue : boolean
|
|
}>(), {
|
|
contentWidth: "80%"
|
|
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'open'): void
|
|
(e: 'close'): void
|
|
(e: 'update:modelValue', isShow: boolean): void
|
|
}>()
|
|
|
|
watch(() => props.modelValue, (v) => {
|
|
if (v) {
|
|
emit("open")
|
|
} else {
|
|
emit("close")
|
|
}
|
|
})
|
|
|
|
const state = reactive({})
|
|
|
|
const computedContentStyle = computed(() => {
|
|
return {
|
|
width: props.contentWidth
|
|
}
|
|
})
|
|
|
|
function handleHide() {
|
|
emit("update:modelValue", false)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.x-slide-menu {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 100;
|
|
|
|
&__content {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 70%;
|
|
height: 100%;
|
|
background-color: white;
|
|
z-index: 1000;
|
|
}
|
|
}
|
|
</style>
|