feat(components): [message-box] MessageBox can drag overflow the viewport (#15674)

feat(components): [message-box] can drag overflow the viewport

docs/examples/message-box/alert.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-button text @click="open">Click to open the Message Box</el-button>
+  <el-button plain @click="open">Click to open the Message Box</el-button>
 </template>
 
 <script lang="ts" setup>

docs/examples/message-box/centered-content.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-button text @click="open">Click to open Message Box</el-button>
+  <el-button plain @click="open">Click to open Message Box</el-button>
 </template>
 
 <script lang="ts" setup>

docs/examples/message-box/confirm.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-button text @click="open">Click to open the Message Box</el-button>
+  <el-button plain @click="open">Click to open the Message Box</el-button>
 </template>
 
 <script lang="ts" setup>

docs/examples/message-box/customization.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-button text @click="open">Click to open Message Box</el-button>
+  <el-button plain @click="open">Click to open Message Box</el-button>
 </template>
 
 <script lang="ts" setup>

docs/examples/message-box/customized-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-button text @click="open">Click to open Message Box</el-button>
+  <el-button plain @click="open">Click to open Message Box</el-button>
 </template>
 
 <script lang="ts" setup>

docs/examples/message-box/distinguishable-close-cancel.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-button text @click="open">Click to open Message Box</el-button>
+  <el-button plain @click="open">Click to open Message Box</el-button>
 </template>
 
 <script lang="ts" setup>

docs/examples/message-box/draggable.vue

@@ -1,5 +1,8 @@
 <template>
-  <el-button text @click="open">Click to open Message Box</el-button>
+  <el-button plain @click="open">Open a draggable Message Box</el-button>
+  <el-button plain @click="open2">
+    Open a overflow draggable Message Box
+  </el-button>
 </template>
 
 <script lang="ts" setup>
@@ -29,4 +32,30 @@ const open = () => {
       })
     })
 }
+
+const open2 = () => {
+  ElMessageBox.confirm(
+    'proxy will permanently delete the file. Continue?',
+    'Warning',
+    {
+      confirmButtonText: 'OK',
+      cancelButtonText: 'Cancel',
+      type: 'warning',
+      draggable: true,
+      overflow: true,
+    }
+  )
+    .then(() => {
+      ElMessage({
+        type: 'success',
+        message: 'Delete completed',
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: 'Delete canceled',
+      })
+    })
+}
 </script>

docs/examples/message-box/prompt.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-button text @click="open">Click to open Message Box</el-button>
+  <el-button plain @click="open">Click to open Message Box</el-button>
 </template>
 
 <script lang="ts" setup>

docs/examples/message-box/use-html.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-button text @click="open">Click to open Message Box</el-button>
+  <el-button plain @click="open">Click to open Message Box</el-button>
 </template>
 
 <script lang="ts" setup>