demo 原始链接:https://vux.li/demos/v2/#/component/popup-header
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <popup-header :left-text=\"$t('cancel')\" :right-text=\"$t('done')\" :title=\"$t('Please select your card')\"></popup-header>\n <group>\n <x-switch v-model=\"show1\" :title=\"$t('used with Popup')\"></x-switch>\n </group>\n <div v-transfer-dom>\n <popup v-model=\"show1\">\n <!-- group already has a top border, so we need to hide header's bottom border-->\n <popup-header\n :left-text=\"$t('cancel')\"\n :right-text=\"$t('done')\"\n :title=\"$t('Please select your card')\"\n :show-bottom-border=\"false\"\n @on-click-left=\"show1 = false\"\n @on-click-right=\"show1 = false\"></popup-header>\n <group gutter=\"0\">\n <radio :options=\"[$t('Card 1'), $t('Card 2'), $t('Card 3'), $t('Card 4')]\"></radio>\n </group>\n </popup>\n </div>\n </div>\n</template>\n\n\n\n<script>\nimport { PopupHeader, Popup, TransferDom, Group, XSwitch, Radio } from 'vux'\n\nexport default {\n directives: {\n TransferDom\n },\n components: {\n PopupHeader,\n Popup,\n Group,\n XSwitch,\n Radio\n },\n data () {\n return {\n show1: false\n }\n }\n}\n</script>\n\n
\n