feat(drawer): [drawer] Add drag listening event (#1701)

* feat(drawer): [drawer] Add drag listening event

* feat(drawer): [drawer] Modify version number

Author: MomoPoppy

examples/sites/demos/pc/app/drawer/dragable-composition-api.vue

@@ -3,7 +3,14 @@
     <tiny-button @click="openDrawer('width')" type="primary"> 宽度拖拽 </tiny-button>
     <tiny-button @click="openDrawer('height')" type="primary"> 高度拖拽 </tiny-button>
 
-    <tiny-drawer :placement="placement" title="标题" dragable :visible="visible" @update:visible="visible = $event">
+    <tiny-drawer
+      :placement="placement"
+      title="标题"
+      dragable
+      :visible="visible"
+      @update:visible="visible = $event"
+      @drag="drag"
+    >
       <div class="content">
         <p v-if="placement === 'right'">横向拖拽左边框可改变抽屉主体宽度。</p>
         <p v-else>竖向拖拽上边框可改变抽屉主体高度。</p>
@@ -14,15 +21,19 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
+import { Drawer as TinyDrawer, Button as TinyButton, Modal } from '@opentiny/vue'
 
 const visible = ref(false)
 const placement = ref('right')
 
-function openDrawer(target) {
+const openDrawer = (target) => {
   visible.value = true
   placement.value = target === 'width' ? 'right' : 'bottom'
 }
+
+const drag = ({ width, height }) => {
+  Modal.message({ message: `抽屉的宽为${width},高为${height}`, status: 'info' })
+}
 </script>
 
 <style scoped>

examples/sites/demos/pc/app/drawer/dragable.vue

@@ -3,7 +3,14 @@
     <tiny-button @click="openDrawer('width')" type="primary"> 宽度拖拽 </tiny-button>
     <tiny-button @click="openDrawer('height')" type="primary"> 高度拖拽 </tiny-button>
 
-    <tiny-drawer :placement="placement" title="标题" dragable :visible="visible" @update:visible="visible = $event">
+    <tiny-drawer
+      :placement="placement"
+      title="标题"
+      dragable
+      :visible="visible"
+      @update:visible="visible = $event"
+      @drag="drag"
+    >
       <div class="content">
         <p v-if="placement === 'right'">横向拖拽左边框可改变抽屉主体宽度。</p>
         <p v-else>竖向拖拽上边框可改变抽屉主体高度。</p>
@@ -13,7 +20,7 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { Drawer, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -30,6 +37,9 @@ export default {
     openDrawer(target) {
       this.visible = true
       this.placement = target === 'width' ? 'right' : 'bottom'
+    },
+    drag({ width, height }) {
+      Modal.message({ message: `抽屉的宽为${width},高为${height}`, status: 'info' })
     }
   }
 }

packages/renderless/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-renderless",
   "private": true,
-  "version": "3.17.0",
+  "version": "3.17.1",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "keywords": [

packages/renderless/src/drawer/index.ts

@@ -1,13 +1,6 @@
 import debounce from '../common/deps/debounce'
 import { addClass, removeClass } from '../common/deps/dom'
-import type {
-  IDrawerState,
-  IDrawerProps,
-  IDrawerApi,
-  IDrawerCT,
-  ISharedRenderlessParamUtils,
-  IDrawerRenderlessParams
-} from '@/types'
+import type { IDrawerState, IDrawerApi, IDrawerCT, ISharedRenderlessParamUtils, IDrawerRenderlessParams } from '@/types'
 
 export const computedWidth =
   ({
@@ -88,7 +81,7 @@ export const mousedown =
     state.dragEvent.offsetHeight = drawerBox.offsetHeight
   }
 
-export const mousemove = ({ state, props }: { state: IDrawerState; props: IDrawerProps }) =>
+export const mousemove = ({ state, props, emit }: Pick<IDrawerRenderlessParams, 'state' | 'props' | 'emit'>) =>
   debounce(1, (event) => {
     if (!state.dragEvent.isDrag) {
       return
@@ -118,6 +111,8 @@ export const mousemove = ({ state, props }: { state: IDrawerState; props: IDrawe
       const height = offsetHeight - offsetY
       state.height = height > 10 ? height : 10
     }
+
+    emit('drag', { width: state.width, height: state.height })
   }) as Parameters<Document['removeEventListener']>['1']
 
 export const mouseup =

packages/renderless/src/drawer/vue.ts

@@ -47,7 +47,7 @@ export const renderless = (
     close: close({ api }),
     handleClose: handleClose({ emit, props, state }),
     mousedown: mousedown({ state, vm }),
-    mousemove: mousemove({ state, props }),
+    mousemove: mousemove({ state, props, emit }),
     mouseup: mouseup({ state }),
     addDragEvent: addDragEvent({ api: api as IDrawerApi, vm }),
     removeDragEvent: removeDragEvent({ api: api as IDrawerApi, vm }),

packages/vue/src/drawer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-drawer",
-  "version": "3.17.0",
+  "version": "3.17.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

packages/vue/src/drawer/src/pc.vue

@@ -167,7 +167,7 @@ export default defineComponent({
     'tipsProps',
     'customSlots'
   ],
-  emits: ['update:visible', 'open', 'close', 'confirm'],
+  emits: ['update:visible', 'open', 'close', 'confirm', 'drag'],
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }