demo 原始链接:https://vux.li/demos/v2/#/component/popup
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group>\n <x-switch title=\"Default popup\" v-model=\"show\"></x-switch>\n <x-switch title=\"Full popup\" v-model=\"show1\"></x-switch>\n <x-switch title=\"Multi popup (first)\" v-model=\"show3\"></x-switch>\n <x-switch title=\"Mask disable\" v-model=\"show5\"></x-switch>\n <x-switch title=\"Popup address\" v-model=\"show6\"></x-switch>\n <x-switch title=\"default max-height=100%\" v-model=\"show12\"></x-switch>\n <x-switch title=\"set max-height=50%\" v-model=\"show13\"></x-switch>\n </group>\n \n <div v-transfer-dom>\n <popup v-model=\"show\" @on-hide=\"log('hide')\" @on-show=\"log('show')\">\n <div class=\"popup0\">\n <group>\n <x-switch title=\"Another XSwitcher\" v-model=\"show\"></x-switch>\n <x-switch title=\"Show Toast\" v-model=\"showToast\"></x-switch>\n </group>\n </div>\n </popup>\n </div>\n\n <toast v-model=\"showToast\">You did it!</toast>\n \n <div v-transfer-dom>\n <popup v-model=\"show1\" height=\"100%\">\n <div class=\"popup1\">\n <group>\n <x-switch title=\"Another XSwitcher\" v-model=\"show1\"></x-switch>\n </group>\n </div>\n </popup>\n </div>\n \n <div v-transfer-dom>\n <popup v-model=\"show3\">\n <div class=\"popup2\">\n <group>\n <x-switch title=\"Multi Popup (first)\" v-model=\"show3\"></x-switch>\n <x-switch title=\"Multi Popup (second)\" v-model=\"show4\"></x-switch>\n </group>\n this is the first popup\n </div>\n </popup>\n </div>\n \n <div v-transfer-dom>\n <popup v-model=\"show4\">\n <div class=\"popup2\">\n <group>\n <x-switch title=\"Multi Popup (second)\" v-model=\"show4\"></x-switch>\n </group>\n this is the second popup\n </div>\n </popup>\n </div>\n \n <div v-transfer-dom>\n <popup v-model=\"show5\" :hide-on-blur=false>\n <div class=\"popup2\">\n <group>\n <x-switch title=\"Mask disable\" v-model=\"show5\"></x-switch>\n </group>\n The mask cannot be clicked!\n </div>\n </popup>\n </div>\n \n <div v-transfer-dom>\n <popup v-model=\"show6\">\n <div class=\"popup1\">\n <group>\n <x-switch title=\"Popup address\" v-model=\"show6\"></x-switch>\n </group>\n <group>\n <x-address :title=\"title6\" v-model=\"value6\" :list=\"addressData\" placeholder=\"请选择地址\" inline-desc=\"可以设置placeholder\" :popup-style=\"{zIndex: 502}\"></x-address>\n </group>\n </div>\n </popup>\n </div>\n\n <group>\n <x-switch title=\"transparent background\" v-model=\"show7\"></x-switch>\n </group>\n \n <div v-transfer-dom>\n <popup v-model=\"show7\" height=\"270px\" is-transparent>\n <div style=\"width: 95%;background-color:#fff;height:250px;margin:0 auto;border-radius:5px;padding-top:10px;\">\n <group>\n <cell title=\"Product\" value=\"Donate\"></cell>\n <cell title=\"Total\" value=\"$10.24\"></cell>\n </group>\n <div style=\"padding:20px 15px;\">\n <x-button type=\"primary\">Pay</x-button>\n <x-button @click.native=\"show7 = false\">Cancel</x-button>\n </div>\n </div>\n </popup>\n </div>\n\n <group title=\"set position\">\n <x-switch title=\"left(100% width)\" v-model=\"show8\"></x-switch>\n <x-switch title=\"right\" v-model=\"show9\"></x-switch>\n <x-switch title=\"top(no mask)\" v-model=\"show10\"></x-switch>\n <x-switch title=\"bottom\" v-model=\"show11\"></x-switch>\n </group>\n\n <div v-transfer-dom>\n <popup v-model=\"show8\" position=\"left\" width=\"100%\">\n <div class=\"position-horizontal-demo\">\n <span class=\"vux-close\" @click=\"show8 = false\"></span>\n </div>\n </popup>\n </div>\n \n <div v-transfer-dom>\n <popup v-model=\"show9\" position=\"right\">\n <div style=\"width:200px;\">\n </div>\n </popup>\n </div>\n\n <div v-transfer-dom>\n <popup v-model=\"show10\" position=\"top\" :show-mask=\"false\">\n <div class=\"position-vertical-demo\">\n I'm on top. Hide in 1s.\n </div>\n </popup>\n </div>\n\n <div v-transfer-dom>\n <popup v-model=\"show11\" position=\"bottom\">\n <div class=\"position-vertical-demo\">\n I'm on bottom.\n </div>\n </popup>\n </div>\n\n <div v-transfer-dom>\n <popup v-model=\"show12\" position=\"bottom\">\n <group>\n <cell v-for=\"i in 20\" :key=\"i\" :title=\"i\"></cell>\n </group>\n <div style=\"padding: 15px;\">\n <x-button @click.native=\"show12 = false\" plain type=\"primary\"> Close Me </x-button>\n </div>\n </popup>\n </div>\n\n <div v-transfer-dom>\n <popup v-model=\"show13\" position=\"bottom\" max-height=\"50%\">\n <group>\n <cell v-for=\"i in 20\" :key=\"i\" :title=\"i\"></cell>\n </group>\n <div style=\"padding: 15px;\">\n <x-button @click.native=\"show13 = false\" plain type=\"primary\"> Close Me </x-button>\n </div>\n </popup>\n </div>\n\n </div>\n</template>\n\n<script>\nimport { TransferDom, Popup, Group, Cell, XButton, XSwitch, Toast, XAddress, ChinaAddressData } from 'vux'\n\nexport default {\n directives: {\n TransferDom\n },\n components: {\n Popup,\n Group,\n Cell,\n XSwitch,\n Toast,\n XAddress,\n XButton\n },\n data () {\n return {\n addressData: ChinaAddressData,\n show: false,\n show1: false,\n show3: false,\n show4: false,\n show5: false,\n show6: false,\n title6: '默认空的',\n value6: [],\n show7: false,\n showToast: false,\n show8: false,\n show9: false,\n show10: false,\n show11: false,\n show12: false,\n show13: false\n }\n },\n methods: {\n log (str) {\n console.log(str)\n }\n },\n watch: {\n show10 (val) {\n if (val) {\n setTimeout(() => {\n this.show10 = false\n }, 1000)\n }\n }\n }\n}\n</script>\n\n<style lang=\"less\" scoped>\n@import '~vux/src/styles/close.less';\n\n.popup0 {\n padding-bottom:15px;\n height:200px;\n}\n.popup1 {\n width:100%;\n height:100%;\n}\n.popup2 {\n padding-bottom:15px;\n height:400px;\n}\n.position-vertical-demo {\n background-color: #ffe26d;\n color: #000;\n text-align: center;\n padding: 15px;\n}\n.position-horizontal-demo {\n position: relative;\n height: 100%;\n .vux-close {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%) scale(4);\n color: #000;\n }\n}\n</style>\n\n
\n