@opentiny/vue-docs 2.1.10 → 2.2.0

package/demos/pc/app/slider/max-min.spec.ts

@@ -2,9 +2,8 @@ import { test, expect } from '@playwright/test'
 
 test('最大值最小值', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('slider#(max-min')
-  const preview = page.locator('#preview')
-  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  await page.goto('slider#max-min')
+  const slider = page.locator('.tiny-slider-container .tiny-slider')
   const sliderBlock = slider.locator('div').nth(1)
   // 获取进度条的宽度
   const { width: sliderWidth } = await slider.boundingBox()
@@ -15,10 +14,10 @@ test('最大值最小值', async ({ page }) => {
   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.waitForTimeout(1000)
   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.waitForTimeout(1000)
   await page.mouse.up()
 })

package/demos/pc/app/slider/range-select.spec.ts

@@ -3,8 +3,7 @@ import { test, expect } from '@playwright/test'
 test('范围选择', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('slider#range-select')
-  const preview = page.locator('#preview')
-  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  const slider = page.locator('.tiny-slider-container .tiny-slider')
   const sliderBlock1 = slider.locator('div').nth(1)
   const sliderBlock2 = slider.locator('div').nth(2)
   // 获取进度条的宽度

package/demos/pc/app/slider/shortcut-operation.spec.ts

@@ -2,34 +2,23 @@ import { test, expect } from '@playwright/test'
 
 test('快捷键', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('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 page.goto('slider#shortcut-operation')
+  const slider = page.locator('.tiny-slider-container .tiny-slider')
+  const sliderBlock = slider.locator('.tiny-slider__handle')
   //   鼠标按下滑块
   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 sliderBlock.hover()
+  await expect(slider.locator('.tiny-slider__tips')).toHaveText('38')
+
   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')
+  await expect(slider.locator('.tiny-slider__tips')).toHaveText('39')
+
+  await page.keyboard.press('PageUp')
+  await expect(slider.locator('.tiny-slider__tips')).toHaveText('73')
 })

package/demos/pc/app/slider/show-iput.spec.ts

@@ -1,8 +1,17 @@
-import { test } from '@playwright/test'
+import { test, expect } from '@playwright/test'
 
 test('输入框模式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('slider#show-iput')
-  await page.locator('#preview').getByRole('textbox').click()
-  await page.locator('#preview').getByRole('textbox').fill('40')
-  await page.waitForTimeout(300)
+
+  const sliderInput= page.locator('.tiny-slider-container .tiny-slider__input input')
+  const sliderBlock = page.locator('.tiny-slider-container .tiny-slider .tiny-slider__handle')
+
+  await sliderInput.click()
+  await sliderInput.fill('60')
+
+  await sliderBlock.hover()
+
+  await expect(page.locator('.tiny-slider-container .tiny-slider .tiny-slider__tips')).toHaveText('60')
+
 })

package/demos/pc/app/slider/show-tip.spec.ts

@@ -2,13 +2,13 @@ import { test, expect } from '@playwright/test'
 
 test('提示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('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 page.goto('slider#show-tip')
+  const slider = page.locator('.tiny-slider-container .tiny-slider')
+
+  const sliderDiv = slider.locator('.tiny-slider__handle')
+  const sliderText = slider.locator('.tiny-slider__tips')
   // 悬浮至滑块
   await sliderDiv.hover()
   // 弹出框显示提示
-  await expect(sliderText).toHaveText('20')
+  await expect(sliderText).toHaveText('当前值为：20')
 })

package/demos/pc/app/slider/slider-event.spec.ts

@@ -2,9 +2,8 @@ import { test, expect } from '@playwright/test'
 
 test('start 滑块开始滑动事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('slider#slider-event-start')
-  const preview = page.locator('#preview')
-  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  await page.goto('slider#slider-event')
+  const slider = page.locator('.tiny-slider-container .tiny-slider')
   const sliderBlock = slider.locator('div').nth(1)
   // 获取进度条的宽度
   const { width: sliderWidth } = await slider.boundingBox()
@@ -22,9 +21,8 @@ test('start 滑块开始滑动事件', async ({ page }) => {
 
 test('change事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('slider#slider-event-change')
-  const preview = page.locator('#preview')
-  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  await page.goto('slider#slider-event')
+  const slider = page.locator('.tiny-slider-container .tiny-slider')
   const sliderBlock = slider.locator('div').nth(1)
   // 获取进度条的宽度
   const { width: sliderWidth } = await slider.boundingBox()
@@ -40,9 +38,8 @@ test('change事件', async ({ page }) => {
 
 test('stop 滑块停止滑动事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('slider#slider-event-stop')
-  const preview = page.locator('#preview')
-  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  await page.goto('slider#slider-event')
+  const slider = page.locator('.tiny-slider-container .tiny-slider')
   const sliderBlock = slider.locator('div').nth(1)
   // 获取进度条的宽度
   const { width: sliderWidth } = await slider.boundingBox()

package/demos/pc/app/slider/slider-slot.spec.ts

@@ -3,16 +3,16 @@ import { test, expect } from '@playwright/test'
 test('自定义插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('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 slider = page.locator('.tiny-slider-container .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 sliderBlock.click()
   await page.mouse.down()
   // 滑块向右移动百分之二十
   await page.mouse.move(sliderWidth * 0.2 + x, y)
-  await expect(sliderInput).toHaveText('59%')
+
+  const sliderInput = page.locator('.tiny-slider-container .tiny-slider__input')
+  await expect(sliderInput).toContainText('59%')
 })

package/demos/pc/app/slider/vertical-mode.spec.ts

@@ -3,18 +3,7 @@ import { test, expect } from '@playwright/test'
 test('竖向滑块', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('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()
+  const slider = page.locator('.tiny-slider-container .tiny-slider')
 
-  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()
+  await expect(slider).toHaveClass(/tiny-slider__vertical/)
 })

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

@@ -110,7 +110,7 @@ export default {
     {
       'name': 'slider',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'v-model',
           'type': 'number | [number, number]',

package/demos/pc/app/split/basic-usage.spec.ts

@@ -3,23 +3,19 @@ import { test, expect } from '@playwright/test'
 test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('split#basic-usage')
-  const split = page.locator('#preview div').filter({ hasText: '左面板右面板' }).nth(2)
-  const centerBtn = page.locator('.tiny-split-trigger')
-  //   获取整个面板宽度
-  const { width: centerWidth } = await centerBtn.boundingBox()
-  const { width: splitWidth } = await split.boundingBox()
-  const leftDiv = page.locator('.tiny-split-pane').first()
-  const { width: leftWidth } = await leftDiv.boundingBox()
-  const rightDiv = page.locator('.tiny-split-horizontal > div:nth-child(3)')
-  const { width: rightWidth } = await rightDiv.boundingBox()
-  const { x, y } = await centerBtn.boundingBox()
+  // 获取拖拽元素
+  const triggerBtn = page.locator('.tiny-split-trigger')
+  const leftPanel = page.locator('.left-pane')
+  const { width: leftPanelWidth } = await leftPanel.boundingBox()
+  const { x, y, width: triggerBtnWidth } = await triggerBtn.boundingBox()
   // 鼠标按下
-  await centerBtn.hover()
+  await triggerBtn.hover()
   await page.mouse.down()
-  await page.mouse.move(50 + x, y)
+  await page.mouse.move(100 + x, y)
   await page.mouse.up()
-  //   移动之后的宽度为:移动之前的宽度+50-分割线宽度的一半
-  const afterMove = leftWidth + 50 - centerWidth / 2
-  const { width: afterWidth } = await leftDiv.boundingBox()
-  await expect(afterMove).toEqual(afterWidth)
+  // 移动之后的宽度为:移动之前的宽度+50-分割线宽度的一半
+  const afterMove = leftPanelWidth + 100 - triggerBtnWidth / 2
+  const { width: afterWidth } = await leftPanel.boundingBox()
+  // 小数点后一位相同即可
+  await expect(afterMove).toBeCloseTo(afterWidth, 1)
 })

package/demos/pc/app/split/disabled-drag.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('split#disabled-drag')
+  // 获取拖拽元素
+  const triggerBtn = page.locator('.tiny-split-trigger')
+  const leftPanel = page.locator('.left-pane')
+  const { width: leftPanelWidth } = await leftPanel.boundingBox()
+  const { x, y, width: triggerBtnWidth } = await triggerBtn.boundingBox()
+  // 鼠标按下
+  await triggerBtn.hover()
+  await page.mouse.down()
+  await page.mouse.move(100 + x, y)
+  await page.mouse.up()
+  // 移动之后的宽度为:移动之前的宽度+50-分割线宽度的一半
+  const afterMove = leftPanelWidth + 100 - triggerBtnWidth / 2
+  const { width: afterWidth } = await leftPanel.boundingBox()
+  await expect(afterMove).not.toEqual(afterWidth)
+})

package/demos/pc/app/split/event-click.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('split#event-click')
+  await page.locator('.tiny-split-trigger-button').first().click()
+  await expect(page.getByText('点击事件1')).toBeVisible()
+  await page.locator('.tiny-split-trigger-con > div:nth-child(3)').click()
+  await expect(page.getByText('点击事件2')).toBeVisible()
+})

package/demos/pc/app/split/horizontal-collapse-composition-api.vue

@@ -2,10 +2,10 @@
   <div class="split-v-model">
     <tiny-split v-model="split1" trigger-simple collapse-left-top collapse-right-bottom>
       <template #left>
-        <div class="demo-split-pane">左面板</div>
+        <div class="demo-split-pane">自定义左面板</div>
       </template>
       <template #right>
-        <div class="demo-split-pane">右面板</div>
+        <div class="demo-split-pane">自定义右面板</div>
       </template>
     </tiny-split>
   </div>

package/demos/pc/app/split/horizontal-collapse-left.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('简易模式中，单向展开', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('split#horizontal-collapse')
+  await page.locator('.tiny-split-trigger-button').first().click()
+  await expect(page.locator('.left-pane')).toHaveCSS('width', '0px')
+})

package/demos/pc/app/split/horizontal-collapse.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('split#horizontal-collapse')
+  await page.locator('.tiny-split-trigger-button').first().click()
+  await expect(page.locator('.left-pane')).toHaveCSS('width', '0px')
+  await page.locator('.tiny-split-trigger-con > div:nth-child(3)').click()
+  await page.locator('.tiny-split-trigger-con > div:nth-child(3)').click()
+  await expect(page.locator('.right-pane')).toHaveCSS('width', '0px')
+})

package/demos/pc/app/split/horizontal-collapse.vue

@@ -2,10 +2,10 @@
   <div class="split-v-model">
     <tiny-split v-model="split1" trigger-simple collapse-left-top collapse-right-bottom>
       <template #left>
-        <div class="demo-split-pane">左面板</div>
+        <div class="demo-split-pane">自定义左面板</div>
       </template>
       <template #right>
-        <div class="demo-split-pane">右面板</div>
+        <div class="demo-split-pane">自定义右面板</div>
       </template>
     </tiny-split>
   </div>

package/demos/pc/app/split/movestart-event.spec.ts

@@ -3,7 +3,6 @@ import { test, expect } from '@playwright/test'
 test('movestart 事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('split#movestart-event')
-  const split = page.locator('#preview div').filter({ hasText: '左面板右面板' }).nth(2)
   const centerBtn = page.locator('.tiny-split-trigger')
   const { x, y } = await centerBtn.boundingBox()
   // 鼠标按下

package/demos/pc/app/split/nested-use.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 test('嵌套使用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('split#nested-use')
-  const split = page.locator('#preview div').filter({ hasText: '上面板下面板右面板' }).nth(2)
-  const centerBtn = page.locator('.tiny-split-horizontal > div:nth-child(2)')
+
+  const centerBtn = page.locator('.tiny-split-trigger-vertical')
   //   测试左右面板
   const { width: centerWidth } = await centerBtn.boundingBox()
   const leftDiv = page.locator('.tiny-split-pane').first()
@@ -18,10 +18,10 @@ test('嵌套使用', async ({ page }) => {
   //   移动之后的宽度为:移动之前的宽度+50-分割线宽度的一半
   const afterMove = leftWidth + 50 - centerWidth / 2
   const { width: afterWidth } = await leftDiv.boundingBox()
-  await expect(afterMove).toEqual(afterWidth)
+  await expect(afterMove).toBeCloseTo(afterWidth, 1)
 
   // 测试左面板中的上下面板
-  const centerBtn1 = page.locator('.tiny-split-trigger-con').first()
+  const centerBtn1 = page.locator('.tiny-split-trigger-horizontal')
   const { x: centerBtnX1, y: centerBtnY1 } = await centerBtn1.boundingBox()
   const topDiv = page.locator('.tiny-split-vertical > div').first()
   const { height: topHeight } = await topDiv.boundingBox()
@@ -32,6 +32,6 @@ test('嵌套使用', async ({ page }) => {
   await page.mouse.up()
   const { height: afterHeight } = await topDiv.boundingBox()
   const topMove = topHeight - 30 - verticalHeight / 2
-  await expect(topMove).toEqual(afterHeight)
+  await expect(topMove).toBeCloseTo(afterHeight, 1)
   await page.waitForTimeout(300)
 })

package/demos/pc/app/split/split-mode.spec.ts

@@ -8,5 +8,5 @@ test('分割方式', async ({ page }) => {
   const { width: splitWidth } = await split.boundingBox()
   const { width: centerWidth } = await centerBtn.boundingBox()
   //   判断宽度是否和面板总宽度保持一致
-  await expect(splitWidth).toEqual(centerWidth)
+  await expect(splitWidth).toBeCloseTo(centerWidth, 1)
 })

package/demos/pc/app/split/split-threshold.spec.ts

@@ -3,28 +3,23 @@ import { test, expect } from '@playwright/test'
 test('面板阈值', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('split#split-threshold')
-  const split = page.locator('.tiny-split-wrapper')
-  const centerBtn = split.locator('.tiny-split-trigger-con')
-  //   获取整个面板高度
-  const { height: splitHeight } = await split.boundingBox()
-  const topDiv = page.locator('.tiny-split-pane').first()
-  const { height: topHeight } = await topDiv.boundingBox()
-  const bottomDiv = split.locator('.bottom-pane')
-  const { height: bottomHeight } = await bottomDiv.boundingBox()
-  const { x, y } = await centerBtn.boundingBox()
+  const triggerBtn = page.locator('.tiny-split-trigger')
+  const topPanel = page.locator('.top-pane')
+  const bottomPanel = page.locator('.bottom-pane')
+  const { x, y } = await triggerBtn.boundingBox()
   // 向上滑动时判断下上面面板高度是否为50
-  await centerBtn.hover()
+  await triggerBtn.hover()
   await page.mouse.down()
   await page.mouse.move(x, y - 100)
   await page.mouse.up()
-  const { height: afterHeight } = await topDiv.boundingBox()
-  await expect(50).toEqual(afterHeight)
+  const { height: afterHeight } = await topPanel.boundingBox()
+  await expect(50).toBeCloseTo(afterHeight, 1)
   await page.waitForTimeout(300)
-  //   向下滑动时判断下面面板高度是否为80
-  await centerBtn.hover()
+  // 向下滑动时判断下面面板高度是否为80
+  await triggerBtn.hover()
   await page.mouse.down()
   await page.mouse.move(x, y + 200)
-  const { height: bottomMove } = await bottomDiv.boundingBox()
+  const { height: bottomMove } = await bottomPanel.boundingBox()
   await page.mouse.up()
-  await expect(80).toEqual(bottomMove)
+  await expect(80).toBeCloseTo(bottomMove, 1)
 })

package/demos/pc/app/split/three-areas.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('支持配置3个区块', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('split#three-areas')
+  await expect(page.getByText('内容A区')).toBeVisible()
+  await expect(page.getByText('内容B区')).toBeVisible()
+  await expect(page.getByText('内容C区')).toBeVisible()
+})

package/demos/pc/app/split/trigger-simple.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('split#trigger-simple')
+  // 获取拖拽元素
+  const triggerBtn = page.locator('.tiny-split-trigger-con-simple')
+  const leftPanel = page.locator('.left-pane')
+  const { width: leftPanelWidth } = await leftPanel.boundingBox()
+  const { x, y, width: triggerBtnWidth } = await triggerBtn.boundingBox()
+  // 鼠标按下
+  await triggerBtn.hover()
+  await page.mouse.down()
+  await page.mouse.move(100 + x, y)
+  await page.mouse.up()
+  // 移动之后的宽度为:移动之前的宽度+50-分割线宽度的一半
+  const afterMove = leftPanelWidth + 100 - triggerBtnWidth / 2
+  const { width: afterWidth } = await leftPanel.boundingBox()
+  await expect(afterMove).toBeCloseTo(afterWidth, 1)
+})

package/demos/pc/app/split/trigger-slot-composition-api.vue

@@ -5,7 +5,7 @@
         <div class="demo-split-pane">自定义左面板</div>
       </template>
       <template #trigger>
-        <div class="line"></div>
+        <div class="trigger-line"></div>
       </template>
       <template #right>
         <div class="demo-split-pane">自定义右面板</div>
@@ -32,7 +32,7 @@ const split2 = ref(0.4)
   padding: 10px;
 }
 
-.line {
+.trigger-line {
   width: 5px;
   height: 200px;
   background-color: black;

package/demos/pc/app/split/trigger-slot.spec.ts

@@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
 test('拖拽插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('split#trigger-slot')
-  const centerDiv = page.locator('.line')
+  const centerDiv = page.locator('.trigger-line')
   await expect(centerDiv).toHaveCSS('background-color', 'rgb(0, 0, 0)')
 })

package/demos/pc/app/split/trigger-slot.vue

@@ -5,7 +5,7 @@
         <div class="demo-split-pane">自定义左面板</div>
       </template>
       <template #trigger>
-        <div class="line"></div>
+        <div class="trigger-line"></div>
       </template>
       <template #right>
         <div class="demo-split-pane">自定义右面板</div>
@@ -40,7 +40,7 @@ export default {
   padding: 10px;
 }
 
-.line {
+.trigger-line {
   width: 5px;
   height: 200px;
   background-color: black;

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

@@ -10,8 +10,15 @@ export default {
     },
     {
       'demoId': 'split-threshold',
-      'name': { 'zh-CN': '面板阈值', 'en-US': 'Panel Threshold' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'name': {
+        'zh-CN': '面板阈值',
+        'en-US': 'Panel Threshold'
+      },
+      'desc': {
+        'zh-CN':
+          '<p>通过 <code>left-top-min</code> 设置左上方面板拖动的最小高度，通过 <code>right-bottom-min</code> 设置右下方面板拖动的最小高度</p>',
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['split-threshold.vue']
     },
     {
@@ -25,12 +32,6 @@ export default {
       },
       'codeFiles': ['split-mode.vue']
     },
-    {
-      'demoId': 'basic-usage1',
-      'name': { 'zh-CN': '不可拖拽', 'en-US': 'Drag not allowed' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['basic-usage1.vue']
-    },
     {
       'demoId': 'movestart-event',
       'name': { 'zh-CN': 'movestart 事件', 'en-US': 'movestart event' },
@@ -139,11 +140,10 @@ export default {
       'properties': [
         {
           'name': 'mode',
-          'type': 'string',
+          'type': `'horizontal' | 'vertical'`,
           'defaultValue': 'horizontal',
           'desc': {
-            'zh-CN':
-              '分割类型，可选值为 horizontal 或 vertical；默认值horizontal。;该属性的可选值为 horizontal / vertical',
+            'zh-CN': '分割类型，可选值为 horizontal 或 vertical；默认值horizontal',
             'en-US':
               'Separation type. The value can be horizontal or vertical. The default value is horizontal. ;The optional values of this attribute are horizontal / vertical'
           },
@@ -154,7 +154,7 @@ export default {
           'type': 'boolean',
           'defaultValue': 'false',
           'desc': {
-            'zh-CN': '简易模式启用左/上展开收起按钮。',
+            'zh-CN': '简易模式启用左/上展开收起按钮',
             'en-US': 'Easy Mode Enables Left/Top Expand Collapse Button'
           },
           'demoId': 'split-threshold'
@@ -181,23 +181,23 @@ export default {
         },
         {
           'name': 'left-top-min',
-          'type': 'number , string',
+          'type': 'number | string',
           'defaultValue': '40px',
-          'desc': { 'zh-CN': '左面板 / 上面板最小阈值。', 'en-US': 'Minimum threshold on the left or upper panel.' },
+          'desc': { 'zh-CN': '左面板 / 上面板最小阈值', 'en-US': 'Minimum threshold on the left or upper panel.' },
           'demoId': 'split-threshold'
         },
         {
           'name': 'right-bottom-min',
-          'type': 'number , string',
+          'type': 'number | string',
           'defaultValue': '40px',
-          'desc': { 'zh-CN': '右面板 / 下面板最小阈值。', 'en-US': 'Minimum threshold on the right or lower panel.' },
+          'desc': { 'zh-CN': '右面板 / 下面板最小阈值', 'en-US': 'Minimum threshold on the right or lower panel.' },
           'demoId': 'split-threshold'
         },
         {
           'name': 'modelValue',
-          'type': 'number , string',
+          'type': 'number | string',
           'defaultValue': '0.5',
-          'desc': { 'zh-CN': '分割面板的位置。', 'en-US': 'Position of the split panel.' },
+          'desc': { 'zh-CN': '分割面板的位置', 'en-US': 'Position of the split panel.' },
           'demoId': 'basic-usage'
         },
         {
@@ -218,37 +218,37 @@ export default {
       'events': [
         {
           'name': 'moveend',
-          'type': 'Function()',
+          'type': '()=> void',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '拖拽结束的事件。;拖拽结束的事件。;无arguments',
+            'zh-CN': '拖拽结束的事件',
             'en-US': 'Drag end event. ;Drag end event. ;No arguments'
           },
           'demoId': 'moveend-event'
         },
         {
           'name': 'movestart',
-          'type': 'Function()',
+          'type': '()=> void',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '拖拽开始的事件。;拖拽开始的事件。;无arguments',
+            'zh-CN': '拖拽开始的事件',
             'en-US': 'Drag start event. ;Drag start event. ;No arguments'
           },
           'demoId': 'movestart-event'
         },
         {
           'name': 'moving',
-          'type': 'Function(arg)',
+          'type': '(event: Event)=> void',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '拖拽中的事件。;拖拽中的事件。;arg1:event (类型object)',
+            'zh-CN': '拖拽中的事件',
             'en-US': 'Draging events. ;Drag the event in. ; arg1:event (type object)'
           },
           'demoId': 'moving-event'
         },
         {
           'name': 'left-top-click',
-          'type': 'Function(arg)',
+          'type': '()=> void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '左箭头收起时触发',