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

A high quality UI components Library with Vue.js

{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-message/index.vue"],"sourcesContent":["<template>\r\n  <transition\r\n    :name=\"`${prefixCls}-message-fade`\"\r\n    @before-leave=\"onClose\"\r\n    @after-leave=\"$emit('destroy')\"\r\n  >\r\n    <div\r\n      :class=\"classes\"\r\n      :style=\"wrapperStyles\"\r\n      @mouseenter=\"handleMouseenter\"\r\n      @mouseleave=\"handleMouseleave\"\r\n      v-show=\"data.visible\"\r\n    >\r\n      <div :class=\"`${baseClasses}-content`\" ref=\"content\">\r\n        <template v-if=\"type === 'loading'\">\r\n          <div class=\"ivue-progress-circular-indeterminate\">\r\n            <i :class=\"`ivue-icon ${loadingIcon}`\" v-if=\"loadingIcon\"></i>\r\n\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              :viewBox=\"`${viewBoxSize} ${viewBoxSize} ${2 * viewBoxSize} ${\r\n                2 * viewBoxSize\r\n              }`\"\r\n              :class=\"`${prefixCls}-loading ivue-load-loop`\"\r\n              v-else\r\n            >\r\n              <circle\r\n                fill=\"transparent\"\r\n                :cx=\"`${2 * viewBoxSize}`\"\r\n                :cy=\"`${2 * viewBoxSize}`\"\r\n                r=\"20\"\r\n                :stroke-width=\"`${strokeWidth}`\"\r\n                :stroke-dasharray=\"`${strokeDasharray}`\"\r\n                :stroke-dashoffset=\"`${strokeDashoffset}`\"\r\n                class=\"ivue-progress-circular-overlay\"\r\n              />\r\n            </svg>\r\n          </div>\r\n          <span v-html=\"content\"></span>\r\n        </template>\r\n        <template v-else>\r\n          <!-- icon -->\r\n          <i :class=\"`ivue-icon ${prefixCls}-icon ${prefixCls}-icon-${type}`\">{{\r\n            data.iconTypes[type]\r\n          }}</i>\r\n          <!-- render 渲染 -->\r\n          <div :class=\"`${baseClasses}-content-text`\" v-if=\"renderFunc\">\r\n            <render-cell :render=\"renderFunc\"></render-cell>\r\n          </div>\r\n          <!-- 内容 -->\r\n          <div\r\n            :class=\"`${baseClasses}-content-text`\"\r\n            v-html=\"content\"\r\n            v-else\r\n          ></div>\r\n          <!-- 关闭按钮 -->\r\n          <div\r\n            :class=\"`${baseClasses}-close`\"\r\n            @click=\"handleClose\"\r\n            v-show=\"closable\"\r\n          >\r\n            <i class=\"ivue-icon\">close</i>\r\n          </div>\r\n        </template>\r\n      </div>\r\n    </div>\r\n  </transition>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, computed, reactive, onMounted, PropType } from 'vue';\r\n\r\nimport RenderCell from '../../utils/render';\r\n\r\n// type\r\nimport type { Props, Data, Type } from './types/message';\r\n\r\nconst prefixCls = 'ivue-message';\r\n\r\nexport default defineComponent({\r\n  emits: ['destroy'],\r\n  name: prefixCls,\r\n  props: {\r\n    /**\r\n     * 内容\r\n     *\r\n     * @type {String}\r\n     */\r\n    content: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    /**\r\n     * 类型名称\r\n     *\r\n     * @type {String}\r\n     */\r\n    type: {\r\n      type: String as PropType<Type>,\r\n      default: 'normal',\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     * 是否有关闭按钮\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    closable: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 背景颜色\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    background: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * render 渲染函数\r\n     *\r\n     * @type {Function}\r\n     */\r\n    render: {\r\n      type: Function,\r\n    },\r\n    /**\r\n     * 关闭方法\r\n     *\r\n     * @type {Function}\r\n     */\r\n    onClose: {\r\n      type: Function,\r\n    },\r\n    /**\r\n     * 组件名称\r\n     *\r\n     * @type {String}\r\n     */\r\n    id: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    /**\r\n     * 延迟关闭时间\r\n     *\r\n     * @type {Function}\r\n     */\r\n    duration: {\r\n      type: Number,\r\n      default: 1500,\r\n    },\r\n    /**\r\n     * 偏移位置\r\n     *\r\n     * @type {Number}\r\n     */\r\n    top: {\r\n      type: Number,\r\n      default: 0,\r\n    },\r\n    /**\r\n     * 当前index\r\n     *\r\n     * @type {Number}\r\n     */\r\n    zIndex: {\r\n      type: Number,\r\n      default: 0,\r\n    },\r\n    /**\r\n     * loading icon\r\n     *\r\n     * @type {String}\r\n     */\r\n    loadingIcon: {\r\n      type: String,\r\n    },\r\n  },\r\n  setup(props: Props) {\r\n    const radius = 20;\r\n    const size = 20;\r\n    const percent = 20;\r\n    const viewBoxSize = radius / (1 - 4 / +size);\r\n    const circumference = 2 * Math.PI * radius;\r\n    const strokeDashoffset = ((100 - percent) / 100) * circumference + 'px';\r\n    const strokeDasharray = Math.round(circumference * 1000) / 1000;\r\n    const strokeWidth = (2 / +size) * viewBoxSize * 2;\r\n\r\n    // data\r\n    const data = reactive<Data>({\r\n      /**\r\n       * 关闭时间\r\n       *\r\n       * @type {Function}\r\n       */\r\n      closeTimer: null,\r\n      /**\r\n       * 显示\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      visible: false,\r\n      /**\r\n       * 图标类型\r\n       *\r\n       * @type {Object}\r\n       */\r\n      iconTypes: {\r\n        success: 'check_circle',\r\n        info: 'info',\r\n        warning: 'warning',\r\n        error: 'error',\r\n      },\r\n    });\r\n\r\n    // computed\r\n\r\n    // 原始class\r\n    const baseClasses = computed(() => {\r\n      return `${prefixCls}-notice`;\r\n    });\r\n\r\n    // 外层样式\r\n    const classes = computed(() => {\r\n      const _baseClass = baseClasses.value;\r\n\r\n      return [\r\n        'ivue-message',\r\n        baseClasses.value,\r\n        {\r\n          [`${props.className}`]: !!props.className,\r\n          [`${_baseClass}-closable`]: props.closable,\r\n          [`${_baseClass}-have-background`]: props.background,\r\n          [`${_baseClass}-have-background-${props.type}`]: props.background,\r\n        },\r\n      ];\r\n    });\r\n\r\n    // 外层样式\r\n    const wrapperStyles = computed(() => {\r\n      return {\r\n        top: `${props.top}px`,\r\n        'z-index': props.zIndex,\r\n      };\r\n    });\r\n\r\n    // 内容样式\r\n    const contentClasses = computed(() => {\r\n      const _baseClass = baseClasses.value;\r\n\r\n      return {\r\n        [`${_baseClass}-content`]: true,\r\n        [`${_baseClass}-content-render`]: props.render,\r\n      };\r\n    });\r\n\r\n    // 是否有图标\r\n    const contentHaveIcon = computed(() => {\r\n      return {\r\n        [`${prefixCls}-content-have-icon`]: props.type !== 'normal',\r\n      };\r\n    });\r\n\r\n    // render 函数\r\n    const renderFunc = computed(() => {\r\n      return props.render;\r\n    });\r\n\r\n    // methods\r\n\r\n    // 关闭\r\n    const handleClose = () => {\r\n      data.visible = false;\r\n    };\r\n\r\n    // 清除关闭时间\r\n    const clearCloseTimer = () => {\r\n      if (data.closeTimer) {\r\n        clearTimeout(data.closeTimer);\r\n        data.closeTimer = null;\r\n      }\r\n    };\r\n\r\n    // 开始时间\r\n    const startTime = () => {\r\n      // 重新设置延迟关闭\r\n      if (props.duration > 0) {\r\n        data.closeTimer = setTimeout(() => {\r\n          handleClose();\r\n        }, props.duration);\r\n      }\r\n    };\r\n\r\n    // 鼠标进入\r\n    const handleMouseenter = () => {\r\n      clearTimeout(data.closeTimer);\r\n      data.closeTimer = null;\r\n    };\r\n\r\n    // 鼠标移开\r\n    const handleMouseleave = () => {\r\n      startTime();\r\n    };\r\n\r\n    // onMounted\r\n    onMounted(() => {\r\n      startTime();\r\n\r\n      data.visible = true;\r\n    });\r\n\r\n    return {\r\n      prefixCls,\r\n\r\n      // data\r\n      data,\r\n      viewBoxSize,\r\n      strokeWidth,\r\n      strokeDasharray,\r\n      strokeDashoffset,\r\n\r\n      // computed\r\n      classes,\r\n      baseClasses,\r\n      contentClasses,\r\n      contentHaveIcon,\r\n      renderFunc,\r\n      wrapperStyles,\r\n\r\n      // methods\r\n      handleClose,\r\n      clearCloseTimer,\r\n      handleMouseenter,\r\n      handleMouseleave,\r\n    };\r\n  },\r\n  components: {\r\n    RenderCell,\r\n  },\r\n});\r\n</script>\r\n"],"names":["_resolveComponent","_openBlock","_createBlock","_Transition","_withCtx","_withDirectives","_createElementVNode","_normalizeClass","_normalizeStyle","_createElementBlock","_Fragment","_createCommentVNode","_toDisplayString"],"mappings":"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"}