ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-svg-loader/index.mjs.map

A high quality UI components Library with Vue.js

{"version":3,"file":"index.mjs","sources":["../../../../../src/components/ivue-svg-loader/index.vue"],"sourcesContent":["<template>\r\n  <i class=\"ivue-svg-loader\" v-html=\"html\"></i>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, ref, nextTick, onMounted } from 'vue';\r\n\r\nimport { Props } from './types/svg-loader';\r\n\r\nconst ivueSVGStore = {};\r\n\r\nexport default defineComponent({\r\n  name: 'ivue-svg-loader',\r\n  emits: ['on-svg-loaded'],\r\n  props: {\r\n    /**\r\n     * svg图标的来源\r\n     *\r\n     * @type {String}\r\n     */\r\n    svgSrc: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n  },\r\n  setup(props: Props, { emit }) {\r\n    // html\r\n    const html = ref<string>('');\r\n\r\n    // methods\r\n\r\n    // 判断是否是svg\r\n    const isSvg = (mimetype: string) => {\r\n      return mimetype.indexOf('svg') >= 0;\r\n    };\r\n\r\n    // 设置html\r\n    const setHtml = () => {\r\n      ivueSVGStore[props.svgSrc]\r\n        .then((value: string) => {\r\n          html.value = value;\r\n\r\n          return nextTick();\r\n        })\r\n        .then(() => {\r\n          emit('on-svg-loaded');\r\n        });\r\n    };\r\n\r\n    // 错误提示\r\n    const unexpectedError = (reject) => {\r\n      const error = `Something bad happened trying to fetch ${props.svgSrc}`;\r\n\r\n      reject(error);\r\n    };\r\n\r\n    // 加载svg图标\r\n    const loadSvg = () => {\r\n      // 请求接口\r\n      if (!Object.prototype.hasOwnProperty.call(ivueSVGStore, props.svgSrc)) {\r\n        ivueSVGStore[props.svgSrc] = new Promise((resolve, reject) => {\r\n          const request = new window.XMLHttpRequest();\r\n\r\n          request.open('GET', props.svgSrc, true);\r\n\r\n          request.onload = () => {\r\n            const mimetype = request.getResponseHeader('content-type');\r\n\r\n            // 判断是否是svg\r\n            if (request.status === 200) {\r\n              if (isSvg(mimetype)) {\r\n                resolve(request.response);\r\n\r\n                // 设置html\r\n                setHtml();\r\n              } else {\r\n                const error = `The file ${props.svgSrc} is not a valid SVG.`;\r\n\r\n                reject(error);\r\n              }\r\n            } else if (request.status >= 400 && request.status < 500) {\r\n              const error = `The file ${props.svgSrc} do not exists.`;\r\n\r\n              reject(error);\r\n            } else {\r\n              unexpectedError(reject);\r\n            }\r\n          };\r\n\r\n          // 错误时发生\r\n          request.onerror = () => unexpectedError(reject);\r\n\r\n          // 中断时发生\r\n          request.onabort = () => unexpectedError(reject);\r\n\r\n          // 发送ajax\r\n          request.send();\r\n        });\r\n      }\r\n      // 普通渲染\r\n      else {\r\n        setHtml();\r\n      }\r\n    };\r\n\r\n    // onMounted\r\n    onMounted(() => {\r\n      loadSvg();\r\n    });\r\n\r\n    return {\r\n      // data\r\n      html,\r\n    };\r\n  },\r\n});\r\n</script>\r\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;;AACU,SAAA,YAAC,IAAiB,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;AAAC,EAAA,OAAAA,SAAA,EAAY,EAAAC,kBAAA,CAAA,GAAA,EAAA;AAAA,IAAA,KAAA,EAAA,iBAAA;AAAA;;;;;;;"}