@opentiny/vue-docs 2.2.19 → 2.2.21

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

@@ -82,12 +82,12 @@ const options2 = ref([
   { value: '选项1', label: '黄金糕' },
   { value: '选项2', label: '双皮奶', disabled: true },
   { value: '选项3', label: '蚵仔煎' },
-  { value: '选项4', label: '龙须面' },
+  { value: '选项4', label: '龙须面', disabled: true },
   { value: '选项5', label: '北京烤鸭' }
 ])
 
 const value1 = ref('')
-const value2 = ref([])
+const value2 = ref(['选项2'])
 const value3 = ref('')
 const value4 = ref(['选项2', '选项3'])
 const value5 = ref(['选项1', '选项2', '选项3', '选项4', '选项5'])

package/demos/pc/app/select/disabled.spec.ts

@@ -19,15 +19,15 @@ test('多选某项禁用', async ({ page }) => {
   const tag = select.locator('.tiny-tag')
   const option = dropdown.locator('.tiny-option')
 
-  await expect(tag).toHaveCount(0)
+  await expect(tag).toHaveCount(1)
   await select.click()
   await expect(option.filter({ hasText: '双皮奶' })).toHaveClass(/is-disabled/)
 
   await option.filter({ hasText: '双皮奶' }).click()
-  await expect(tag).toHaveCount(0)
+  await expect(tag).toHaveCount(1)
 
   await option.filter({ hasText: '黄金糕' }).click()
-  await expect(tag).toHaveCount(1)
+  await expect(tag).toHaveCount(2)
   await expect(tag.filter({ hasText: '黄金糕' })).toHaveCount(1)
 })
 

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

@@ -87,11 +87,11 @@ export default {
         { value: '选项1', label: '黄金糕' },
         { value: '选项2', label: '双皮奶', disabled: true },
         { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' },
+        { value: '选项4', label: '龙须面', disabled: true },
         { value: '选项5', label: '北京烤鸭' }
       ],
       value1: '',
-      value2: [],
+      value2: ['选项2'],
       value3: '',
       value4: ['选项2', '选项3'],
       value5: ['选项1', '选项2', '选项3', '选项4', '选项5']

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

@@ -48,7 +48,6 @@ const value2 = ref([])
 const change = () => {
   Modal.message({
     message: '触发 change 事件',
-    duration: 500,
     status: 'info'
   })
 }

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

@@ -26,7 +26,7 @@ test('单选事件', async ({ page }) => {
 
   await page.waitForTimeout(200)
   await input.hover()
-  await select.locator('.tiny-select__caret').click()
+  await select.locator('.tiny-select__caret.icon-close').click()
   await page.waitForTimeout(500)
   await expect(input).toHaveValue('')
   await expect(model.filter({ hasText: '触发 clear 事件' })).toHaveCount(1)
@@ -42,8 +42,8 @@ test('多选事件', async ({ page }) => {
   const option = dropdown.locator('.tiny-option')
   const model = page.locator('.tiny-modal')
 
+  await page.waitForTimeout(500)
   await select.click()
-  await expect(model.filter({ hasText: '触发 focus 事件' })).toHaveCount(1)
   await expect(model.filter({ hasText: '触发 visible-change 事件' })).toHaveCount(1)
 
   await option.nth(1).click()
@@ -56,7 +56,6 @@ test('多选事件', async ({ page }) => {
 
   await page.waitForTimeout(500)
   await tag.first().locator('.tiny-tag__close').click()
-  await expect(model.filter({ hasText: '触发 blur 事件' })).toHaveCount(1)
   await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(1)
   await expect(model.filter({ hasText: '触发 remove-tag 事件' })).toHaveCount(1)
   await expect(tag).toHaveCount(4)
@@ -66,7 +65,7 @@ test('多选事件', async ({ page }) => {
 
   await page.waitForTimeout(200)
   await select.hover()
-  await select.locator('.tiny-select__caret').click()
+  await select.locator('.tiny-select__caret.icon-close').click()
 
   await expect(tag).toHaveCount(0)
   await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(1)

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

@@ -59,7 +59,6 @@ export default {
     change() {
       Modal.message({
         message: '触发 change 事件',
-        duration: 500,
         status: 'info'
       })
     },

package/demos/pc/app/select/multiple.vue

@@ -3,7 +3,7 @@
     <br />
     <div>场景1：多选</div>
     <br />
-    <tiny-select v-model="value1" multiple>
+    <tiny-select v-model="value1" multiple searchable>
       <tiny-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <br />

package/demos/pc/app/select/nest-grid-remote-composition-api.vue

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <p>场景1：单选，下拉表格远程搜索基础用法</p>
+    <tiny-select
+      v-model="value1"
+      placeholder="请输入关键词"
+      render-type="grid"
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      :grid-op="gridOpRadio"
+    ></tiny-select>
+
+    <p>场景2：单选，下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
+    <tiny-select
+      v-model="value2"
+      placeholder="请输入关键词"
+      render-type="grid"
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      :grid-op="gridOpRadio"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+    ></tiny-select>
+
+    <p>场景3：多选，下拉表格远程搜索基础用法</p>
+    <tiny-select
+      v-model="value3"
+      placeholder="请输入关键词"
+      multiple
+      render-type="grid"
+      reserve-keyword
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      :grid-op="gridOpMultiple"
+    ></tiny-select>
+
+    <p>场景4：多选，下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
+    <tiny-select
+      v-model="value4"
+      placeholder="请输入关键词"
+      multiple
+      reserve-keyword
+      filterable
+      remote
+      render-type="grid"
+      :remote-method="remoteMethod"
+      :grid-op="gridOpMultiple"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+    ></tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Select as TinySelect } from '@opentiny/vue'
+
+const allData = Array.from({ length: 1000 }, (a, i) => {
+  return {
+    value: '00' + i,
+    province: '省份' + i,
+    city: '城市' + i,
+    area: '区域' + i,
+    label: `省${i}-市${i}`
+  }
+})
+const baseGridOp = {
+  data: [],
+  height: 300,
+  optimization: {
+    animat: true,
+    delayHover: 250,
+    scrollX: { gt: 20 },
+    scrollY: { gt: 20 }
+  }
+}
+const baseCols = [
+  { field: 'province', title: '省份' },
+  { field: 'city', title: '城市' },
+  { field: 'area', title: '区域' }
+]
+
+const value1 = ref('')
+const value2 = ref('')
+const value3 = ref([])
+const value4 = ref([])
+const gridOpRadio = {
+  ...baseGridOp,
+  columns: [{ type: 'radio', title: '' }, ...baseCols]
+}
+const gridOpMultiple = {
+  ...baseGridOp,
+  columns: [{ type: 'selection', title: '' }, ...baseCols]
+}
+
+const filter = (value) => {
+  return allData.filter((item) => item.city.includes(value))
+}
+
+const remoteMethod = (value) => {
+  const filterData = filter(value)
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(filterData)
+    }, 500)
+  })
+}
+</script>
+
+<style scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/select/nest-grid-remote.spec.ts

@@ -0,0 +1,135 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('下拉表格远程搜索', () => {
+  test('单选,下拉表格远程搜索基础用法', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('select#nest-grid-remote')
+
+    const wrap = page.locator('#nest-grid-remote')
+    const select = wrap.locator('.tiny-select').nth(0)
+    const input = select.locator('.tiny-input__inner')
+    const dropdown = page.locator('body > .tiny-select-dropdown')
+    const suffixSvg = dropdown.locator('.tiny-input__suffix .tiny-select__caret')
+
+    await expect(suffixSvg).toBeHidden()
+    await expect(dropdown).toBeHidden()
+    await input.focus()
+    await input.fill(' ')
+    await input.press('Enter')
+    await page.waitForTimeout(200)
+    await expect(dropdown).toBeVisible()
+    await expect(dropdown.locator('.tiny-grid__body tbody')).toBeEmpty()
+    await input.fill('1')
+    await input.press('Enter')
+    await page.waitForTimeout(200)
+    await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()
+
+    const row1 = page.getByRole('row', { name: '省份1 城市1 区域1' })
+    const row2 = page.getByRole('row', { name: '省份2 城市2 区域2' })
+    await expect(row2).not.toBeVisible()
+    await row1.getByRole('cell').first().click()
+    await expect(row1).toHaveClass(/row__current/)
+    await expect(input).toHaveValue('省1-市1')
+
+    const row3 = page.getByRole('row', { name: '省份10 城市10 区域10' })
+    await input.click()
+    await row3.getByRole('cell').first().click()
+    await expect(input).toHaveValue('省10-市10')
+  })
+
+  test('单选,下拉表格远程搜索 + 自动搜索 + 显示按钮', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('select#nest-grid-remote')
+
+    const wrap = page.locator('#nest-grid-remote')
+    const select = wrap.locator('.tiny-select').nth(1)
+    const input = select.locator('.tiny-input__inner')
+    const dropdown = page.locator('body > .tiny-select-dropdown')
+    const suffixSvg = select.locator('.tiny-input__suffix .tiny-select__caret')
+
+    await expect(suffixSvg).toBeVisible()
+    await expect(dropdown).toBeHidden()
+    await input.click()
+    await expect(dropdown).toBeVisible()
+    await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()
+    await page.getByRole('row', { name: '省份2 城市2 区域2' }).getByRole('cell').first().click()
+    await expect(input).toHaveValue('省2-市2')
+    await input.click()
+    await expect(page.getByRole('row', { name: '省份2 城市2 区域2' })).toHaveClass(/row__current/)
+    await page.getByRole('row', { name: '省份6 城市6 区域6' }).getByRole('cell').first().click()
+    await expect(input).toHaveValue('省6-市6')
+    await input.click()
+    await expect(page.getByRole('row', { name: '省份6 城市6 区域6' })).toHaveClass(/row__current/)
+    await input.fill(' ')
+    await input.press('Enter')
+    await expect(dropdown).toBeVisible()
+    await expect(dropdown.locator('.tiny-grid__body tbody')).toBeEmpty()
+  })
+
+  test('多选,下拉表格远程搜索基础用法', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('select#nest-grid-remote')
+    const wrap = page.locator('#nest-grid-remote')
+    const select = wrap.locator('.tiny-select').nth(2)
+    const input = select.locator('.tiny-select__input')
+    const dropdown = page.locator('body > .tiny-select-dropdown')
+    const suffixSvg = select.locator('.tiny-input__suffix .tiny-select__caret').first()
+
+    // 下拉按钮不显示
+    await expect(suffixSvg).toBeHidden()
+    await expect(dropdown).toBeHidden()
+
+    await input.fill(' ')
+    await input.press('Enter')
+    await page.waitForTimeout(1000)
+    await expect(dropdown).toBeVisible()
+    await expect(dropdown.locator('.tiny-grid__body tbody')).toBeEmpty()
+    await input.fill('')
+    await input.press('Enter')
+    await page.waitForTimeout(1000)
+    await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()
+    await page.getByRole('row', { name: '省份0 城市0 区域0' }).getByRole('cell').first().click()
+    const tags = page.locator('.tiny-select .tiny-tag')
+    expect((await tags.all()).length).toEqual(1)
+    await expect(tags.first()).toContainText(/市0/)
+    await page.getByRole('row', { name: '省份1 城市1 区域1' }).getByRole('cell').first().click()
+    expect((await tags.all()).length).toEqual(2)
+    await expect(tags.first()).toContainText(/市0/)
+    await expect(tags.nth(1)).toContainText(/市1/)
+  })
+
+  test('多选,下拉表格远程搜索 + 自动搜索 + 显示按钮', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('select#nest-grid-remote')
+
+    const wrap = page.locator('#nest-grid-remote')
+    const select = wrap.locator('.tiny-select').nth(3)
+    const input = select.locator('.tiny-select__input')
+    const dropdown = page.locator('body > .tiny-select-dropdown')
+    const suffixSvg = select.locator('.tiny-input__suffix .tiny-select__caret').first()
+    const tag = select.locator('.tiny-tag')
+
+    await expect(suffixSvg).toBeVisible()
+    await expect(dropdown).toBeHidden()
+    await select.click()
+    await expect(dropdown).toBeVisible()
+    await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()
+
+    await dropdown.getByRole('row', { name: '省份0 城市0 区域0' }).getByRole('cell').first().click()
+
+    expect((await tag.all()).length).toEqual(1)
+    await expect(tag.first()).toContainText(/市0/)
+
+    await dropdown.getByRole('row', { name: '省份1 城市1 区域1' }).getByRole('cell').first().click()
+    expect((await tag.all()).length).toEqual(2)
+    await expect(tag.first()).toContainText(/市0/)
+    await expect(tag.nth(1)).toContainText(/市1/)
+    await tag.nth(0).locator('.tiny-svg').click()
+    await tag.nth(0).locator('.tiny-svg').click()
+    await expect((await tag.all()).length).toEqual(0)
+    await input.fill(' ')
+    await input.press('Enter')
+    await expect(dropdown).toBeVisible()
+    await expect(dropdown.locator('.tiny-grid__body tbody')).toBeEmpty()
+  })
+})

package/demos/pc/app/select/nest-grid-remote.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <p>场景1：单选，下拉表格远程搜索基础用法</p>
+    <tiny-select
+      v-model="value1"
+      placeholder="请输入关键词"
+      render-type="grid"
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      :grid-op="gridOpRadio"
+    ></tiny-select>
+
+    <p>场景2：单选，下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
+    <tiny-select
+      v-model="value2"
+      placeholder="请输入关键词"
+      render-type="grid"
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      :grid-op="gridOpRadio"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+    ></tiny-select>
+
+    <p>场景3：多选，下拉表格远程搜索基础用法</p>
+    <tiny-select
+      v-model="value3"
+      placeholder="请输入关键词"
+      multiple
+      render-type="grid"
+      reserve-keyword
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      :grid-op="gridOpMultiple"
+    ></tiny-select>
+
+    <p>场景4：多选，下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
+    <tiny-select
+      v-model="value4"
+      placeholder="请输入关键词"
+      multiple
+      reserve-keyword
+      filterable
+      remote
+      render-type="grid"
+      :remote-method="remoteMethod"
+      :grid-op="gridOpMultiple"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
+    ></tiny-select>
+  </div>
+</template>
+
+<script>
+import { Select } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect: Select
+  },
+  created() {
+    this.allData = Array.from({ length: 1000 }, (a, i) => {
+      return {
+        value: '00' + i,
+        province: '省份' + i,
+        city: '城市' + i,
+        area: '区域' + i,
+        label: `省${i}-市${i}`
+      }
+    })
+  },
+  data() {
+    const baseGridOp = {
+      data: [],
+      height: 300,
+      optimization: {
+        animat: true,
+        delayHover: 250,
+        scrollX: { gt: 20 },
+        scrollY: { gt: 20 }
+      }
+    }
+    const baseCols = [
+      {
+        field: 'province',
+        title: '省份'
+      },
+      { field: 'city', title: '城市' },
+      {
+        field: 'area',
+        title: '区域'
+      }
+    ]
+    return {
+      allData: [],
+      value1: '',
+      value2: '',
+      value3: [],
+      value4: [],
+      gridOpRadio: {
+        ...baseGridOp,
+        columns: [{ type: 'radio', title: '' }, ...baseCols]
+      },
+      gridOpMultiple: {
+        ...baseGridOp,
+        columns: [{ type: 'selection', title: '' }, ...baseCols]
+      }
+    }
+  },
+  methods: {
+    remoteMethod(value) {
+      const filterData = this.filter(value)
+
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(filterData)
+        }, 500)
+      })
+    },
+    filter(value) {
+      return this.allData.filter((item) => item.city.includes(value))
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/select/size.spec.ts

@@ -35,10 +35,11 @@ test('small 尺寸', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(2)
   const input = select.locator('.tiny-input')
   const tag = select.locator('.tiny-tag')
+  const { height } = await input.locator('.tiny-input__inner').boundingBox()
 
   await expect(input).toHaveClass(/tiny-input-small/)
-  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '32px')
   await expect(tag.nth(0)).toHaveClass(/tiny-tag--small tiny-tag--light/)
+  expect(height).toBeCloseTo(32, 1)
 })
 
 test('mini 尺寸', async ({ page }) => {
@@ -49,8 +50,9 @@ test('mini 尺寸', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(3)
   const input = select.locator('.tiny-input')
   const tag = select.locator('.tiny-tag')
+  const { height } = await input.locator('.tiny-input__inner').boundingBox()
 
   await expect(input).toHaveClass(/tiny-input-mini/)
-  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '24px')
   await expect(tag.nth(0)).toHaveClass(/tiny-tag--mini tiny-tag--light/)
+  expect(height).toBeCloseTo(24, 1)
 })

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

@@ -38,9 +38,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。多选时通过设置 <code>hover-expand</code> 为 <code>true</code> ，默认折叠标签, hover 时展示所有标签。标签内容超长时超出省略，hover 标签时展示 tooltip。</p>\n',
+          '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。设置 <code>show-proportion</code> 可展示当前选中条数和总条数占比，默认值为 <code>false</code> 。设置 <code>hover-expand</code> 为 <code>true</code> ，默认折叠标签, <code>hover</code> 时展示所有标签。标签内容超长时超出省略，<code>hover</code> 标签时展示 <code>tooltip</code> 。</p>\n',
         'en-US':
-          '<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags will be abbreviated and displayed.</p>\n'
+          '<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags are displayed in a thumbnail. Set <code>show-proportion</code> to display the current number of selected items and the proportion of total items, with a default value of <code>false</code> . By setting <code>hover-expand</code> to <code>true</code> , the tags are collapsed by default, and all tags are displayed when hovering. If the content of the tag is too long, it should be omitted. When hovering the tag, a <code>tooltip</code> should be displayed</p>'
       },
       codeFiles: ['collapse-tags.vue']
     },
@@ -460,32 +460,18 @@ export default {
       codeFiles: ['nest-grid-disable.vue']
     },
     {
-      demoId: 'nest-grid-remote-single',
+      demoId: 'nest-grid-remote',
       name: {
-        'zh-CN': '下拉表格远程搜索(单选)',
-        'en-US': 'Select table Remote Search (Single)'
+        'zh-CN': '下拉表格远程搜索',
+        'en-US': 'Select table Remote Search'
       },
       desc: {
-        'zh-CN':
-          '<p>通过 <code>remote</code> 和 <code>remote-method</code> 和 <code>filterable</code> 开启远程搜索。通过 <code>remote-config</code> 设置自动搜索和显示展开按钮 。</p>\n',
-        'en-US':
-          '<p>Enable remote search through <code>remote</code>,<code>remote-method</code>, and <code>filterable</code>. Set up automatic search and display expansion buttons through <code>remote-config</code>.</p>'
-      },
-      codeFiles: ['nest-grid-remote-single.vue']
-    },
-    {
-      demoId: 'nest-grid-remote-multi',
-      name: {
-        'zh-CN': '下拉表格远程搜索(多选）',
-        'en-US': 'Select table Remote Search (Multiple)'
-      },
-      desc: {
-        'zh-CN':
-          '<p>通过 <code>remote</code> 和 <code>remote-method</code> 和 <code>filterable</code> 开启远程搜索。通过 <code>remote-config</code> 设置自动搜索和显示展开按钮。<code>reserve-keyword</code>设置多选选中一个选项后依然保留搜索关键字。</p>\n',
-        'en-US':
-          '<p>Enable remote search through <code>remote</code>,<code>remote-method</code>, and <code>filterable</code>. Set up automatic search and display expansion buttons through <code>remote-config</code> <code>reserve-keyword</code> set to retain search keywords after selecting multiple options.</p>'
+        'zh-CN': `<p>同时使用 <code>remote</code> 和 <code>remote-method</code> 和 <code>filterable</code> 3个属性开启远程搜索。通过 <code>remote-config</code> 设置自动搜索和显示展开按钮。</p>
+          <p>在多选模式下，可通过 <code>reserve-keyword</code>设置选中一个选项后依然保留搜索关键字。</p>`,
+        'en-US': `<p>Enable remote search through <code>remote</code>,<code>remote-method</code>, and <code>filterable</code>. Set up automatic search and display expansion buttons through <code>remote-config</code>.</p>
+          <p>In multiple selection mode, <code>reserve-keyword</code> set to retain search keywords after selecting multiple options.</p>`
       },
-      codeFiles: ['nest-grid-remote-multi.vue']
+      codeFiles: ['nest-grid-remote.vue']
     },
     {
       demoId: 'nest-grid-init-query',

package/demos/pc/app/skeleton/animation-composition-api.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <tiny-button @click="handler">{{ animated ? '关闭' : '开启' }}</tiny-button>
+    <br /><br />
+    <tiny-skeleton :animated="animated">
+      <template #placeholder>
+        <tiny-skeleton-item></tiny-skeleton-item>
+        <br />
+        <br />
+        <tiny-skeleton-item variant="image"></tiny-skeleton-item>
+      </template>
+    </tiny-skeleton>
+  </div>
+</template>
+
+<script setup>
+import { Skeleton as TinySkeleton, Button as TinyButton, SkeletonItem as TinySkeletonItem } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const animated = ref(true)
+
+const handler = () => {
+  animated.value = !animated.value
+}
+</script>

package/demos/pc/app/skeleton/animation.spec.ts

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test'
+
+test('动画效果', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('skeleton#animation')
+
+  const square = page.locator('.tiny-skeleton-item--square')
+  const image = page.locator('.tiny-skeleton-item--image')
+
+  // 测试动画效果
+  await expect(square).toHaveClass(/tiny-skeleton-item--active/)
+  await expect(image).toHaveClass(/tiny-skeleton-item--active/)
+
+  const button = page.locator('.tiny-button')
+  await button.click()
+  await page.waitForTimeout(500)
+  await expect(square).toHaveClass(/tiny-skeleton-item/)
+  await expect(image).toHaveClass(/tiny-skeleton-item/)
+})

package/demos/pc/app/skeleton/animation.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <tiny-button @click="handler">{{ animated ? '关闭' : '开启' }}</tiny-button>
+    <br /><br />
+    <tiny-skeleton :animated="animated">
+      <template #placeholder>
+        <tiny-skeleton-item></tiny-skeleton-item>
+        <br />
+        <br />
+        <tiny-skeleton-item variant="image"></tiny-skeleton-item>
+      </template>
+    </tiny-skeleton>
+  </div>
+</template>
+
+<script>
+import { Skeleton, SkeletonItem, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySkeleton: Skeleton,
+    TinySkeletonItem: SkeletonItem,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      animated: true
+    }
+  },
+  methods: {
+    handler() {
+      this.animated = !this.animated
+    }
+  }
+}
+</script>