fix（select-size）:select component medium，small，mini Type For One (#607)
* fix:select组件medium，small，mini类型整合 * fix（select-size）:select component medium，small，mini Type For One
This commit is contained in:
Xppp0217
GitHub
parent
fddf10dbe6
commit
d7623d1e56
|
|
@ -1,13 +1,23 @@
|
|||
<template>
|
||||
<div class="fontStyle">medium</div>
|
||||
<tiny-select v-model="value" placeholder="请选择" size="medium" multiple :options="options"></tiny-select>
|
||||
<div class="fontStyle">small</div>
|
||||
<tiny-select v-model="value1" placeholder="请选择" size="small" multiple>
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-select>
|
||||
<div class="fontStyle">mini</div>
|
||||
<tiny-select v-model="value2" placeholder="请选择" size="mini" multiple>
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-select>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Select } from '@opentiny/vue'
|
||||
import { Option, Select } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinySelect: Select
|
||||
TinySelect: Select,
|
||||
TinyOption: Option
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -18,8 +28,17 @@ export default {
|
|||
{ value: '选项4', label: '龙须面' },
|
||||
{ value: '选项5', label: '北京烤鸭' }
|
||||
],
|
||||
value: ''
|
||||
value: '',
|
||||
value1: '',
|
||||
value2: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fontStyle {
|
||||
font-size: 14px;
|
||||
margin: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
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/)
|
||||
})
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<template>
|
||||
<tiny-select v-model="value" placeholder="请选择" size="mini" multiple>
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-select>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
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>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
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/)
|
||||
})
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<template>
|
||||
<tiny-select v-model="value" placeholder="请选择" size="small" multiple>
|
||||
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
|
||||
</tiny-select>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
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>
|
||||
|
|
@ -128,7 +128,7 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'size-medium',
|
||||
'name': { 'zh-CN': 'medium', 'en-US': 'small' },
|
||||
'name': { 'zh-CN': 'select', 'en-US': 'small' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>size</code> 属性定义输入框尺寸，可选项有 medium、small、mini 。\n通过 <code>options</code> 配置 Select 数据项，使用后不需要再配置 tiny-option。</p>\n',
|
||||
|
|
@ -136,22 +136,6 @@ export default {
|
|||
},
|
||||
'codeFiles': ['size-medium.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'size-small',
|
||||
'name': { 'zh-CN': 'small', 'en-US': 'mini' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'codeFiles': ['size-small.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'size-mini',
|
||||
'name': { 'zh-CN': 'mini', 'en-US': 'Group' },
|
||||
'desc': {
|
||||
'zh-CN': '详细用法参考如下示例',
|
||||
'en-US':
|
||||
'<p> uses <code>tiny-option-group</code> to group options. The <code>label</code> attribute is the group name. Use the <code>disabled</code> attribute to disable all options in the group. </p>\n'
|
||||
},
|
||||
'codeFiles': ['size-mini.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'option-group',
|
||||
'name': { 'zh-CN': '分组', 'en-US': 'Disable some options for grouping' },
|
||||
|
|
|
|||
Loading…
Reference in New Issue