区分手机和电脑

- 电脑端点击mask关闭
- 手机端下滑关闭

Author: zmoth

src/App.vue

@@ -9,6 +9,24 @@ function text(e: any) {
   messages.value = e.split('\n\n')
   messages.value = messages.value.filter((i) => i && i.trim())
 }
+
+var timeOutEvent = 0 //记录触摸时长
+
+function goTouchstart() {
+  timeOutEvent = 0
+  timeOutEvent = setTimeout(function () {
+    timeOutEvent = 0
+    //  处理长按事件...
+    s.value = true
+  }, 600)
+}
+//手如果在600毫秒内就释放，则取消长按事件
+function goTouchend() {
+  timeOutEvent = 0
+  if (timeOutEvent !== 0) {
+    //  处理单击事件
+  }
+}
 </script>
 
 <template>

src/components/MoDrawer.vue

@@ -4,25 +4,42 @@ const props = defineProps({
   show: Boolean, // 是否显示 Drawer
   direction: { type: String, default: 'bottom', values: ['top', 'bottom', 'left', 'right'] },
   distance: { type: [String, Number], default: '100%' },
+  withHeader: { type: Boolean, default: true },
 })
 
+const emit = defineEmits(['close'])
+
 const isHorizontal = computed(() => props.direction === 'left' || props.direction === 'right')
+
+function handleMaskClick() {
+  emit('close')
+}
+
+var move = 0
+function handeContainerTouchStart(e: TouchEvent) {
+  move = e.changedTouches[0].pageY
+}
+
+function handeContainerTouchMove(e: TouchEvent) {
+  let moveEndY = e.changedTouches[0].pageY
+  let Y = moveEndY - move //如果值为正,则代表手指下滑,反则则为上滑,为0则表示点击
+  if (Y > 0) {
+    emit('close')
+  }
+}
 </script>
 
 <template>
   <Transition name="drawer">
-    <div v-if="show" class="drawer-mask">
+    <div v-if="show" class="drawer-layout">
       <div
         class="drawer-container"
-        :style="
-          isHorizontal
-            ? 'width: ' + distance + '; height: 100%;'
-            : 'height: ' + distance + '; width: 100%;'
-        "
+        @touchstart="handeContainerTouchStart"
+        @touchmove="handeContainerTouchMove"
       >
-        <div class="drawer-header">
+        <header v-if="withHeader" class="drawer-header">
           <slot name="header" />
-        </div>
+        </header>
 
         <div class="drawer-body">
           <slot name="body" />
@@ -32,12 +49,13 @@ const isHorizontal = computed(() => props.direction === 'left' || props.directio
           <slot name="footer" />
         </div>
       </div>
+      <div class="drawer-mask" @click="handleMaskClick"></div>
     </div>
   </Transition>
 </template>
 
 <style>
-.drawer-mask {
+.drawer-layout {
   position: fixed;
   z-index: 9998;
   top: 0;
@@ -46,15 +64,30 @@ const isHorizontal = computed(() => props.direction === 'left' || props.directio
   bottom: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: inherit;
   display: flex;
   transition: opacity 0.3s ease;
 }
+.drawer-mask {
+  position: fixed;
+  z-index: 818;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: opacity 0.3s ease;
+}
 
 .drawer-container {
+  z-index: 9998;
   overflow: auto;
   position: absolute;
   bottom: 0;
+  width: 100%;
+  height: 100%;
   background-color: #f5f5f5;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
   transition: all 0.3s ease;
@@ -80,4 +113,18 @@ const isHorizontal = computed(() => props.direction === 'left' || props.directio
 .drawer-leave-to .drawer-mask {
   opacity: 0;
 }
+
+@media (min-width: 1024px) {
+  .drawer-container {
+    bottom: unset;
+    right: 0;
+    width: 37%;
+    height: 100%;
+  }
+
+  .drawer-enter-from .drawer-container,
+  .drawer-leave-to .drawer-container {
+    transform: translate(100%, 0);
+  }
+}
 </style>

src/views/SettingsView.vue

@@ -2,7 +2,7 @@
 import config from '../../package.json'
 import { useStorage } from '@vueuse/core'
 
-const defineText = 'Moth\n\n织蛾'
+const defineText = '织蛾\n\nMoth'
 
 const message = useStorage('my-store', defineText)
 
@@ -41,7 +41,10 @@ function toLicenseUrl() {
 <template>
   <mo-drawer :show="props.drawer" distance="100%" @close="$emit('close')">
     <template #header>
-      <h1>Setting</h1>
+      <h1>Settings</h1>
+    </template>
+
+    <template #body>
       <div>
         <mo-tag class="tags" @click="toReleaseUrl">
           {{ config.version }}
@@ -53,9 +56,6 @@ function toLicenseUrl() {
           {{ config.license }}
         </mo-tag>
       </div>
-    </template>
-
-    <template #body>
       <div class="setting-content">
         <h2>Slogan</h2>
         <div>
@@ -65,7 +65,7 @@ function toLicenseUrl() {
             @change="emitMessage"
             autosize
           ></mo-textarea>
-          <div class="close-button" @click="$emit('close')">OK</div>
+          <span class="close-button" @click="$emit('close')">OK</span>
         </div>
       </div>
     </template>
@@ -104,12 +104,4 @@ function toLicenseUrl() {
 .setting-content .close-button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
-
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
 </style>