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

A high quality UI components Library with Vue.js

{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-card/index.vue"],"sourcesContent":["<template>\r\n  <component\r\n    :class=\"wrapperClasses\"\r\n    :style=\"wrapperStyles\"\r\n    :is=\"tagName\"\r\n    v-bind=\"tagProps\"\r\n    @click=\"handleLink\"\r\n  >\r\n    <!-- 标题 -->\r\n    <div :class=\"`${prefixCls}-title`\" :style=\"titleStyles\" v-if=\"showTitle\">\r\n      <slot name=\"title\">{{ title }}</slot>\r\n    </div>\r\n    <!-- 额外显示的内容，默认位置在右上角 -->\r\n    <div :class=\"`${prefixCls}-extra`\" v-if=\"showExtra\">\r\n      <slot name=\"extra\"></slot>\r\n    </div>\r\n    <!-- 内容 -->\r\n    <div :class=\"`${prefixCls}-body`\" :style=\"bodyStyles\">\r\n      <slot></slot>\r\n    </div>\r\n  </component>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  computed,\r\n  defineComponent,\r\n  getCurrentInstance,\r\n  onMounted,\r\n  ref,\r\n  ComponentInternalInstance,\r\n} from 'vue';\r\nimport { oneOf } from '../../utils/assist';\r\nimport { isClient } from '../../utils/helpers';\r\n\r\n// type\r\nimport type { Props } from './types/card';\r\n\r\nconst prefixCls = 'ivue-card';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  props: {\r\n    /**\r\n     * 跳转的链接，支持 vue-router 对象\r\n     *\r\n     * @type {Object | String}\r\n     */\r\n    to: {\r\n      type: [Object, String],\r\n    },\r\n    /**\r\n     * 标题\r\n     *\r\n     * @type {String}\r\n     */\r\n    title: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    /**\r\n     * 是否显示边框，建议在灰色背景下使用\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    border: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    /**\r\n     * 卡片阴影，建议在灰色背景下使用\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    shadow: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 禁用鼠标悬停显示阴影\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    disHover: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 卡片内部间距\r\n     *\r\n     * @type {Number | String}\r\n     */\r\n    padding: {\r\n      type: [Number, String],\r\n    },\r\n    /**\r\n     * 标题内部间距(paddingStylesLinkage开启该属性将不生效)\r\n     *\r\n     * @type {Number | String}\r\n     */\r\n    titlePadding: {\r\n      type: [Number, String],\r\n    },\r\n    /**\r\n     * 相当于 a 链接的 target 属性\r\n     *\r\n     * @type {String}\r\n     */\r\n    target: {\r\n      type: String,\r\n      validator(value: string) {\r\n        return oneOf(value, ['_blank', '_self', '_parent', '_top']);\r\n      },\r\n      default: '_self',\r\n    },\r\n    /**\r\n     * 路由跳转时，开启 replace 将不会向 history 添加新记录\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    replace: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 圆角\r\n     *\r\n     * @type {Number}\r\n     */\r\n    radius: {\r\n      type: Number,\r\n    },\r\n    /**\r\n     * 样式联动(联动标题和内容的padding)\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    paddingStylesLinkage: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n  },\r\n  setup(props: Props, { slots }) {\r\n    const { proxy } = getCurrentInstance() as ComponentInternalInstance;\r\n\r\n    // 是否显示标题\r\n    const showTitle = ref<boolean>(false);\r\n\r\n    // 额外显示的内容，默认位置在右上角\r\n    const showExtra = ref<boolean>(false);\r\n\r\n    // computed\r\n\r\n    // 外部样式\r\n    const wrapperClasses = computed(() => {\r\n      return [\r\n        prefixCls,\r\n        {\r\n          [`${prefixCls}-border`]: props.border && !props.shadow,\r\n          [`${prefixCls}-dis-hover`]: props.disHover,\r\n          [`${prefixCls}-shadow`]: props.shadow,\r\n        },\r\n      ];\r\n    });\r\n\r\n    // 外部样式\r\n    const wrapperStyles = computed(() => {\r\n      // 圆角\r\n      if (props.radius) {\r\n        const regexp = new RegExp(/[a-zA-Z]/g);\r\n\r\n        // 是否有单位\r\n        const isUnit = regexp.test(`${props.radius}`);\r\n\r\n        return {\r\n          borderRadius: !isUnit ? `${props.radius}px` : props.radius,\r\n        };\r\n      }\r\n\r\n      return {};\r\n    });\r\n\r\n    // 标题样式\r\n    const titleStyles = computed(() => {\r\n      const padding = props.paddingStylesLinkage\r\n        ? props.padding\r\n        : props.titlePadding;\r\n\r\n      // padding\r\n      if (padding) {\r\n        const regexp = new RegExp(/[a-zA-Z]/g);\r\n\r\n        // 是否有单位\r\n        const isUnit = regexp.test(`${padding}`);\r\n\r\n        return {\r\n          padding: !isUnit ? `${padding}px` : padding,\r\n        };\r\n      }\r\n\r\n      return {};\r\n    });\r\n\r\n    // 内容样式\r\n    const bodyStyles = computed(() => {\r\n      // 卡片内部间距\r\n      if (props.padding) {\r\n        const regexp = new RegExp(/[a-zA-Z]/g);\r\n\r\n        // 是否有单位\r\n        const isUnit = regexp.test(`${props.padding}`);\r\n\r\n        return {\r\n          padding: !isUnit ? `${props.padding}px` : props.padding,\r\n        };\r\n      }\r\n\r\n      return {};\r\n    });\r\n\r\n    // 是否是 a 标签\r\n    const isHrefPattern = computed(() => {\r\n      return !!props.to;\r\n    });\r\n\r\n    // 标签名称\r\n    const tagName = computed(() => {\r\n      // 是否是跳转链接\r\n      return isHrefPattern.value ? 'a' : 'div';\r\n    });\r\n\r\n    // 跳转的链接\r\n    const linkUrl = computed(() => {\r\n      // 跳转的链接，支持 vue-router 对象\r\n      const type = typeof props.to;\r\n\r\n      // 判断是否字符串\r\n      if (type !== 'string') {\r\n        return null;\r\n      }\r\n\r\n      /* absolute url 不需要路由 */\r\n      if (props.to.includes('//')) {\r\n        return props.to;\r\n      }\r\n\r\n      // router\r\n      const router = proxy.$router;\r\n\r\n      // 是否有路由\r\n      if (router) {\r\n        // 当前路由\r\n        const current = proxy.$route;\r\n\r\n        // 路由对象\r\n        const route = router.resolve(props.to, current);\r\n\r\n        return route ? route.href : props.to;\r\n      }\r\n\r\n      return props.to;\r\n    });\r\n\r\n    // 标签属性\r\n    const tagProps = computed(() => {\r\n      // 链接\r\n      if (isHrefPattern.value) {\r\n        return {\r\n          href: linkUrl.value,\r\n          target: props.target,\r\n        };\r\n      } else {\r\n        return {};\r\n      }\r\n    });\r\n\r\n    // methods\r\n\r\n    // 跳转链接\r\n    const handleLink = (event) => {\r\n      if (!isClient) {\r\n        return;\r\n      }\r\n\r\n      // 是否是 a 标签\r\n      if (!isHrefPattern.value) {\r\n        return;\r\n      }\r\n\r\n      const openInNewWindow = event.ctrlKey || event.metaKey;\r\n\r\n      // 跳转的链接\r\n      if (props.to) {\r\n        // blank\r\n        if (props.target === '_blank') {\r\n          handleLinkBlank();\r\n        } else {\r\n          event.preventDefault();\r\n\r\n          const router = proxy.$router;\r\n\r\n          // 打开新窗口\r\n          if (openInNewWindow) {\r\n            handleLinkBlank();\r\n          }\r\n          // 不是打开新窗口\r\n          else {\r\n            // 有路由\r\n            if (router) {\r\n              // url跳转\r\n              if (typeof props.to === 'string' && props.to.includes('//')) {\r\n                window.location.href = props.to;\r\n              }\r\n              // 路由跳转\r\n              else {\r\n                props.replace\r\n                  ? router.replace(props.to)\r\n                  : router.push(props.to);\r\n              }\r\n            }\r\n            // 跳转链接\r\n            else {\r\n              window.location.href = props.to;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    };\r\n\r\n    // 打开链接 blank\r\n    const handleLinkBlank = () => {\r\n      const router = proxy.$router;\r\n\r\n      // 跳转的链接\r\n      let to = props.to;\r\n\r\n      if (router) {\r\n        const current = proxy.$route;\r\n\r\n        // 跳转路由\r\n        const route = router.resolve(props.to, current);\r\n\r\n        // 获取跳转链接\r\n        to = route ? route.href : props.to;\r\n      }\r\n\r\n      if (typeof props.to === 'string') {\r\n        return;\r\n      }\r\n\r\n      window.open(to);\r\n    };\r\n\r\n    // onMounted\r\n    onMounted(() => {\r\n      // 是否显示头部\r\n      showTitle.value = !!props.title || slots.title !== undefined;\r\n\r\n      // 额外显示的内容，默认位置在右上角\r\n      showExtra.value = slots.extra !== undefined;\r\n    });\r\n\r\n    return {\r\n      prefixCls,\r\n\r\n      // data\r\n      showTitle,\r\n      showExtra,\r\n\r\n      // computed\r\n      tagName,\r\n      wrapperClasses,\r\n      wrapperStyles,\r\n      titleStyles,\r\n      bodyStyles,\r\n      tagProps,\r\n\r\n      // methods\r\n      handleLink,\r\n    };\r\n  },\r\n});\r\n</script>\r\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_withCtx","_createCommentVNode","_normalizeClass","_normalizeStyle","_createElementVNode"],"mappings":";;;;AAEU,SAAA,YAAE,IAAc,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;AAChB,EAAA,OAAAA,WAAe,EAAAC,WAAA,CAAAC,wBAAA,IAAA,CAAA,OAAA,GAAAC,UAAA,CAAA;AAAA,IAEb,OAAA,IAAA,CAAA,cAAA;AAAA,IAAA,OAAA,IAAA,CAAA,aAAA;AAAA,UAGR,QAAW,EAAA,EAAA,SAAA,IAAA,CAAA,UAAA,EAAA,CAAA,EAAA;AAAA,IAAA,OAAA,EACmDC,QAAS,MAAA;AAAA,MAAvEC,mBAAA,gBAAA,CAAA;AAAA,MAAA,IAAA,CAAA,SAAA,IAAAL,SAAW,EAAA,qBAAK,KAAS,EAAA;AAAA,QAAW,GAAK,EAAA,CAAA;AAAA,QAAA,KAAA,EAAAM,cAAA,CAAA,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,MAAA,CAAA,CAAA;AAAA,QACvC,KAAA,EAAqCC,cAAA,CAAA,IAAA,CAAA,WAAA,CAAA;AAAA,OAAA,EAAA;AAAA;;;OAEvC,EAAA,CAAA,CACyC,IAAAF,kBAAA,CAAS,QAAA,IAAA,CAAA;AAAA,MAAAA,mBAAlD,oGAEM,CAAA;AAAA,MAAA,IAAA,CAAA,SAAA,IAAAL,SAFK,EAAA,qBAAK,KAAS,EAAA;AAAA,QAAA,GAAA,EAAA,CAAA;AAAA,QACvB,KAA0B,EAAAM,cAAA,CAAA,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,MAAA,CAAA,CAAA;AAAA,OAAA,EAAA;AAAA;OAE5B,EAAA,CAAA,CACA,IAAAD,kBAAA,CAEM,QAAA,IAAA,CAAA;AAAA,MAFKA,mBAAA,gBAAA,CAAA;AAAA,MAAAG,mBAA6B,KAAE,EAAA;AAAA,QAAA,KAAA,EAAAF,cAAA,CAAA,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,KAAA,CAAA,CAAA;AAAA,QACxC,KAAA,EAAaC,cAAA,CAAA,IAAA,CAAA,UAAA,CAAA;AAAA,OAAA,EAAA;AAAA;;;;;;;;;;"}