@opentiny/vue-docs 1.0.2 → 1.0.3

package/resources/pc/demo/select/search-allow-copy.vue

@@ -1,7 +1,27 @@
 <template>
-  <tiny-select ref="select" v-model="value" placeholder="请选择" filterable :filter-method="filter" clearable allow-copy>
-    <tiny-option v-for="item in options" v-show="!item.filter" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
+  <div>
+    <tiny-select
+      ref="select"
+      v-model="value"
+      placeholder="请选择"
+      filterable
+      :filter-method="filter"
+      clearable
+      allow-copy
+    >
+      <tiny-option
+        v-for="item in options"
+        v-show="!item.filter"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      >
+      </tiny-option>
+    </tiny-select>
+
+    <p>复制到此处：</p>
+    <input class="custom" type="text" />
+  </div>
 </template>
 
 <script lang="jsx">

package/resources/pc/demo/select/searchable.spec.ts

@@ -0,0 +1,49 @@
+import { expect, test } from '@playwright/test'
+
+test('searchable-multiple', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/searchable')
+  const select = page.locator('#preview .tiny-select').first()
+  const dropdown = page.locator('.tiny-select-dropdown').nth(1)
+  const options = dropdown.locator('.tiny-option')
+  const searchInput = dropdown.locator('.tiny-input__inner')
+  const tags = select.locator('.tiny-tag')
+
+  await expect(searchInput).toBeHidden()
+  await select.click()
+  await page.waitForTimeout(500)
+  await expect(searchInput).toBeVisible()
+  await searchInput.fill('双皮奶')
+  await searchInput.press('Enter')
+  await page.waitForTimeout(500)
+  const hiddenOptions = await options.filter({ hasNotText: /双皮奶|全部/ }).all()
+  hiddenOptions.forEach(async (item) => {
+    await expect(item).toHaveCSS('display', 'none')
+  })
+  await page.getByRole('listitem').filter({ hasText: '双皮奶' }).click()
+  await page.waitForTimeout(500)
+  await expect((await tags.all()).length).toEqual(1)
+})
+
+test('searchable-single', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/searchable')
+  const select = page.locator('#preview .tiny-select').nth(1)
+  const input = page.locator('#preview .tiny-input__inner').nth(2)
+  const dropdown = page.locator('.tiny-select-dropdown').nth(1)
+  const options = dropdown.locator('.tiny-option')
+  const searchInput = dropdown.locator('.tiny-input__inner')
+
+  await expect(searchInput).toBeHidden()
+  await select.click()
+  await page.waitForTimeout(500)
+  await expect(searchInput).toBeVisible()
+  await searchInput.fill('双皮奶')
+  await searchInput.press('Enter')
+  await page.waitForTimeout(500)
+  const hiddenOptions = await options.filter({ hasNotText: /双皮奶|全部/ }).all()
+  hiddenOptions.forEach(async (item) => {
+    await expect(item).toHaveCSS('display', 'none')
+  })
+  await page.getByRole('listitem').filter({ hasText: '双皮奶' }).click()
+  await page.waitForTimeout(500)
+  await expect(input).toHaveValue('双皮奶')
+})

package/resources/pc/demo/select/set-input-value.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('set-input-value', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/set-input-value')
+  const tags = page.locator('#preview .tiny-select .tiny-tag')
+
+  await page.getByRole('button', { name: '设置value值' }).click()
+  await page.waitForTimeout(500)
+  await expect((await tags.all()).length).toEqual(1)
+  await expect(tags.first()).toHaveText(/龙须面/)
+})

package/resources/pc/demo/select/show-alloption.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('show-alloption', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/show-alloption')
+  const select = page.locator('#preview .tiny-select')
+  const options = page.locator('.tiny-select-dropdown').locator('.tiny-option')
+
+  await select.click()
+  await page.waitForTimeout(500)
+  await expect(options.filter({ hasText: '全部' })).toBeHidden()
+})

package/resources/pc/demo/select/size-medium.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('size-medium', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/size-medium')
+
+  const input = page.locator('#preview .tiny-input')
+  await expect(input).toHaveClass(/tiny-input-medium/)
+})

package/resources/pc/demo/select/size-mini.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('size-mini', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/size-mini')
+
+  const input = page.locator('#preview .tiny-input')
+  await expect(input).toHaveClass(/tiny-input-mini/)
+})

package/resources/pc/demo/select/size-small.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('size-small', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/size-small')
+
+  const input = page.locator('#preview .tiny-input')
+  await expect(input).toHaveClass(/tiny-input-small/)
+})

package/resources/pc/demo/select/slot-default.spec.ts

@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test'
+
+test('slot-default', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/slot-default')
+
+  const input = page.locator('#preview .tiny-input__inner')
+  const options = page.locator('.tiny-select-dropdown').locator('.tiny-option')
+  await input.click()
+  await page.waitForTimeout(1000)
+  await expect(options.filter({ hasText: '选项1' })).toBeVisible()
+})

package/resources/pc/demo/select/slot-empty.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test'
+
+test('slot-empty', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/slot-empty')
+
+  const input = page.locator('#preview .tiny-input__inner')
+  const options = page.locator('.tiny-select-dropdown').locator('.tiny-option')
+  await input.click()
+  await page.waitForTimeout(1000)
+  await expect((await options.all()).length).toEqual(0)
+  await expect(page.locator('.tiny-select-dropdown')).toHaveText('没有选项')
+})

package/resources/pc/demo/select/slot-footer.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test'
+
+test('slot-footer', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/slot-footer')
+
+  const input = page.locator('#preview .tiny-input__inner')
+  const options = page.locator('.tiny-select-dropdown').locator('.tiny-option')
+  await input.click()
+  await page.waitForTimeout(1000)
+  await expect((await options.all()).length).toEqual(5)
+  await expect(page.locator('.select-footer')).toHaveText('底部插槽')
+})

package/resources/pc/demo/select/tag-copy-all.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test'
+
+test('tag-copy-all', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/tag-copy-all')
+  const select = page.locator('#preview .tiny-select')
+
+  await select.hover()
+  await page.locator('.tiny-select__copy > .tiny-svg > .st0').click()
+  const copyValueInput = page.locator('.copy-value')
+  await copyValueInput.press('Control+V')
+  await expect(copyValueInput).toHaveValue('黄金糕')
+})

package/resources/pc/demo/select/tag-copy-all.vue

@@ -1,7 +1,18 @@
 <template>
-  <tiny-select ref="select" v-model="value" placeholder="请选择" multiple copyable>
-    <tiny-option v-for="item in options" v-show="!item.filter" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
+  <div>
+    <tiny-select ref="select" v-model="value" placeholder="请选择" multiple copyable>
+      <tiny-option
+        v-for="item in options"
+        v-show="!item.filter"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      >
+      </tiny-option>
+    </tiny-select>
+    <p>复制到此处：</p>
+    <input class="copy-value" type="text" />
+  </div>
 </template>
 
 <script lang="jsx">

package/resources/pc/demo/select/tag-select.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('tag-select', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/select/tag-select')
+
+  await page.mouse.move(345, 324)
+  await page.waitForTimeout(1000)
+  await page.mouse.down()
+  await page.waitForTimeout(1000)
+  await page.mouse.move(278, 324)
+  await page.waitForTimeout(200)
+  await page.mouse.up()
+  await page.keyboard.press('Control+C')
+  const valueInput = page.locator('.copy-value')
+  await expect(valueInput).toHaveValue('')
+  await valueInput.focus()
+  await page.keyboard.press('Control+V')
+  await page.waitForTimeout(200)
+  await expect(valueInput).toHaveValue('黄金糕')
+})

package/resources/pc/demo/select/tag-select.vue

@@ -1,7 +1,18 @@
 <template>
-  <tiny-select ref="select" v-model="value" placeholder="请选择" multiple tag-selectable>
-    <tiny-option v-for="item in options" v-show="!item.filter" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-  </tiny-select>
+  <div>
+    <tiny-select ref="select" v-model="value" placeholder="请选择" multiple tag-selectable>
+      <tiny-option
+        v-for="item in options"
+        v-show="!item.filter"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      >
+      </tiny-option>
+    </tiny-select>
+    <p>复制到此处：</p>
+    <input class="copy-value" type="text" />
+  </div>
 </template>
 
 <script lang="jsx">

package/resources/pc/demo/slide-bar/basic-usage.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('基础用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/slide-bar/basic-usage')
+  const preview = page.locator('#preview')
+  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
+  const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
+  await slideBarList.locator('li').first().click()
+  await page.mouse.wheel(0, 100)
+  await expect(slideBarList.locator('li').first()).toHaveCSS('border-color', 'rgba(153, 153, 153, 0.7)')
+  await preview.locator('.icon-chevron-right').click()
+  // 单个滚动块的宽度为 width + marginLeft，固定值为196px
+  await expect(slideBarList).toHaveCSS('left', '-196px')
+  await preview.locator('.icon-chevron-left').click()
+  await expect(slideBarList).toHaveCSS('left', '0px')
+})

package/resources/pc/demo/slide-bar/custom-content.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义滚动块内容', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/slide-bar/custom-content')
+  const preview = page.locator('#preview')
+  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
+  const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
+  await expect(slideBarList.first().locator('li span').first()).toContainText('标题')
+  await expect(slideBarList.first().locator('li div').first()).toContainText('语言')
+})

package/resources/pc/demo/slide-bar/custom-tag.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义 DOM 标签', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/slide-bar/custom-tag')
+  const preview = page.locator('#preview')
+  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
+  const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
+  // 自定义的标签为 div
+  await expect(slideBarList.locator('li').first().locator('div')).toHaveCount(3)
+})

package/resources/pc/demo/slide-bar/slide-bar-events.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('滚动块事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/slide-bar/slide-bar-events')
+  const preview = page.locator('#preview')
+  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
+  const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
+  await slideBarList.locator('li').first().click()
+  await expect(page.locator('.tiny-modal').filter({ hasText: 'before-click 事件' })).toBeVisible()
+  await expect(page.locator('.tiny-modal').filter({ hasText: 'click 事件，回调参数：' })).toBeVisible()
+})

package/resources/pc/demo/slide-bar/slide-bar-events.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-slide-bar v-model="list" :init-blocks="initBlocks" @click="handleClick" @before-click="beforClick"></tiny-slide-bar>
+  <tiny-slide-bar v-model="list" :init-blocks="initBlocks" @click="handleClick" @before-click="beforeClick"></tiny-slide-bar>
 </template>
 
 <script lang="jsx">
@@ -32,7 +32,7 @@ export default {
         status: 'info'
       })
     },
-    beforClick() {
+    beforeClick() {
       Modal.message({ message: 'before-click 事件', status: 'info' })
     }
   }

package/resources/pc/demo/slide-bar/wheel-blocks.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('每次滚动块数', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/slide-bar/wheel-blocks')
+  const preview = page.locator('#preview')
+  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
+  const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
+  await slideBarList.first().click()
+  await preview.locator('.icon-chevron-right').click()
+  // 单个滚动块的宽度固定为196px，所以应为 196px * 2
+  await expect(slideBarList).toHaveCSS('left', '-392px')
+  await preview.locator('.icon-chevron-right').click()
+  await expect(slideBarList).toHaveCSS('left', '-976px')
+  await preview.locator('.icon-chevron-left').click()
+  await expect(slideBarList).toHaveCSS('left', '0px')
+})

package/resources/pc/demo/slider/about-step.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('步长', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/slider/about-step')
+  const preview = page.locator('#preview')
+  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  const sliderBlock = slider.locator('div').nth(1)
+  // 获取进度条的宽度
+  const { width: sliderWidth } = await slider.boundingBox()
+  const { x, y } = await sliderBlock.boundingBox()
+
+  await sliderBlock.hover()
+  await page.mouse.down()
+  await page.mouse.move(sliderWidth * 0.08 + x, y)
+  const sliderTip = slider.locator('div').nth(2)
+  await expect(sliderTip).toHaveText('30')
+  await page.waitForTimeout(300)
+  await page.mouse.up()
+})

package/resources/pc/demo/slider/basic-usage.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('基础用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/slider/shortcut-operation')
+  const preview = page.locator('#preview')
+  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  const sliderBlock = slider.locator('div').nth(1)
+  // 获取进度条的宽度
+  const { width: sliderWidth } = await slider.boundingBox()
+  // 获取当前滑块位置
+  const { x, y } = await sliderBlock.boundingBox()
+  await sliderBlock.hover()
+  await page.mouse.down()
+  // 滑块向右移动百分之二十
+  await page.mouse.move(sliderWidth * 0.2 + x, y)
+  const sliderTip = slider.locator('div').nth(2)
+  await expect(sliderTip).toHaveText('39')
+  await page.mouse.up()
+})

package/resources/pc/demo/slider/dynamic-disable.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('禁用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/slider/dynamic-disable')
+
+  // 判断按钮禁用
+  const preview = page.locator('#preview')
+  const slider = preview.locator('.tiny-slider__wrapper div')
+  await expect(slider).toBeDisabled
+})

package/resources/pc/demo/slider/format-tooltip.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('当前值', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/slider/format-tooltip')
+  const preview = page.locator('#preview')
+  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  const sliderText = slider.locator('div').nth(2)
+  await expect(sliderText).toHaveText('当前值为：20')
+})

package/resources/pc/demo/slider/max-min.spec.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test'
+
+test('最大值最小值', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/slider/(max-min')
+  const preview = page.locator('#preview')
+  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  const sliderBlock = slider.locator('div').nth(1)
+  // 获取进度条的宽度
+  const { width: sliderWidth } = await slider.boundingBox()
+  const { x, y } = await sliderBlock.boundingBox()
+
+  await sliderBlock.hover()
+  await page.mouse.down()
+  await page.mouse.move(sliderWidth * -0.3 + x, y)
+  const sliderTip = slider.locator('div').nth(2)
+  await expect(sliderTip).toHaveText('0')
+  await page.waitForTimeout(3000)
+  await page.mouse.move(sliderWidth * 0.81 + x, y)
+  const sliderTip1 = slider.locator('div').nth(2)
+  await expect(sliderTip1).toHaveText('100')
+  await page.waitForTimeout(3000)
+  await page.mouse.up()
+})

package/resources/pc/demo/slider/range-select.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from '@playwright/test'
+
+test('范围选择', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/slider/range-select')
+  const preview = page.locator('#preview')
+  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  const sliderBlock1 = slider.locator('div').nth(1)
+  const sliderBlock2 = slider.locator('div').nth(2)
+  // 获取进度条的宽度
+  const { width: sliderWidth } = await slider.boundingBox()
+  const { x, y } = await sliderBlock1.boundingBox()
+
+  await sliderBlock1.hover()
+  await page.mouse.down()
+  await page.mouse.move(sliderWidth * -0.1 + x, y)
+  const sliderTip = slider.locator('div').nth(3)
+  await expect(sliderTip).toHaveText('9')
+  await page.mouse.up()
+  await page.waitForTimeout(300)
+
+  //   获取第二个滑块的宽度
+  const { x: x1, y: y1 } = await sliderBlock2.boundingBox()
+  await sliderBlock2.hover()
+  await page.mouse.down()
+  await page.mouse.move(sliderWidth * 0.1 + x1, y1)
+  const sliderTip1 = slider.locator('div').nth(3)
+  await expect(sliderTip1).toHaveText('49')
+  await page.mouse.up()
+})

package/resources/pc/demo/slider/shortcut-operation.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('http://localhost:7130/pc/slider/basic-usage')
+  const preview = page.locator('#preview')
+  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  const sliderBlock = slider.locator('div').nth(1)
+  //   鼠标按下滑块
+  await sliderBlock.hover()
+  await page.mouse.down()
+  //   快捷键左键向左移动
+  await page.keyboard.press('ArrowLeft')
+  await page.keyboard.press('ArrowLeft')
+  await page.keyboard.press('ArrowLeft')
+  await page.keyboard.press('ArrowLeft')
+  await page.keyboard.press('ArrowLeft')
+  await page.keyboard.press('ArrowLeft')
+  await page.keyboard.press('ArrowLeft')
+  await page.keyboard.press('ArrowLeft')
+  await page.keyboard.press('ArrowLeft')
+  await page.keyboard.press('ArrowLeft')
+  await page.waitForTimeout(300)
+  // 快捷键向右移动
+  await page.keyboard.press('ArrowRight')
+  await page.keyboard.press('ArrowRight')
+  await page.keyboard.press('ArrowRight')
+  await page.keyboard.press('ArrowRight')
+  await page.keyboard.press('ArrowRight')
+  await page.keyboard.press('ArrowRight')
+  await page.keyboard.press('ArrowRight')
+  await page.keyboard.press('ArrowRight')
+  await page.keyboard.press('ArrowRight')
+  await page.keyboard.press('ArrowRight')
+})

package/resources/pc/demo/slider/show-iput.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('输入框模式', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/slider/show-iput')
+  await page.locator('#preview').getByRole('textbox').click()
+  await page.locator('#preview').getByRole('textbox').fill('40')
+  await page.waitForTimeout(300)
+})

package/resources/pc/demo/slider/show-tip.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('http://localhost:7130/pc/slider/show-tips')
+  const preview = page.locator('#preview')
+  const slider = preview.locator('.tiny-slider__wrapper')
+  const sliderDiv = slider.locator('.tiny-slider > div').nth(1)
+  const sliderText = slider.locator('.tiny-slider > div').nth(2)
+  // 悬浮至滑块
+  await sliderDiv.hover()
+  // 弹出框显示提示
+  await expect(sliderText).toHaveText('20')
+})

package/resources/pc/demo/slider/slider-event-change.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('change事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/slider/slider-event-change')
+  const preview = page.locator('#preview')
+  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  const sliderBlock = slider.locator('div').nth(1)
+  // 获取进度条的宽度
+  const { width: sliderWidth } = await slider.boundingBox()
+  // 获取当前滑块位置
+  const { x, y } = await sliderBlock.boundingBox()
+  await sliderBlock.hover()
+  await page.mouse.down()
+  // 滑块向右移动百分之二十
+  await page.mouse.move(sliderWidth * 0.2 + x, y)
+  await expect(page.locator('div').filter({ hasText: '触发change事件改变值为59' }).first()).toBeVisible()
+  await page.waitForTimeout(300)
+})

package/resources/pc/demo/slider/slider-event-start.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('start 滑块开始滑动事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/slider/slider-event-start')
+  const preview = page.locator('#preview')
+  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  const sliderBlock = slider.locator('div').nth(1)
+  // 获取进度条的宽度
+  const { width: sliderWidth } = await slider.boundingBox()
+  const { x, y } = await sliderBlock.boundingBox()
+
+  await sliderBlock.hover()
+  await page.mouse.down()
+  await page.mouse.move(sliderWidth * 0.4 + x, y)
+  await page.mouse.up()
+  //   弹出框事件
+  await expect(page.locator('div').filter({ hasText: '触发开始滑动事件{"isTrusted":false}' }).first()).toBeVisible()
+  await page.waitForTimeout(2000)
+})

package/resources/pc/demo/slider/slider-event-stop.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('stop 滑块停止滑动事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/slider/slider-event-stop')
+  const preview = page.locator('#preview')
+  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  const sliderBlock = slider.locator('div').nth(1)
+  // 获取进度条的宽度
+  const { width: sliderWidth } = await slider.boundingBox()
+  const { x, y } = await sliderBlock.boundingBox()
+
+  await sliderBlock.hover()
+  await page.mouse.down()
+  await page.mouse.move(sliderWidth * 0.4 + x, y)
+  await page.mouse.up()
+  //   弹出框事件
+  await expect(page.locator('div').filter({ hasText: '触发停止滑动事件停止后值为79' }).first()).toBeVisible()
+})

package/resources/pc/demo/slider/slider-slot.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/slider/slider-slot')
+  const preview = page.locator('#preview')
+  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  const sliderInput = preview.locator('.tiny-slider__wrapper > .tiny-slider__input')
+  const sliderBlock = slider.locator('div').nth(1)
+  const { width: sliderWidth } = await slider.boundingBox()
+  // 获取当前滑块位置
+  const { x, y } = await sliderBlock.boundingBox()
+  await sliderBlock.hover()
+  await page.mouse.down()
+  // 滑块向右移动百分之二十
+  await page.mouse.move(sliderWidth * 0.2 + x, y)
+  await expect(sliderInput).toHaveText('59%')
+})

package/resources/pc/demo/slider/vertical-mode.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('竖向滑块', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/slider/vertical-mode')
+  const preview = page.locator('#preview')
+  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  const sliderBlock = slider.locator('div').nth(1)
+  // 获取进度条的高度
+  const { height: sliderHeight } = await slider.boundingBox()
+  const { x, y } = await sliderBlock.boundingBox()
+
+  await sliderBlock.hover()
+  await page.mouse.down()
+  await page.mouse.move(x, sliderHeight * 0.2 + y)
+  const sliderTip = slider.locator('div').nth(2)
+  await expect(sliderTip).toHaveText('20')
+  await page.waitForTimeout(300)
+  await page.mouse.up()
+})