ivue-material-plus

Version:

A high quality UI components Library with Vue.js

1 lines • 11.3 kB

Source Map (JSON)

{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-badge/index.vue"],"sourcesContent":["<template>\r\n \r\n <span :class=\"prefixCls\" v-if=\"dot\">\r\n <slot></slot>\r\n <sup :style=\"styles\" :class=\"dotClasses\" v-show=\"showBadge\"></sup>\r\n </span>\r\n \r\n <span v-else-if=\"status\" :class=\"statusWrapperClasses\">\r\n <span :class=\"statusClasses\" :style=\"statusStyles\"></span>\r\n \r\n <span :class=\"`${prefixCls}-status--text`\">\r\n <slot name=\"text\">{{ text }}</slot>\r\n </span>\r\n </span>\r\n \r\n <span :class=\"prefixCls\" v-else>\r\n <slot></slot>\r\n <transition :name=\"`${prefixCls}-fade`\">\r\n <sup\r\n :style=\"slotsStyles\"\r\n :class=\"countSlotsClasses\"\r\n v-if=\"$slots.count\"\r\n v-show=\"showBadge\"\r\n >\r\n <slot name=\"count\"></slot>\r\n </sup>\r\n <sup\r\n :style=\"styles\"\r\n :class=\"countClasses\"\r\n v-else-if=\"hasCount\"\r\n v-show=\"showBadge\"\r\n >\r\n <sup>\r\n <slot name=\"text\">{{ finalCount }}</slot>\r\n </sup>\r\n </sup>\r\n </transition>\r\n </span>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport hexToRgba from 'hex-to-rgba';\r\nimport { oneOf } from '../../utils/assist';\r\n\r\nimport {\r\n defineComponent,\r\n computed,\r\n getCurrentInstance,\r\n ComponentInternalInstance,\r\n} from 'vue';\r\n\r\n// type\r\nimport type { Props } from './types/badge';\r\n\r\nconst prefixCls = 'ivue-badge';\r\n\r\nfunction isCssColor(color: string) {\r\n return !!color && !!color.match(/^(#|(rgb|hsl)a?\\()/);\r\n}\r\n\r\nconst initColorList = [\r\n 'blue',\r\n 'green',\r\n 'red',\r\n 'yellow',\r\n 'pink',\r\n 'orange',\r\n 'gold',\r\n 'lime',\r\n 'cyan',\r\n 'purple',\r\n 'success',\r\n 'processing',\r\n 'default',\r\n 'error',\r\n 'warning',\r\n];\r\n\r\nexport default defineComponent({\r\n name: prefixCls,\r\n props: {\r\n /**\r\n * 显示的数字\r\n *\r\n * @type {Number}\r\n */\r\n count: {\r\n type: Number,\r\n },\r\n /**\r\n * 自定义的class名称，dot 模式下无效\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 {Number, String}\r\n */\r\n overflowCount: {\r\n type: [Number, String],\r\n default: 99,\r\n },\r\n /**\r\n * 当数值为0时是否显示\r\n *\r\n * @type {Boolean}\r\n */\r\n showZero: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n /**\r\n * 自定义内容\r\n *\r\n * @type {String}\r\n */\r\n text: {\r\n type: String,\r\n default: '',\r\n },\r\n /**\r\n * 颜色\r\n *\r\n * @type {String}\r\n */\r\n color: {\r\n type: String,\r\n default: '#FF617F',\r\n },\r\n /**\r\n * 数字偏移位置\r\n *\r\n * @type {Array}\r\n */\r\n offset: {\r\n type: Array,\r\n },\r\n /**\r\n * 显示成小红点\r\n *\r\n * @type {Boolean}\r\n */\r\n dot: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n /**\r\n * 是否显示徽标\r\n *\r\n * @type {Boolean}\r\n */\r\n show: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n /**\r\n * 设置 Badge 为状态点\r\n *\r\n * @type {String}\r\n */\r\n status: {\r\n type: String,\r\n },\r\n },\r\n setup(props: Props) {\r\n // 支持访问内部组件实例\r\n const { proxy } = getCurrentInstance() as ComponentInternalInstance;\r\n\r\n // computed\r\n\r\n // 原始class\r\n const dotClasses = computed(() => {\r\n let _color = {};\r\n\r\n // 自定义颜色\r\n if (!isCssColor(props.color)) {\r\n _color = { [props.color]: true };\r\n }\r\n\r\n return [`${prefixCls}-dot`, _color];\r\n });\r\n\r\n // 数值样式\r\n const countClasses = computed(() => {\r\n const { color, className } = props;\r\n\r\n let _color = {\r\n [`${className}`]: !!className,\r\n [`${prefixCls}-count--alone`]: alone.value,\r\n };\r\n\r\n // 自定义颜色\r\n if (!isCssColor(color)) {\r\n _color = {\r\n ..._color,\r\n [color]: true,\r\n };\r\n }\r\n\r\n return [`${prefixCls}-count`, _color];\r\n });\r\n\r\n // 数值slot样式\r\n const countSlotsClasses = computed(() => {\r\n const { color, className } = props;\r\n\r\n let _color = {\r\n [`${className}`]: !!className,\r\n };\r\n\r\n // 自定义颜色\r\n if (!isCssColor(color)) {\r\n _color = {\r\n ..._color,\r\n [color]: true,\r\n };\r\n }\r\n\r\n return [`${prefixCls}-count`, `${prefixCls}-count--custom`, _color];\r\n });\r\n\r\n // 状态点的颜色\r\n const statusWrapperClasses = computed(() => {\r\n return [prefixCls, `${prefixCls}-status`];\r\n });\r\n\r\n // 状态点的颜色\r\n const statusClasses = computed(() => {\r\n const { status, color } = props;\r\n\r\n let _color = {\r\n [`${prefixCls}-status--${color}`]:\r\n !!color && oneOf(color, initColorList),\r\n };\r\n\r\n // 自定义颜色\r\n if (!isCssColor(status)) {\r\n _color = {\r\n ..._color,\r\n [`${prefixCls}-status--${status}`]: !!status,\r\n };\r\n }\r\n\r\n return [`${prefixCls}-status--dot`, _color];\r\n });\r\n\r\n // 状态点的颜色\r\n const statusStyles = computed(() => {\r\n const { status } = props;\r\n\r\n const style = {};\r\n\r\n if (isCssColor(status)) {\r\n style['background-color'] = status;\r\n }\r\n\r\n return style;\r\n });\r\n\r\n // 微标位置\r\n const styles = computed(() => {\r\n const style = {};\r\n\r\n if (props.offset && props.offset.length === 2) {\r\n style['margin-top'] = `${props.offset[0]}px`;\r\n style['margin-right'] = `${props.offset[1]}px`;\r\n }\r\n\r\n // 自定义颜色\r\n if (isCssColor(props.color)) {\r\n style['background-color'] = props.color;\r\n style['box-shadow'] = `0 0 2px 1px ${hexToRgba(props.color, '0.5')}`;\r\n }\r\n\r\n return style;\r\n });\r\n\r\n // 微标位置\r\n const slotsStyles = computed(() => {\r\n const style = {};\r\n\r\n if (props.offset && props.offset.length === 2) {\r\n style['margin-top'] = `${props.offset[0]}px`;\r\n style['margin-right'] = `${props.offset[1]}px`;\r\n }\r\n\r\n return style;\r\n });\r\n\r\n // 判断是否显示封顶数字值\r\n const finalCount = computed(() => {\r\n const { count, overflowCount, text } = props;\r\n\r\n // 判断是否有文字\r\n if (text !== '') {\r\n return text;\r\n }\r\n\r\n // 显示的数字 >= 封顶的数字值 ? 封顶的数字值+ : 显示的数字\r\n return parseInt(`${count}`) >= parseInt(`${overflowCount}`)\r\n ? `${overflowCount}+`\r\n : count;\r\n });\r\n\r\n // 是否显示数字\r\n const showBadge = computed(() => {\r\n const { count, dot, showZero, text, show } = props;\r\n\r\n let status = false;\r\n\r\n if (!show) {\r\n return show;\r\n }\r\n\r\n // 是否有数字\r\n if (count) {\r\n // 是否等于0\r\n status = !(parseInt(`${count}`) === 0);\r\n }\r\n\r\n // 是否显示成小红点\r\n if (dot) {\r\n status = true;\r\n\r\n if (count !== null) {\r\n // 是否等于0\r\n if (parseInt(`${count}`) === 0) {\r\n status = false;\r\n }\r\n }\r\n }\r\n\r\n // 是否有文本\r\n if (text !== '') {\r\n status = true;\r\n }\r\n\r\n // 0不显示 || 当数值为0是是否显示\r\n return status || showZero;\r\n });\r\n\r\n // 是否有数值\r\n const hasCount = computed(() => {\r\n const { count, text, showZero } = props;\r\n\r\n if (count || text !== '') {\r\n return true;\r\n }\r\n\r\n if (showZero && parseInt(`${count}`) === 0) {\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n });\r\n\r\n // 是否有数值\r\n const alone = computed(() => {\r\n return proxy.$slots.default === undefined;\r\n });\r\n\r\n return {\r\n prefixCls,\r\n\r\n // computed\r\n dotClasses,\r\n countClasses,\r\n countSlotsClasses,\r\n statusWrapperClasses,\r\n statusClasses,\r\n slotsStyles,\r\n statusStyles,\r\n styles,\r\n finalCount,\r\n showBadge,\r\n hasCount,\r\n alone,\r\n };\r\n },\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped></style>\r\n"],"names":["_openBlock","_createElementBlock","_Fragment","_createCommentVNode","_normalizeClass","_withDirectives","_createElementVNode","_normalizeStyle","_renderSlot","_createVNode","_Transition","_vShow"],"mappings":";;;;SACE,YAAY,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;SACmBA,SAAG,EAAA,EAAAC,kBAAA,CAAAC,QAAA,EAAA,IAAA,EAAA;AAAA,IAAlCC,mBAAA,sBAAA,CAAA;AAAA,IAAA,IAAA,CAAA,GAAA,IAAAH,SAAY,EAAA,qBAAE,MAAS,EAAA;AAAA,MAAA,GAAA,EAAA,CAAA;AAAA,MACrB,KAAA,EAAaI,cAAA,CAAA,IAAA,CAAA,SAAA,CAAA;AAAA,KAAA,EAAA;AAAA,iBACF,IAAE,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,MAAAC,cAAA,CAAcC,mBAAE,KAAU,EAAA;AAAA,QAAA,KAAA,EAAAC,cAAA,CAAA,IAAA,CAAA,MAAA,CAAA;AAAA,QAAmB,KAAA,EAAAH,cAAA,CAAA,IAAA,CAAA,UAAA,CAAA;AAAA,OAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA;AAAA;OAG3C,CAAA;AAAA,KAAA,EAAA,CAAA,CAAA,IAAA,IAAA,CADjB,qBAOO,EAAAH,kBAAA,CAAAC,QAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,EAAA;AAAA,MAAAC,mBANwB,wCAAE,CAAA;AAAA,MAAAG,mBAAA,MAAA,EAAA;AAAA,QAC/B,KAAA,EAA0DF,cAAA,CAAA,IAAA,CAAA,oBAAA,CAAA;AAAA,OAAA,EAAA;AAAA,2BAAvB,MAAE,EAAA;AAAA,UAAA,KAAA,EAAAA,cAAA,CAAA,IAAA,CAAA,aAAA,CAAA;AAAA,UACrC,KAAA,EAAaG,cAAA,CAAA,IAAA,CAAA,YAAA,CAAA;AAAA,SACb,EAEO,MAAA,CAAA,CAAA;AAAA,QAAAJ,mBAFK,QAAK,CAAA;AAAA,QAAAG,mBAAA,MAAA,EAAA;AAAA,UACf,KAAmC,EAAAF,cAAA,CAAA,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,aAAA,CAAA,CAAA;AAAA,SAAA,EAAA;AAAA;;;;SAIvC,CAAA,CAAA;AAAA,KADA,EAAA,IAAa,CAAA,cACb,EAAA,EAsBOH,mBAAAC,QAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,EAAA;AAAA,MAAAC,mBAtBK,4BAAE,CAAA;AAAA,MAAAG,mBAAA,MAAA,EAAA;AAAA,QACZ,KAAA,EAAaF,cAAA,CAAA,IAAA,CAAA,SAAA,CAAA;AAAA,OACb,EAAA;AAAA,QAAAI,UAAA,CAAsB,IAAS,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,QAAAC,YAAAC,UAAA,EAAA;AAAA;;;YAErB,KAAA,MAAA,CAAA,KAAA,GAAAL,gBAAAL,SAAE,EAAA,EAAWC,mBAAA,KAAA,EAAA;AAAA,cAClB,GAAK,EAAA,CAAA;AAAA,cAAA,KAAA,EAAAM,cAAA,CAAA,IAAA,CAAA,WAAA,CAAA;AAAA,cAIN,KAAA,EAA0BH,cAAA,CAAA,IAAA,CAAA,iBAAA,CAAA;AAAA,aAAA,EAAA;AAAA,yBAFlB,IAAS,CAAA,MAAA,EAAA,OAAA,CAAA;AAAA,aAAA,EAAA,CAAA,CAAA,GAAA;AAAA,cAON,CAAQO,KAAA,EAAA,IAAA,CAAA,SAAA,CAAA;AAAA,aAAA,IAAA,IAAA,CAAA,QAAA,GAAAN,gBAFbL,SAAE,EAAA,EAAMC,mBAAA,KAAA,EAAA;AAAA,cACb,GAAK,EAAA,CAAA;AAAA,cAAA,KAAA,EAAAM,cAAA,CAAA,IAAA,CAAA,MAAA,CAAA;AAAA,cAIN,KAAA,EAEMH,cAAA,CAAA,IAAA,CAAA,YAAA,CAAA;AAAA,aAAA,EAAA;AAAA;;;;;;;;;;;;;;;;;;;"}