demo 原始链接:https://vux.li/demos/v2/#/component/datetime-view
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <datetime-view v-model=\"value1\" ref=\"datetime\" :format=\"format\"></datetime-view>\n <p class=\"info\">{{ $t('Current value') }}: {{ value1 }}</p>\n <div style=\"padding:15px;\">\n <x-button @click.native=\"changeValue('2017-11-11')\" :disabled=\"format !== 'YYYY-MM-DD'\" type=\"primary\"> {{ $t('Set 2017-11-11') }} </x-button>\n <x-button @click.native=\"changeValue('2016-08-08')\" :disabled=\"format !== 'YYYY-MM-DD'\" type=\"primary\"> {{ $t('Set 2016-08-08') }} </x-button>\n <x-button @click.native=\"toggleFormat\" type=\"primary\"> {{ $t('Toggle format') }} </x-button>\n <x-button @click.native=\"showPopup = true\" type=\"primary\"> {{ $t('Show popup with datetime-view') }} </x-button>\n </div>\n <div v-transfer-dom>\n <popup v-model=\"showPopup\">\n <datetime-view v-model=\"value2\"></datetime-view>\n </popup>\n </div>\n </div>\n</template>\n\n\n\n<script>\nimport { DatetimeView, XButton, Popup, TransferDom } from 'vux'\n\nexport default {\n components: {\n DatetimeView,\n XButton,\n Popup\n },\n directives: {\n TransferDom\n },\n data () {\n return {\n value1: '2017-10-11',\n value2: '2017-10-24',\n showPopup: false,\n format: 'YYYY-MM-DD'\n }\n },\n methods: {\n toggleFormat () {\n if (this.format === 'YYYY-MM-DD') {\n this.format = 'YYYY-MM-DD HH:mm'\n } else {\n this.format = 'YYYY-MM-DD'\n }\n },\n changeValue (val) {\n this.value1 = val\n this.$refs.datetime.render()\n }\n }\n}\n</script>\n\n<style scoped>\n.info {\n padding-top: 15px;\n text-align: center;\n color: #666;\n}\n</style>\n\n
\n