demo 原始链接:https://vux.li/demos/v2/#/component/alert
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group>\n <x-switch :title=\"$t('Show Me')\" v-model=\"show\"></x-switch>\n </group>\n <div v-transfer-dom>\n <alert v-model=\"show\" :title=\"$t('Congratulations')\" @on-show=\"onShow\" @on-hide=\"onHide\"> {{ $t('Your Message is sent successfully~') }}</alert>\n </div>\n\n <group title=\"Prop: content\">\n <x-switch :title=\"$t('Show Me')\" v-model=\"show2\"></x-switch>\n </group>\n <div v-transfer-dom>\n <alert v-model=\"show2\" :title=\"$t('Congratulations')\" :content=\"$t('Your Message is sent successfully~')\"></alert>\n </div>\n\n <group :title=\"$t('Use as a plugin')\">\n <cell :title=\"$t('Show Me')\" @click.native=\"showPlugin\" is-link></cell>\n <cell :title=\"$t('Will auto close in 3s')\" @click.native=\"showPluginAuto\" is-link></cell>\n </group>\n\n <group :title=\"$t('Use as a module')\">\n <cell :title=\"$t('Show Me')\" @click.native=\"showModule\" is-link></cell>\n <cell :title=\"$t('Will auto close in 3s')\" @click.native=\"showModuleAuto\" is-link></cell>\n </group>\n </div>\n</template>\n\n\n\n<script>\nimport { AlertModule, Alert, Group, XSwitch, Cell, TransferDomDirective as TransferDom } from 'vux'\n\nexport default {\n directives: {\n TransferDom\n },\n components: {\n Alert,\n Group,\n XSwitch,\n Cell\n },\n data () {\n return {\n show: false,\n show1: false,\n show2: false\n }\n },\n methods: {\n onHide () {\n console.log('on hide')\n },\n onShow () {\n console.log('on show')\n },\n showPlugin () {\n this.$vux.alert.show({\n title: 'VUX is Cool',\n content: this.$t('Do you agree?'),\n onShow () {\n console.log('Plugin: I\\'m showing')\n },\n onHide () {\n console.log('Plugin: I\\'m hiding now')\n }\n })\n },\n showModule () {\n AlertModule.show({\n title: 'VUX is Cool',\n content: this.$t('Do you agree?'),\n onShow () {\n console.log('Module: I\\'m showing')\n },\n onHide () {\n console.log('Module: I\\'m hiding now')\n }\n })\n },\n showModuleAuto () {\n this.showModule()\n setTimeout(() => {\n AlertModule.hide()\n }, 3000)\n },\n showPluginAuto () {\n this.showPlugin()\n setTimeout(() => {\n this.$vux.alert.hide()\n }, 3000)\n }\n }\n}\n</script>\n\n
\n