ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-back-top/index2.mjs.map

A high quality UI components Library with Vue.js

{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-back-top/index.vue"],"sourcesContent":["<template>\r\n  <transition name=\"fade\">\r\n    <div\r\n      :class=\"wrapperClasses\"\r\n      :style=\"wrapperStyles\"\r\n      @click=\"handleScrollTop\"\r\n      v-show=\"backTop\"\r\n    >\r\n      <slot>\r\n        <div :class=\"`${prefixCls}-content`\">\r\n          <slot name=\"icon\">\r\n            <ivue-icon>arrow_upward</ivue-icon>\r\n          </slot>\r\n        </div>\r\n      </slot>\r\n    </div>\r\n  </transition>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { computed, defineComponent, onMounted, ref, shallowRef } from 'vue';\r\nimport { useEventListener } from '@vueuse/core';\r\n\r\nimport { isClient } from '../../utils/helpers';\r\nimport { scrollTop } from '../../utils/assist';\r\n\r\nimport IvueIcon from '../ivue-icon';\r\n\r\n// type\r\nimport type { Props } from './types/back-top';\r\n\r\nconst prefixCls = 'ivue-back-top';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  emits: ['on-scroll-end', 'on-click'],\r\n  props: {\r\n    /**\r\n     * 触发滚动的对象\r\n     *\r\n     * @type {String}\r\n     */\r\n    target: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    /**\r\n     * 页面滚动高度达到该值时才显示\r\n     *\r\n     * @type {Number}\r\n     */\r\n    visibilityHeight: {\r\n      type: Number,\r\n      default: 200,\r\n    },\r\n    /**\r\n     * 组件距离底部的距离\r\n     *\r\n     * @type {Number}\r\n     */\r\n    bottom: {\r\n      type: Number,\r\n      default: 30,\r\n    },\r\n    /**\r\n     * 组件距离右部的距离\r\n     *\r\n     * @type {Number}\r\n     */\r\n    right: {\r\n      type: Number,\r\n      default: 30,\r\n    },\r\n    /**\r\n     * 滚动动画持续时间，单位 毫秒\r\n     *\r\n     * @type {Number}\r\n     */\r\n    duration: {\r\n      type: Number,\r\n      default: 1000,\r\n    },\r\n  },\r\n  setup(props: Props, { emit }) {\r\n    // 容器\r\n    const container = shallowRef<Document | HTMLElement>();\r\n\r\n    // documentElement\r\n    const el = shallowRef<HTMLElement>();\r\n\r\n    // 是否可以显示滚动顶部\r\n    const backTop = ref<boolean>(false);\r\n\r\n    // computed\r\n\r\n    // 外层样式\r\n    const wrapperClasses = computed(() => {\r\n      return [prefixCls];\r\n    });\r\n\r\n    // 外层样式\r\n    const wrapperStyles = computed(() => {\r\n      return {\r\n        bottom: `${props.bottom}px`,\r\n        right: `${props.right}px`,\r\n      };\r\n    });\r\n\r\n    // methods\r\n\r\n    // 监听滚动\r\n    const handleScroll = () => {\r\n      if (!isClient) {\r\n        return;\r\n      }\r\n\r\n      // 显示滚动顶部\r\n      if (el.value) {\r\n        backTop.value = el.value.scrollTop >= props.visibilityHeight;\r\n      }\r\n    };\r\n\r\n    // 滚动到顶部\r\n    const handleScrollTop = () => {\r\n      // emit\r\n      emit('on-click');\r\n\r\n      // 滚动到顶部\r\n      scrollTop(\r\n        el.value,\r\n        el.value.scrollTop,\r\n        0,\r\n        props.duration,\r\n        handleScrollEnd\r\n      );\r\n    };\r\n\r\n    // 滚动结束回调\r\n    const handleScrollEnd = () => {\r\n      emit('on-scroll-end');\r\n    };\r\n\r\n    // onMounted\r\n    onMounted(() => {\r\n      container.value = document;\r\n      el.value = document.documentElement;\r\n\r\n      if (props.target) {\r\n        el.value =\r\n          document.querySelector<HTMLElement>(props.target) ?? undefined;\r\n\r\n        // 没有找到节点\r\n        if (!el.value) {\r\n          throw `target is not existed: ${props.target}`;\r\n        }\r\n\r\n        container.value = el.value;\r\n      }\r\n\r\n      // 设置滚动\r\n      useEventListener(container, 'scroll', handleScroll);\r\n    });\r\n\r\n    return {\r\n      prefixCls,\r\n\r\n      // data\r\n      backTop,\r\n\r\n      // computed\r\n      wrapperClasses,\r\n      wrapperStyles,\r\n\r\n      // methods\r\n      handleScrollTop,\r\n    };\r\n  },\r\n  components: {\r\n    IvueIcon,\r\n  },\r\n});\r\n</script>\r\n"],"names":["_resolveComponent","_openBlock","_createBlock","_Transition","_withCtx","_withDirectives","_createElementVNode","_normalizeClass","_normalizeStyle","_renderSlot","_createVNode"],"mappings":";;;;;+BACEA,iBAea,WAAA,CAAA,CAAA;EAfb,OAAAC,SAAA,EAea,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IAAA,IAAA,EAAA,MAAA;AAAA;;IAbH,OAAA,EAAAC,QAAA,MAAA;AAAA,MAAAC,cAAA,CACAC,mBAAE,KAAa,EAAA;AAAA,QACpB,KAAA,EAAKC,cAAA,CAAA,IAAA,CAAA,cAAA,CAAA;AAAA,QAAA,KAAA,EAAAC,cAAA,CAAA,IAAA,CAAA,aAAA,CAAA;AAAA,QAGN,OAMO,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,eAAA,IAAA,IAAA,CAAA,eAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,OAAA,EAAA;AAAA,QALMC,WAAA,IAAA,CAAA,MAAA,EAAA,SAAK,EAAA,IAAS,MAAA;AAAA,UAAAH,mBAAA,KAAA,EAAA;AAAA,YACvB,KAEO,EAAAC,cAAA,CAAA,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,QAAA,CAAA,CAAA;AAAA,WAAA,EAAA;AAAA,YADkBE,WAAA,IAAA,CAAA,MAAA,EAAA,MAAA,EAAA,IAAA,MAAA;AAAA,cAAAC,WAAA,CAAA,sBAAA,IAAA,EAAA;AAAA,gBAAA,OAAA,EAAAN,QAAA,MAAA;AAAA;;;;;;;;;;;;;;;;;;"}