forked from opentiny/tiny-vue
docs: optimize time picker demo api docs (#482)
* docs(time-picker): adjust the order of api * docs(time-picker): modify component description * docs(time-picker): optimize basic usage demo * docs(time-picker): optimize size/is-range demo * docs(time-picker): optimize disabled demo * docs(time-picker): optimize editable/is-range demo * docs(time-picker): optimize arrow-control demo * docs(time-picker): optimize step demo * docs(time-picker): optimize clearable demo * docs(time-picker): optimize suffix-icon demo * docs(time-picker): optimize popper-class/popper-append-to-body demo * docs(time-picker): optimize placeholder demo * docs(time-picker): optimize format/name/event demo * docs(time-picker): adjust the order of demo
This commit is contained in:
GitHub
parent
51c46cbd42
commit
ff7890c750
|
|
@ -1,16 +1,26 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
placeholder="任意时间点"
|
||||
></tiny-time-picker>
|
||||
<p>滚动选择时间</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value1"></tiny-time-picker>
|
||||
</div>
|
||||
|
||||
<p>箭头选择时间</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value1" arrow-control></tiny-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref(new Date(2016, 9, 10, 18, 40))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,18 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
placeholder="任意时间点"
|
||||
></tiny-time-picker>
|
||||
<p>滚动选择时间</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value1"></tiny-time-picker>
|
||||
</div>
|
||||
|
||||
<p>箭头选择时间</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value1" arrow-control></tiny-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -22,3 +26,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
placeholder="任意时间点"
|
||||
:clear-icon="IconClose"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
import { iconClose } from '@opentiny/vue-icon'
|
||||
|
||||
const IconClose = iconClose()
|
||||
const value1 = ref(new Date(2016, 9, 10, 18, 40))
|
||||
</script>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('自定义清除输入那妞', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/time-picker/clear-icon')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const timePicker = preview.locator('.tiny-date-editor > input')
|
||||
const timeSelect = page.locator('.tiny-time-panel')
|
||||
const closeIcon = preview.locator('.tiny-date-editor--time svg.baseClearicon')
|
||||
|
||||
await expect(timePicker).toHaveValue('18:40:00')
|
||||
await timePicker.click()
|
||||
await expect(timeSelect).toBeVisible()
|
||||
await timePicker.fill('inValidInput')
|
||||
await timePicker.press('Enter')
|
||||
await expect(timePicker).toHaveValue('18:40:00')
|
||||
await timePicker.hover()
|
||||
await expect(closeIcon).toBeVisible()
|
||||
await preview.locator('.tiny-date-editor--time svg.baseClearicon').click()
|
||||
// 正则表达式去判断头尾特征
|
||||
const pathReg = /^m13\.4 12.+0-1\.4L13\.4 12z$/
|
||||
await expect(closeIcon.locator('path')).toHaveAttribute('d', pathReg)
|
||||
})
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
placeholder="任意时间点"
|
||||
:clear-icon="IconClose"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
import { IconClose } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimePicker: TimePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
IconClose: IconClose(),
|
||||
value1: new Date(2016, 9, 10, 18, 40)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,18 +1,39 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
placeholder="任意时间点"
|
||||
:clearable="false"
|
||||
:arrow-control="true"
|
||||
></tiny-time-picker>
|
||||
<p>默认显示清除按钮</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
<p>隐藏清除按钮</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:clearable="false"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
<p>自定义清除按钮图标</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:clear-icon="IconError"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
import { iconError } from '@opentiny/vue-icon'
|
||||
|
||||
const value1 = ref(new Date(2016, 9, 10, 18, 40))
|
||||
const IconError = iconError()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('设置无清楚按钮', async ({ page }) => {
|
||||
test('隐藏清除按钮', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/time-picker/clearable')
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,31 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
placeholder="任意时间点"
|
||||
:clearable="false"
|
||||
:arrow-control="true"
|
||||
></tiny-time-picker>
|
||||
<p>默认显示清除按钮</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
<p>隐藏清除按钮</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:clearable="false"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
<p>自定义清除按钮图标</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:clear-icon="IconError"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
import { iconError } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -19,8 +33,15 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
value1: new Date(2016, 9, 10, 18, 40)
|
||||
value1: new Date(2016, 9, 10, 18, 40),
|
||||
IconError: iconError()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="6">
|
||||
<span>周：</span>
|
||||
<tiny-date-picker v-model="value1" type="week" placeholder="选择周" format="WW"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6">
|
||||
<span>年：</span>
|
||||
<tiny-date-picker v-model="value2" type="year" placeholder="选择年" format="yyyy"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-col :span="6">
|
||||
<span>月：</span>
|
||||
<tiny-date-picker v-model="value3" type="month" placeholder="选择月" format="MM"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6">
|
||||
<span>日：</span>
|
||||
<tiny-date-picker v-model="value4" type="date" placeholder="选择日期" format="dd"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol, DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref('')
|
||||
const value2 = ref('')
|
||||
const value3 = ref('')
|
||||
const value4 = ref('')
|
||||
</script>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('日期显示格式', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/time-picker/date')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const getCloseIcon = (parent) => parent.locator('svg.baseClearicon')
|
||||
const weekPicker = preview.locator('.tiny-date-editor--week')
|
||||
const yearPicker = preview.locator('.tiny-date-editor--year')
|
||||
const monthPicker = preview.locator('.tiny-date-editor--month')
|
||||
const datePicker = preview.locator('.tiny-date-editor--date')
|
||||
const select = page.locator('body .tiny-picker-panel.tiny-date-picker.tiny-popper')
|
||||
|
||||
// 周选择器
|
||||
const weekSelect = select.nth(3)
|
||||
await weekPicker.click()
|
||||
await expect(weekSelect).toBeVisible()
|
||||
await weekSelect.getByText('2023 年').click()
|
||||
await weekSelect.locator('.tiny-year-table td').getByText('2023').click()
|
||||
await weekSelect
|
||||
.locator('.tiny-month-table td')
|
||||
.getByText(/^一月$/)
|
||||
.click()
|
||||
await weekSelect.locator('.tiny-date-table td').getByText(/^1$/).first().click()
|
||||
await expect(weekPicker.locator('input')).toHaveValue('01')
|
||||
await weekPicker.hover()
|
||||
await expect(getCloseIcon(weekPicker)).toBeVisible()
|
||||
await getCloseIcon(weekPicker).click()
|
||||
await expect(weekPicker.locator('input')).toHaveValue('')
|
||||
|
||||
// 年选择器
|
||||
const yearSelect = select.nth(3)
|
||||
await yearPicker.click()
|
||||
await expect(yearSelect).toBeVisible()
|
||||
await yearSelect.getByText('2023').click()
|
||||
await expect(yearPicker.locator('input')).toHaveValue('2023')
|
||||
await yearPicker.hover()
|
||||
await expect(getCloseIcon(yearPicker)).toBeVisible()
|
||||
await getCloseIcon(yearPicker).click()
|
||||
await expect(yearPicker.locator('input')).toHaveValue('')
|
||||
|
||||
// 月选择器
|
||||
const monthSelect = select.nth(3)
|
||||
await monthPicker.click()
|
||||
await expect(monthSelect).toBeVisible()
|
||||
await monthSelect.getByText(/^一月$/).click()
|
||||
await expect(monthPicker.locator('input')).toHaveValue('01')
|
||||
await monthPicker.hover()
|
||||
await expect(getCloseIcon(monthPicker)).toBeVisible()
|
||||
await getCloseIcon(monthPicker).click()
|
||||
await expect(monthPicker.locator('input')).toHaveValue('')
|
||||
|
||||
// 日选择器
|
||||
const dateSelect = select.nth(3)
|
||||
await datePicker.click()
|
||||
await expect(dateSelect).toBeVisible()
|
||||
await dateSelect.getByText('2023 年').click()
|
||||
await dateSelect.locator('.tiny-year-table td').getByText('2023').click()
|
||||
await dateSelect
|
||||
.locator('.tiny-month-table td')
|
||||
.getByText(/^一月$/)
|
||||
.click()
|
||||
await dateSelect.locator('.tiny-date-table td').getByText(/^1$/).first().click()
|
||||
await expect(datePicker.locator('input')).toHaveValue('01')
|
||||
await datePicker.hover()
|
||||
await expect(getCloseIcon(datePicker)).toBeVisible()
|
||||
await getCloseIcon(datePicker).click()
|
||||
await expect(datePicker.locator('input')).toHaveValue('')
|
||||
})
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="6">
|
||||
<span>周：</span>
|
||||
<tiny-date-picker v-model="value1" type="week" placeholder="选择周" format="WW"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6">
|
||||
<span>年：</span>
|
||||
<tiny-date-picker v-model="value2" type="year" placeholder="选择年" format="yyyy"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-col :span="6">
|
||||
<span>月：</span>
|
||||
<tiny-date-picker v-model="value3" type="month" placeholder="选择月" format="MM"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6">
|
||||
<span>日：</span>
|
||||
<tiny-date-picker v-model="value4" type="date" placeholder="选择日期" format="dd"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Layout, Row, Col, DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col,
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,19 +1,19 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value"
|
||||
:default-value="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
placeholder="任意时间点"
|
||||
clearable
|
||||
></tiny-time-picker>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value" :default-value="value1"></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref(new Date(2020, 2, 10, 18, 40))
|
||||
const value = ref('')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value"
|
||||
:default-value="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
placeholder="任意时间点"
|
||||
clearable
|
||||
></tiny-time-picker>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value" :default-value="value1"></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -25,3 +19,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,33 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
placeholder="任意时间点"
|
||||
disabled
|
||||
></tiny-time-picker>
|
||||
<p>整体禁用</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value1" disabled></tiny-time-picker>
|
||||
</div>
|
||||
|
||||
<p>部分禁用</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref(new Date(2016, 9, 10, 18, 40))
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
placeholder="任意时间点"
|
||||
disabled
|
||||
></tiny-time-picker>
|
||||
<p>整体禁用</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value1" disabled></tiny-time-picker>
|
||||
</div>
|
||||
|
||||
<p>部分禁用</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -23,3 +29,13 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
placeholder="任意时间点"
|
||||
:editable="false"
|
||||
></tiny-time-picker>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value1" :editable="false"></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref(new Date(2016, 9, 10, 18, 40))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
placeholder="任意时间点"
|
||||
:editable="false"
|
||||
></tiny-time-picker>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value1" :editable="false"></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -23,3 +18,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-button @click="handleFocus">focus</tiny-button>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
ref="timePickerRef"
|
||||
@blur="bulr"
|
||||
@blur="blur"
|
||||
@change="change"
|
||||
@focus="focus"
|
||||
placeholder="选择时间范围"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker, Modal, Button as TinyButton } from '@opentiny/vue'
|
||||
|
||||
|
|
@ -23,7 +22,7 @@ function handleFocus() {
|
|||
timePickerRef.value.focus()
|
||||
}
|
||||
|
||||
function bulr() {
|
||||
function blur() {
|
||||
Modal.message('blur事件')
|
||||
}
|
||||
|
||||
|
|
@ -35,3 +34,13 @@ function focus() {
|
|||
Modal.message('focus事件')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('聚焦和失焦事件', async ({ page }) => {
|
||||
test('事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/time-picker/event-blur')
|
||||
await page.goto('http://localhost:7130/pc/time-picker/event')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const timePicker = preview.locator('.tiny-date-editor > input')
|
||||
|
|
@ -1,18 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-button @click="handleFocus">focus</tiny-button>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
ref="timePicker"
|
||||
@blur="bulr"
|
||||
ref="timePickerRef"
|
||||
@blur="blur"
|
||||
@change="change"
|
||||
@focus="focus"
|
||||
placeholder="选择时间范围"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimePicker, Modal, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -27,9 +26,9 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
handleFocus() {
|
||||
this.$refs.timePicker.focus()
|
||||
this.$refs.timePickerRef.focus()
|
||||
},
|
||||
bulr() {
|
||||
blur() {
|
||||
Modal.message('blur事件')
|
||||
},
|
||||
change() {
|
||||
|
|
@ -41,3 +40,13 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,23 +1,55 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
placeholder="任意时间点"
|
||||
:picker-options="{
|
||||
format: 'HH:mm',
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
value-format="timestamp"
|
||||
></tiny-time-picker>
|
||||
<span class="select-time">当前选中时间：{{ value1 }}</span>
|
||||
<p>时间输入框中显示的格式：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value" format="hh:mm:ss a"></tiny-time-picker>
|
||||
<tiny-time-picker v-model="value" format="HH:mm:ss a"></tiny-time-picker>
|
||||
|
||||
<tiny-time-picker v-model="value" format="h:m:s A"></tiny-time-picker>
|
||||
<tiny-time-picker v-model="value" format="H:m:s A"></tiny-time-picker>
|
||||
</div>
|
||||
|
||||
<p>选中值的格式：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker
|
||||
v-model="selectedValue"
|
||||
value-format="timestamp"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
<span class="select-time">当前选中时间：{{ selectedValue }}</span>
|
||||
|
||||
<p>下拉框中显示的格式：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker
|
||||
v-model="pickerValue"
|
||||
:picker-options="{
|
||||
format: 'HH:mm'
|
||||
}"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
|
||||
const startTime = Number(new Date(2016, 9, 10, 18, 30))
|
||||
|
||||
const value1 = ref(startTime)
|
||||
const value = ref(new Date(2016, 9, 10, 18, 40))
|
||||
const selectedValue = ref(Number(new Date(2016, 9, 10, 18, 30)))
|
||||
const pickerValue = ref(new Date(2016, 9, 10, 18, 40))
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.select-time {
|
||||
display: inline-block;
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,4 +17,10 @@ test('时间格式化', async ({ page }) => {
|
|||
await timeSelect.getByRole('button', { name: '确定' }).click()
|
||||
await expect(timePicker).toHaveValue('19:30:00')
|
||||
await expect(valueSpan).toHaveText('当前选中时间：1476099000000')
|
||||
|
||||
// 测试 am/pm 格式
|
||||
const timePickerFormat = preview.locator('.tiny-date-editor')
|
||||
|
||||
await expect(timePickerFormat.first().locator('input')).toHaveValue('06:40:00 pm')
|
||||
await expect(timePickerFormat.nth(1).locator('input')).toHaveValue('18:40:00 pm')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,19 +1,36 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
placeholder="任意时间点"
|
||||
:picker-options="{
|
||||
format: 'HH:mm',
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
value-format="timestamp"
|
||||
></tiny-time-picker>
|
||||
<span class="select-time">当前选中时间：{{ value1 }}</span>
|
||||
<p>时间输入框中显示的格式：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value" format="hh:mm:ss a"></tiny-time-picker>
|
||||
<tiny-time-picker v-model="value" format="HH:mm:ss a"></tiny-time-picker>
|
||||
|
||||
<tiny-time-picker v-model="value" format="h:m:s A"></tiny-time-picker>
|
||||
<tiny-time-picker v-model="value" format="H:m:s A"></tiny-time-picker>
|
||||
</div>
|
||||
|
||||
<p>选中值的格式：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker
|
||||
v-model="selectedValue"
|
||||
value-format="timestamp"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
<span class="select-time">当前选中时间：{{ selectedValue }}</span>
|
||||
|
||||
<p>下拉框中显示的格式：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker
|
||||
v-model="pickerValue"
|
||||
:picker-options="{
|
||||
format: 'HH:mm'
|
||||
}"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -21,11 +38,30 @@ export default {
|
|||
TinyTimePicker: TimePicker
|
||||
},
|
||||
data() {
|
||||
const startTime = Number(new Date(2016, 9, 10, 18, 30))
|
||||
const value = new Date(2016, 9, 10, 18, 40)
|
||||
const selectedValue = Number(new Date(2016, 9, 10, 18, 30))
|
||||
const pickerValue = new Date(2016, 9, 10, 18, 40)
|
||||
|
||||
return {
|
||||
value1: startTime
|
||||
value,
|
||||
selectedValue,
|
||||
pickerValue
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.select-time {
|
||||
display: inline-block;
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
is-range
|
||||
v-model="value1"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
placeholder="选择时间范围"
|
||||
></tiny-time-picker>
|
||||
<tiny-time-picker v-model="value1" is-range range-separator="至"></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
is-range
|
||||
v-model="value1"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
placeholder="选择时间范围"
|
||||
></tiny-time-picker>
|
||||
<tiny-time-picker v-model="value1" is-range range-separator="至"></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker v-model="value1" name="name" placeholder="选择时间范围"></tiny-time-picker>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value1" name="name"></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref(new Date(2016, 9, 10, 18, 40))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker v-model="value1" name="name" placeholder="选择时间范围"></tiny-time-picker>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value1" name="name"></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -18,3 +18,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
placeholder="任意时间点"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref(new Date(2016, 9, 10, 18, 40))
|
||||
</script>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('picker-options 设置时间选择范围', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/time-picker/picker-options')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const timePicker = preview.locator('.tiny-date-editor > input')
|
||||
const timeSelect = page.locator('.tiny-time-panel')
|
||||
const hourSelect = timeSelect.locator('.tiny-scrollbar').first()
|
||||
const minSelect = timeSelect.locator('.tiny-scrollbar').nth(1)
|
||||
const secondSelect = timeSelect.locator('.tiny-scrollbar').nth(2)
|
||||
|
||||
// 测试非法输入是否赋予默认值
|
||||
await expect(timePicker).toHaveValue('18:40:00')
|
||||
await timePicker.click()
|
||||
await expect(timeSelect).toBeVisible()
|
||||
await timePicker.fill('inValidInput')
|
||||
await timePicker.press('Enter')
|
||||
await expect(timePicker).toHaveValue('18:40:00')
|
||||
// 测试可选时间范围
|
||||
await timePicker.click()
|
||||
await expect(hourSelect.locator('.tiny-time-spinner__item')).toHaveCount(24)
|
||||
await expect(minSelect.locator('.tiny-time-spinner__item')).toHaveCount(60)
|
||||
await expect(secondSelect.locator('.tiny-time-spinner__item')).toHaveCount(60)
|
||||
await expect(hourSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(21)
|
||||
await expect(minSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(30)
|
||||
await expect(secondSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(0)
|
||||
await hourSelect.locator('.tiny-time-spinner__item').getByText('19').click()
|
||||
await minSelect.locator('.tiny-time-spinner__item').getByText('42').click()
|
||||
await secondSelect.locator('.tiny-time-spinner__item').getByText('01').click()
|
||||
await expect(hourSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(21)
|
||||
await expect(minSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(0)
|
||||
await expect(secondSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(0)
|
||||
await expect(timePicker).toHaveValue('19:42:01')
|
||||
// 测试清除按钮
|
||||
await timePicker.hover()
|
||||
await expect(preview.locator('.tiny-date-editor--time svg.baseClearicon')).toBeVisible()
|
||||
await preview.locator('.tiny-date-editor--time svg.baseClearicon').click()
|
||||
await expect(timePicker).toHaveValue('')
|
||||
})
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
placeholder="任意时间点"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimePicker: TimePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: new Date(2016, 9, 10, 18, 40)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>选择时间</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value" placeholder="请选择时间"></tiny-time-picker>
|
||||
</div>
|
||||
|
||||
<p>选择时间范围</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker
|
||||
v-model="rangeValue"
|
||||
is-range
|
||||
start-placeholder="请选择开始时间"
|
||||
end-placeholder="请选择结束时间"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
const rangeValue = ref(['', ''])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('占位符', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/time-picker/placeholder')
|
||||
})
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>选择时间</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value" placeholder="请选择时间"></tiny-time-picker>
|
||||
</div>
|
||||
|
||||
<p>选择时间范围</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker
|
||||
v-model="rangeValue"
|
||||
is-range
|
||||
start-placeholder="请选择开始时间"
|
||||
end-placeholder="请选择结束时间"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimePicker: TimePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
rangeValue: ['', '']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,23 +1,26 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
popper-class="pickerClass"
|
||||
popper-class="picker-class"
|
||||
:popper-append-to-body="false"
|
||||
placeholder="选择时间"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref(new Date(2016, 9, 10, 18, 40))
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.pickerClass {
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
|
||||
.picker-class {
|
||||
background: #dddddd;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
popper-class="pickerClass"
|
||||
popper-class="picker-class"
|
||||
:popper-append-to-body="false"
|
||||
placeholder="选择时间"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -24,8 +23,12 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.pickerClass {
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
|
||||
.picker-class {
|
||||
background: #dddddd;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-radio-group v-model="radioValue" size="mini" class="demo-time-picker__switch-size">
|
||||
<tiny-radio-button label="medium"></tiny-radio-button>
|
||||
<tiny-radio-button label="small"></tiny-radio-button>
|
||||
<tiny-radio-button label="default"></tiny-radio-button>
|
||||
<tiny-radio-button label="mini"></tiny-radio-button>
|
||||
</tiny-radio-group>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value" :size="radioValue"></tiny-time-picker>
|
||||
<tiny-time-picker v-model="rangeValue" is-range :size="radioValue"></tiny-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
TimePicker as TinyTimePicker,
|
||||
RadioGroup as TinyRadioGroup,
|
||||
RadioButton as TinyRadioButton
|
||||
} from '@opentiny/vue'
|
||||
|
||||
const startTime = new Date(2016, 9, 10, 18, 40)
|
||||
const endTime = new Date(2016, 9, 10, 18, 50)
|
||||
|
||||
const value = ref(new Date(2016, 9, 10, 18, 40))
|
||||
const rangeValue = ref([startTime, endTime])
|
||||
const radioValue = ref('default')
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-time-picker__switch-size {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
size="medium"
|
||||
is-range
|
||||
v-model="value1"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
placeholder="选择时间范围"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref(new Date(2016, 9, 10, 18, 40))
|
||||
</script>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('尺寸设置medium', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/time-picker/size-medium')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const timePicker = preview.locator('.tiny-date-editor')
|
||||
await expect(timePicker).toHaveCSS('height', '42px')
|
||||
})
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
size="medium"
|
||||
is-range
|
||||
v-model="value1"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
placeholder="选择时间范围"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimePicker: TimePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: new Date(2016, 9, 10, 18, 40)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
size="mini"
|
||||
is-range
|
||||
v-model="value1"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
placeholder="选择时间范围"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref(new Date(2016, 9, 10, 18, 40))
|
||||
</script>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('尺寸设置mini', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/time-picker/size-mini')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const timePicker = preview.locator('.tiny-date-editor')
|
||||
await expect(timePicker).toHaveCSS('height', '24px')
|
||||
})
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
size="mini"
|
||||
is-range
|
||||
v-model="value1"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
placeholder="选择时间范围"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimePicker: TimePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: new Date(2016, 9, 10, 18, 40)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
size="small"
|
||||
is-range
|
||||
v-model="value1"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
placeholder="选择时间范围"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref(new Date(2016, 9, 10, 18, 40))
|
||||
</script>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
size="small"
|
||||
is-range
|
||||
v-model="value1"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
placeholder="选择时间范围"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimePicker: TimePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: new Date(2016, 9, 10, 18, 40)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('尺寸设置small', async ({ page }) => {
|
||||
test('尺寸', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/time-picker/size-small')
|
||||
await page.goto('http://localhost:7130/pc/time-picker/size')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const timePicker = preview.locator('.tiny-date-editor')
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-radio-group v-model="radioValue" size="mini" class="demo-time-picker__switch-size">
|
||||
<tiny-radio-button label="medium"></tiny-radio-button>
|
||||
<tiny-radio-button label="small"></tiny-radio-button>
|
||||
<tiny-radio-button label="default"></tiny-radio-button>
|
||||
<tiny-radio-button label="mini"></tiny-radio-button>
|
||||
</tiny-radio-group>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value" :size="radioValue"></tiny-time-picker>
|
||||
<tiny-time-picker v-model="rangeValue" is-range :size="radioValue"></tiny-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
TimePicker,
|
||||
RadioGroup,
|
||||
RadioButton
|
||||
} from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimePicker: TimePicker,
|
||||
TinyRadioGroup: RadioGroup,
|
||||
TinyRadioButton: RadioButton
|
||||
},
|
||||
data() {
|
||||
const startTime = new Date(2016, 9, 10, 18, 40)
|
||||
const endTime = new Date(2016, 9, 10, 18, 50)
|
||||
|
||||
return {
|
||||
value: new Date(2016, 9, 10, 18, 40),
|
||||
rangeValue: [startTime, endTime],
|
||||
radioValue: 'default'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-time-picker__switch-size {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value" :step="step" placeholder="任意时间点"></tiny-time-picker>
|
||||
<br />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -17,3 +16,9 @@ const step = ref({
|
|||
// value: new Date(2016, 9, 10, Math.floor(19 / 2) * 2, Math.floor(40 / 5) * 5)
|
||||
const value = ref(new Date(2016, 9, 10, 18, 40))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('步长', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/time-picker/step')
|
||||
})
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker v-model="value" :step="step" placeholder="任意时间点"></tiny-time-picker>
|
||||
<br />
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value" :step="step"></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -25,3 +24,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker v-model="value1" :suffix-icon="IconMinus" placeholder="选择时间范围"></tiny-time-picker>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value1" :suffix-icon="IconMinus"></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
import { iconMinus } from '@opentiny/vue-icon'
|
||||
|
|
@ -12,3 +12,9 @@ import { iconMinus } from '@opentiny/vue-icon'
|
|||
const value1 = ref(new Date(2016, 9, 10, 18, 40))
|
||||
const IconMinus = iconMinus()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker v-model="value1" :suffix-icon="IconMinus" placeholder="选择时间范围"></tiny-time-picker>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-time-picker v-model="value1" :suffix-icon="IconMinus"></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
import { IconMinus } from '@opentiny/vue-icon'
|
||||
|
||||
|
|
@ -20,3 +20,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 182px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker v-model="value1" format="hh:mm:ss a" placeholder="任意时间点"></tiny-time-picker>
|
||||
<tiny-time-picker v-model="value1" format="HH:mm:ss a" placeholder="任意时间点"></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref(new Date(2016, 9, 10, 18, 40))
|
||||
</script>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('时间显示am/pm', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/time-picker/time-low')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const timePicker = preview.locator('.tiny-date-editor')
|
||||
|
||||
await expect(timePicker.first().locator('input')).toHaveValue('06:40:00 pm')
|
||||
await expect(timePicker.nth(1).locator('input')).toHaveValue('18:40:00 pm')
|
||||
})
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker v-model="value1" format="hh:mm:ss a" placeholder="任意时间点"></tiny-time-picker>
|
||||
<tiny-time-picker v-model="value1" format="HH:mm:ss a" placeholder="任意时间点"></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimePicker: TimePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: new Date(2016, 9, 10, 18, 40)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker v-model="value1" format="h:m:s A" placeholder="任意时间点"></tiny-time-picker>
|
||||
<tiny-time-picker v-model="value1" format="H:m:s A" placeholder="任意时间点"></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref(new Date(2016, 9, 10, 18, 40))
|
||||
</script>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker v-model="value1" format="h:m:s A" placeholder="任意时间点"></tiny-time-picker>
|
||||
<tiny-time-picker v-model="value1" format="H:m:s A" placeholder="任意时间点"></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimePicker: TimePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: new Date(2016, 9, 10, 18, 40)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -4,4 +4,4 @@ title: TimePicker 时间选择器
|
|||
|
||||
# TimePicker 时间选择器
|
||||
|
||||
<div>用于设置/选择日期，包括年月/年月日/年月日时分/年月日时分秒日期格式。</div>
|
||||
<div>用于选择时间（时分秒）。</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: TimePicker Time Selector
|
||||
title: TimePicker
|
||||
---
|
||||
|
||||
# TimePicker Time Selector
|
||||
# TimePicker
|
||||
|
||||
<div>This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.</div>
|
||||
<div>Used to select time (hours, minutes and seconds).</div>
|
||||
|
|
|
|||
|
|
@ -5,89 +5,106 @@ export default {
|
|||
{
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '默认是通过滚动的方式选择时间，<code>arrow-control</code> 属性可以设置通过箭头的方式选择时间。',
|
||||
'en-US': 'The default is to select the time by scrolling, and the <code> arrow-control </code> property can be set to select the time by the arrow.'
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'picker-options',
|
||||
'name': { 'zh-CN': '选择范围', 'en-US': 'Selection Range' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>picker-options 设置时间选择范围</p>\n',
|
||||
'en-US': '<p>picker-options Set the time range</p>\n'
|
||||
},
|
||||
'codeFiles': ['picker-options.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'clearable1',
|
||||
'name': { 'zh-CN': '箭头选择', 'en-US': 'Arrow Selection' },
|
||||
'demoId': 'is-range',
|
||||
'name': { 'zh-CN': '范围选择', 'en-US': 'Select time range' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p><code>arrow-control</code> 属性设置是否使用箭头进行时间选择，仅对 <code><tiny-time-picker></code> 有效</p>\n',
|
||||
'en-US':
|
||||
'The <p><code>arrow-control</code> property specifies whether to use the arrow to select the time. This property is valid only for <code><tiny-time-picker></code> .</p>\n'
|
||||
'<p><code>is-range</code> 设置是否为范围选择，默认为 false，<code>range-separator</code>，设置范围选择分隔符（为可选值）默认为 \'-\'。</p>\n',
|
||||
'en-US': '<p><code> is-range </code> whether the setting is range selection. Default is false, <code> range-separator </code>, and the range selection delimiter (optional) defaults to\'-\'.</p>\n'
|
||||
},
|
||||
'codeFiles': ['clearable.vue']
|
||||
'codeFiles': ['is-range.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'disabled',
|
||||
'name': { 'zh-CN': '禁用状态', 'en-US': 'Disabled status' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过设置 <code>disabled</code> 为 true 后，禁用时间输入框。</p><p>通过设置 <code>picker-options</code> 的 <code>selectableRange</code> 属性，可以实现部分禁用，此时只能选择一部分时间。</p>\n',
|
||||
'en-US':
|
||||
'<p>Disable the time input box by setting <code> disabled </code> to true.</p><p>Partial disable can be achieved by setting the <code>selectableRange<code> property of <code>picker-options<code>, and only a part of time can be selected at this time.</p>\n'
|
||||
},
|
||||
'codeFiles': ['disabled.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'placeholder',
|
||||
'name': { 'zh-CN': '占位符', 'en-US': 'Placeholder' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code> placeholder </code> 属性设置时间输入框的占位符，通过 <code> start-placeholder </code> / <code> end-placeholder </code> 设置时间范围输入框的开始和结束时间的占位符。</p>\n',
|
||||
'en-US':
|
||||
'<p>Set the placeholder for the time input box through the <code> placeholder </code> property, and set the placeholder for the start and end time of the time range input box through <code> start-placeholder </code> / <code> end-placeholder </code>.</p>\n'
|
||||
},
|
||||
'codeFiles': ['placeholder.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'size',
|
||||
'name': { 'zh-CN': '尺寸', 'en-US': 'Size' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>size</code> 自定义组件尺寸。</p>\n',
|
||||
'en-US': '<p>Customize size by <code>size</code>.</p>\n'
|
||||
},
|
||||
'codeFiles': ['size.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'step',
|
||||
'name': { 'zh-CN': '设置步长', 'en-US': 'Clear Input' },
|
||||
'name': { 'zh-CN': '步长', 'en-US': 'Step' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>step</code> 设置步长，默认值为 <code>{ hour: 1, minute: 1, second: 1 }</code>，其中 <code>hour</code> 的设置范围是 <code>0-23</code>，<code>minute</code>、<code>second</code> 的设置范围是 <code>0-60</code>。可单独设置其中的一项或多项值，未设置的默认值为 <code>1</code>。</p>\n',
|
||||
'en-US': '<p>Clear the icon by <code>clear-icon</code></p>\n'
|
||||
'en-US': '<p>Set the step size through <code> step </code>. The default value is <code> {hour: 1, minute: 1, second: 1} </code>, where the setting range of <code> hour </code> is <code> 0-23 </code>, <code> minute </code>, <code> second </code> is <code> 0-60 </code>. One or more of these values can be set separately, and the unset default value is <code> 1 </code>.</p>\n'
|
||||
},
|
||||
'codeFiles': ['step.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'clear-icon',
|
||||
'name': { 'zh-CN': '清除输入', 'en-US': 'Size setting medium' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>clear-icon</code> 自定义清空图标</p>\n',
|
||||
'en-US': '<p>Customize the group price size by <code>size</code></p>\n'
|
||||
},
|
||||
'codeFiles': ['clear-icon.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'size-medium',
|
||||
'name': { 'zh-CN': '尺寸设置medium', 'en-US': 'Size setting small' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>size</code> 自定义组件尺寸</p>\n',
|
||||
'en-US': '<p>Customize the group price size by <code>size</code></p>\n'
|
||||
},
|
||||
'codeFiles': ['size-medium.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'size-small',
|
||||
'name': { 'zh-CN': '尺寸设置small', 'en-US': 'Size setting mini' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>size</code> 自定义组件尺寸</p>\n',
|
||||
'en-US': '<p>Customize the group price size by <code>size</code></p>\n'
|
||||
},
|
||||
'codeFiles': ['size-small.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'size-mini',
|
||||
'name': { 'zh-CN': '尺寸设置mini', 'en-US': 'Clear button' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>size</code> 自定义组件尺寸</p>\n',
|
||||
'en-US':
|
||||
'<p>Use the <code>clearable</code> attribute to set whether to display the Clear button. The default value is true</p>\n'
|
||||
},
|
||||
'codeFiles': ['size-mini.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'clearable',
|
||||
'name': { 'zh-CN': '清除按钮', 'en-US': 'Customized rear icon' },
|
||||
'name': { 'zh-CN': '清除按钮', 'en-US': 'Customized clear icon' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>clearable</code> 属性设置是否显示清除按钮，默认值为 true</p>\n',
|
||||
'zh-CN': '<p>通过 <code>clearable</code> 属性设置是否显示清除按钮，默认值为 true。通过 <code>clear-icon</code> 属性可以自定义清除按钮的图标。</p>\n',
|
||||
'en-US':
|
||||
'<p> uses the <code>suffix-icon</code> attribute to set the icon behind the date text box. An icon is imported from the <code>@opentiny/vue-icon</code>, initialized, and transferred to the <code>suffix-icon</code>. </p>\n'
|
||||
'<p>Set whether the clear button is displayed through the <code> clearable </code> property, which defaults to true. You can customize the icon of the clear button through the <code> clear-icon </code> property.</p>\n'
|
||||
},
|
||||
'codeFiles': ['clearable.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'format',
|
||||
'name': { 'zh-CN': '时间格式化', 'en-US': 'Time format' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
`
|
||||
<p><code>format</code> 时间格式化显示\n<code>timestamp</code> JS 时间戳，仅 value-format 可用；组件绑定值为 number 类型。</p>\n
|
||||
<p>通过 <code>hh</code> 属性可设置 12 小时制。 <code>HH</code> 属性为 24 小时制，须和 A 或 a 使用。 <code>h</code> 与 <code>H</code> 属性设置不补 0。\n通过 <code>mm</code> 属性可设置分钟显示格式，例如 01。 <code>m</code> 属性设置不补 0。\n通过 <code>ss</code> 属性可设置秒的显示格式，例如 01。 <code>s</code> 属性设置不补 0。\n通过 <code>a</code> 属性可设置显示时间为 am/pm <code>A</code>属性设置显示时间为 AM/PM。</p>\n
|
||||
`,
|
||||
'en-US':
|
||||
'<p>You can set the 12-hour format through the <code>hh</code> attribute. The <code>HH</code> attribute is in the 24-hour format and must be used with A or a. The <code>h</code> and <code>H</code> attributes are not set to 0. \nYou can use the <code>mm</code> attribute to set the minute display format, for example, 01. The <code>m</code> attribute is not set to 0. \nYou can use the <code>ss</code> attribute to set the display format of seconds, for example, 01. The <code>s</code> attribute is not set to 0. \nThe <code>a</code> property can be used to set the display time to am/pm <code>A</code> property can be used to set the display time to AM/PM. </p>\n'
|
||||
},
|
||||
'codeFiles': ['format.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'default-value',
|
||||
'name': { 'zh-CN': '默认时间', 'en-US': 'Default value' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>default-value</code> 设置选择器打开显示默认时间。</p>\n',
|
||||
'en-US': '<p>Open and display the default time through the <code> default-value </code> setting selector.</p>\n'
|
||||
},
|
||||
'codeFiles': ['default-value.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'name',
|
||||
'name': { 'zh-CN': '原生属性', 'en-US': 'Native attribute' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>name</code> 属性设置默认 name。</p>\n',
|
||||
'en-US': '<p>Set the default name through the <code> name </code> property.</p>\n'
|
||||
},
|
||||
'codeFiles': ['name.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'suffix-icon',
|
||||
'name': { 'zh-CN': '自定义后置图标', 'en-US': 'Time Format' },
|
||||
'name': { 'zh-CN': '自定义后置图标', 'en-US': 'Customize suffix icon' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>suffix-icon</code> 属性设置日期输入框后置图标，从 <code>@opentiny/vue-icon</code> 中导入一个图标并进行初始化后传给 <code>suffix-icon</code>。</p>\n',
|
||||
|
|
@ -96,80 +113,19 @@ export default {
|
|||
},
|
||||
'codeFiles': ['suffix-icon.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'format',
|
||||
'name': { 'zh-CN': '时间格式化', 'en-US': 'Time display type' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p><code>format</code> 时间格式化显示\n<code>timestamp</code> JS 时间戳，仅 value-format 可用；组件绑定值为 number 类型</p>\n',
|
||||
'en-US':
|
||||
'<p>You can set the 12-hour format through the <code>hh</code> attribute. The <code>HH</code> attribute is in the 24-hour format and must be used with A or a. The <code>h</code> and <code>H</code> attributes are not set to 0. \nYou can use the <code>mm</code> attribute to set the minute display format, for example, 01. The <code>m</code> attribute is not set to 0. \nYou can use the <code>ss</code> attribute to set the display format of seconds, for example, 01. The <code>s</code> attribute is not set to 0. \nThe <code>a</code> property can be used to set the display time to am/pm <code>A</code> property can be used to set the display time to AM/PM. </p>\n'
|
||||
},
|
||||
'codeFiles': ['format.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'time-low',
|
||||
'name': { 'zh-CN': '时间显示类型', 'en-US': 'Date Display Format' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>hh</code> 属性可设置 12 小时制。 <code>HH</code> 属性为 24 小时制，须和 A 或 a 使用。 <code>h</code> 与 <code>H</code> 属性设置不补 0。\n通过 <code>mm</code> 属性可设置分钟显示格式，例如 01。 <code>m</code> 属性设置不补 0。\n通过 <code>ss</code> 属性可设置秒的显示格式，例如 01。 <code>s</code> 属性设置不补 0。\n通过 <code>a</code> 属性可设置显示时间为 am/pm <code>A</code>属性设置显示时间为 AM/PM。</p>\n',
|
||||
'en-US':
|
||||
'The <p><code>WW</code> attribute is set to week, for example, 01. The <code>W</code> attribute is set to zeros. \n<code>yyyy</code> The attribute sets the year, for example, 2020. \n<code>MM</code>: month. For example, 01 <code>M</code>: 0 is not added. \n<code>dd</code> attribute setting date, for example, 01 <code>d</code>. </p>\n'
|
||||
},
|
||||
'codeFiles': ['time-low.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'date',
|
||||
'name': { 'zh-CN': '日期显示格式', 'en-US': 'Range Selection' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p><code>WW</code> 属性设置周，例如 01, <code>W</code> 属性设置不补 0。\n<code>yyyy</code> 属性设置年，例如 2020。\n<code>MM</code> 属性设置月，例如 01 <code>M</code> 属性设置不补 0。\n<code>dd</code> 属性设置日，例如 01 <code>d</code> 属性设置不补 0。</p>\n',
|
||||
'en-US':
|
||||
"<p><code>is-range</code>: indicates whether to select a range. The default value is false. <code>range-separator</code>. Set the range-separator (optional) to '-' by default. </p>\n"
|
||||
},
|
||||
'codeFiles': ['date.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'is-range',
|
||||
'name': { 'zh-CN': '范围选择', 'en-US': 'Default time setting when the selector is enabled' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p><code>is-range</code> 设置是否为范围选择，默认为 false，<code>range-separator</code>,设置范围选择分隔符（为可选值）默认为‘-’</p>\n',
|
||||
'en-US': '<p>Use <code>default-value</code> to set the selector to open the default display time</p>\n'
|
||||
},
|
||||
'codeFiles': ['is-range.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'default-value',
|
||||
'name': { 'zh-CN': '选择器打开时默认时间设置', 'en-US': 'Native Attribute' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>default-value</code> 设置选择器打开显示默认时间</p>\n',
|
||||
'en-US': '<p>Set the default name through the <code>name</code> attribute</p>\n'
|
||||
},
|
||||
'codeFiles': ['default-value.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'name',
|
||||
'name': { 'zh-CN': '原生属性', 'en-US': 'Class name of the drop-down list box' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>name</code> 属性设置默认 name</p>\n',
|
||||
'en-US': '<p>Set the class name of the drop-down list box through the <code>popper-class</code> attribute</p>\n'
|
||||
},
|
||||
'codeFiles': ['name.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'popper-class',
|
||||
'name': { 'zh-CN': '下拉框的类名', 'en-US': 'The text box cannot be entered.' },
|
||||
'name': { 'zh-CN': '下拉框的类名', 'en-US': 'Popper class' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>popper-class</code> 属性设置下拉框的类名</p>\n',
|
||||
'zh-CN': '<p>通过 <code>popper-class</code> 属性设置下拉框的类名。通过 <code>popper-append-to-body</code> 属性设置是否将下拉框放到 body 元素上，默认值为 true，下拉框挂在 body 元素上。</p>\n',
|
||||
'en-US':
|
||||
'By default, you can enter a date in the <p>Date text box. If you set <code>editable</code> to false, you cannot enter a date in the <p>Date text box. </p>\n'
|
||||
'<p>Set the class name of the drop-down box through the <code> popper-class </code> attribute, and set whether the drop-down box is placed on the body element through the <code> popper-append-to-body </code> attribute. The default value is true, and the drop-down box hangs on the body element.</p>\n'
|
||||
},
|
||||
'codeFiles': ['popper-class.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'editable',
|
||||
'name': { 'zh-CN': '文本框不可输入', 'en-US': 'Disabled status' },
|
||||
'name': { 'zh-CN': '文本框不可输入', 'en-US': 'Text box is not editable' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>日期输入框默认可以输入日期，设置 <code>editable</code> 为 false 后，将不能输入。</p>\n',
|
||||
'en-US': '<p>You can set <code>disabled</code> to true, you can disabled the time picker。</p>\n'
|
||||
|
|
@ -177,24 +133,14 @@ export default {
|
|||
'codeFiles': ['editable.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'disabled',
|
||||
'name': { 'zh-CN': '禁用状态', 'en-US': 'Event' },
|
||||
'demoId': 'event',
|
||||
'name': { 'zh-CN': '事件', 'en-US': 'Event' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过设置 <code>disabled</code> 为 true 后，禁用时间输入框。</p>\n',
|
||||
'en-US':
|
||||
'<p>When focusing or out of focus, the focus and blur events are triggered. When the selected value is determined, the change event is triggered.</p>\n'
|
||||
},
|
||||
'codeFiles': ['disabled.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'event-blur',
|
||||
'name': { 'zh-CN': '事件', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>当聚焦和失焦时会触发 focus 和 bulr 事件，当确定选值时会触发 change 事件</p>\n',
|
||||
'zh-CN': '<p>当聚焦和失焦时会触发 focus 和 blur 事件，当确定选值时会触发 change 事件。</p>\n',
|
||||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['event-blur.vue']
|
||||
}
|
||||
'codeFiles': ['event.vue']
|
||||
},
|
||||
],
|
||||
apis: [
|
||||
{
|
||||
|
|
@ -202,14 +148,42 @@ export default {
|
|||
'type': 'component',
|
||||
'properties': [
|
||||
{
|
||||
'name': 'modelValue / v-model',
|
||||
'type': 'date(DatePicker) / array(DateRangePicker)',
|
||||
'name': 'arrow-control',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '该属性的默认值为 false',
|
||||
'desc': {
|
||||
'zh-CN': '是否使用箭头进行时间选择',
|
||||
'en-US': 'Whether to use arrows for time selection'
|
||||
},
|
||||
'demoId': 'arrow-control'
|
||||
},
|
||||
{
|
||||
'name': 'clearable',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '该属性的默认值为 true',
|
||||
'desc': { 'zh-CN': '是否显示清除按钮', 'en-US': 'Display Clear Button' },
|
||||
'demoId': 'clearable'
|
||||
},
|
||||
{
|
||||
'name': 'clear-icon',
|
||||
'type': 'String',
|
||||
'defaultValue': '该属性的默认值为 IconOperationfaild',
|
||||
'desc': {
|
||||
'zh-CN': '自定义清空图标',
|
||||
'en-US':
|
||||
'Indicates whether to insert a pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false'
|
||||
},
|
||||
'demoId': 'clear-icon'
|
||||
},
|
||||
{
|
||||
'name': 'default-value',
|
||||
'type': 'Date',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '日期选择器选中的日期值，可设置选择器的初始值',
|
||||
'en-US': 'Date value selected by the date selector. You can set the initial value of the selector.'
|
||||
'zh-CN': '可选，当选中的日期值为空时，选择器面板打开时默认显示的时间，需设置为可被new Date()解析的值',
|
||||
'en-US': 'Native attribute'
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
'demoId': 'default-value'
|
||||
},
|
||||
{
|
||||
'name': 'disabled',
|
||||
|
|
@ -225,40 +199,6 @@ export default {
|
|||
'desc': { 'zh-CN': '文本框可输入', 'en-US': 'The text box can be entered.' },
|
||||
'demoId': 'editable'
|
||||
},
|
||||
{
|
||||
'name': 'clearable',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '该属性的默认值为 true',
|
||||
'desc': { 'zh-CN': '是否显示清除按钮', 'en-US': 'Display Clear Button' },
|
||||
'demoId': 'clearable'
|
||||
},
|
||||
{
|
||||
'name': 'size',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '输入框尺寸;该属性的可选值为 medium,small, mini',
|
||||
'en-US': 'Text box size; The values of this attribute are medium, small, and mini'
|
||||
},
|
||||
'demoId': 'size-medium'
|
||||
},
|
||||
{
|
||||
'name': 'placeholder',
|
||||
'type': 'String',
|
||||
'defaultValue': '该属性的默认值为空',
|
||||
'desc': { 'zh-CN': '非范围选择时的占位内容', 'en-US': 'Placeholder content for non-range selection' },
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'start-placeholder',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '范围选择时开始日期的占位内容',
|
||||
'en-US': 'Placeholder of the start date when the range is selected'
|
||||
},
|
||||
'demoId': 'size-medium'
|
||||
},
|
||||
{
|
||||
'name': 'end-placeholder',
|
||||
'type': 'String',
|
||||
|
|
@ -267,17 +207,7 @@ export default {
|
|||
'zh-CN': '范围选择时结束日期的占位内容',
|
||||
'en-US': 'Placeholder of the end date when the range is selected'
|
||||
},
|
||||
'demoId': 'size-medium'
|
||||
},
|
||||
{
|
||||
'name': 'step',
|
||||
'type': 'Object',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '自定义时分秒步长',
|
||||
'en-US': 'Indicates whether to select a time range. This parameter is valid only for <tiny-time-picker>.'
|
||||
},
|
||||
'demoId': 'step'
|
||||
'demoId': 'placeholder'
|
||||
},
|
||||
{
|
||||
'name': 'is-range',
|
||||
|
|
@ -291,14 +221,45 @@ export default {
|
|||
'demoId': 'is-range'
|
||||
},
|
||||
{
|
||||
'name': 'arrow-control',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '该属性的默认值为 false',
|
||||
'name': 'modelValue / v-model',
|
||||
'type': 'date(DatePicker) / array(DateRangePicker)',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '是否使用箭头进行时间选择，仅对<tiny-time-picker>有效',
|
||||
'en-US': 'Class name of the TimePicker drop-down list box'
|
||||
'zh-CN': '日期选择器选中的日期值，可设置选择器的初始值',
|
||||
'en-US': 'Date value selected by the date selector. You can set the initial value of the selector.'
|
||||
},
|
||||
'demoId': 'clearable'
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'name',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '原生 input <code>name</code> 属性', 'en-US': 'Native input <code>name</code> attribute' },
|
||||
'demoId': 'name'
|
||||
},
|
||||
{
|
||||
'name': 'picker-options',
|
||||
'type': 'Object',
|
||||
'defaultValue': '该属性的默认值为 {}',
|
||||
'desc': { 'zh-CN': '当前时间日期选择器特有的选项参考下表', 'en-US': 'Separator for selecting a range' },
|
||||
'demoId': 'basic-usage1'
|
||||
},
|
||||
{
|
||||
'name': 'placeholder',
|
||||
'type': 'String',
|
||||
'defaultValue': '该属性的默认值为空',
|
||||
'desc': { 'zh-CN': '非范围选择时的占位内容', 'en-US': 'Placeholder content for non-range selection' },
|
||||
'demoId': 'placeholder'
|
||||
},
|
||||
{
|
||||
'name': 'popper-append-to-body',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '该属性的默认值为 true',
|
||||
'desc': {
|
||||
'zh-CN': '是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'popper-class'
|
||||
},
|
||||
{
|
||||
'name': 'popper-class',
|
||||
|
|
@ -310,13 +271,6 @@ export default {
|
|||
},
|
||||
'demoId': 'popper-class'
|
||||
},
|
||||
{
|
||||
'name': 'picker-options',
|
||||
'type': 'Object',
|
||||
'defaultValue': '该属性的默认值为 {}',
|
||||
'desc': { 'zh-CN': '当前时间日期选择器特有的选项参考下表', 'en-US': 'Separator for selecting a range' },
|
||||
'demoId': 'basic-usage1'
|
||||
},
|
||||
{
|
||||
'name': 'range-separator',
|
||||
'type': 'String',
|
||||
|
|
@ -329,21 +283,34 @@ export default {
|
|||
'demoId': 'is-range'
|
||||
},
|
||||
{
|
||||
'name': 'default-value',
|
||||
'type': 'Date',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '可选，当选中的日期值为空时，选择器面板打开时默认显示的时间，需设置为可被new Date()解析的值',
|
||||
'en-US': 'Native attribute'
|
||||
},
|
||||
'demoId': 'default-value'
|
||||
},
|
||||
{
|
||||
'name': 'name',
|
||||
'name': 'size',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '原生属性', 'en-US': 'Class name of the customized header icon' },
|
||||
'demoId': 'name'
|
||||
'desc': {
|
||||
'zh-CN': '输入框尺寸;该属性的可选值为 medium,small, mini',
|
||||
'en-US': 'Text box size; The values of this attribute are medium, small, and mini'
|
||||
},
|
||||
'demoId': 'size'
|
||||
},
|
||||
{
|
||||
'name': 'start-placeholder',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '范围选择时开始日期的占位内容',
|
||||
'en-US': 'Placeholder of the start date when the range is selected'
|
||||
},
|
||||
'demoId': 'placeholder'
|
||||
},
|
||||
{
|
||||
'name': 'step',
|
||||
'type': 'Object',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '自定义时分秒步长',
|
||||
'en-US': 'Indicates whether to select a time range. This parameter is valid only for <tiny-time-picker>.'
|
||||
},
|
||||
'demoId': 'step'
|
||||
},
|
||||
{
|
||||
'name': 'suffix-icon',
|
||||
|
|
@ -352,29 +319,18 @@ export default {
|
|||
'desc': { 'zh-CN': '自定义头部图标的类名', 'en-US': 'Custom Clear Icon' },
|
||||
'demoId': 'suffix-icon'
|
||||
},
|
||||
{
|
||||
'name': 'clear-icon',
|
||||
'type': 'String',
|
||||
'defaultValue': '该属性的默认值为 IconOperationfaild',
|
||||
'desc': {
|
||||
'zh-CN': '自定义清空图标',
|
||||
'en-US':
|
||||
'Indicates whether to insert a pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false'
|
||||
},
|
||||
'demoId': 'clear-icon'
|
||||
},
|
||||
{
|
||||
'name': 'popper-append-to-body',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '该属性的默认值为 true',
|
||||
'desc': {
|
||||
'zh-CN': '是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': ''
|
||||
}
|
||||
],
|
||||
'events': [
|
||||
{
|
||||
'name': 'blur',
|
||||
'type': 'Function(arg)',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '当 input 失去焦点时触发;arg:{Object 时间组件Vue对象}',
|
||||
'en-US': 'This event is triggered when the input loses focus. arg:{Object Time Component Vue Object}'
|
||||
},
|
||||
'demoId': 'event'
|
||||
},
|
||||
{
|
||||
'name': 'change',
|
||||
'type': 'Function(arg)',
|
||||
|
|
@ -385,17 +341,7 @@ export default {
|
|||
'en-US':
|
||||
'This event is triggered when the user confirms the selected value. arg:{Date|Array is the time object of the currently selected value when it is not selected in a range. When the range is selected, it is the time object array of the currently selected value}'
|
||||
},
|
||||
'demoId': 'event-blur'
|
||||
},
|
||||
{
|
||||
'name': 'blur',
|
||||
'type': 'Function(arg)',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '当 input 失去焦点时触发;arg:{Object 时间组件Vue对象}',
|
||||
'en-US': 'This event is triggered when the input loses focus. arg:{Object Time Component Vue Object}'
|
||||
},
|
||||
'demoId': 'event-blur'
|
||||
'demoId': 'event'
|
||||
},
|
||||
{
|
||||
'name': 'focus',
|
||||
|
|
@ -405,7 +351,7 @@ export default {
|
|||
'zh-CN': '当 input 获得焦点时触发;arg:{Object 时间组件Vue对象}',
|
||||
'en-US': 'This event is triggered when the input is focused. arg:{Object Time Component Vue Object}'
|
||||
},
|
||||
'demoId': 'event-blur'
|
||||
'demoId': 'event'
|
||||
}
|
||||
],
|
||||
'slots': [],
|
||||
|
|
@ -415,8 +361,60 @@ export default {
|
|||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '使 input 获取焦点', 'en-US': 'Enable input to focus.' },
|
||||
'demoId': 'event-blur'
|
||||
'demoId': 'event'
|
||||
}
|
||||
],
|
||||
'props format': [
|
||||
{
|
||||
'name': 'a',
|
||||
'desc': { 'zh-CN': 'am/pm', 'en-US': '' },
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'A',
|
||||
'desc': { 'zh-CN': 'AM/PM', 'en-US': '' },
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'h',
|
||||
'desc': { 'zh-CN': '小时，12小时制，需要和 A 或 a 一起使用，不补0', 'en-US': '' },
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'H',
|
||||
'desc': { 'zh-CN': '小时，24小时制，不补0', 'en-US': '' },
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'hh',
|
||||
'desc': { 'zh-CN': '小时，12小时制，需要和 A 或 a 一起使用', 'en-US': '' },
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'HH',
|
||||
'desc': { 'zh-CN': '小时，24小时制', 'en-US': '' },
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'm',
|
||||
'desc': { 'zh-CN': '分钟，不补0', 'en-US': '' },
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'mm',
|
||||
'desc': { 'zh-CN': '分钟', 'en-US': '' },
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 's',
|
||||
'desc': { 'zh-CN': '秒，不补0', 'en-US': '' },
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'ss',
|
||||
'desc': { 'zh-CN': '秒', 'en-US': '' },
|
||||
'demoId': ''
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue