1 line
6.6 KiB
JSON
1 line
6.6 KiB
JSON
{"ast":null,"code":"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \"vue\";\nconst _withScopeId = n => (_pushScopeId(\"data-v-cacbdb20\"), n = n(), _popScopeId(), n);\nconst _hoisted_1 = {\n key: 0\n};\nexport function render(_ctx, _cache, $props, $setup, $data, $options) {\n return _openBlock(), _createElementBlock(\"div\", {\n class: _normalizeClass([\"floatBtn portrait\", [{\n moveBtn: $data.longClick\n }]]),\n onClick: _cache[0] || (_cache[0] = (...args) => $options.back && $options.back(...args)),\n onTouchstart: _cache[1] || (_cache[1] = $event => $options.touchstart($event)),\n onTouchmove: _cache[2] || (_cache[2] = $event => $options.touchMove($event)),\n onTouchend: _cache[3] || (_cache[3] = $event => $options.touchEnd($event))\n }, [$options.Type ? (_openBlock(), _createElementBlock(\"span\", _hoisted_1, _toDisplayString($options.Lang[$options.Type].Back), 1 /* TEXT */)) : _createCommentVNode(\"v-if\", true)], 34 /* CLASS, HYDRATE_EVENTS */);\n}","map":{"version":3,"names":["_createElementBlock","class","_normalizeClass","moveBtn","$data","longClick","onClick","_cache","args","$options","back","onTouchstart","$event","touchstart","onTouchmove","touchMove","onTouchend","touchEnd","Type","_hoisted_1","_toDisplayString","Lang","Back"],"sources":["/Users/li/Desktop/work/work2/OG/GamePortrait/src/components/floatBtn.vue"],"sourcesContent":["<template>\n <div\n class=\"floatBtn portrait\"\n @click=\"back\"\n :class=\"[{ moveBtn: longClick }]\"\n @touchstart=\"touchstart($event)\"\n @touchmove=\"touchMove($event)\"\n @touchend=\"touchEnd($event)\"\n >\n <span v-if=\"Type\">{{ Lang[Type].Back }}</span>\n </div>\n</template>\n<script>\nimport store from \"@/store\"\nexport default {\n data() {\n return {\n timeOutEvent: 0,\n longClick: 0,\n // 手指原始位置\n oldMousePos: {},\n // 元素原始位置\n oldNodePos: {},\n btnType: \"right\"\n }\n },\n computed: {\n Lang() {\n return store.state.config.$lang\n },\n Type() {\n return store.state.config.$Type\n }\n },\n methods: {\n touchstart(ev) {\n // 定时器控制长按时间，超过500毫秒开始进行拖拽\n this.timeOutEvent = setTimeout(() => {\n this.longClick = 1\n }, 500)\n const selectDom = ev.currentTarget\n const { pageX, pageY } = ev.touches[0] // 手指位置\n const { offsetLeft, offsetTop } = selectDom // 元素位置\n // 手指原始位置\n this.oldMousePos = {\n x: pageX,\n y: pageY\n }\n // 元素原始位置\n this.oldNodePos = {\n x: offsetLeft,\n y: offsetTop\n }\n selectDom.style.left = `${offsetLeft}px`\n selectDom.style.top = `${offsetTop}px`\n },\n touchMove(ev) {\n // 未达到500毫秒就移动则不触发长按，清空定时器\n clearTimeout(this.timeOutEvent)\n if (this.longClick === 1) {\n const selectDom = ev.currentTarget\n // x轴偏移量\n const lefts = this.oldMousePos.x - this.oldNodePos.x\n // y轴偏移量\n const tops = this.oldMousePos.y - this.oldNodePos.y\n const { pageX, pageY } = ev.touches[0] // 手指位置\n selectDom.style.left = `${pageX - lefts}px`\n selectDom.style.top = `${pageY - tops}px`\n }\n },\n touchEnd(ev) {\n // 清空定时器\n clearTimeout(this.timeOutEvent)\n if (this.longClick === 1) {\n this.longClick = 0\n const selectDom = ev.currentTarget\n const { clientWidth, clientHeight } = document.documentElement\n const { offsetLeft, offsetTop } = selectDom\n if (offsetTop < -10) {\n selectDom.style.top = \"-10px\"\n } else if (offsetTop + 30 > clientHeight) {\n selectDom.style.top = `${clientHeight - 30}px`\n }\n\n if (offsetLeft < -10) {\n selectDom.style.left = \"-10px\"\n } else if (offsetLeft + 30 > clientWidth) {\n selectDom.style.left = `${clientWidth - 30}px`\n }\n }\n },\n back() {\n // showConfirmDialog({\n // title: \"提示\",\n // message: \"您确认要退出游戏？\"\n // })\n // .then(() => {\n const protocol = document.location.protocol\n const hostname = document.location.hostname\n const port = document.location.port\n let url = \"\"\n if (port) {\n url = `${protocol}//${hostname}:${port}`\n } else {\n url = `${protocol}//${hostname}`\n }\n window.location.href = url\n // })\n // .catch(() => {})\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@mixin notSelect {\n -moz-user-select: none; /*火狐*/\n -webkit-user-select: none; /*webkit浏览器*/\n -ms-user-select: none; /*IE10*/\n -khtml-user-select: none; /*早期浏览器*/\n user-select: none;\n}\n@mixin not-touch {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.floatBtn {\n @include notSelect;\n @include not-touch();\n position: fixed;\n overflow: hidden;\n width: 40px;\n left: 67%;\n top: 4px;\n color: #e0933a;\n font-size: 12px;\n height: 40px;\n line-height: 40px;\n text-align: center;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n transform: rotateX(0deg);\n z-index: 999;\n border-radius: 50px;\n font-weight: bold;\n opacity: 0.8;\n box-shadow: 0px 0px 4px 0.5px rgba(236, 197, 197, 0.5);\n &:active {\n box-shadow: 0px 0px 4px 0.5px rgba(236, 197, 197, 0.8);\n }\n &.moveBtn {\n opacity: 1;\n background: rgba(255, 255, 255, 0.8);\n box-shadow: 0px 0px 4px 0.5px rgba(224, 147, 58, 0.7);\n }\n span {\n white-space: nowrap;\n }\n}\n</style>\n"],"mappings":";;;;;;uBACEA,mBAAA,CASM;IARJC,KAAK,EAAAC,eAAA,EAAC,mBAAmB;MAAAC,OAAA,EAELC,KAAA,CAAAC;IAAS;IAD5BC,OAAK,EAAAC,MAAA,QAAAA,MAAA,UAAAC,IAAA,KAAEC,QAAA,CAAAC,IAAA,IAAAD,QAAA,CAAAC,IAAA,IAAAF,IAAA,CAAI;IAEXG,YAAU,EAAAJ,MAAA,QAAAA,MAAA,MAAAK,MAAA,IAAEH,QAAA,CAAAI,UAAU,CAACD,MAAM;IAC7BE,WAAS,EAAAP,MAAA,QAAAA,MAAA,MAAAK,MAAA,IAAEH,QAAA,CAAAM,SAAS,CAACH,MAAM;IAC3BI,UAAQ,EAAAT,MAAA,QAAAA,MAAA,MAAAK,MAAA,IAAEH,QAAA,CAAAQ,QAAQ,CAACL,MAAM;MAEdH,QAAA,CAAAS,IAAI,I,cAAhBlB,mBAAA,CAA8C,QAAAmB,UAAA,EAAAC,gBAAA,CAAzBX,QAAA,CAAAY,IAAI,CAACZ,QAAA,CAAAS,IAAI,EAAEI,IAAI,oB"},"metadata":{},"sourceType":"module","externalDependencies":[]} |