demo 原始链接:https://vux.li/demos/v2/#/component/toast
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <div style=\"padding:15px;\">\n <x-button @click.native=\"showPosition('top')\" type=\"primary\">Top</x-button>\n <x-button @click.native=\"showPosition('middle')\" type=\"primary\">Middle</x-button>\n <x-button @click.native=\"showPosition('bottom')\" type=\"primary\">Bottom</x-button>\n <x-button @click.native=\"showPosition('')\" type=\"primary\">Default</x-button> \n </div>\n\n <toast v-model=\"showPositionValue\" type=\"text\" :time=\"800\" is-show-mask text=\"Hello World\" :position=\"position\">{{ $t('Basic Usage') }}</toast>\n <group>\n <x-switch :title=\"$t('Basic Usage')\" v-model=\"show1\"></x-switch>\n <x-switch :title=\"$t('type:text')\" v-model=\"show2\"></x-switch>\n <x-switch :title=\"$t('type:cancel')\" v-model=\"show3\"></x-switch>\n <x-switch :title=\"$t('type:warn')\" v-model=\"show4\"></x-switch>\n <x-switch :title=\"$t('time:1s')\" v-model=\"show5\"></x-switch>\n <x-switch :title=\"$t('long text')\" v-model=\"show6\"></x-switch>\n </group>\n\n <toast v-model=\"show1\" @on-hide=\"onHide\">{{ $t('Basic Usage') }}</toast>\n <toast v-model=\"show2\" type=\"text\">{{$t('success')}}</toast>\n <toast v-model=\"show3\" type=\"cancel\">{{$t('type:cancel')}}</toast>\n <toast v-model=\"show4\" type=\"warn\">{{$t('type:warn')}}</toast>\n <toast v-model=\"show5\" :time=\"1000\">{{$t('time:1s')}}</toast>\n <toast v-model=\"show6\" type=\"text\" width=\"20em\">{{$t('show me code')}}</toast>\n\n <group :title=\"$t('prop:text')\">\n <x-switch :title=\"$t('type:success')\" v-model=\"show7\"></x-switch>\n <x-switch :title=\"$t('type:text')\" v-model=\"show8\"></x-switch>\n </group>\n\n <toast v-model=\"show7\" text=\"Hello World\"></toast>\n <toast v-model=\"show8\" type=\"text\" text=\"Hello World\"></toast>\n\n <group :title=\"$t('As a plugin(>=v0.1.3)')\">\n <x-switch :title=\"$t('default')\" v-model=\"show9\" @on-change=\"onChange\"></x-switch>\n </group>\n <div style=\"padding:15px;\">\n <x-button type=\"primary\" @click.native=\"$vux.toast.text('How are you~', 'top')\">use text function</x-button> \n </div>\n </div>\n</template>\n\n\n\n<script>\nimport { Toast, Group, XSwitch, XButton } from 'vux'\nexport default {\n components: {\n Toast,\n Group,\n XSwitch,\n XButton\n },\n methods: {\n showPosition (position) {\n this.position = position\n this.showPositionValue = true\n },\n onHide () {\n console.log('on hide')\n },\n onChange (val) {\n const _this = this\n if (val) {\n this.$vux.toast.show({\n text: 'Hello World',\n onShow () {\n console.log('Plugin: I\\'m showing')\n },\n onHide () {\n console.log('Plugin: I\\'m hiding')\n _this.show9 = false\n }\n })\n } else {\n this.$vux.toast.hide()\n }\n }\n },\n data () {\n return {\n show1: false,\n show2: false,\n show3: false,\n show4: false,\n show5: false,\n show6: false,\n show7: false,\n show8: false,\n show9: false,\n position: 'default',\n showPositionValue: false\n }\n }\n}\n</script>\n\n
\n