(docs): update drag-outside-window of dialog-box (#1376)

* fix: add drag-outside-window of dialog-box

* fix: update review

* fix: update dialog-box apis

* fix: update code review

* fix: update code review

* fix: update code review

examples/sites/demos/apis/dialog-box.js

@@ -61,6 +61,14 @@ export default {
           mode: ['pc'],
           pcDemo: 'destroy-on-close'
         },
+        {
+          name: 'drag-outside-window',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: { 'zh-CN': '可将弹窗拖出窗口', 'en-US': 'Pop ups can be dragged out of the window' },
+          mode: ['pc'],
+          pcDemo: 'draggable'
+        },
         {
           name: 'dialog-class',
           type: 'string',

examples/sites/demos/pc/app/dialog-box/draggable-composition-api.vue

@@ -1,11 +1,13 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true"> 可拖拽弹窗 </tiny-button>
+    <tiny-button @click="dragDialog"> 可拖拽弹窗 </tiny-button>
-    <tiny-button @click="boxVisibility = true"> 可编辑拖拽弹窗 </tiny-button>
+    <tiny-button @click="dragDialogOutSide"> 可拖拽出窗口弹窗 </tiny-button>
     <tiny-dialog-box
+      v-if="boxVisibility"
       draggable
       v-model:visible="boxVisibility"
       title="鼠标移入标题区域单击拖拽"
+      :drag-outside-window="isDragOutSideFlag"
       width="30%"
       @drag-start="dragStart"
       @drag-end="dragEnd"
@@ -31,6 +33,7 @@ import { ref } from 'vue'
 import { Button as TinyButton, DialogBox as TinyDialogBox, Notify, Input as TinyInput, Modal } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
+const isDragOutSideFlag = ref(false)
 const isNotifyMoving = ref(false)
 const input = ref('鼠标移入标题区域单击拖拽')
 
@@ -60,4 +63,13 @@ function dragMove() {
 function beforeClose() {
   Modal.message({ message: 'before-close', status: 'info' })
 }
+function dragDialog() {
+  boxVisibility.value = true
+  isDragOutSideFlag.value = false
+}
+
+function dragDialogOutSide() {
+  boxVisibility.value = true
+  isDragOutSideFlag.value = true
+}
 </script>

examples/sites/demos/pc/app/dialog-box/draggable.vue

@@ -1,11 +1,14 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true"> 可拖拽弹窗 </tiny-button>
+    <tiny-button @click="dragDialog"> 可拖拽弹窗 </tiny-button>
+    <tiny-button @click="dragDialogOutSide"> 可拖拽出窗口弹窗 </tiny-button>
     <tiny-dialog-box
+      v-if="boxVisibility"
       draggable
       v-model:visible="boxVisibility"
       title="鼠标移入标题区域单击拖拽"
       width="30%"
+      :drag-outside-window="isDragOutSideFlag"
       @drag-start="dragStart"
       @drag-end="dragEnd"
       @drag-move="dragMove"
@@ -38,7 +41,8 @@ export default {
     return {
       input: '鼠标移入标题区域单击拖拽',
       boxVisibility: false,
-      isNotifyMoving: false
+      isNotifyMoving: false,
+      isDragOutSideFlag: false
     }
   },
   methods: {
@@ -65,6 +69,14 @@ export default {
     },
     beforeClose() {
       Modal.message({ message: 'before-close', status: 'info' })
+    },
+    dragDialog() {
+      this.boxVisibility = true
+      this.isDragOutSideFlag = false
+    },
+    dragDialogOutSide() {
+      this.boxVisibility = true
+      this.isDragOutSideFlag = true
     }
   }
 }

examples/sites/demos/pc/app/dialog-box/webdoc/dialog-box.js

@@ -207,9 +207,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>draggable</code>属性设置<code>true</code>，鼠标点击标题区域拖拽；通过<code>:dragOutsideWindow</code>属性设置<code>true</code>，将弹窗拖出窗口。具体事件：<code>@drag-start</code><code>@drag-move</code><code>@drag-end</code>。</p>\n',
+          '<p>可通过<code>draggable</code>属性设置<code>true</code>，鼠标点击标题区域拖拽；通过<code>drag-outside-window</code>属性设置<code>true</code>，将弹窗拖出窗口。具体事件：<code>@drag-start</code><code>@drag-move</code><code>@drag-end</code>。</p>\n',
         'en-US':
-          '<p>By setting the<code>draggable</code>attribute to<code>true</code>, click and drag in the title area with the mouse; setting the code <code>dragOutsideWindow</code>attribute to<code>true</code>, drag the dialog box outside the window.Specific events:<code>@drag-start</code><code>@drag-move</code><code>@drag-end</code>.</p>\n'
+          '<p>By setting the<code>draggable</code>attribute to<code>true</code>, click and drag in the title area with the mouse; setting the code <code>drag-outside-window</code>attribute to<code>true</code>, drag the dialog box outside the window.Specific events:<code>@drag-start</code><code>@drag-move</code><code>@drag-end</code>.</p>\n'
       },
       codeFiles: ['draggable.vue']
     },