demo 原始链接:https://vux.li/demos/v2/#/component/loading
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group>\n <x-switch :title=\"$t('Toggle')\" v-model=\"show1\" @on-change=\"show1change\"></x-switch>\n </group>\n <div v-transfer-dom>\n <loading :show=\"show1\" :text=\"text1\"></loading>\n </div>\n <div style=\"padding: 15px;\">\n <x-button @click.native=\"showLoading\" type=\"primary\">{{ $t('Show loading') }}</x-button>\n </div>\n <div style=\"padding: 15px;\">\n <x-button @click.native=\"showDelayLoading\" type=\"primary\">{{ $t('Show delay loading') }}</x-button>\n </div>\n </div>\n</template>\n\n\n\n<script>\nimport { Loading, Group, XSwitch, XButton, TransferDomDirective as TransferDom } from 'vux'\n\nexport default {\n directives: {\n TransferDom\n },\n components: {\n Loading,\n Group,\n XSwitch,\n XButton\n },\n data () {\n return {\n show1: false,\n text1: 'Processing'\n }\n },\n methods: {\n showLoading () {\n this.$vux.loading.show({\n text: 'Loading'\n })\n setTimeout(() => {\n this.$vux.loading.hide()\n }, 2000)\n },\n showDelayLoading () {\n this.$vux.loading.show({\n text: 'Loading',\n delay: 1e3\n })\n setTimeout(() => {\n this.$vux.loading.hide()\n }, 2000)\n },\n show1change (val) {\n if (val) {\n tick(0, (percent) => {\n if (percent === 100) {\n this.show1 = false\n return\n }\n this.text1 = `${percent}%`\n })\n }\n }\n }\n}\n\nfunction tick (i, cb) {\n setTimeout(function () {\n i++\n cb(i)\n if (i < 100) {\n tick(i, cb)\n }\n }, 10)\n}\n</script>\n\n
\n