mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-05 11:21:11 +08:00
kooriookami
GitHub
parent
10d83ea631
commit
f44211da86
@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils'
|
||||
import { nextTick } from 'vue'
|
||||
import Option from '@element-plus/option'
|
||||
import TimeSelect from '../src/time-select.vue'
|
||||
import { sleep } from '@element-plus/test-utils'
|
||||
|
||||
const _mount = (template: string, data, otherObj?) =>
|
||||
mount(
|
||||
@ -48,7 +49,7 @@ describe('TimeSelect', () => {
|
||||
})
|
||||
|
||||
it('set minTime', async () => {
|
||||
const wrapper = _mount(`<el-time-select minTime='14:30' />`, () => ({}))
|
||||
const wrapper = _mount(`<el-time-select minTime="14:30" />`, () => ({}))
|
||||
const input = wrapper.find('input')
|
||||
input.trigger('blur')
|
||||
input.trigger('focus')
|
||||
@ -59,7 +60,7 @@ describe('TimeSelect', () => {
|
||||
})
|
||||
|
||||
it('set maxTime', async () => {
|
||||
const wrapper = _mount(`<el-time-select maxTime='14:30' />`, () => ({}))
|
||||
const wrapper = _mount(`<el-time-select maxTime="14:30" />`, () => ({}))
|
||||
const input = wrapper.find('input')
|
||||
input.trigger('blur')
|
||||
input.trigger('focus')
|
||||
@ -107,4 +108,30 @@ describe('TimeSelect', () => {
|
||||
expect(vm.value).toBe('11:00')
|
||||
expect(input.element.value).toBe('11:00')
|
||||
})
|
||||
|
||||
it('ref focus', async () => {
|
||||
_mount(`<el-time-select ref="input" />`, () => ({}), {
|
||||
mounted() {
|
||||
this.$refs.input.focus()
|
||||
},
|
||||
})
|
||||
await sleep(50)
|
||||
const popperEl = document.querySelector('.el-select__popper')
|
||||
const attr = popperEl.getAttribute('aria-hidden')
|
||||
expect(attr).toEqual('false')
|
||||
})
|
||||
|
||||
it('ref blur', async () => {
|
||||
_mount(`<el-time-select ref="input" />`, () => ({}), {
|
||||
async mounted() {
|
||||
this.$refs.input.focus()
|
||||
await nextTick()
|
||||
this.$refs.input.blur()
|
||||
},
|
||||
})
|
||||
await sleep(50)
|
||||
const popperEl = document.querySelector('.el-select__popper')
|
||||
const attr = popperEl.getAttribute('aria-hidden')
|
||||
expect(attr).toEqual('true')
|
||||
})
|
||||
})
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<el-select
|
||||
ref="select"
|
||||
:model-value="value"
|
||||
:disabled="!editable"
|
||||
:clearable="clearable"
|
||||
@ -27,13 +28,15 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import { defineComponent, computed, ref } from 'vue'
|
||||
import ElSelect from '@element-plus/select'
|
||||
import ElOption from '@element-plus/option'
|
||||
|
||||
interface Time {
|
||||
hours: number
|
||||
minutes: number
|
||||
}
|
||||
|
||||
const parseTime = (time: string): null | Time => {
|
||||
const values = (time || '').split(':')
|
||||
if (values.length >= 2) {
|
||||
@ -79,7 +82,6 @@ const nextTime = (time: string, step: string): string => {
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ElTimeSelect',
|
||||
|
||||
components: { ElSelect, ElOption },
|
||||
model: {
|
||||
prop: 'value',
|
||||
@ -140,6 +142,7 @@ export default defineComponent({
|
||||
emits: ['change', 'blur', 'focus', 'update:modelValue'],
|
||||
setup(props) {
|
||||
// computed
|
||||
const select = ref(null)
|
||||
const value = computed(() => props.modelValue)
|
||||
const items = computed(() => {
|
||||
const result = []
|
||||
@ -157,9 +160,19 @@ export default defineComponent({
|
||||
}
|
||||
return result
|
||||
})
|
||||
const blur = () => {
|
||||
select.value?.blur?.()
|
||||
}
|
||||
const focus = () => {
|
||||
select.value?.focus?.()
|
||||
}
|
||||
|
||||
return {
|
||||
select,
|
||||
value,
|
||||
items,
|
||||
blur,
|
||||
focus,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@ -69,7 +69,7 @@ If start time is picked at first, then the end time will change accordingly.
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| model-value / v-model | binding value | string | - | - |
|
||||
| model-value / v-model | binding value | string | — | — |
|
||||
| editable | whether the input is editable | boolean | — | true |
|
||||
| clearable | whether to show clear button | boolean | — | true |
|
||||
| size | size of Input | string | medium / small / mini | — |
|
||||
@ -94,5 +94,5 @@ If start time is picked at first, then the end time will change accordingly.
|
||||
### Methods
|
||||
| Method | Description | Parameters |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | focus the Input component | - |
|
||||
| blur | blur the Input component | - |
|
||||
| focus | focus the Input component | — |
|
||||
| blur | blur the Input component | — |
|
||||
|
||||
@ -68,7 +68,7 @@ Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambia
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ----------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -------------------- |
|
||||
| model-value / v-model | valor enlazado | string | - | - |
|
||||
| model-value / v-model | valor enlazado | string | — | — |
|
||||
| editable | si el input puede ser editado | boolean | — | true |
|
||||
| clearable | si mostrar el botón de borrado | boolean | — | true |
|
||||
| size | tamaño del input | string | medium / small / mini | — |
|
||||
|
||||
@ -69,7 +69,7 @@ Vous pouvez définir un intervalle de temps. Si l'horaire de début est sélecti
|
||||
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| model-value / v-model | La valeur liée. | string | - | - |
|
||||
| model-value / v-model | La valeur liée. | string | — | — |
|
||||
| editable | Si le champ d'input est éditable. | boolean | — | true |
|
||||
| clearable | Si un bouton d'effacement doit être affiché. | boolean | — | true |
|
||||
| size | Taille du champ. | string | medium / small / mini | — |
|
||||
@ -96,5 +96,5 @@ Vous pouvez définir un intervalle de temps. Si l'horaire de début est sélecti
|
||||
|
||||
| Méthode | Description | Paramètres |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | Met le focus sur le composant. | - |
|
||||
| blur | Enlève le focus sur le composant. | - |
|
||||
| focus | Met le focus sur le composant. | — |
|
||||
| blur | Enlève le focus sur le composant. | — |
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| model-value / v-model | バインディング値 | - | - |
|
||||
| model-value / v-model | バインディング値 | — | — |
|
||||
| editable | 入力が編集可能かどうか | boolean | — | true |
|
||||
| clearable | クリアボタンを表示するかどうか | boolean | — | true |
|
||||
| size | 入力のサイズ | string | medium / small / mini | — |
|
||||
@ -92,5 +92,5 @@
|
||||
### 方法
|
||||
| Method | Description | Parameters |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | インプットコンポーネントにフォーカス | - |
|
||||
| blur | blur the Input component | - |
|
||||
| focus | インプットコンポーネントにフォーカス | — |
|
||||
| blur | blur the Input component | — |
|
||||
|
||||
@ -93,5 +93,5 @@
|
||||
### Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | 使 input 获取焦点 | - |
|
||||
| blur | 去掉 input 获取焦点 | - |
|
||||
| focus | 使 input 获取焦点 | — |
|
||||
| blur | 使 input 失去焦点 | — |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user