demo 原始链接:https://vux.li/demos/v2/#/component/actionsheet
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group>\n <x-switch :title=\"$t('Basic Usage')\" v-model=\"show1\"></x-switch>\n <x-switch :title=\"$t('Android Theme')\" v-model=\"show7\"></x-switch>\n <x-switch :title=\"$t('Show cancel menu')\" v-model=\"show2\"></x-switch>\n <x-switch :title=\"$t('Array menu')\" v-model=\"show5\"></x-switch>\n </group>\n\n <group :title=\"$t('Prevent closing when clicking mask')\">\n <x-switch :title=\"$t('Basic Usage')\" v-model=\"show4\"></x-switch>\n </group>\n\n <group>\n <x-switch :title=\"$t('Menu as tips')\" v-model=\"show3\"></x-switch>\n <x-switch :title=\"$t('Slot: header')\" v-model=\"show6\"></x-switch>\n <x-switch :title=\"$t('Prevent auto closing')\" v-model=\"show8\"></x-switch>\n </group>\n\n <actionsheet v-model=\"show4\" :menus=\"menus1\" :close-on-clicking-mask=\"false\" show-cancel @on-click-mask=\"console('on click mask')\"></actionsheet>\n\n <actionsheet v-model=\"show1\" :menus=\"menus1\" @on-click-menu=\"click\"></actionsheet>\n\n <actionsheet v-model=\"show2\" :menus=\"menus2\" @on-click-menu=\"click\" show-cancel></actionsheet>\n\n <actionsheet v-model=\"show3\" :menus=\"menus3\" @on-click-menu=\"click\" @on-click-menu-delete=\"onDelete\" show-cancel></actionsheet>\n\n <actionsheet v-model=\"show5\" :menus=\"menus5\" show-cancel @on-click-menu=\"click5\"></actionsheet>\n\n <actionsheet v-model=\"show6\" :menus=\"menus1\">\n <p slot=\"header\" v-html=\"$t('Actionsheet header')\"></p>\n </actionsheet>\n\n <actionsheet v-model=\"show7\" :menus=\"menu7\" theme=\"android\" @on-click-menu=\"click\">\n </actionsheet>\n\n <toast v-model=\"showSuccess\">{{ $t('Deleted~') }}</toast>\n\n <div v-transfer-dom>\n <actionsheet v-model=\"show8\" :menus=\"menus8\" @on-click-menu=\"demo8doClose\" :close-on-clicking-mask=\"false\" :close-on-clicking-menu=\"false\">\n </actionsheet>\n </div>\n </div>\n</template>\n\n\n\n<script>\nimport { TransferDom, Actionsheet, Group, XSwitch, Toast } from 'vux'\n\nexport default {\n components: {\n Actionsheet,\n Group,\n XSwitch,\n Toast\n },\n directives: {\n TransferDom\n },\n data () {\n return {\n show1: false,\n menus1: {\n menu1: this.$t('Share to friends'),\n menu2: this.$t('Share to timeline')\n },\n show2: false,\n menus2: {\n menu1: this.$t('Take Photo'),\n menu2: this.$t('Choose from photos')\n },\n show3: false,\n show4: false,\n show5: false,\n show6: false,\n show7: false,\n show8: false,\n menus5: [{\n label: this.$t('Actionsheet header'),\n type: 'info'\n }, {\n label: 'Primary',\n type: 'primary',\n value: 'primary',\n otherProp: 'hey'\n }, {\n label: 'Warn',\n type: 'warn'\n }, {\n label: 'Disabled',\n type: 'disabled'\n }, {\n label: 'Default'\n }],\n menu7: {\n menu1: '北京烤鸭',\n menu2: '陕西油泼面',\n menu3: '西安肉夹馍'\n },\n showSuccess: false,\n menus3: {\n 'title.noop': this.$t('Actionsheet header'),\n delete: '<span style=\"color:red\">Delete</span>'\n },\n menus8: {\n menu1: this.$t('Close me'),\n menu2: this.$t('Close me')\n }\n }\n },\n methods: {\n demo8doClose () {\n this.$vux.loading.show({\n text: 'processing'\n })\n setTimeout(() => {\n this.$vux.loading.hide()\n this.show8 = false\n }, 1000)\n },\n console (msg) {\n console.log(msg)\n },\n click (key) {\n console.log(key)\n },\n click5 (key, item) {\n console.log(key, item)\n },\n onDelete () {\n this.showSuccess = true\n }\n }\n}\n</script>\n\n<style>\n.popup0 {\n padding-bottom:15px;\n height:200px;\n}\n.popup1 {\n width:100%;\n height:100%;\n}\n</style>\n\n
\n