demo 原始链接:https://vux.li/demos/v2/#/component/x-dialog
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div style=\"height: 1000px\">\n\n <group>\n <x-switch v-model=\"show\" :title=\"$t('Toggle')\"></x-switch>\n <x-switch v-model=\"show2\" :title=\"$t('use .sync')\"></x-switch>\n <x-switch v-model=\"showToast\" :title=\"$t('show toast')\"></x-switch>\n <x-switch v-model=\"showHideOnBlur\" :title=\"$t('hide on clicking mask')\"></x-switch>\n <x-switch v-model=\"showDialogStyle\" :title=\"$t('Toggle')\" :inline-desc=\"$t('custom dialog style')\"></x-switch>\n </group>\n\n <div v-transfer-dom>\n <x-dialog v-model=\"showToast\" class=\"dialog-demo\">\n <div style=\"padding:15px;\">\n <x-button @click.native=\"doShowToast\" type=\"primary\">show toast</x-button>\n </div>\n <div @click=\"showToast=false\">\n <span class=\"vux-close\"></span>\n </div>\n </x-dialog>\n </div>\n\n <div v-transfer-dom>\n <x-dialog v-model=\"show\" class=\"dialog-demo\">\n <div class=\"img-box\">\n <img src=\"../assets/demo/dialog/01.jpg\" style=\"max-width:100%\">\n </div>\n <div @click=\"show=false\">\n <span class=\"vux-close\"></span>\n </div>\n </x-dialog>\n </div>\n\n <div v-transfer-dom>\n <x-dialog :show.sync=\"show2\" class=\"dialog-demo\">\n <div class=\"img-box\">\n <img src=\"../assets/demo/dialog/01.jpg\" style=\"max-width:100%\">\n </div>\n <div @click=\"show2=false\">\n <span class=\"vux-close\"></span>\n </div>\n </x-dialog>\n </div>\n\n <div v-transfer-dom>\n <x-dialog v-model=\"showHideOnBlur\" class=\"dialog-demo\" hide-on-blur>\n <div class=\"img-box\">\n <img src=\"../assets/demo/dialog/01.jpg\" style=\"max-width:100%\">\n </div>\n <div @click=\"showHideOnBlur=false\">\n <span class=\"vux-close\"></span>\n </div>\n </x-dialog>\n </div>\n\n <div v-transfer-dom>\n <x-dialog v-model=\"showDialogStyle\" hide-on-blur :dialog-style=\"{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}\">\n <p style=\"color:#fff;text-align:center;\" @click=\"showDialogStyle = false\">\n <span style=\"font-size:30px;\">HELLO WORLD</span>\n <br>\n <br>\n <x-icon type=\"ios-close-outline\" style=\"fill:#fff;\"></x-icon>\n </p>\n </x-dialog>\n </div>\n\n <group style=\"padding-top: 300px\">\n <x-switch v-model=\"showScrollBox\" :title=\"$t('long long content')\"></x-switch>\n </group>\n\n <div v-transfer-dom>\n <x-dialog v-model=\"showScrollBox\" class=\"dialog-demo\">\n <p class=\"dialog-title\">Long content</p>\n <div class=\"img-box\" style=\"height:100px;padding:15px 0;overflow:scroll;-webkit-overflow-scrolling:touch;\">\n <p v-for=\"i in 20\">{{i}}</p>\n </div>\n <div @click=\"showScrollBox=false\">\n <span class=\"vux-close\"></span>\n </div>\n </x-dialog>\n </div>\n\n </div>\n</template>\n\n\n\n<script>\nimport { XDialog, XButton, Group, XSwitch, TransferDomDirective as TransferDom } from 'vux'\n\nexport default {\n directives: {\n TransferDom\n },\n components: {\n XDialog,\n XButton,\n Group,\n XSwitch\n },\n methods: {\n doShowToast () {\n this.$vux.toast.show({\n text: 'toast'\n })\n }\n },\n data () {\n return {\n show: false,\n show2: false,\n showToast: false,\n showHideOnBlur: false,\n showScrollBox: false,\n showDialogStyle: false\n }\n }\n}\n</script>\n\n<style lang=\"less\" scoped>\n@import '~vux/src/styles/close';\n\n.dialog-demo {\n .weui-dialog{\n border-radius: 8px;\n padding-bottom: 8px;\n }\n .dialog-title {\n line-height: 30px;\n color: #666;\n }\n .img-box {\n height: 350px;\n overflow: hidden;\n }\n .vux-close {\n margin-top: 8px;\n margin-bottom: 8px;\n }\n}\n</style>\n\n
\n