@opentiny/vue-docs 3.16.1 → 3.17.0

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

@@ -1,15 +1,15 @@
 <template>
   <div class="demo-drawer">
-    <tiny-button @click="toggleDrawer(true)" type="primary"> 点击展开 Drawer </tiny-button>
+    <tiny-button type="primary" @click="showDrawer"> 点击展开 Drawer </tiny-button>
     <tiny-drawer
+      ref="drawer"
       title="抽屉关闭将会被拦截"
-      :visible="visible"
-      @update:visible="visible = $event"
-      @confirm="confirm"
       show-footer
+      :visible="visible"
       :before-close="onBeforeClose"
+      @update:visible="visible = $event"
     >
-      <tiny-button @click="toggleDrawer(false)" type="primary"> 关闭 Drawer </tiny-button>
+      <tiny-button type="primary" @click="forceClose"> 强制关闭 Drawer </tiny-button>
     </tiny-drawer>
   </div>
 </template>
@@ -28,15 +28,15 @@ export default {
     }
   },
   methods: {
-    toggleDrawer(value) {
-      this.visible = value
+    showDrawer() {
+      this.visible = true
+    },
+    forceClose() {
+      this.$refs.drawer.close(true)
     },
     onBeforeClose(type) {
       Modal.message({ message: `beforeClose 回调参数 type =  ${type}`, status: 'info', duration: 5000 })
       return false
-    },
-    confirm() {
-      this.visible = false
     }
   }
 }

package/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>

package/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' })
     }
   }
 }

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

@@ -0,0 +1,45 @@
+<template>
+  <div class="demo-drawer">
+    <tiny-button type="primary" @click="showDrawer"> 点击打开抽屉 </tiny-button>
+    <tiny-drawer
+      title="事件示例"
+      :show-footer="true"
+      :visible="visible"
+      @update:visible="visible = $event"
+      @open="onOpen"
+      @close="onClose"
+      @confirm="onConfirm"
+    >
+      <div class="content">
+        <span>内容区域</span>
+      </div>
+    </tiny-drawer>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Drawer as TinyDrawer, Button as TinyButton, Modal } from '@opentiny/vue'
+
+const visible = ref(false)
+
+const showDrawer = () => {
+  visible.value = true
+}
+
+const onOpen = () => {
+  Modal.message({ message: '打开事件', status: 'info' })
+}
+const onClose = () => {
+  Modal.message({ message: '关闭事件', status: 'info' })
+}
+const onConfirm = () => {
+  Modal.message({ message: '确定事件', status: 'info' })
+}
+</script>
+
+<style scoped>
+.content {
+  padding: 20px 0;
+}
+</style>

package/demos/pc/app/drawer/events.spec.ts

@@ -0,0 +1,35 @@
+import { test, expect } from '@playwright/test'
+
+test('事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('drawer#events')
+
+  const drawer = page.locator('.tiny-drawer__main')
+
+  // 显示事件
+  const showMsg = page.locator('.tiny-modal.type__message').filter({ hasText: '打开事件' }).first()
+  await page.getByRole('button', { name: '点击打开抽屉' }).click()
+  await expect(showMsg).toBeVisible()
+  await expect(drawer).toBeVisible()
+
+  // 确定事件
+  const confirmMsg = page.locator('.tiny-modal.type__message').filter({ hasText: '确定事件' }).first()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(confirmMsg).toBeVisible()
+  await expect(drawer).not.toBeVisible()
+
+  // 关闭事件
+  const closeMsg = page.locator('.tiny-modal.type__message').filter({ hasText: '关闭事件' }).first()
+  await page.getByRole('button', { name: '点击打开抽屉' }).click()
+  // 右上角关闭按钮
+  await drawer.locator('.tiny-drawer__headerbtn').click()
+  await expect(closeMsg).toBeVisible()
+  // 底部按钮关闭
+  await page.getByRole('button', { name: '点击打开抽屉' }).click()
+  await page.getByRole('button', { name: '取消' }).click()
+  await expect(closeMsg).toBeVisible()
+  // 点击蒙层关闭
+  await page.getByRole('button', { name: '点击打开抽屉' }).click()
+  await page.locator('.tiny-drawer__mask').click()
+  await expect(closeMsg).toBeVisible()
+})

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="demo-drawer">
+    <tiny-button type="primary" @click="showDrawer"> 点击打开抽屉 </tiny-button>
+    <p>{{ visible }}</p>
+    <tiny-drawer
+      title="事件示例"
+      :show-footer="true"
+      :visible="visible"
+      @update:visible="visible = $event"
+      @open="onOpen"
+      @close="onClose"
+      @confirm="onConfirm"
+    >
+      <div class="content">
+        <span>内容区域</span>
+      </div>
+    </tiny-drawer>
+  </div>
+</template>
+
+<script>
+import { Drawer, Button, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDrawer: Drawer,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    showDrawer() {
+      this.visible = true
+    },
+    onOpen() {
+      Modal.message({ message: '打开事件', status: 'info' })
+    },
+    onClose() {
+      Modal.message({ message: '关闭事件', status: 'info' })
+    },
+    onConfirm() {
+      Modal.message({ message: '确定事件', status: 'info' })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.content {
+  padding: 20px 0;
+}
+</style>

package/demos/pc/app/drawer/use-through-method-composition-api.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="tiny-demo-drawer">
+    <tiny-button @click="showDrawer" type="primary"> 点击打开抽屉 </tiny-button>
+  </div>
+</template>
+
+<script lang="tsx" setup>
+import { ref } from 'vue'
+import { Drawer, Button as TinyButton } from '@opentiny/vue'
+import { iconHelp } from '@opentiny/vue-icon'
+
+let drawerInstance = null
+
+const closeDrawer = () => {
+  if (drawerInstance) {
+    drawerInstance.close()
+  }
+}
+const IconHelp = iconHelp()
+const config = ref({
+  // props
+  title: '这是一个通过方法打开的抽屉',
+  showClose: false,
+  showFooter: true,
+  // 通过 events 监听事件
+  events: {
+    open: (instance) => console.log('open 事件', instance),
+    close: () => console.log('close 事件')
+  },
+  // 通过属性 customSlots 设置插槽, 插槽内容可以是 string | VNode | ({h, $drawer}) => VNode
+  customSlots: {
+    // 使用 h 函数
+    default: (h) => h('p', { class: 'drawer-content' }, '抽屉主体内容。'),
+    // 返回 VNode 节点的方法, 可通过参数中 $drawer 访问到组件实例
+    headerRight: () => <IconHelp></IconHelp>,
+    // 直接赋值 VNode
+    footer: (
+      <TinyButton type="primary" onClick={closeDrawer}>
+        点击关闭
+      </TinyButton>
+    )
+  }
+})
+const showDrawer = () => {
+  drawerInstance = Drawer.service(config.value)
+}
+</script>
+
+<style scope>
+.drawer-content {
+  padding: 20px 0;
+}
+</style>

package/demos/pc/app/drawer/use-through-method.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('通过方法调用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('drawer#use-through-method')
+
+  const drawer = page.locator('.tiny-drawer__main')
+  await page.getByRole('button', { name: '点击打开抽屉' }).click()
+  await expect(drawer).toBeVisible()
+  await expect(drawer.locator('.tiny-drawer__header')).toHaveText('这是一个通过方法打开的抽屉')
+  await expect(drawer.locator('.tiny-drawer__body')).toHaveText('抽屉主体内容。')
+  await drawer.getByRole('button', { name: '点击关闭' }).click()
+  await expect(page.locator('.tiny-drawer__main')).not.toBeVisible()
+})

package/demos/pc/app/drawer/use-through-method.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="tiny-demo-drawer">
+    <tiny-button @click="showDrawer" type="primary"> 点击打开抽屉 </tiny-button>
+  </div>
+</template>
+
+<script lang="tsx">
+import { Drawer, Button } from '@opentiny/vue'
+import { iconHelp } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  data() {
+    return {
+      drawerInstance: null
+    }
+  },
+  methods: {
+    showDrawer() {
+      const IconHelp = iconHelp()
+      const config = {
+        // props
+        title: '这是一个通过方法打开的抽屉',
+        showClose: false,
+        showFooter: true,
+        // 通过 events 监听事件
+        events: {
+          open: (instance) => console.log('open 事件', instance),
+          close: () => console.log('close 事件')
+        },
+        // 通过属性 customSlots 设置插槽, 插槽内容可以是 string | VNode | ({h, $drawer}) => VNode
+        customSlots: {
+          // 使用 h 函数
+          default: (h) => h('p', { class: 'drawer-content' }, '抽屉主体内容。'),
+          // 返回 VNode 节点的方法, 可通过参数中 $drawer 访问到组件实例
+          headerRight: () => <IconHelp></IconHelp>,
+          // 直接赋值 VNode
+          footer: (
+            <Button type="primary" onClick={this.closeDrawer}>
+              点击关闭
+            </Button>
+          )
+        }
+      }
+      this.drawerInstance = Drawer.service(config)
+    },
+    closeDrawer() {
+      this.drawerInstance.close()
+    }
+  }
+}
+</script>
+
+<style scope>
+.drawer-content {
+  padding: 20px 0;
+}
+</style>

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

@@ -14,6 +14,16 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
+    {
+      demoId: 'use-through-method',
+      name: { 'zh-CN': '通过方法调用', 'en-US': 'Use through method' },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>Drawer.service</code> 方法可配置并打开抽屉，方法返回组件实例，可调用其 <code>close</code> 方法关闭组件。</p>',
+        'en-US': ''
+      },
+      codeFiles: ['use-through-method.vue']
+    },
     {
       demoId: 'placement',
       name: {
@@ -81,8 +91,14 @@ export default {
         'en-US': 'Block Drawer Close'
       },
       desc: {
-        'zh-CN':
-          '\n          <p>通过 <code>before-close</code> 属性可以配置一个拦截弹窗关闭的方法。如果方法返回 <code>false</code> 值，则拦截弹窗关闭；否则不拦截。</p>\n          <p>可以通过该拦截方法传入的参数获取关闭的操作类型 <code>type</code> 弹窗有以下关闭类型：</p>\n          <ul>\n            <li>confirm：点击确认时关闭</li>\n            <li>cancel：点击取消时关闭</li>\n            <li>close：点击关闭按钮时关闭</li>\n            <li>mask：点击遮罩层时关闭</li>\n          </ul>\n        ',
+        'zh-CN': `<p>通过 <code>before-close</code> 属性可以配置一个拦截弹窗关闭的方法。如果方法返回 <code>false</code> 值，则拦截弹窗关闭；否则不拦截。</p>
+          <p>可以通过该拦截方法传入的参数获取关闭的操作类型 <code>type</code> 弹窗有以下关闭类型：</p>
+          <ul>
+            <li>confirm：点击确定按钮时关闭</li>
+            <li>cancel：点击取消时关闭</li>
+            <li>close：点击关闭按钮时关闭</li>
+            <li>mask：点击遮罩层时关闭</li>
+          </ul>`,
         'en-US':
           '<p>The <code>before-close</code> attribute can be used to configure a method that intercepts closing of the pop-up window. If the method returns a value of <code>false</code>, then the pop-up window is prevented from closing; otherwise it is not intercepted.</p>\n          <p>The parameter passed through this interception method can be used to obtain the type of closing operation <code>type</code> for the pop-up window. The following are the types of closing operations:</p>\n          <ul>\n            <li>confirm: click confirm button</li>\n            <li>cancel: click cancel button</li>\n            <li>close: click close button</li>\n            <li>mask: click mask</li>\n          </ul>\n          '
       },
@@ -187,29 +203,25 @@ export default {
       codeFiles: ['footer-slot.vue']
     },
     {
-      demoId: 'close-event',
-      name: {
-        'zh-CN': '关闭事件',
-        'en-US': ''
-      },
-      desc: {
-        'zh-CN': '<p>关闭抽屉事件，抽屉关闭时触发。</p>',
-        'en-US': ''
-      },
-      codeFiles: ['close-event.vue']
-    },
-    {
-      demoId: 'confirm-event',
+      demoId: 'events',
       name: {
-        'zh-CN': '确认事件',
+        'zh-CN': '事件',
         'en-US': ''
       },
       desc: {
-        'zh-CN':
-          '<p>确认事件，点击确认按钮时触发，设置 <code>:show-footer="true"</code> 且不使用底部插槽 <code>footer</code> 时有效。</p>',
+        'zh-CN': `
+          <p><code>open</code>：当抽屉打开时触发；</p>
+          <p><code>confirm</code>：当抽屉底部确定按钮点击时触发，该按钮仅当设置 <code>show-footer</code> 属性为 true 时可见；</p>
+          <p><code>close</code>：当抽屉关闭时触发。关闭抽屉的途径有：</p>
+            <ul>
+              <li>点击右上角关闭按钮；</li>
+              <li>点击遮罩层，仅当 <code>mask-closable</code> 属性为 true 时有效；</li>
+              <li>点击底部取消按钮，该按钮仅当设置 <code>show-footer</code> 属性为 true 时可见；</li>
+              <li>通过组件实例的 <code>close</code> 方法触发。</li>
+            </ul>`,
         'en-US': ''
       },
-      codeFiles: ['confirm-event.vue']
+      codeFiles: ['events.vue']
     }
   ]
 }

package/demos/pc/app/drop-roles/basic-usage-composition-api.vue

@@ -24,3 +24,11 @@ function change(role) {
   })
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>

package/demos/pc/app/drop-roles/basic-usage.vue

@@ -32,3 +32,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>

package/demos/pc/app/drop-roles/size-composition-api.vue

@@ -24,3 +24,11 @@ function change(role) {
   })
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>

package/demos/pc/app/drop-roles/size.vue

@@ -32,3 +32,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>

package/demos/pc/app/drop-times/basic-usage-composition-api.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="drop-time-demo-basic">
     <tiny-drop-times v-model="value" placeholder="请选择" @change="change"></tiny-drop-times>
+    <br /><br />
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>

package/demos/pc/app/drop-times/basic-usage.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="drop-time-demo-basic">
     <tiny-drop-times v-model="value" placeholder="请选择" @change="change"></tiny-drop-times>
+    <br /><br />
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>

package/demos/pc/app/dropdown/disabled-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：下拉菜单禁用</p>
+    <p class="demo-dropdown">场景1：下拉菜单禁用</p>
     <tiny-dropdown disabled>
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -12,7 +12,8 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>场景2：按钮类型禁用</p>
+    <br /><br />
+    <p class="demo-dropdown">场景2：按钮类型禁用</p>
     <tiny-dropdown split-button disabled>
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -24,7 +25,8 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>场景3：菜单项禁用</p>
+    <br /><br />
+    <p class="demo-dropdown">场景3：菜单项禁用</p>
     <tiny-dropdown>
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -46,3 +48,9 @@ import {
   DropdownItem as TinyDropdownItem
 } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.demo-dropdown {
+  margin-bottom: 8px;
+}
+</style>

package/demos/pc/app/dropdown/disabled.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：下拉菜单禁用</p>
+    <p class="demo-dropdown">场景1：下拉菜单禁用</p>
     <tiny-dropdown disabled>
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -12,7 +12,8 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>场景2：按钮类型禁用</p>
+    <br /><br />
+    <p class="demo-dropdown">场景2：按钮类型禁用</p>
     <tiny-dropdown split-button disabled>
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -24,7 +25,8 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>场景3：菜单项禁用</p>
+    <br /><br />
+    <p class="demo-dropdown">场景3：菜单项禁用</p>
     <tiny-dropdown>
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -56,4 +58,7 @@ p {
   line-height: 1.5;
   font-size: 14px;
 }
+.demo-dropdown {
+  margin-bottom: 8px;
+}
 </style>

package/demos/pc/app/dropdown/events-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：按钮类型 + 循环 tiny-dropdown-item</p>
+    <p class="demo-dropdown">场景1：按钮类型 + 循环 tiny-dropdown-item</p>
 
     <tiny-dropdown split-button @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
       <template #dropdown>
@@ -17,8 +17,8 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-
-    <p>场景2：配置式</p>
+    <br /><br />
+    <p class="demo-dropdown">场景2：配置式</p>
     <tiny-dropdown class="options-event" @item-click="itemClick" @visible-change="visibleChange">
       <template #dropdown>
         <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
@@ -64,7 +64,7 @@ const itemClick = (data, vm) => {
   Notify({
     type: 'info',
     title: 'itemClick 回调事件',
-    message: `使用 dropdown-item 的label属性：${data.vm.label},\n 使用 dropdown-item 的默认插槽：${data.vm.$el.innerText}`,
+    message: `使用 dropdown-item 的label属性：${label},\n 使用 dropdown-item 的默认插槽：${data.vm.$el.innerText}`,
     position: 'top-right',
     duration: 2000
   })
@@ -87,4 +87,7 @@ p {
   line-height: 1.5;
   font-size: 14px;
 }
+.demo-dropdown {
+  margin-bottom: 8px;
+}
 </style>

package/demos/pc/app/dropdown/events.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：按钮类型 + 循环 tiny-dropdown-item</p>
+    <p class="demo-dropdown">场景1：按钮类型 + 循环 tiny-dropdown-item</p>
     <tiny-dropdown split-button @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
       <template #dropdown>
         <tiny-dropdown-menu>
@@ -16,8 +16,9 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
+    <br /><br />
 
-    <p>场景2：配置式</p>
+    <p class="demo-dropdown">场景2：配置式</p>
     <tiny-dropdown class="options-event" @item-click="itemClick" @visible-change="visibleChange">
       <template #dropdown>
         <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
@@ -91,4 +92,7 @@ p {
   line-height: 1.5;
   font-size: 14px;
 }
+.demo-dropdown {
+  margin-bottom: 8px;
+}
 </style>