blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-24 15:39:15 +08:00
Code Issues Projects Releases Wiki Activity

docs(DatetimePicker): use composition api

Browse Source
This commit is contained in:
chenjiahan 2020-12-13 14:46:02 +08:00
parent 0ef23a3477
commit 3452ee2a41
3 changed files with 195 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/datetime-picker/README.md
View File

@ -29,12 +29,15 @@ app.use(DatetimePicker);
```
```js
import { ref } from 'vue';
export default {
data() {
const currentDate = ref(new Date());
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
currentDate: new Date(),
currentDate,
};
},
};
@ -54,23 +57,27 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
currentDate: new Date(),
};
},
methods: {
formatter(type, val) {
const currentDate = ref(new Date());
const formatter = (type, val) => {
if (type === 'year') {
return `${val} Year`;
} else if (type === 'month') {
return `${val} Month`;
}
return val;
},
};
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
formatter,
currentDate,
};
},
};
```
@ -89,23 +96,27 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
currentDate: new Date(),
};
},
methods: {
formatter(type, val) {
const currentDate = ref(new Date());
const formatter = (type, val) => {
if (type === 'month') {
return `${val} Month`;
} else if (type === 'day') {
return `${val} Day`;
}
return val;
},
};
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
formatter,
currentDate,
};
},
};
```
@ -123,11 +134,12 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
return {
currentTime: '12:00',
};
const currentTime = ref('12:00');
return { currentTime };
},
};
```
@ -145,12 +157,15 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
const currentDate = ref(new Date());
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
currentDate: new Date(),
currentDate,
};
},
};
@ -169,12 +184,15 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
const currentDate = ref(new Date());
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
currentDate: new Date(),
currentDate,
};
},
};
@ -192,19 +210,23 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
return {
currentTime: '12:00',
};
},
methods: {
filter(type, options) {
const currentTime = ref('12:00');
const filter = (type, options) => {
if (type === 'minute') {
return options.filter((option) => option % 5 === 0);
return options.filter((option) => Number(option) % 5 === 0);
}
return options;
},
};
return {
filter,
currentTime,
};
},
};
```
@ -222,14 +244,13 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
return {
currentDate: new Date(),
};
},
methods: {
formatter(type, val) {
setup() {
const currentDate = ref(new Date());
const formatter = (type, val) => {
if (type === 'year') {
return val + ' Year';
}
@ -240,7 +261,12 @@ export default {
return val + ' Day';
}
return val;
},
};
return {
formatter,
currentDate,
};
},
};
```

106
src/datetime-picker/README.zh-CN.md
View File

@ -31,12 +31,15 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型，type 为
```
```js
import { ref } from 'vue';
export default {
data() {
const currentDate = ref(new Date());
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
currentDate: new Date(),
currentDate,
};
},
};
@ -58,23 +61,27 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
currentDate: new Date(),
};
},
methods: {
formatter(type, val) {
const currentDate = ref(new Date());
const formatter = (type, val) => {
if (type === 'year') {
return `${val}年`;
} else if (type === 'month') {
return `${val}月`;
}
return val;
},
};
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
formatter,
currentDate,
};
},
};
```
@ -95,23 +102,27 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
currentDate: new Date(),
};
},
methods: {
formatter(type, val) {
const currentDate = ref(new Date());
const formatter = (type, val) => {
if (type === 'month') {
return `${val}月`;
} else if (type === 'day') {
return `${val}日`;
}
return val;
},
};
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
formatter,
currentDate,
};
},
};
```
@ -131,11 +142,12 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
return {
currentTime: '12:00',
};
const currentTime = ref('12:00');
return { currentTime };
},
};
```
@ -155,12 +167,15 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
const currentDate = ref(new Date());
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
currentDate: new Date(),
currentDate,
};
},
};
@ -181,12 +196,15 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
const currentDate = ref(new Date());
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
currentDate: new Date(),
currentDate,
};
},
};
@ -201,19 +219,23 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
return {
currentTime: '12:00',
};
},
methods: {
filter(type, options) {
const currentTime = ref('12:00');
const filter = (type, options) => {
if (type === 'minute') {
return options.filter((option) => option % 5 === 0);
return options.filter((option) => Number(option) % 5 === 0);
}
return options;
},
};
return {
filter,
currentTime,
};
},
};
```
@ -231,14 +253,13 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
return {
currentDate: new Date(),
};
},
methods: {
formatter(type, val) {
setup() {
const currentDate = ref(new Date());
const formatter = (type, val) => {
if (type === 'year') {
return val + '年';
}
@ -249,7 +270,12 @@ export default {
return val + '日';
}
return val;
},
};
return {
formatter,
currentDate,
};
},
};
```

56
src/datetime-picker/demo/index.vue
View File

@ -83,9 +83,11 @@
</demo-block>
</template>
<script>
export default {
i18n: {
<script lang="ts">
import { reactive } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
day: '日',
year: '年',
@ -112,13 +114,12 @@ export default {
optionFilter: 'Option Filter',
sortColumns: 'Columns Order',
},
},
};
data() {
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
value: {
export default {
setup() {
const t = useTranslate(i18n);
const value = reactive({
date: null,
time: '12:00',
datetime: new Date(2020, 0, 1),
@ -127,31 +128,36 @@ export default {
yearMonth: new Date(2020, 0, 1),
optionFilter: '12:00',
sortColumnsDate: new Date(2020, 0, 1),
},
};
},
});
methods: {
formatter(type, value) {
const filter = (type: string, values: string[]) => {
if (type === 'minute') {
return values.filter((value) => Number(value) % 5 === 0);
}
return values;
};
const formatter = (type: string, value: string) => {
if (type === 'year') {
return value + this.t('year');
return value + t('year');
}
if (type === 'month') {
return value + this.t('month');
return value + t('month');
}
if (type === 'day') {
return value + this.t('day');
return value + t('day');
}
return value;
},
};
filter(type, values) {
if (type === 'minute') {
return values.filter((value) => value % 5 === 0);
}
return values;
},
return {
t,
value,
filter,
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
formatter,
};
},
};
</script>