ivue-material-plus
Version:
A high quality UI components Library with Vue.js
1 lines • 12.2 kB
Source Map (JSON)
{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-notice/index.vue"],"sourcesContent":["<template>\r\n <transition\r\n name=\"ivue-notification-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 <!-- 内容 -->\r\n <div :class=\"contentClasses\" ref=\"content\">\r\n <template v-if=\"type === 'normal'\">\r\n <div :class=\"[`${prefixCls}-content`, haveDesc]\">\r\n <div :class=\"`${prefixCls}-title`\">{{ title }}</div>\r\n <div :class=\"`${prefixCls}-desc`\">{{ desc }}</div>\r\n </div>\r\n </template>\r\n <template v-else>\r\n <div\r\n :class=\"`${prefixCls}-content ${prefixCls}-have-icon ${prefixCls}-have-${type} ${haveDesc}`\"\r\n >\r\n <i\r\n :class=\"`ivue-icon ${prefixCls}-icon ${prefixCls}-icon-${type}`\"\r\n >{{ data.iconTypes[type] }}</i\r\n >\r\n <div :class=\"`${prefixCls}-title`\">{{ title }}</div>\r\n <div :class=\"`${prefixCls}-desc`\">{{ desc }}</div>\r\n </div>\r\n </template>\r\n </div>\r\n <!-- render 渲染 -->\r\n <div :class=\"contentHaveIcon\" v-if=\"renderFunc\">\r\n <render-cell :render=\"renderFunc\"></render-cell>\r\n </div>\r\n <!-- 关闭按钮 -->\r\n <div\r\n :class=\"`${baseClasses}-close`\"\r\n @click.stop=\"handleClose\"\r\n v-show=\"closable\"\r\n >\r\n <i class=\"ivue-icon\">close</i>\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\nimport { useEventListener } from '@vueuse/core';\r\n\r\nimport { oneOf } from '../../utils/assist';\r\nimport { EVENT_CODE } from '../../utils/helpers';\r\nimport RenderCell from '../../utils/render';\r\n\r\n// types\r\nimport type { Props, Data, Position, Type } from './types/notice';\r\n\r\nconst prefixCls = 'ivue-notice';\r\n\r\nexport default defineComponent({\r\n name: prefixCls,\r\n emits: ['destroy'],\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: true,\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: 4500,\r\n },\r\n /**\r\n * 偏移位置\r\n *\r\n * @type {Number}\r\n */\r\n offset: {\r\n type: Number,\r\n default: 0,\r\n },\r\n /**\r\n * 自定义弹出位置\r\n *\r\n * @type {String}\r\n */\r\n position: {\r\n type: String as PropType<Position>,\r\n validator(value: string) {\r\n return oneOf(value, [\r\n 'top-right',\r\n 'top-left',\r\n 'bottom-right',\r\n 'bottom-left',\r\n ]);\r\n },\r\n default: 'top-right',\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 * 标题\r\n *\r\n * @type {String}\r\n */\r\n title: {\r\n type: String,\r\n },\r\n /**\r\n * 描述\r\n *\r\n * @type {String}\r\n */\r\n desc: {\r\n type: String,\r\n },\r\n },\r\n setup(props: Props) {\r\n // data\r\n const data = reactive<Data>({\r\n /**\r\n * 是否有描述\r\n *\r\n * @type {Boolean}\r\n */\r\n haveDesc: false,\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-notice',\r\n baseClasses.value,\r\n {\r\n [`${props.className}`]: !!props.className,\r\n [`${_baseClass}-closable`]: props.closable,\r\n [`${_baseClass}-have-desc`]: data.haveDesc,\r\n },\r\n horizontalClass.value,\r\n ];\r\n });\r\n\r\n // 当前方向\r\n const verticalProperty = computed(() => {\r\n return props.position.startsWith('top') ? 'top' : 'bottom';\r\n });\r\n\r\n // 弹出方向\r\n const horizontalClass = computed(() => {\r\n return props.position.indexOf('right') > 1 ? 'right' : 'left';\r\n });\r\n\r\n // 外层样式\r\n const wrapperStyles = computed(() => {\r\n return {\r\n [verticalProperty.value]: `${props.offset}px`,\r\n 'z-index': props.zIndex,\r\n };\r\n });\r\n\r\n // 有描述\r\n const haveDesc = computed(() => {\r\n return props.render && !props.title\r\n ? ''\r\n : props.desc || props.render\r\n ? `${prefixCls}-have-desc`\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 // 键盘点击\r\n const onKeydown = ({ code }: KeyboardEvent) => {\r\n if (code === EVENT_CODE.delete || code === EVENT_CODE.backspace) {\r\n clearCloseTimer(); // press delete/backspace clear timer\r\n } else if (code === EVENT_CODE.esc) {\r\n // press esc to close the notification\r\n if (data.visible) {\r\n handleClose();\r\n }\r\n } else {\r\n startTime(); // resume timer\r\n }\r\n };\r\n\r\n // onMounted\r\n onMounted(() => {\r\n startTime();\r\n\r\n data.visible = true;\r\n\r\n useEventListener(document, 'keydown', onKeydown);\r\n });\r\n\r\n return {\r\n prefixCls,\r\n\r\n // data\r\n data,\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 haveDesc,\r\n\r\n // methods\r\n handleClose,\r\n clearCloseTimer,\r\n handleMouseenter,\r\n handleMouseleave,\r\n horizontalClass,\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","_createCommentVNode","_createElementBlock","_toDisplayString","_withModifiers"],"mappings":"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"}