图标二次封装

本插件依赖于

• elementui-plus

• elementui-plus 图标库

注意

1. 如果没有,请先安装

本插件最后效果

属性指南

属性名	说明	类型	默认值	是否必须
type	图标类型就两个选项 url 或者 element 要是 url 就是外部链接,element 就是 elementui-plus 图标	string	url	必须填写
icon	elementui-plus 图标库地址 例如 Search 或者 外部链接	string	-	必须填写
width	宽度	string	56px	非必须填写
height	高度	string	56px	非必须填写
color	颜色,图标颜色或者图片背景色	string	#fff	非必须填写
cb	回调函数点击后执行的方法	Function	defaultcb()	非必须填写

封装插件

类型

• types

export default interface IChooseIcon {
  // 判断是外部还是element-ui组件
  type: string;
  // 地址 或者element-ui-plus组件名
  icon: string;
  // 宽
  width?: string;
  // 高
  height?: string;
  // 颜色
  color?: string;
  // 回调函数
  cb?: Function;
}

组件

<template>
  <img
    v-if="props.type == 'url'"
    :src="props.icon"
    :style="{
      width: props.width,
      height: props.height,
      backgroundColor: props.color,
    }"
    @click="handleClick"
  />
  <el-icon v-else :size="props.width" :color="props.color" @click="handleClick">
    <component :is="props.icon"></component>
  </el-icon>
</template>

<script setup lang="ts">
import { onMounted, withDefaults, ref } from "vue";
const defaultcb = () => {};
const props = withDefaults(
  defineProps<{
    // 判断是外部还是element-ui组件
    type: string;
    // 地址 或者element-ui-plus组件名
    icon: string;
    // 宽
    width?: string;
    // 高
    height?: string;
    // 颜色
    color?: string;
    // 回调函数
    cb?: Function;
  }>(),
  {
    type: "url", // url 就是外部链接 , element 就是element图标
    icon: "",
    width: "56px",
    height: "56px",
    color: "#fff",
  }
);

const handleClick = () => {
  if (props.cb) {
    props.cb();
  } else {
    defaultcb();
  }
};

onMounted(() => {
  console.log(props);
});
</script>

<style scoped></style>

调用

<template>
  <div class="pagecontent">
    选择图标
    <yj-icon :type="data.type" :icon="data.icon" :color="data.color"></yj-icon>
    <yj-icon
      :type="data2.type"
      :width="data2.width"
      :height="data2.height"
      :icon="data2.icon"
      :color="data2.color"
      :cb="data2.cb"
    ></yj-icon>
    <yj-icon
      :type="data3.type"
      :width="data3.width"
      :height="data3.height"
      :icon="data3.icon"
      :color="data3.color"
      :cb="data3.cb"
    ></yj-icon>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type ChooseIconType from "@/types/chooseIcon/type";
const data = ref<ChooseIconType>({
  type: "url", // url 就是外部链接 , element 就是element图标
  icon: "https://file.jsopy.com/ICONS/SVG/article-create.svg",
  color: "white",
});
const cb2 = () => {
  console.log("执行第二个回调函数");
};
const data2 = ref<ChooseIconType>({
  type: "element", // url 就是外部链接 , element 就是element图标
  icon: "Edit",
  width: "24px",
  height: "24px",
  color: "red",
  cb: () => {
    cb2();
  },
});
const cb3 = () => {
  window.open("https://www.baidu.com", "_blank");
};
const data3 = ref<ChooseIconType>({
  type: "element", // url 就是外部链接 , element 就是element图标
  icon: "Search",
  width: "24px",
  height: "24px",
  color: "blue",
  cb: () => {
    cb3();
  },
});
</script>

<style scoped lang="scss">
.pagecontent {
  height: 100%;
}
</style>