ivue-material-plus

Version:

A high quality UI components Library with Vue.js

1 lines • 3.07 kB

Source Map (JSON)

{"version":3,"file":"bar.mjs","sources":["../../../../../src/components/ivue-scrollbar/bar.vue"],"sourcesContent":["<template>\r\n \r\n <thumb\r\n :move=\"moveX\"\r\n :ratio=\"ratioX\"\r\n :barSize=\"barWidth\"\r\n :always=\"always\"\r\n ></thumb>\r\n \r\n <thumb\r\n :move=\"moveY\"\r\n :ratio=\"ratioY\"\r\n :barSize=\"barHeight\"\r\n :always=\"always\"\r\n vertical\r\n ></thumb>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, ref } from 'vue';\r\nimport Thumb from './thumb.vue';\r\n\r\n// type\r\nimport { Props } from './types/bar';\r\n\r\nconst prefixCls = 'ivue-scrollbar-bar';\r\n\r\n// top 2 + bottom 2\r\nconst GAP = 4;\r\n\r\nexport default defineComponent({\r\n name: prefixCls,\r\n props: {\r\n /**\r\n * 滚动条总是显示\r\n *\r\n * @type {Boolean}\r\n */\r\n always: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n /**\r\n * 滚动条高度\r\n *\r\n * @type {String}\r\n */\r\n barHeight: {\r\n type: String,\r\n default: '',\r\n },\r\n /**\r\n * 滚动条宽度\r\n *\r\n * @type {String}\r\n */\r\n barWidth: {\r\n type: String,\r\n default: '',\r\n },\r\n /**\r\n * x轴滚动比率\r\n *\r\n * @type {Number}\r\n */\r\n ratioX: {\r\n type: Number,\r\n default: 1,\r\n },\r\n /**\r\n * y轴滚动比率\r\n *\r\n * @type {Number}\r\n */\r\n ratioY: {\r\n type: Number,\r\n default: 1,\r\n },\r\n },\r\n setup(props: Props) {\r\n // x移动的位置\r\n const moveX = ref<number>(0);\r\n\r\n // y移动的位置\r\n const moveY = ref<number>(0);\r\n\r\n // methods\r\n\r\n // 滚动\r\n const handleScroll = (wrapper: HTMLDivElement) => {\r\n if (wrapper) {\r\n const offsetHeight = wrapper.offsetHeight - GAP;\r\n const offsetWidth = wrapper.offsetWidth - GAP;\r\n\r\n // x移动的位置\r\n moveX.value = ((wrapper.scrollLeft * 100) / offsetWidth) * props.ratioX;\r\n\r\n // y移动的位置\r\n moveY.value = ((wrapper.scrollTop * 100) / offsetHeight) * props.ratioY;\r\n }\r\n };\r\n\r\n return {\r\n // data\r\n moveX,\r\n moveY,\r\n\r\n // methods\r\n handleScroll,\r\n };\r\n },\r\n components: {\r\n Thumb,\r\n },\r\n});\r\n</script>\r\n"],"names":["_openBlock","_createElementBlock","_Fragment","_createCommentVNode","_createVNode"],"mappings":";;;;;;SAEEA,SAKS,EAAA,EAAAC,kBAAA,CAAAC,QAAA,EAAA,IAAA,EAAA;AAAA,IAJKC,mBAAA,4BAAA,CAAA;AAAA,IAAAC,YACJ,gBAAM,EAAA;AAAA,MACb,MAAS,IAAA,CAAA,KAAA;AAAA,MACT,OAAM,IAAE,CAAA,MAAA;AAAA,MAAA,SAAA,IAAA,CAAA,QAAA;AAAA,MAEX,QAAA,IAAA,CAAA,MAAA;AAAA,KACA,EAMS,MAAA,CAAA,EAAA,CAAA,QAAA,OAAA,EAAA,SAAA,EAAA,QAAA,CAAA,CAAA;AAAA,IALKD,mBAAA,4BAAA,CAAA;AAAA,IAAAC,YACJ,gBAAM,EAAA;AAAA,MACb,MAAS,IAAA,CAAA,KAAA;AAAA,MACT,OAAM,IAAE,CAAA,MAAA;AAAA,MACT,SAAQ,IAAA,CAAA,SAAA;AAAA,MAAA,QAAA,IAAA,CAAA,MAAA;AAAA;;;;;;;;"}