| 1 |
- {"version":3,"file":"popup.js","sources":["pages/popup/popup.vue","../../../Program Files/HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvcG9wdXAvcG9wdXAudnVl"],"sourcesContent":["<template>\r\n\t<view class=\"container\">\r\n\t\t<uni-card is-full :is-shadow=\"false\">\r\n\t\t\t<text class=\"uni-h6\">弹出层组件用于弹出一个覆盖到页面上的内容，使用场景如：底部弹出分享弹窗、页面插屏广告等。</text>\r\n\t\t</uni-card>\r\n\t\t<uni-section title=\"基本示例\" type=\"line\" sub-title=\"自定义顶部圆角\">\r\n\t\t\t<view class=\"example-body box\">\r\n\t\t\t\t<button class=\"button\" type=\"primary\" @click=\"toggle('top')\"><text class=\"button-text\">顶部</text></button>\r\n\t\t\t\t<button class=\"button\" type=\"primary\" @click=\"toggle('bottom')\"><text class=\"button-text\">底部</text></button>\r\n\t\t\t\t<button class=\"button\" type=\"primary\" @click=\"toggle('center')\"><text class=\"button-text\">居中</text></button>\r\n\t\t\t\t<button class=\"button\" type=\"primary\" @click=\"toggle('left')\"><text class=\"button-text\">左侧</text></button>\r\n\t\t\t\t<button class=\"button\" type=\"primary\" @click=\"toggle('right')\"><text class=\"button-text\">右侧</text></button>\r\n\t\t\t</view>\r\n\t\t</uni-section>\r\n\r\n\t\t<uni-section title=\"提示消息\" type=\"line\">\r\n\t\t\t<view class=\"example-body box\">\r\n\t\t\t\t<button class=\"button popup-success\" @click=\"messageToggle('success')\"><text\r\n\t\t\t\t\t\tclass=\"button-text success-text\">成功</text></button>\r\n\t\t\t\t<button class=\"button popup-error\" @click=\"messageToggle('error')\"><text\r\n\t\t\t\t\t\tclass=\"button-text error-text\">失败</text></button>\r\n\t\t\t\t<button class=\"button popup-warn\" @click=\"messageToggle('warn')\"><text\r\n\t\t\t\t\t\tclass=\"button-text warn-text\">警告</text></button>\r\n\t\t\t\t<button class=\"button popup-info\" @click=\"messageToggle('info')\"><text\r\n\t\t\t\t\t\tclass=\"button-text info-text\">信息</text></button>\r\n\t\t\t</view>\r\n\t\t</uni-section>\r\n\r\n\r\n\t\t<uni-section title=\"对话框示例\" type=\"line\" class=\"hideOnPc\">\r\n\t\t\t<view class=\"example-body box\">\r\n\t\t\t\t<button class=\"button popup-success\" @click=\"dialogToggle('success')\"><text\r\n\t\t\t\t\t\tclass=\"button-text success-text\">成功</text></button>\r\n\t\t\t\t<button class=\"button popup-error\" @click=\"dialogToggle('error')\"><text\r\n\t\t\t\t\t\tclass=\"button-text error-text\">失败</text></button>\r\n\t\t\t\t<button class=\"button popup-warn\" @click=\"dialogToggle('warn')\"><text\r\n\t\t\t\t\t\tclass=\"button-text warn-text\">警告</text></button>\r\n\t\t\t\t<button class=\"button popup-info\" @click=\"dialogToggle('info')\"><text\r\n\t\t\t\t\t\tclass=\"button-text info-text\">信息</text></button>\r\n\t\t\t</view>\r\n\t\t</uni-section>\r\n\r\n\t\t<uni-section title=\"输入框示例\" type=\"line\" padding>\r\n\t\t\t<view class=\"dialog-box\">\r\n\t\t\t\t<text class=\"dialog-text\">输入内容：{{ value }}</text>\r\n\t\t\t</view>\r\n\t\t\t<button class=\"button\" type=\"primary\" @click=\"inputDialogToggle\"><text class=\"button-text\">输入对话框</text></button>\r\n\r\n\t\t</uni-section>\r\n\t\t<uni-section title=\"底部分享示例\" type=\"line\" padding>\r\n\t\t\t<button class=\"button\" type=\"primary\" @click=\"shareToggle\"><text class=\"button-text\">分享模版示例</text></button>\r\n\t\t</uni-section>\r\n\t\t<view>\r\n\t\t\t<!-- 普通弹窗 -->\r\n\t\t\t<uni-popup ref=\"popup\" background-color=\"#fff\" @change=\"change\" border-radius=\"10px 10px 0 0\">\r\n\t\t\t\t<view class=\"popup-content\" :class=\"{ 'popup-height': type === 'left' || type === 'right' }\"><text\r\n\t\t\t\t\t\tclass=\"text\">popup 内容</text></view>\r\n\t\t\t</uni-popup>\r\n\t\t</view>\r\n\r\n\t\t<view>\r\n\t\t\t<!-- 提示信息弹窗 -->\r\n\t\t\t<uni-popup ref=\"message\" type=\"message\">\r\n\t\t\t\t<uni-popup-message :type=\"msgType\" :message=\"messageText\" :duration=\"2000\"></uni-popup-message>\r\n\t\t\t</uni-popup>\r\n\t\t</view>\r\n\r\n\t\t<view>\r\n\t\t\t<!-- 提示窗示例 -->\r\n\t\t\t<uni-popup ref=\"alertDialog\" type=\"dialog\">\r\n\t\t\t\t<uni-popup-dialog :showClose=\"showClose\" :type=\"msgType\" cancelText=\"关闭\" confirmText=\"同意\" title=\"通知\"\r\n\t\t\t\t\tcontent=\"欢迎使用 uni-popup!\" @confirm=\"dialogConfirm\" @close=\"dialogClose\"></uni-popup-dialog>\r\n\t\t\t</uni-popup>\r\n\t\t</view>\r\n\r\n\t\t<view>\r\n\t\t\t<!-- 输入框示例 -->\r\n\t\t\t<uni-popup ref=\"inputDialog\" type=\"dialog\">\r\n\t\t\t\t<uni-popup-dialog ref=\"inputClose\" :maxlength=\"10\" mode=\"input\" title=\"输入内容\" v-model=\"value\"\r\n\t\t\t\t\tplaceholder=\"请输入内容，限制10个字\" @confirm=\"dialogInputConfirm\"></uni-popup-dialog>\r\n\t\t\t</uni-popup>\r\n\t\t</view>\r\n\r\n\t\t<view>\r\n\t\t\t<!-- 分享示例 -->\r\n\t\t\t<uni-popup ref=\"share\" type=\"share\" safeArea backgroundColor=\"#fff\">\r\n\t\t\t\t<uni-popup-share></uni-popup-share>\r\n\t\t\t</uni-popup>\r\n\t\t</view>\r\n\t</view>\r\n</template>\r\n\r\n<script setup>\nimport { ref, reactive } from 'vue';\n\n// 定义响应式数据\nconst state = reactive({\n type: 'center',\n msgType: 'success',\n messageText: '这是一条成功提示',\n showClose: true,\n});\n\n// 定义普通响应式变量\nconst value = ref('');\n\n// 获取对uni-popup组件的引用\nconst popup = ref(null);\nconst message = ref(null);\nconst alertDialog = ref(null);\nconst inputDialog = ref(null);\nconst share = ref(null);\n\n// 定义方法\nconst change = (e) => {\n console.log('当前模式：' + e.type + ',状态：' + e.show);\n};\n\nconst toggle = (type) => {\n state.type = type;\n // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性\n popup.value.open(type);\n};\n\nconst messageToggle = (type) => {\n state.msgType = type;\n state.messageText = `这是一条${type}消息提示`;\n message.value.open();\n};\n\nconst dialogToggle = (type) => {\n state.msgType = type;\n alertDialog.value.open();\n};\n\nconst dialogConfirm = () => {\n console.log('点击确认');\n state.messageText = `点击确认了 ${state.msgType} 窗口`;\n message.value.open();\n};\n\nconst inputDialogToggle = () => {\n inputDialog.value.open();\n};\n\nconst dialogClose = () => {\n console.log('点击关闭');\n};\n\nconst dialogInputConfirm = (val) => {\n uni.showLoading({ title: '3秒后会关闭' });\n console.log(val); // 注意这里改为直接打印传入的值\n setTimeout(() => {\n uni.hideLoading();\n value.value = val;\n // 关闭窗口后，恢复默认内容\n inputDialog.value.close();\n }, 3000);\n};\n\nconst shareToggle = () => {\n share.value.open();\n};\n</script>\r\n<style lang=\"scss\">\r\n\t@mixin flex {\r\n\t\t/* #ifndef APP-NVUE */\r\n\t\tdisplay: flex;\r\n\t\t/* #endif */\r\n\t\tflex-direction: row;\r\n\t}\r\n\r\n\t@mixin height {\r\n\t\t/* #ifndef APP-NVUE */\r\n\t\theight: 100%;\r\n\t\t/* #endif */\r\n\t\t/* #ifdef APP-NVUE */\r\n\t\tflex: 1;\r\n\t\t/* #endif */\r\n\t}\r\n\r\n\t.box {\r\n\t\t@include flex;\r\n\t}\r\n\r\n\t.button {\r\n\t\t@include flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tflex: 1;\r\n\t\theight: 35px;\r\n\t\tmargin: 0 5px;\r\n\t\tborder-radius: 5px;\r\n\t}\r\n\r\n\t.example-body {\r\n\t\tbackground-color: #fff;\r\n\t\tpadding: 10px 0;\r\n\t}\r\n\r\n\t.button-text {\r\n\t\tcolor: #fff;\r\n\t\tfont-size: 12px;\r\n\t}\r\n\r\n\t.popup-content {\r\n\t\t@include flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tpadding: 15px;\r\n\t\theight: 50px;\r\n\t}\r\n\r\n\t.popup-height {\r\n\t\t@include height;\r\n\t\twidth: 200px;\r\n\t}\r\n\r\n\t.text {\r\n\t\tfont-size: 12px;\r\n\t\tcolor: #333;\r\n\t}\r\n\r\n\t.popup-success {\r\n\t\tcolor: #fff;\r\n\t\tbackground-color: #e1f3d8;\r\n\t}\r\n\r\n\t.popup-warn {\r\n\t\tcolor: #fff;\r\n\t\tbackground-color: #faecd8;\r\n\t}\r\n\r\n\t.popup-error {\r\n\t\tcolor: #fff;\r\n\t\tbackground-color: #fde2e2;\r\n\t}\r\n\r\n\t.popup-info {\r\n\t\tcolor: #fff;\r\n\t\tbackground-color: #f2f6fc;\r\n\t}\r\n\r\n\t.success-text {\r\n\t\tcolor: #09bb07;\r\n\t}\r\n\r\n\t.warn-text {\r\n\t\tcolor: #e6a23c;\r\n\t}\r\n\r\n\t.error-text {\r\n\t\tcolor: #f56c6c;\r\n\t}\r\n\r\n\t.info-text {\r\n\t\tcolor: #909399;\r\n\t}\r\n\r\n\t.dialog,\r\n\t.share {\r\n\t\t/* #ifndef APP-NVUE */\r\n\t\tdisplay: flex;\r\n\t\t/* #endif */\r\n\t\tflex-direction: column;\r\n\t}\r\n\r\n\t.dialog-box {\r\n\t\tpadding: 10px;\r\n\t}\r\n\r\n\t.dialog .button,\r\n\t.share .button {\r\n\t\t/* #ifndef APP-NVUE */\r\n\t\twidth: 100%;\r\n\t\t/* #endif */\r\n\t\tmargin: 0;\r\n\t\tmargin-top: 10px;\r\n\t\tpadding: 3px 0;\r\n\t\tflex: 1;\r\n\t}\r\n\r\n\t.dialog-text {\r\n\t\tfont-size: 14px;\r\n\t\tcolor: #333;\r\n\t}\r\n</style>\n","import MiniProgramPage from 'D:/project/交割库/jgk-project/pages/popup/popup.vue'\nwx.createPage(MiniProgramPage)"],"names":["reactive","ref","uni","MiniProgramPage"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgGA,UAAM,QAAQA,cAAAA,SAAS;AAAA,MACrB,MAAM;AAAA,MACN,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,IACb,CAAC;AAGD,UAAM,QAAQC,cAAAA,IAAI,EAAE;AAGpB,UAAM,QAAQA,cAAAA,IAAI,IAAI;AACtB,UAAM,UAAUA,cAAAA,IAAI,IAAI;AACxB,UAAM,cAAcA,cAAAA,IAAI,IAAI;AAC5B,UAAM,cAAcA,cAAAA,IAAI,IAAI;AAC5B,UAAM,QAAQA,cAAAA,IAAI,IAAI;AAGtB,UAAM,SAAS,CAAC,MAAM;AACpBC,oBAAAA,MAAY,MAAA,OAAA,gCAAA,UAAU,EAAE,OAAO,SAAS,EAAE,IAAI;AAAA,IAChD;AAEA,UAAM,SAAS,CAAC,SAAS;AACvB,YAAM,OAAO;AAEb,YAAM,MAAM,KAAK,IAAI;AAAA,IACvB;AAEA,UAAM,gBAAgB,CAAC,SAAS;AAC9B,YAAM,UAAU;AAChB,YAAM,cAAc,OAAO,IAAI;AAC/B,cAAQ,MAAM;IAChB;AAEA,UAAM,eAAe,CAAC,SAAS;AAC7B,YAAM,UAAU;AAChB,kBAAY,MAAM;IACpB;AAEA,UAAM,gBAAgB,MAAM;AAC1BA,oBAAAA,MAAY,MAAA,OAAA,gCAAA,MAAM;AAClB,YAAM,cAAc,SAAS,MAAM,OAAO;AAC1C,cAAQ,MAAM;IAChB;AAEA,UAAM,oBAAoB,MAAM;AAC9B,kBAAY,MAAM;IACpB;AAEA,UAAM,cAAc,MAAM;AACxBA,oBAAAA,MAAY,MAAA,OAAA,gCAAA,MAAM;AAAA,IACpB;AAEA,UAAM,qBAAqB,CAAC,QAAQ;AAClCA,oBAAAA,MAAI,YAAY,EAAE,OAAO,SAAU,CAAA;AACnCA,oBAAAA,MAAY,MAAA,OAAA,gCAAA,GAAG;AACf,iBAAW,MAAM;AACfA,sBAAG,MAAC,YAAW;AACf,cAAM,QAAQ;AAEd,oBAAY,MAAM;MACnB,GAAE,GAAI;AAAA,IACT;AAEA,UAAM,cAAc,MAAM;AACxB,YAAM,MAAM;IACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACjKA,GAAG,WAAWC,SAAe;"}
|
