demo 原始链接:https://vux.li/demos/v2/#/component/confirm
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group>\n <x-switch :title=\"$t('Toggle')\" v-model=\"show\"></x-switch>\n </group>\n <group>\n <x-switch :title=\"$t('Toggle show-input')\" v-model=\"show3\"></x-switch>\n </group>\n <group>\n <x-switch :title=\"$t('Set default input value')\" v-model=\"show5\"></x-switch>\n </group>\n <group>\n <x-switch :title=\"$t('Toggle_android')\" v-model=\"show2\"></x-switch>\n </group>\n <group>\n <x-switch :title=\"$t('closeOnConfirm=false')\" v-model=\"show4\"></x-switch>\n </group>\n <div v-transfer-dom>\n <confirm v-model=\"show\"\n :title=\"$t('Confirm deleting the item')\"\n @on-cancel=\"onCancel\"\n @on-confirm=\"onConfirm\"\n @on-show=\"onShow\"\n @on-hide=\"onHide\">\n <p style=\"text-align:center;\">{{ $t('Are you sure?') }}</p>\n </confirm>\n </div>\n <br>\n <div v-transfer-dom>\n <confirm v-model=\"show3\"\n show-input\n :title=\"$t('Confirm deleting the item')\"\n :input-attrs=\"{type: 'number'}\"\n @on-cancel=\"onCancel\"\n @on-confirm=\"onConfirm\"\n @on-show=\"onShow\"\n @on-hide=\"onHide\">\n </confirm>\n </div>\n <br>\n <div v-transfer-dom>\n <confirm v-model=\"show5\"\n show-input\n ref=\"confirm5\"\n :title=\"$t('Confirm deleting the item')\"\n @on-cancel=\"onCancel\"\n @on-confirm=\"onConfirm5\"\n @on-show=\"onShow5\"\n @on-hide=\"onHide\">\n </confirm>\n </div>\n <br>\n <div v-transfer-dom>\n <confirm v-model=\"show2\"\n :title=\"$t('Confirm deleting the item')\"\n theme=\"android\"\n @on-cancel=\"onCancel\"\n @on-confirm=\"onConfirm\"\n @on-show=\"onShow\"\n @on-hide=\"onHide\">\n <p style=\"text-align:center;\">{{ $t('I miss u sunyi') }}</p>\n </confirm>\n </div>\n <br>\n <div v-transfer-dom>\n <confirm\n v-model=\"show4\"\n :close-on-confirm=\"false\"\n :title=\"$t('Confirm deleting the item')\"\n @on-confirm=\"onConfirm4\">\n <p style=\"text-align:center;\">{{ $t('Are you sure?') }}</p>\n </confirm>\n </div>\n <br>\n <div style=\"padding:15px;\">\n <x-button @click.native=\"showPlugin\" type=\"primary\">{{ $t('Show') }}</x-button>\n </div>\n <div style=\"padding:15px;\">\n <x-button @click.native=\"showPlugin2\" type=\"primary\">{{ $t('Plugin usage') }}</x-button>\n </div>\n <div style=\"padding:15px;\">\n <x-button @click.native=\"showPlugin3\" type=\"primary\"> {{ $t('Call prompt by using plugin') }} </x-button>\n </div>\n </div>\n</template>\n\n\n\n<script>\nimport { Confirm, Group, XSwitch, XButton, TransferDomDirective as TransferDom } from 'vux'\nexport default {\n directives: {\n TransferDom\n },\n components: {\n Confirm,\n Group,\n XSwitch,\n XButton\n },\n data () {\n return {\n show: false,\n show2: false,\n show3: false,\n show4: false,\n show5: false\n }\n },\n methods: {\n onCancel () {\n console.log('on cancel')\n },\n onConfirm (msg) {\n console.log('on confirm')\n if (msg) {\n alert(msg)\n }\n },\n onConfirm4 () {\n console.log('on confirm')\n this.$vux.loading.show({\n transition: '',\n text: 'processing'\n })\n setTimeout(() => {\n this.$vux.loading.hide()\n this.show4 = false\n }, 1000)\n },\n onHide () {\n console.log('on hide')\n },\n onShow () {\n console.log('on show')\n },\n onShow5 () {\n this.$refs.confirm5.setInputValue('default')\n },\n onConfirm5 (value) {\n this.$refs.confirm5.setInputValue('')\n this.$vux.toast.text('input value: ' + value)\n },\n showPlugin () {\n this.$vux.confirm.show({\n title: 'Title',\n content: 'Content',\n onShow () {\n console.log('plugin show')\n },\n onHide () {\n console.log('plugin hide')\n },\n onCancel () {\n console.log('plugin cancel')\n },\n onConfirm () {\n console.log('plugin confirm')\n }\n })\n },\n showPlugin2 () {\n this.showPlugin()\n },\n showPlugin3 () {\n const _this = this\n this.$vux.confirm.prompt('123', {\n title: 'Title',\n onShow () {\n console.log('promt show')\n _this.$vux.confirm.setInputValue('set input value')\n },\n onHide () {\n console.log('prompt hide')\n },\n onCancel () {\n console.log('prompt cancel')\n },\n onConfirm (msg) {\n alert(msg)\n }\n })\n }\n }\n}\n</script>\n\n
\n