demo 原始链接:https://vux.li/demos/v2/#/component/x-switch
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group :title=\"$t('value map')\">\n <x-switch :title=\"$t('default true')\" :value-map=\"['0', '1']\" v-model=\"stringValue\"></x-switch>\n <cell title=\"value\" :value=\"typeof stringValue + ' ' + stringValue\"></cell>\n </group>\n <group :title=\"$t('Basic Usage')\">\n <x-switch :title=\"$t('default false')\"></x-switch>\n <x-switch :title=\"$t('default true')\" :inline-desc=\"value1 + ''\" v-model=\"value1\"></x-switch>\n </group>\n <group :title=\"$t('disabled')\">\n <x-switch :title=\"$t('default false')\" disabled></x-switch>\n <x-switch :title=\"$t('default true')\" :value=\"true\" disabled></x-switch>\n </group>\n <group :title=\"$t('prevent default')\">\n <x-switch :title=\"$t('default false')\" prevent-default v-model=\"value2\" @on-click=\"onClick\"></x-switch>\n </group>\n <group :title=\"$t('html title')\">\n <x-switch disabled :title=\"$t('switch red')\"></x-switch>\n </group>\n </div>\n</template>\n\n\n\n<script>\nimport { XSwitch, Group, Cell } from 'vux'\n\nexport default {\n components: {\n XSwitch,\n Group,\n Cell\n },\n methods: {\n onClick (newVal, oldVal) {\n console.log(newVal, oldVal)\n this.$vux.loading.show({\n text: 'in processing'\n })\n setTimeout(() => {\n this.$vux.loading.hide()\n this.value2 = newVal\n }, 1000)\n }\n },\n data () {\n return {\n value1: true,\n value2: false,\n stringValue: '0'\n }\n }\n}\n</script>\n\n
\n