From 3ed831c84839edd9b2bfb70610d924cf6c7c3773 Mon Sep 17 00:00:00 2001
From: zhengtianyi <zhengtianyi@sinkatec.com>
Date: Mon, 20 Mar 2023 17:27:05 +0800
Subject: [PATCH] fix: click-event in draggable modal not triggered on mobile
 device 1. add a "undraggableElement" prop params for configuring undraggable
 elements, which is more convenient to use 2. modified the "isInput" method
 and the INPUT_NODE_NAMES constants to better adapt to the the mobile`s
 click-event

---
 src/components/Modal.vue | 10 +++++++---
 src/utils/index.js       |  6 +++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index a36c9a5b..06a90839 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -55,7 +55,7 @@
 <script>
 import Resizer from './Resizer.vue'
 import {
-  isInput,
+  isInputOrClickable,
   inRange,
   getTouchEvent,
   blurActiveElement,
@@ -190,7 +190,11 @@ export default {
       validator(value) {
         return value >= 0 && value <= 1
       }
-    }
+    },
+    undraggableElement: {
+      type: [Array],
+      default: () => []
+    },
   },
   components: {
     Resizer
@@ -770,7 +774,7 @@ export default {
         const handleDraggableMousedown = event => {
           let target = event.target
 
-          if (isInput(target)) {
+          if (isInputOrClickable(target, this.undraggableElement)) {
             return
           }
 
diff --git a/src/utils/index.js b/src/utils/index.js
index fbe636cd..0845bbf6 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,6 +1,6 @@
 export * from './numbers'
 
-const INPUT_NODE_NAMES = ['INPUT', 'TEXTAREA', 'SELECT']
+const INPUT_OR_CLICKABLE_NODE_NAMES = ['INPUT', 'TEXTAREA', 'SELECT', "BUTTON", "SPAN"]
 
 export const generateId = ((index = 0) => () => (index++).toString())()
 /**
@@ -59,8 +59,8 @@ export const stringStylesToObject = styles => {
   }, {})
 }
 
-export const isInput = element => {
-  return element && INPUT_NODE_NAMES.indexOf(element.nodeName) !== -1
+export const isInputOrClickable = (element, dynamicElement = []) => {
+  return element && (INPUT_OR_CLICKABLE_NODE_NAMES.indexOf(element.nodeName) !== -1 || dynamicElement.indexOf(element.nodeName) !== -1)
 }
 
 export const getTouchEvent = event => {