ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-menu/drop-down.mjs.map

A high quality UI components Library with Vue.js

{"version":3,"file":"drop-down.mjs","sources":["../../../../../src/components/ivue-menu/drop-down.vue"],"sourcesContent":["<template>\r\n  <teleport to=\"body\" :disabled=\"!transfer\">\r\n    <transition :name=\"transitionName\">\r\n      <div\r\n        v-show=\"visible\"\r\n        :class=\"wrapperClasses\"\r\n        :style=\"wrapperStyles\"\r\n        @mouseenter=\"handleMouseenter\"\r\n        @mouseleave=\"handleMouseleave\"\r\n        @click.stop=\"handleClick\"\r\n        ref=\"dropDown\"\r\n      >\r\n        <slot></slot>\r\n      </div>\r\n    </transition>\r\n  </teleport>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  computed,\r\n  reactive,\r\n  nextTick,\r\n  getCurrentInstance,\r\n  onBeforeUnmount,\r\n  ref,\r\n} from 'vue';\r\nimport { transferIndex, transferIncrease } from '../../utils/transfer-queue';\r\n\r\nimport { createPopper } from '@popperjs/core';\r\n\r\n// type\r\nimport type { Props, Data } from './types/drop-down';\r\n\r\nconst prefixCls = 'ivue-menu-dropdown';\r\n\r\nexport default {\r\n  name: prefixCls,\r\n  emits: ['on-mouseenter', 'on-mouseleave', 'on-click'],\r\n  props: {\r\n    /**\r\n     * 是否将弹层放置于 body 内，在 Tabs、\r\n     * 带有 fixed 的 Table 列内使用时，\r\n     * 建议添加此属性，它将不受父级样式影响，\r\n     * 从而达到更好的效果\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    transfer: {\r\n      type: Boolean,\r\n      default() {\r\n        const global = getCurrentInstance().appContext.config.globalProperties;\r\n\r\n        return !global.$IVUE || global.$IVUE.transfer === ''\r\n          ? false\r\n          : global.$IVUE.transfer;\r\n      },\r\n    },\r\n    /**\r\n     * transitionName\r\n     *\r\n     * @type {String}\r\n     */\r\n    transitionName: {\r\n      type: String,\r\n      default: 'transition-drop',\r\n    },\r\n    /**\r\n     * 弹窗的展开方向，\r\n     * 可选值为 top、bottom、top-start、bottom-start、top-end、bottom-end\r\n     *\r\n     * @type {String}\r\n     */\r\n    placement: {\r\n      type: String,\r\n      default: 'bottom-start',\r\n    },\r\n    /**\r\n     * 是否显示\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    visible: {\r\n      type: Boolean,\r\n    },\r\n    /**\r\n     * 外部样式\r\n     *\r\n     * @type {Object}\r\n     */\r\n    styles: {\r\n      type: Object,\r\n      default: () => {},\r\n    },\r\n    /**\r\n     * 外部样式\r\n     *\r\n     * @type {Object}\r\n     */\r\n    classes: {\r\n      type: Object,\r\n      default: () => {},\r\n    },\r\n    /**\r\n     * 外部样式名称\r\n     *\r\n     * @type {String}\r\n     */\r\n    className: {\r\n      type: String,\r\n    },\r\n  },\r\n  setup(props: Props, { emit }) {\r\n    // dom\r\n    const dropDown = ref<HTMLDivElement>(null);\r\n\r\n    // vm\r\n    const { proxy } = getCurrentInstance();\r\n\r\n    // 获取Index\r\n    const handleGetIndex = () => {\r\n      transferIncrease();\r\n      return transferIndex;\r\n    };\r\n\r\n    // data\r\n    const data = reactive<Data>({\r\n      /**\r\n       * 宽度\r\n       *\r\n       * @type {string}\r\n       */\r\n      width: '',\r\n      /**\r\n       * 层级\r\n       *\r\n       * @type {Number}\r\n       */\r\n      zIndex: handleGetIndex(),\r\n      /**\r\n       * popper\r\n       *\r\n       * @type {Function}\r\n       */\r\n      popper: null,\r\n      /**\r\n       * popper状态\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      popperStatus: false,\r\n    });\r\n\r\n    // computed\r\n\r\n    // 外部样式\r\n    const wrapperClasses = computed(() => {\r\n      return {\r\n        ...props.classes,\r\n        [props.className]: props.className,\r\n        [prefixCls]: true,\r\n      };\r\n    });\r\n\r\n    // 外部样式\r\n    const wrapperStyles = computed(() => {\r\n      const style: {\r\n        minWidth?: string;\r\n      } = {\r\n        ...props.styles,\r\n      };\r\n\r\n      if (data.width) {\r\n        style.minWidth = `${data.width}px`;\r\n      }\r\n\r\n      // 是否将弹层放置于 body 内\r\n      if (props.transfer) {\r\n        style['z-index'] = 1060 + data.zIndex;\r\n      }\r\n\r\n      return style;\r\n    });\r\n\r\n    // methods\r\n\r\n    // 更新数据\r\n    const update = () => {\r\n      nextTick(() => {\r\n        // 是否已经注册了 popper\r\n        if (data.popper) {\r\n          data.popper.update();\r\n          data.popperStatus = true;\r\n        } else {\r\n          data.popper = createPopper(proxy.$parent.$el, dropDown.value, {\r\n            // 弹窗的展开方向，\r\n            placement: props.placement,\r\n            modifiers: [\r\n              // 这决定了是否使用 GPU 加速样式来定位 popper\r\n              {\r\n                name: 'computeStyles',\r\n                options: {\r\n                  gpuAcceleration: false, // true by default\r\n                },\r\n              },\r\n              //检测溢出\r\n              {\r\n                name: 'preventOverflow',\r\n                options: {\r\n                  rootBoundary: 'viewport',\r\n                },\r\n              },\r\n              {\r\n                name: 'offset',\r\n                options: {\r\n                  offset: [0, 5],\r\n                },\r\n              },\r\n            ],\r\n            onFirstUpdate: () => {\r\n              nextTick(() => {\r\n                data.popper && data.popper.update();\r\n              });\r\n            },\r\n          });\r\n        }\r\n\r\n        data.zIndex = handleGetIndex();\r\n      });\r\n    };\r\n\r\n    // 销毁\r\n    const destroy = () => {\r\n      if (data.popper) {\r\n        setTimeout(() => {\r\n          if (data.popper && !data.popperStatus) {\r\n            data.popper.destroy();\r\n            data.popper = null;\r\n          }\r\n\r\n          data.popperStatus = false;\r\n        }, 300);\r\n      }\r\n    };\r\n\r\n    // 鼠标进入\r\n    const handleMouseenter = (event: MouseEvent) => {\r\n      emit('on-mouseenter', event);\r\n    };\r\n\r\n    // 鼠标离开\r\n    const handleMouseleave = (event: MouseEvent) => {\r\n      emit('on-mouseleave', event);\r\n    };\r\n\r\n    // 点击\r\n    const handleClick = (event: MouseEvent) => {\r\n      emit('on-click', event);\r\n    };\r\n\r\n    // beforeUnmount\r\n    onBeforeUnmount(() => {\r\n      if (data.popper) {\r\n        data.popper.destroy();\r\n        data.popper = null;\r\n      }\r\n    });\r\n\r\n    return {\r\n      // dom\r\n      dropDown,\r\n\r\n      // data\r\n      data,\r\n\r\n      // computed\r\n      wrapperClasses,\r\n      wrapperStyles,\r\n\r\n      // methods\r\n      update,\r\n      destroy,\r\n      handleMouseenter,\r\n      handleMouseleave,\r\n      handleClick,\r\n    };\r\n  },\r\n};\r\n</script>\r\n"],"names":["_openBlock","_createBlock","_Teleport","_Transition","_withCtx","_withDirectives","_createElementVNode","_normalizeClass","_normalizeStyle","_withModifiers"],"mappings":";;;;SACe,YAAM,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;AAAE,EAAA,OAAAA,SAAA,EAAmB,EAAAC,WAAA,CAAAC,QAAA,EAAA;AAAA,IAAA,EAAA,EAAA,MAAA;AAAA,IACtC,QAAA,EAYa,CAAA,MAAA,CAAA,QAAA;AAAA,GAAA,EAAA;AAAA,gBAZbC,UAYa,EAAA;AAAA,MAAA,MAAA,MAAA,CAAA,cAAA;AAAA;;MATH,OAAA,EAAAC,QAAA,MAAA;AAAA,QAAAC,cAAA,CACAC,mBAAE,KAAA,EAAA;AAAA,UACP,KAAA,EAAUC,cAAA,CAAA,MAAA,CAAA,cAAA,CAAA;AAAA,UACV,KAAA,EAAUC,cAAA,CAAA,MAAA,CAAA,aAAA,CAAA;AAAA,UACV,YAAK,EAAA,MAAA,CAAO,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,MAAA,CAAA,gBAAA,IAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UACb,YAAI,EAAA,MAAA,CAAU,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,MAAA,CAAA,gBAAA,IAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UAAA,SAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,cAAA,CAAA,GAAA,IAAA,KAAA,MAAA,CAAA,WAAA,IAAA,OAAA,WAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA,CAAA;AAAA,UAEd,GAAA,EAAA,UAAA;AAAA,SAAA,EAAA;AAAA,qBARQ,IAAO,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,SAAA,EAAA,EAAA,CAAA,EAAA;AAAA;;;;;;;;;;;"}