hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 2.44 kB
Source Map (JSON)
{"version":3,"file":"mask.mjs","sources":["../../../../../../packages/components/tour/src/mask.vue"],"sourcesContent":["<template>\n <div\n v-if=\"visible\"\n class=\"tour-mask\"\n :style=\"{\n position: 'fixed',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n zIndex,\n pointerEvents: pos && targetAreaClickable ? 'none' : 'auto',\n }\"\n v-bind=\"$attrs\"\n >\n <svg\n :style=\"{\n width: '100%',\n height: '100%',\n }\"\n >\n <path class=\"tour-hollow\" :style=\"pathStyle\" :d=\"path\" />\n </svg>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, toRef } from 'vue'\nimport { useLockscreen } from '@hongluan-ui/hooks'\nimport { maskProps } from './mask'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'TourMask',\n inheritAttrs: false,\n})\n\nconst props = defineProps(maskProps)\n\nconst radius = computed(() => props.pos?.radius ?? 2)\nconst roundInfo = computed(() => {\n const v = radius.value\n const baseInfo = `a${v},${v} 0 0 1`\n return {\n topRight: `${baseInfo} ${v},${v}`,\n bottomRight: `${baseInfo} ${-v},${v}`,\n bottomLeft: `${baseInfo} ${-v},${-v}`,\n topLeft: `${baseInfo} ${v},${-v}`,\n }\n})\n\nconst path = computed(() => {\n const width = window.innerWidth\n const height = window.innerHeight\n const info = roundInfo.value\n const _path = `M${width},0 L0,0 L0,${height} L${width},${height} L${width},0 Z`\n const _radius = radius.value\n return props.pos\n ? `${_path} M${props.pos.left + _radius},${props.pos.top} h${\n props.pos.width - _radius * 2\n } ${info.topRight} v${props.pos.height - _radius * 2} ${\n info.bottomRight\n } h${-props.pos.width + _radius * 2} ${info.bottomLeft} v${\n -props.pos.height + _radius * 2\n } ${info.topLeft} z`\n : _path\n})\n\nconst pathStyle = computed<CSSProperties>(() => {\n return {\n fill: props.fill,\n pointerEvents: 'auto',\n cursor: 'auto',\n }\n})\n\nuseLockscreen(toRef(props, 'visible'))\n</script>\n"],"names":[],"mappings":";;;;;oCAgCc;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAChB;;;;;;AAIA,UAAM,SAAS,SAAS,MAAM;AAC9B,UAAM;AACJ,gBAAU;AACV;AACA;AAAO;AACyB,wBACd,kBAAkB;AAAA;AACA,QAClC,8BAA8B;AAAA;AAChC;AAGF,iBAAa,eAAe;AAC1B;AACA;AACA;AACA,YAAM,QAAQ;AACd,YAAM;AACN,mBAAa,SACN;AAOH;AAGN,sBAAkB;AAChB,aAAO;AAAA;AACO;AACG;AACP;AACV;AAGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}