@opentiny/vue-docs 2.1.10 → 2.2.1

package/demos/pc/app/select/copy-multi.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test'
+
+test('多选复制单个标签', async ({ page }) => {
+  await page.goto('select#copy-multi')
+
+  await page.waitForTimeout(1000)
+  await page.mouse.move(392, 316)
+  await page.waitForTimeout(1000)
+  await page.mouse.down()
+  await page.waitForTimeout(1000)
+  await page.mouse.move(346, 316)
+  await page.waitForTimeout(1000)
+  await page.mouse.up()
+  await page.keyboard.press('Control+C')
+  const valueInput = page.locator('.copy-value .tiny-input__inner')
+  await expect(valueInput).toHaveValue('')
+  await valueInput.focus()
+  await page.keyboard.press('Control+V')
+  await page.waitForTimeout(200)
+  await expect(valueInput).toHaveValue('黄金糕')
+})
+
+test('多选一键复制所有标签', async ({ page }) => {
+  await page.goto('select#copy-multi')
+
+  const wrap = page.locator('#copy-multi')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const copyValueInput = wrap.locator('.copy-value .tiny-input__inner')
+
+  await select.hover()
+  await select.locator('.tiny-select__copy > .tiny-svg > .st0').click()
+
+  await copyValueInput.press('Control+V')
+  await expect(copyValueInput).toHaveValue('黄金糕,双皮奶')
+})
+
+test('多选设置复制文本分隔符', async ({ page }) => {
+  await page.goto('select#copy-multi')
+
+  const wrap = page.locator('#copy-multi')
+  const select = wrap.locator('.tiny-select').nth(2)
+  const copyValueInput = wrap.locator('.copy-value .tiny-input__inner')
+
+  await select.hover()
+  await select.locator('.tiny-select__copy > .tiny-svg > .st0').click()
+
+  await copyValueInput.press('Control+V')
+  await expect(copyValueInput).toHaveValue('黄金糕/双皮奶')
+})

package/demos/pc/app/select/copy-single.spec.ts

@@ -0,0 +1,70 @@
+import { test, expect } from '@playwright/test'
+
+test('单选无需配置可复制', async ({ page }) => {
+  await page.goto('select#copy-single')
+
+  const wrap = page.locator('#copy-single')
+  const valueInput = wrap.locator('.custom  .tiny-input__inner')
+
+  await page.waitForTimeout(1000)
+  await page.mouse.move(393, 285)
+  await page.waitForTimeout(1000)
+  await page.mouse.down()
+  await page.waitForTimeout(1000)
+  await page.mouse.move(345, 285)
+  await page.waitForTimeout(200)
+  await page.mouse.up()
+  await page.keyboard.press('Control+C')
+  await expect(valueInput).toHaveValue('')
+  await valueInput.focus()
+  await page.keyboard.press('Control+V')
+  await page.waitForTimeout(200)
+  await expect(valueInput).toHaveValue('黄金糕')
+})
+
+test('单选可搜索配置 allow-copy 可复制', async ({ page }) => {
+  await page.goto('select#copy-single')
+
+  const wrap = page.locator('#copy-single')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const valueInput = wrap.locator('.custom .tiny-input__inner')
+
+  await page.waitForTimeout(800)
+  await page.mouse.move(400, 350)
+  await page.waitForTimeout(800)
+  await page.mouse.down()
+  await page.waitForTimeout(800)
+  await page.mouse.move(344, 350)
+  await page.waitForTimeout(200)
+  await page.mouse.up()
+  await page.waitForTimeout(800)
+
+  await page.keyboard.press('Control+C')
+  await expect(valueInput).toHaveValue('')
+  await valueInput.click()
+  await page.keyboard.press('Control+V')
+  await page.waitForTimeout(2000)
+  await expect(valueInput).toHaveValue('黄金糕')
+})
+
+test('单选远程搜索配置 allow-copy 可复制', async ({ page }) => {
+  await page.goto('select#copy-single')
+
+  const wrap = page.locator('#copy-single')
+  const valueInput = wrap.locator('.custom  .tiny-input__inner')
+
+  await page.waitForTimeout(1000)
+  await page.mouse.move(410, 433)
+  await page.waitForTimeout(1000)
+  await page.mouse.down()
+  await page.waitForTimeout(1000)
+  await page.mouse.move(346, 433)
+  await page.waitForTimeout(200)
+  await page.mouse.up()
+  await page.keyboard.press('Control+C')
+  await expect(valueInput).toHaveValue('')
+  await valueInput.focus()
+  await page.keyboard.press('Control+V')
+  await page.waitForTimeout(200)
+  await expect(valueInput).toHaveValue('Alabama')
+})

package/demos/pc/app/select/{search-allow-copy.vue → copy-single.vue}

@@ -20,7 +20,7 @@
       <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <p class="font-style">粘贴至此处：</p>
-    <tiny-input v-model="inputVal" type="text"></tiny-input>
+    <tiny-input v-model="inputVal" type="text" class="custom"></tiny-input>
   </div>
 </template>
 

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

@@ -1,41 +1,84 @@
 import { test, expect } from '@playwright/test'
 
-test('disabled', async ({ page }) => {
+test('下拉禁用', async ({ page }) => {
   await page.goto('select#disabled')
-  const input = page.locator('#preview .tiny-input__inner')
+  const wrap = page.locator('#disabled')
+  const input = wrap.locator('.tiny-input__inner').first()
+
   const hasDisabled = await input.evaluate((input) => input.hasAttribute('disabled'))
   await expect(hasDisabled).toBe(true)
 })
 
-test('disabled-options-multiple', async ({ page }) => {
-  await page.goto('http://localhost:7130/pc/select/disabled-options')
-  const select = page.locator('#preview .tiny-select')
-  const tags = page.locator('#preview .tiny-select .tiny-tag')
+test('多选某项禁用', async ({ page }) => {
+  await page.goto('select#disabled')
+  const wrap = page.locator('#disabled')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const tag = select.locator('.tiny-tag')
+  const option = dropdown.locator('.tiny-option')
 
+  await expect(tag).toHaveCount(0)
   await select.click()
-  await expect(page.getByRole('listitem').filter({ hasText: '黄金糕' })).toHaveClass(/is-disabled/)
-  await expect(page.getByRole('listitem').filter({ hasText: '蚵仔煎' })).toHaveClass(/is-disabled/)
-  await page.getByRole('listitem').filter({ hasText: '黄金糕' }).click()
-  await expect(tags).toHaveCount(0)
-  await page.getByRole('listitem').filter({ hasText: '双皮奶' }).click()
-  await expect(tags).toHaveCount(1)
-  await expect(tags.filter({ hasText: '双皮奶' })).toHaveCount(1)
+  await expect(option.filter({ hasText: '双皮奶' })).toHaveClass(/is-disabled/)
+
+  await option.filter({ hasText: '双皮奶' }).click()
+  await expect(tag).toHaveCount(0)
+
+  await option.filter({ hasText: '黄金糕' }).click()
+  await expect(tag).toHaveCount(1)
+  await expect(tag.filter({ hasText: '黄金糕' })).toHaveCount(1)
 })
 
-test('disabled-and-selected-options', async ({ page }) => {
-  await page.goto('http://localhost:7130/pc/select/disabled-and-selected-options')
-  const slect = page.locator('#preview .tiny-select')
-  const tags = page.locator('#preview .tiny-select .tiny-tag')
-  const listitem = page.getByRole('listitem')
-  await expect(tags.filter({ hasText: '黄金糕' }).locator('svg')).toHaveCount(0)
-  await slect.click()
-  await expect(listitem.filter({ hasText: '全部' })).toHaveCount(0)
-  await expect(listitem.filter({ hasText: '黄金糕' })).toHaveClass(/is-disabled/)
-  await page.getByRole('listitem').filter({ hasText: '双皮奶' }).click()
-  await expect(tags.filter({ hasText: '黄金糕' }).locator('.tiny-svg')).toHaveCount(0)
-  await expect(tags.filter({ hasText: '双皮奶' }).locator('.tiny-svg')).toHaveCount(1)
-  await page.getByRole('listitem').filter({ hasText: '黄金糕' }).click()
-  await expect(tags.filter({ hasText: '黄金糕' }).locator('.tiny-svg')).toHaveCount(0)
+test('单选某项禁用', async ({ page }) => {
+  await page.goto('select#disabled')
+  const wrap = page.locator('#disabled')
+  const select = wrap.locator('.tiny-select').nth(2)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+
+  await select.click()
+  await expect(option.filter({ hasText: '全部' })).toHaveCount(0)
+  await expect(option.filter({ hasText: '双皮奶' })).toHaveClass(/is-disabled/)
+
+  await option.filter({ hasText: '双皮奶' }).click()
+  await expect(dropdown).toBeVisible()
+  await expect(input).toHaveValue('')
+
+  await option.filter({ hasText: '黄金糕' }).click()
+  await expect(dropdown).toBeHidden()
+  await expect(input).toHaveValue('黄金糕')
 })
 
+test('多选，禁用项默认选中', async ({ page }) => {
+  await page.goto('select#disabled')
+  const wrap = page.locator('#disabled')
+  const select = wrap.locator('.tiny-select').nth(3)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const tag = select.locator('.tiny-tag')
+  const option = dropdown.locator('.tiny-option')
+
+  // 默认值显示tag数
+  await expect(tag).toHaveCount(2)
+  // 禁用项默认选中不显示关闭图标
+  await expect(tag.filter({ hasText: '双皮奶' }).locator('svg')).toHaveCount(0)
+  // 非禁用项显示关闭图标
+  await expect(tag.filter({ hasText: '蚵仔煎' }).locator('svg')).toHaveCount(1)
 
+  // 下拉禁用和默认选中的效果
+  await select.click()
+  await expect(option.filter({ hasText: '全部' })).toHaveCount(1)
+  await expect(option.filter({ hasText: '双皮奶' })).toHaveClass(/is-disabled/)
+  await expect(option.filter({ hasText: '双皮奶' })).toHaveClass(/selected/)
+  await expect(option.filter({ hasText: '蚵仔煎' })).toHaveClass(/selected/)
+
+  // 点击禁用项不取消选中
+  await option.filter({ hasText: '双皮奶' }).click()
+  await expect(dropdown).toBeVisible()
+  await expect(tag).toHaveCount(2)
+
+  // 选中其他项
+  await option.filter({ hasText: '黄金糕' }).click()
+  await expect(dropdown).toBeVisible()
+  await expect(tag).toHaveCount(3)
+})

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

@@ -45,37 +45,38 @@ const value2 = ref([])
 
 const change = () => {
   Modal.message({
-    message: 'change 事件'
+    message: 'change 事件',
+    duration: 500
   })
 }
 
 const clear = () => {
   Modal.message({
-    message: 'clear 事件'
+    message: '触发 clear 事件'
   })
 }
 
 const focus = () => {
   Modal.message({
-    message: 'focus 事件'
+    message: '触发 focus 事件'
   })
 }
 
 const blur = () => {
   Modal.message({
-    message: 'blur 事件'
+    message: '触发 blur 事件'
   })
 }
 
 const removeTag = () => {
   Modal.message({
-    message: 'remove-tag 事件'
+    message: '触发 remove-tag 事件'
   })
 }
 
 const visibleChange = () => {
   Modal.message({
-    message: 'visible-change 事件'
+    message: '触发 visible-change 事件'
   })
 }
 </script>

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

@@ -1,76 +1,71 @@
 import { test, expect } from '@playwright/test'
 
-test('focus', async ({ page }) => {
-  await page.goto('select#envts-change')
+test('单选事件', async ({ page }) => {
+  await page.goto('select#events')
+  const wrap = page.locator('#events')
+  const select = wrap.locator('.tiny-select').first()
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
   const model = page.locator('.tiny-modal')
-  const input = page.locator('#preview .tiny-input__inner')
 
   await input.click()
   await page.waitForTimeout(500)
-  await expect(model.filter({ hasText: 'focus事件' })).toHaveCount(1)
-})
-
-test('change', async ({ page }) => {
-  await page.goto('select#envts-change')
-  const model = page.locator('.tiny-modal')
-  const input = page.locator('#preview .tiny-input__inner')
+  await expect(model.filter({ hasText: '触发 focus 事件' })).toHaveCount(1)
+  await expect(model.filter({ hasText: '触发 visible-change 事件' })).toHaveCount(1)
 
-  await input.click()
-  await page.getByRole('listitem').filter({ hasText: '黄金糕' }).click()
+  await option.first().click()
   await expect(input).toHaveValue('黄金糕')
-  await page.waitForTimeout(500)
-  await expect(model.filter({ hasText: 'changes事件' })).toHaveCount(1)
-})
+  await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(1)
+  await expect(model.filter({ hasText: '触发 visible-change 事件' })).toHaveCount(2)
 
-test('clear', async ({ page }) => {
-  await page.goto('select#envts-change')
-  const model = page.locator('.tiny-modal')
-  const input = page.locator('#preview .tiny-input__inner')
-
-  await input.click()
-  await page.getByRole('listitem').filter({ hasText: '黄金糕' }).click()
-  await expect(input).toHaveValue('黄金糕')
-  input.hover()
-  await page.locator('#preview .tiny-input .tiny-input__suffix').click()
   await page.waitForTimeout(500)
-  await expect(model.filter({ hasText: 'clear事件' })).toHaveCount(1)
-})
+  await wrap.click()
+  await expect(model.filter({ hasText: '触发 blur 事件' })).toHaveCount(1)
 
-test('blur', async ({ page }) => {
-  await page.goto('select#envts-change')
-  const model = page.locator('.tiny-modal')
-  const input = page.locator('#preview .tiny-input__inner')
-
-  await input.click()
-  await input.blur()
+  await page.waitForTimeout(200)
+  await input.hover()
+  await select.locator('.tiny-select__close').click()
   await page.waitForTimeout(500)
-  await expect(model.filter({ hasText: 'blur事件' })).toHaveCount(1)
+  await expect(input).toHaveValue('')
+  await expect(model.filter({ hasText: '触发 clear 事件' })).toHaveCount(1)
 })
 
-test('remove-tag', async ({ page }) => {
-  await page.goto('http://localhost:7130/pc/select/envts-remove')
+test('多选事件', async ({ page }) => {
+  await page.goto('select#events')
+  const wrap = page.locator('#events')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const tag = wrap.locator('.tiny-tag')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
   const model = page.locator('.tiny-modal')
-  const select = page.locator('#preview .tiny-select')
-  const tags = page.locator('#preview .tiny-select .tiny-tag')
 
   await select.click()
-  await page.getByRole('listitem').filter({ hasText: '黄金糕' }).click()
-  await expect(tags.filter({ hasText: '黄金糕' })).toHaveCount(1)
-  await tags.filter({ hasText: '黄金糕' }).locator('.tiny-svg').click()
-  await page.waitForTimeout(500)
-  await expect(model.filter({ hasText: 'removeTag事件' })).toHaveCount(1)
-})
+  await expect(model.filter({ hasText: '触发 focus 事件' })).toHaveCount(1)
+  await expect(model.filter({ hasText: '触发 visible-change 事件' })).toHaveCount(1)
 
-test('visible-change', async ({ page }) => {
-  await page.goto('http://localhost:7130/pc/select/envts-remove')
-  const model = page.locator('.tiny-modal')
-  const input = page.locator('#preview .tiny-input__inner')
-  const select = page.locator('#preview .tiny-select')
+  await option.nth(1).click()
+  await expect(tag).toHaveCount(1)
+  await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(1)
+
+  await option.nth(0).click()
+  await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(2)
+  await expect(tag).toHaveCount(5)
 
-  await select.click()
-  await page.waitForTimeout(500)
-  await expect(model.filter({ hasText: 'visibleChange事件' })).toHaveCount(1)
-  await input.blur()
   await page.waitForTimeout(500)
-  await expect(model.filter({ hasText: 'visibleChange事件' })).toHaveCount(1)
+  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)
+
+  await wrap.click()
+  await expect(model.filter({ hasText: '触发 visible-change 事件' })).toHaveCount(1)
+
+  await page.waitForTimeout(200)
+  await select.hover()
+  await select.locator('.tiny-select__close').click()
+
+  await expect(tag).toHaveCount(0)
+  await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(1)
 })

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

@@ -53,32 +53,33 @@ export default {
   methods: {
     change() {
       Modal.message({
-        message: 'change 事件'
+        message: '触发 change 事件',
+        duration: 500
       })
     },
     clear() {
       Modal.message({
-        message: 'clear 事件'
+        message: '触发 clear 事件'
       })
     },
     focus() {
       Modal.message({
-        message: 'focus 事件'
+        message: '触发 focus 事件'
       })
     },
     blur() {
       Modal.message({
-        message: 'blur 事件'
+        message: '触发 blur 事件'
       })
     },
     removeTag() {
       Modal.message({
-        message: 'remove-tag 事件'
+        message: '触发 remove-tag 事件'
       })
     },
     visibleChange() {
       Modal.message({
-        message: 'visible-change 事件'
+        message: '触发 visible-change 事件'
       })
     }
   }

package/demos/pc/app/select/filter-method.spec.ts

@@ -1,50 +1,87 @@
 import { expect, test } from '@playwright/test'
 
-test('filter-nothing', async ({ page }) => {
+test('默认搜索', async ({ page }) => {
   await page.goto('select#filter-method')
-  const input = page.locator('#preview .tiny-input__inner')
+  const wrap = page.locator('#filter-method')
+  const select = wrap.locator('.tiny-select').first()
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
 
+  // 1.1 没有过滤到内容
   await input.click()
+  // 1.1.1 验证 no-match-text
+  await expect(page.getByText('No Match')).toBeHidden()
   await input.press('1')
   await expect(input).toHaveValue('1')
   await input.press('Enter')
+  await expect(page.getByText('No Match')).toBeVisible()
 
-  const listitems = await page.locator('.tiny-select-dropdown').getByRole('listitem').all()
-  listitems.forEach(async (item) => {
-    await expect(item).toHaveAttribute('display', 'none')
+  await page.waitForTimeout(500)
+  let allListItems = await option.all()
+  allListItems.forEach(async (item) => {
+    await expect(item).toHaveCSS('display', 'none')
   })
-})
 
-test('filter-something', async ({ page }) => {
-  await page.goto('select#filter-method')
-  const input = page.locator('#preview .tiny-input__inner')
-
-  await input.click()
+  // 1.2 过滤到内容
   await input.fill('双皮奶')
   await expect(input).toHaveValue('双皮奶')
   await input.press('Enter')
 
-  const listitems = await page
-    .locator('.tiny-select-dropdown')
-    .getByRole('listitem')
-    .filter({ hasNotText: '双皮奶' })
-    .all()
-  listitems.forEach(async (item) => {
-    await expect(item).toHaveAttribute('display', 'none')
+  await page.waitForTimeout(200)
+
+  allListItems.forEach(async (item) => {
+    const isVisibleItem = (await item.innerText()) === '双皮奶'
+    if (isVisibleItem) {
+      await expect(item).toHaveCSS('display', 'flex')
+    } else {
+      await expect(item).toHaveCSS('display', 'none')
+    }
   })
-  await expect(page.locator('.tiny-select-dropdown').getByRole('listitem').filter({ hasText: '双皮奶' })).toBeVisible()
-  await page.locator('.tiny-select-dropdown').getByRole('listitem').filter({ hasText: '双皮奶' }).click()
+  await expect(option.filter({ hasText: '双皮奶' })).toBeVisible()
+  await option.filter({ hasText: '双皮奶' }).click()
   await expect(input).toHaveValue('双皮奶')
 })
 
-test('no-match-text', async ({ page }) => {
-  await page.goto('http://localhost:7130/pc/select/no-match-text')
-  const input = page.locator('#preview .tiny-input__inner')
+test('自定义过滤', async ({ page }) => {
+  await page.goto('select#filter-method')
+  const wrap = page.locator('#filter-method')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+
+  // 1.1 没有过滤到内容
   await input.click()
-  const listItems = page.locator('.tiny-select-dropdown__list').getByRole('listitem')
-  await expect((await listItems.all()).length).toEqual(5)
-  await expect(page.getByText('No Match')).toBeHidden()
-  await input.fill('1')
+  // 1.1.1 验证 no-match-text (待修复)
+  // await expect(page.getByText('No Match')).toBeHidden()
+  await input.press('1')
+  await expect(input).toHaveValue('1')
   await input.press('Enter')
-  await expect(page.getByText('No Match')).toBeVisible()
+  // await expect(page.getByText('No Match')).toBeVisible()
+
+  await page.waitForTimeout(500)
+  let allListItems = await option.all()
+  allListItems.forEach(async (item) => {
+    await expect(item).toHaveCSS('display', 'none')
+  })
+
+  // 1.2 过滤到内容
+  await input.fill('双皮奶')
+  await expect(input).toHaveValue('双皮奶')
+  await input.press('Enter')
+
+  await page.waitForTimeout(200)
+
+  allListItems.forEach(async (item) => {
+    const isVisibleItem = (await item.innerText()) === '双皮奶'
+    if (isVisibleItem) {
+      await expect(item).toHaveCSS('display', 'flex')
+    } else {
+      await expect(item).toHaveCSS('display', 'none')
+    }
+  })
+  await expect(option.filter({ hasText: '双皮奶' })).toBeVisible()
+  await option.filter({ hasText: '双皮奶' }).click()
+  await expect(input).toHaveValue('双皮奶')
 })

package/demos/pc/app/select/hide-drop.spec.ts

@@ -1,9 +1,10 @@
 import { test, expect } from '@playwright/test'
 
 test('hidedrop', async ({ page }) => {
-  await page.goto('select#hide-select-input-border')
-  const select = page.locator('#preview .tiny-select').first()
-  const dropdown = page.locator('.tiny-select-dropdown')
+  await page.goto('select#hide-drop')
+  const wrap = page.locator('#hide-drop')
+  const select = wrap.locator('.tiny-select')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
 
   await select.click()
   await expect(dropdown).toBeHidden()

package/demos/pc/app/select/hide-drop.vue

@@ -0,0 +1,34 @@
+<template>
+  <tiny-select v-model="value" :hide-drop="true">
+    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+  </tiny-select>
+</template>
+
+<script>
+import { Select, Option } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect: Select,
+    TinyOption: Option
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项1', label: '黄金糕' },
+        { value: '选项2', label: '双皮奶' },
+        { value: '选项3', label: '蚵仔煎' },
+        { value: '选项4', label: '龙须面' },
+        { value: '选项5', label: '北京烤鸭' }
+      ],
+      value: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>