import { computed } from 'vue' const props = defineProps({ // icon 图标 icon: { type: String, required: true }, // 图标类名 className: { type: String, default: '' } }) // 判断是否为外部图标 const isExternal = computed(() => { return /^(https?:|mailto:|tel:)/.test(props.icon) }) // 如果是element-plus图标，将具体组件绑定到变量中。用于component标签使用。 let iconComponent = null if (!isExternal.value) { iconComponent = Icons[props.icon] } /** * 外部图标样式 */ const styleExternalIcon = computed(() => ({ mask: `url(${props.icon}) no-repeat 50% 50%`, '-webkit-mask': `url(${props.icon}) no-repeat 50% 50%` })) 将以上代码用vue2重写

在Vue2中，需要使用`Vue.extend()`方法创建组件，然后在`template`中使用。以下是重写后的代码：

<template>
  <div>
    <component :is="iconComponent" :class="props.className" v-if="!isExternal"></component>
    <span :style="styleExternalIcon" :class="props.className" v-else></span>
  </div>
</template>

<script>
import { computed } from 'vue';
import Icons from './icons'; // 导入图标组件

export default {
  props: {
    // icon 图标
    icon: {
      type: String,
      required: true
    },
    // 图标类名
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 判断是否为外部图标
    isExternal() {
      return /^(https?:|mailto:|tel:)/.test(this.icon);
    },
    // 如果是element-plus图标，将具体组件绑定到变量中。用于component标签使用。
    iconComponent() {
      if (!this.isExternal) {
        return Icons[this.icon];
      }
    },
    // 外部图标样式
    styleExternalIcon() {
      return {
        mask: `url(${this.icon}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.icon}) no-repeat 50% 50%`
      };
    }
  }
}
</script>