22 lines
865 B
Vue
22 lines
865 B
Vue
<template>
|
|
<div class="aa-sheet-mask" :class="{ 'is-open': visible }" @click="emit('close')"></div>
|
|
<div class="aa-sheet" :class="{ 'is-open': visible }"
|
|
@pointerdown="onDown" @pointerup="onUp">
|
|
<div class="aa-sheet-handle"></div>
|
|
<div class="aa-sheet-header" v-if="title">{{ title }}</div>
|
|
<div class="aa-sheet-body"><slot>默认内容</slot></div>
|
|
<div class="aa-sheet-footer" v-if="$slots.footer"><slot name="footer" /></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
const props = defineProps({ visible: { type: Boolean, default: false }, title: { type: String, default: '' } });
|
|
const emit = defineEmits(['close']);
|
|
const startY = ref(0);
|
|
function onDown(e) { startY.value = e.clientY; }
|
|
function onUp(e) { if (startY.value - e.clientY < -80) emit('close'); }
|
|
</script>
|
|
|
|
<style src="./BottomSheet.css"></style>
|