29 lines
1.1 KiB
Plaintext
29 lines
1.1 KiB
Plaintext
<template>
|
||
<!-- Vue 2 要求模板恰好一个根元素：mask 与 sheet 同为 position:fixed，
|
||
包一层普通 div 不影响两者的视口定位（fixed 不受静态父级影响）。 -->
|
||
<div class="kole-sheet-root">
|
||
<div class="kole-sheet-mask" :class="{ 'is-open': visible }" @click="$emit('close')"></div>
|
||
<div class="kole-sheet" :class="{ 'is-open': visible }"
|
||
@pointerdown="onDown" @pointerup="onUp">
|
||
<div class="kole-sheet-handle"></div>
|
||
<div class="kole-sheet-header" v-if="title">{{ title }}</div>
|
||
<div class="kole-sheet-body"><slot>默认内容</slot></div>
|
||
<div class="kole-sheet-footer" v-if="$slots.footer"><slot name="footer"></slot></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'KoleBottomSheet',
|
||
props: { visible: { type: Boolean, default: false }, title: { type: String, default: '' } },
|
||
data: function () { return { startY: 0 }; },
|
||
methods: {
|
||
onDown: function (e) { this.startY = e.clientY; },
|
||
onUp: function (e) { if (this.startY - e.clientY < -80) this.$emit('close'); }
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style src="./BottomSheet.css"></style>
|