{"version":3,"file":"RulerScore.cjs","sources":["../../../../../packages/components/scoreIcon/RulerScore.vue"],"sourcesContent":["<template>\n    <div class=\"score-ruler\" ref=\"scoreRuler\">\n        <div class=\"bar\" ref=\"scoreRulerBar\"></div>\n        <div ref=\"scoreRulerPointer\" class=\"bar-pointer\" @mousedown=\"savePosition\">\n            <div class=\"score-show\">\n                {{ valueData }}\n                <div class=\"score-show-arrow\"></div>\n            </div>\n        </div>\n    </div>\n</template>\n<script setup>\nimport { ref, nextTick } from \"vue\";\nconst props = defineProps({\n    score: {\n        type: [Number, String],\n        default: 5,\n    },\n});\nlet scoreRuler = ref(null);\nlet scoreRulerBar = ref(null);\nlet scoreRulerPointer = ref(null);\n// 计算 当前宽度距离左侧浏览器窗口的距离\nlet scoreRulerOffsetX = ref(0);\nlet rulerWidth = ref(0);\nlet onDrag = ref(false);\nlet valueData = ref(0); // 分值展示\nnextTick(() => {\n    scoreRulerOffsetX.value = scoreRuler.value.offsetLeft;\n    rulerWidth.value = scoreRuler.value.offsetWidth;\n});\n\nconst savePosition = (e) => {\n    // 计算初始位置\n    onDrag.value = true;\n};\nwindow.onmousemove = (e) => {\n    e.preventDefault();\n    if (onDrag.value) {\n        // 当前鼠标距离左侧浏览器的距离\n        let pageX = e.pageX;\n        // 圆点的定位left\n        let PointerLeft = 0;\n        PointerLeft = pageX - scoreRulerOffsetX.value;\n        // 每分值所占的平均宽度\n        let average = rulerWidth.value / +props.score;\n        // 计算分值\n        valueData.value = Math.round(PointerLeft / average);\n        // 分值所占整个宽度百分比\n        let percent = (PointerLeft / rulerWidth.value).toFixed(2);\n        // 当距离和 标尺 距离浏览器距离相等时\n        if (pageX <= scoreRulerOffsetX.value) {\n            PointerLeft = 0;\n            // 分值最小\n            valueData.value = 0;\n            percent = 0;\n        }\n        if (pageX + 30 >= scoreRulerOffsetX.value + rulerWidth.value) {\n            // 当距离  > 标尺距离左侧距离 + 标尺长度时，left = 标尺长度\n            PointerLeft = rulerWidth.value - 30;\n            // 分值最大\n            valueData.value = props.score;\n            percent = 1;\n        }\n\n        // 进度条\n        scoreRulerBar.value.style.width = percent * 100 + \"%\";\n        // 圆点\n        scoreRulerPointer.value.style.left = PointerLeft + \"px\";\n    }\n};\nwindow.onmouseup = (e) => {\n    onDrag.value = false;\n};\n</script>\n<style lang=\"scss\" scoped>\n.score-ruler {\n    width: 550px;\n    height: 10px;\n    border-radius: 11px;\n    background: rgba(228, 229, 232, 1);\n    position: relative;\n    margin-top: 30px;\n    .bar {\n        width: 0%;\n        height: 100%;\n        border-radius: 11px;\n        background-color: rgb(34, 64, 195);\n    }\n    .bar-pointer {\n        width: 30px;\n        height: 30px;\n        border-radius: 50%;\n        background: rgba(255, 255, 255, 1);\n        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);\n        position: absolute;\n        top: 50%;\n        left: 0;\n        transform: translateY(-50%);\n        cursor: pointer;\n        .score-show {\n            width: 30px;\n            height: 20px;\n            line-height: 20px;\n            background-color: rgb(34, 64, 195);\n            position: absolute;\n            top: -9px;\n            right: 0;\n            transform: translateY(-100%);\n            text-align: center;\n            color: #fff;\n            border-radius: 5px;\n            &-arrow {\n                width: 10px;\n                border-left: 5px solid transparent;\n                border-right: 5px solid transparent;\n                border-top: 5px solid rgb(34, 64, 195);\n                position: absolute;\n                bottom: 0;\n                left: 50%;\n                transform: translate(-50%, 100%);\n            }\n        }\n    }\n}\n</style>\n"],"names":["scoreRuler","ref","scoreRulerBar","scoreRulerPointer","scoreRulerOffsetX","rulerWidth","onDrag","valueData","nextTick","savePosition","e","pageX","PointerLeft","average","props","percent"],"mappings":"udAmBA,IAAAA,EAAAC,EAAAA,IAAA,IAAA,EACAC,EAAAD,EAAAA,IAAA,IAAA,EACAE,EAAAF,EAAAA,IAAA,IAAA,EAEAG,EAAAH,EAAAA,IAAA,CAAA,EACAI,EAAAJ,EAAAA,IAAA,CAAA,EACAK,EAAAL,EAAAA,IAAA,EAAA,EACAM,EAAAN,EAAAA,IAAA,CAAA,EACAO,EAAAA,SAAA,IAAA,CACAJ,EAAA,MAAAJ,EAAA,MAAA,WACAK,EAAA,MAAAL,EAAA,MAAA,WACA,CAAA,EAEA,MAAAS,EAAAC,GAAA,CAEAJ,EAAA,MAAA,EACA,EACA,cAAA,YAAAI,GAAA,CAEA,GADAA,EAAA,eAAA,EACAJ,EAAA,MAAA,CAEA,IAAAK,EAAAD,EAAA,MAEAE,EAAA,EACAA,EAAAD,EAAAP,EAAA,MAEA,IAAAS,EAAAR,EAAA,MAAA,CAAAS,EAAA,MAEAP,EAAA,MAAA,KAAA,MAAAK,EAAAC,CAAA,EAEA,IAAAE,GAAAH,EAAAP,EAAA,OAAA,QAAA,CAAA,EAEAM,GAAAP,EAAA,QACAQ,EAAA,EAEAL,EAAA,MAAA,EACAQ,EAAA,GAEAJ,EAAA,IAAAP,EAAA,MAAAC,EAAA,QAEAO,EAAAP,EAAA,MAAA,GAEAE,EAAA,MAAAO,EAAA,MACAC,EAAA,GAIAb,EAAA,MAAA,MAAA,MAAAa,EAAA,IAAA,IAEAZ,EAAA,MAAA,MAAA,KAAAS,EAAA,IACA,CACA,EACA,OAAA,UAAAF,GAAA,CACAJ,EAAA,MAAA,EACA"}