blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-24 23:49:14 +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 ```js
import { ref } from 'vue';
export default { export default {
data() { data() {
const currentDate = ref(new Date());
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1), maxDate: new Date(2025, 10, 1),
currentDate: new Date(), currentDate,
}; };
}, },
}; };
@ -54,23 +57,27 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { data() {
return { const currentDate = ref(new Date());
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1), const formatter = (type, val) => {
currentDate: new Date(),
};
},
methods: {
formatter(type, val) {
if (type === 'year') { if (type === 'year') {
return `${val} Year`; return `${val} Year`;
} else if (type === 'month') { } else if (type === 'month') {
return `${val} Month`; return `${val} Month`;
} }
return val; return val;
}, };
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
formatter,
currentDate,
};
}, },
}; };
``` ```
@ -89,23 +96,27 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { data() {
return { const currentDate = ref(new Date());
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1), const formatter = (type, val) => {
currentDate: new Date(),
};
},
methods: {
formatter(type, val) {
if (type === 'month') { if (type === 'month') {
return `${val} Month`; return `${val} Month`;
} else if (type === 'day') { } else if (type === 'day') {
return `${val} Day`; return `${val} Day`;
} }
return val; return val;
}, };
return {
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
formatter,
currentDate,
};
}, },
}; };
``` ```
@ -123,11 +134,12 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { data() {
return { const currentTime = ref('12:00');
currentTime: '12:00', return { currentTime };
};
}, },
}; };
``` ```
@ -145,12 +157,15 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { data() {
const currentDate = ref(new Date());
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1), maxDate: new Date(2025, 10, 1),
currentDate: new Date(), currentDate,
}; };
}, },
}; };
@ -169,12 +184,15 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { data() {
const currentDate = ref(new Date());
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1), maxDate: new Date(2025, 10, 1),
currentDate: new Date(), currentDate,
}; };
}, },
}; };
@ -192,19 +210,23 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { data() {
return { const currentTime = ref('12:00');
currentTime: '12:00',
}; const filter = (type, options) => {
},
methods: {
filter(type, options) {
if (type === 'minute') { if (type === 'minute') {
return options.filter((option) => option % 5 === 0); return options.filter((option) => Number(option) % 5 === 0);
} }
return options; return options;
}, };
return {
filter,
currentTime,
};
}, },
}; };
``` ```
@ -222,14 +244,13 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const currentDate = ref(new Date());
currentDate: new Date(),
}; const formatter = (type, val) => {
},
methods: {
formatter(type, val) {
if (type === 'year') { if (type === 'year') {
return val + ' Year'; return val + ' Year';
} }
@ -240,7 +261,12 @@ export default {
return val + ' Day'; return val + ' Day';
} }
return val; return val;
}, };
return {
formatter,
currentDate,
};
}, },
}; };
``` ```

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

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

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

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