Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready

frameworks/BottomSheet.vue2.vue

@@ -0,0 +1,24 @@
+<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"></slot></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AaBottomSheet',
+  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>