@opentiny/vue-docs 2.2.23 → 3.16.0

package/demos/pc/app/drawer/header-slot-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 头部插槽示例 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 头部插槽示例 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
       <template #header>
         <div class="my-header">
@@ -8,11 +8,7 @@
           <p>自定义副标题xxxxxx</p>
         </div>
       </template>
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <span>内容区域</span>
     </tiny-drawer>
   </div>
 </template>
@@ -23,7 +19,7 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 </script>

package/demos/pc/app/drawer/header-slot.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 头部插槽示例 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 头部插槽示例 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
       <template #header>
         <div class="my-header">
@@ -8,11 +8,7 @@
           <p>自定义副标题xxxxxx</p>
         </div>
       </template>
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <span>内容区域</span>
     </tiny-drawer>
   </div>
 </template>
@@ -31,7 +27,7 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     }
   }

package/demos/pc/app/drawer/mask-closable-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary" style="max-width: 200px">单击遮罩层不关闭抽屉</tiny-button>
+    <tiny-button @click="openDrawer" type="primary" style="max-width: 200px">单击遮罩层不关闭抽屉</tiny-button>
     <tiny-drawer title="标题" :mask-closable="false" :visible="visible" @update:visible="visible = $event">
       <div style="padding: 32px">单击遮罩层, 不关闭抽屉</div>
     </tiny-drawer>
@@ -13,7 +13,7 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 </script>

package/demos/pc/app/drawer/mask-closable.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary" style="max-width: 200px">单击遮罩层不关闭抽屉</tiny-button>
+    <tiny-button @click="openDrawer" type="primary" style="max-width: 200px">单击遮罩层不关闭抽屉</tiny-button>
     <tiny-drawer title="标题" :mask-closable="false" :visible="visible" @update:visible="visible = $event">
       <div style="padding: 32px">单击遮罩层, 不关闭抽屉</div>
     </tiny-drawer>
@@ -21,7 +21,7 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     }
   }

package/demos/pc/app/drawer/mask-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 关闭遮罩层 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 关闭遮罩层 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" :mask="false" @update:visible="visible = $event">
       <div style="padding: 32px">左侧遮罩层已隐藏</div>
     </tiny-drawer>
@@ -13,7 +13,7 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 </script>

package/demos/pc/app/drawer/mask.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 关闭遮罩层 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 关闭遮罩层 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" :mask="false" @update:visible="visible = $event">
       <div style="padding: 32px">左侧遮罩层已隐藏</div>
     </tiny-drawer>
@@ -21,7 +21,7 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     }
   }

package/demos/pc/app/drawer/placement-composition-api.vue

@@ -1,16 +1,12 @@
 <template>
   <div>
-    <tiny-button @click="fn('left')"> left </tiny-button>
-    <tiny-button @click="fn('right')"> right </tiny-button>
-    <tiny-button @click="fn('top')"> top </tiny-button>
-    <tiny-button @click="fn('bottom')"> bottom </tiny-button>
+    <tiny-button @click="openDrawer('left')"> left </tiny-button>
+    <tiny-button @click="openDrawer('right')"> right </tiny-button>
+    <tiny-button @click="openDrawer('top')"> top </tiny-button>
+    <tiny-button @click="openDrawer('bottom')"> bottom </tiny-button>
 
     <tiny-drawer title="标题" :placement="placement" v-model:visible="visible">
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -22,7 +18,7 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 const visible = ref(false)
 const placement = ref('right')
 
-function fn(side) {
+function openDrawer(side) {
   placement.value = side
   visible.value = true
 }

package/demos/pc/app/drawer/placement.vue

@@ -1,16 +1,12 @@
 <template>
   <div>
-    <tiny-button @click="fn('left')"> left </tiny-button>
-    <tiny-button @click="fn('right')"> right </tiny-button>
-    <tiny-button @click="fn('top')"> top </tiny-button>
-    <tiny-button @click="fn('bottom')"> bottom </tiny-button>
+    <tiny-button @click="openDrawer('left')"> left </tiny-button>
+    <tiny-button @click="openDrawer('right')"> right </tiny-button>
+    <tiny-button @click="openDrawer('top')"> top </tiny-button>
+    <tiny-button @click="openDrawer('bottom')"> bottom </tiny-button>
 
     <tiny-drawer title="标题" :placement="placement" :visible="visible" @update:visible="visible = $event">
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -30,7 +26,7 @@ export default {
     }
   },
   methods: {
-    fn(side) {
+    openDrawer(side) {
       this.placement = side
       this.visible = true
     }

package/demos/pc/app/drawer/show-close-composition-api.vue

@@ -1,12 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 隐藏关闭图标 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 隐藏关闭图标 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-close="false">
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -17,7 +13,7 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 </script>

package/demos/pc/app/drawer/show-close.vue

@@ -1,12 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 隐藏关闭图标 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 隐藏关闭图标 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-close="false">
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -25,7 +21,7 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     }
   }

package/demos/pc/app/drawer/show-footer-composition-api.vue

@@ -1,13 +1,15 @@
 <template>
   <div>
-    <tiny-button type="primary" @click="showDrawer()"> 显示底部 </tiny-button>
+    <tiny-button type="primary" @click="openDrawer"> 显示底部 </tiny-button>
 
-    <tiny-drawer :show-footer="showFooter" title="标题" :visible="visible" @update:visible="visible = $event">
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+    <tiny-drawer
+      :show-footer="showFooter"
+      title="标题"
+      :visible="visible"
+      @update:visible="visible = $event"
+      @confirm="confirm"
+    >
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -19,7 +21,11 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 const visible = ref(false)
 const showFooter = ref(true)
 
-function showDrawer() {
+function openDrawer() {
   visible.value = true
 }
+
+function confirm() {
+  visible.value = false
+}
 </script>

package/demos/pc/app/drawer/show-footer.vue

@@ -1,13 +1,15 @@
 <template>
   <div>
-    <tiny-button type="primary" @click="showDrawer()"> 显示底部 </tiny-button>
+    <tiny-button type="primary" @click="openDrawer"> 显示底部 </tiny-button>
 
-    <tiny-drawer :show-footer="showFooter" title="标题" :visible="visible" @update:visible="visible = $event">
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+    <tiny-drawer
+      :show-footer="showFooter"
+      title="标题"
+      :visible="visible"
+      @update:visible="visible = $event"
+      @confirm="confirm"
+    >
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -27,8 +29,11 @@ export default {
     }
   },
   methods: {
-    showDrawer() {
+    openDrawer() {
       this.visible = true
+    },
+    confirm() {
+      this.visible = false
     }
   }
 }

package/demos/pc/app/drawer/show-header-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 隐藏头部 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 隐藏头部 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-header="false">
-      <div style="padding: 32px 0">内容区域</div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -13,7 +13,7 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 </script>

package/demos/pc/app/drawer/show-header.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 隐藏头部 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 隐藏头部 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-header="false">
-      <div style="padding: 32px 0">内容区域</div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -21,7 +21,7 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     }
   }

package/demos/pc/app/drawer/tips-props-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="demo-drawer">
-    <tiny-button @click="fn" type="primary"> 展开抽屉 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 展开抽屉 </tiny-button>
     <tiny-drawer title="标题" :tipsProps="tipsProps" :visible="visible" @update:visible="visible = $event">
-      <div>内容区域</div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -17,7 +17,7 @@ const tipsProps = reactive({
   placement: 'right'
 })
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 </script>

package/demos/pc/app/drawer/tips-props.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="demo-drawer">
-    <tiny-button @click="fn" type="primary"> 展开抽屉 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 展开抽屉 </tiny-button>
     <tiny-drawer title="标题" :tipsProps="tipsProps" :visible="visible" @update:visible="visible = $event">
-      <div>内容区域</div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -25,7 +25,7 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     }
   }

package/demos/pc/app/drawer/webdoc/drawer.js

@@ -52,11 +52,12 @@ export default {
     {
       demoId: 'dragable',
       name: {
-        'zh-CN': '宽度拖拽功能',
+        'zh-CN': '宽高可拖拽',
         'en-US': ''
       },
       desc: {
-        'zh-CN': '<p>添加 <code>dragable</code> 属性开启抽屉宽度拖拽功能，默认值为 <code>false</code>。</p>',
+        'zh-CN':
+          '<p>添加 <code>dragable</code> 属性开启抽屉宽度/高度拖拽功能。当抽屉位于左右两侧时可拖拽宽度，上下两侧可拖拽高度。默认值为 <code>false</code>。</p>',
         'en-US': ''
       },
       codeFiles: ['dragable.vue']
@@ -192,7 +193,7 @@ export default {
         'en-US': ''
       },
       desc: {
-        'zh-CN': '<p>关闭抽屉事件。</p>',
+        'zh-CN': '<p>关闭抽屉事件，抽屉关闭时触发。</p>',
         'en-US': ''
       },
       codeFiles: ['close-event.vue']
@@ -204,7 +205,8 @@ export default {
         'en-US': ''
       },
       desc: {
-        'zh-CN': '<p>确认事件，设置 <code>:show-footer="true"</code> 时有效。</p>',
+        'zh-CN':
+          '<p>确认事件，点击确认按钮时触发，设置 <code>:show-footer="true"</code> 且不使用底部插槽 <code>footer</code> 时有效。</p>',
         'en-US': ''
       },
       codeFiles: ['confirm-event.vue']

package/demos/pc/app/drawer/width-composition-api.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <tiny-button @click="fn0" type="primary"> 设置宽度为900px </tiny-button>
-    <tiny-button @click="fn1" plain> 宽度改为700px </tiny-button>
-    <tiny-button @click="fn2" plain> 宽度改为80% </tiny-button>
+    <tiny-button @click="openDrawer0" type="primary"> 设置宽度为900px </tiny-button>
+    <tiny-button @click="openDrawer1" plain> 宽度改为700px </tiny-button>
+    <tiny-button @click="openDrawer2" plain> 宽度改为80% </tiny-button>
 
     <tiny-drawer title="标题" :width="width" :visible="visible" @update:visible="visible = $event">
-      <div style="padding: 32px 0">内容区域</div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -17,16 +17,16 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 const visible = ref(false)
 const width = ref('900px')
 
-function fn0() {
+function openDrawer0() {
   visible.value = true
 }
 
-function fn1() {
+function openDrawer1() {
   width.value = '700px'
   visible.value = true
 }
 
-function fn2() {
+function openDrawer2() {
   width.value = '80%'
   visible.value = true
 }

package/demos/pc/app/drawer/width.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <tiny-button @click="fn0" type="primary"> 设置宽度为900px </tiny-button>
-    <tiny-button @click="fn1" plain> 宽度改为700px </tiny-button>
-    <tiny-button @click="fn2" plain> 宽度改为80% </tiny-button>
+    <tiny-button @click="openDrawer0" type="primary"> 设置宽度为900px </tiny-button>
+    <tiny-button @click="openDrawer1" plain> 宽度改为700px </tiny-button>
+    <tiny-button @click="openDrawer2" plain> 宽度改为80% </tiny-button>
 
     <tiny-drawer title="标题" :width="width" :visible="visible" @update:visible="visible = $event">
-      <div style="padding: 32px 0">内容区域</div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -25,14 +25,14 @@ export default {
     }
   },
   methods: {
-    fn0() {
+    openDrawer0() {
       this.visible = true
     },
-    fn1() {
+    openDrawer1() {
       this.width = '700px'
       this.visible = true
     },
-    fn2() {
+    openDrawer2() {
       this.width = '80%'
       this.visible = true
     }

package/demos/pc/app/drawer/z-index-composition-api.vue

@@ -1,12 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 自定义 z-index </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 自定义 z-index </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :z-index="zIndex">
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -18,7 +14,7 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 const visible = ref(false)
 const zIndex = ref(3000)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 </script>

package/demos/pc/app/drawer/z-index.vue

@@ -1,12 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 自定义 z-index </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 自定义 z-index </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :z-index="zIndex">
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -26,7 +22,7 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     }
   }

package/demos/pc/app/file-upload/show-download-bar-composition-api.vue

@@ -0,0 +1,74 @@
+<template>
+  <tiny-file-upload
+    ref="upload"
+    :action="action"
+    :file-list="fileList"
+    list-type="saas"
+    @download-file="handleDownloadFile"
+  ></tiny-file-upload>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { FileUpload as TinyFileUpload, Modal } from '@opentiny/vue'
+
+const action = ref('http://localhost:3000/api/upload')
+const fileList = reactive([
+  {
+    docId: 'M1T2A1N548572512085860351',
+    path: 'edm/one/',
+    docVersion: 'V1',
+    name: 'test1.png',
+    docSize: 100 * 1024,
+    size: 100 * 1024,
+    serverName: 'ShenZhen'
+  },
+  {
+    docId: 'M1T2A1N548572512085860352',
+    path: 'edm/one/',
+    docVersion: 'V1',
+    name: 'test1.png',
+    docSize: 100 * 1024,
+    size: 100 * 1024,
+    serverName: 'ShenZhen'
+  }
+])
+const handleDownloadFile = (file) => {
+  // 模拟下载成功场景
+  if (file.docId === 'M1T2A1N548572512085860351') {
+    file.showDownloadBar = true
+    file.downloadPercentage = 0
+
+    const timer = setInterval(() => {
+      if (file.downloadPercentage >= 100) {
+        clearInterval(timer)
+        // 下载完成后可以隐藏进度条，因为进度条有过渡动画，所以可以延迟1s再隐藏
+        setTimeout(() => {
+          file.showDownloadBar = false
+        }, 1000)
+
+        Modal.message({ message: '下载成功', status: 'success' })
+        return
+      }
+      file.downloadPercentage += 10
+    }, 300)
+  } else {
+    // 模拟下载失败场景
+    file.showDownloadBar = true
+
+    file.downloadPercentage = 0
+
+    const timer = setInterval(() => {
+      if (file.downloadPercentage >= 50) {
+        clearInterval(timer)
+        // file.showDownloadBar = false
+        file.downloadStatus = 'exception'
+
+        Modal.message({ message: '下载失败', status: 'error' })
+        return
+      }
+      file.downloadPercentage += 10
+    }, 300)
+  }
+}
+</script>

package/demos/pc/app/file-upload/show-download-bar.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义下载进度条展示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('file-upload#show-download-bar')
+
+  const lists = page.locator('.tiny-upload-list-item')
+  const first = lists.first()
+  const firstDownload = first.getByText('下载', { exact: true }).first()
+  const second = lists.nth(1)
+  const secondDownload = second.getByText('下载', { exact: true }).first()
+  const progresss1 = first.getByRole('progressbar')
+  const progresss2 = second.getByRole('progressbar')
+
+  await expect(lists).toHaveCount(2)
+  await first.hover()
+  await firstDownload.click()
+  await page.waitForTimeout(500)
+  await expect(progresss1).toHaveClass(/is-default/)
+  await expect(progresss1).toHaveAttribute('aria-valuenow', '100')
+  await page.locator('div').filter({ hasText: '下载成功' }).nth(1).isVisible()
+  await second.hover()
+  await secondDownload.click()
+  await page.waitForTimeout(500)
+  await expect(progresss2).toHaveClass(/is-exception/)
+  await expect(progresss2).toHaveAttribute('aria-valuenow', '50')
+  await page.locator('div').filter({ hasText: '下载失败' }).nth(1).isVisible()
+})