ViewUI Icon组件的vue3改造


为了学习和应用vue3，我们开始了把viewui（https://github.com/view-design/ViewUI）基于vue3的重构，下面是其中Icon的组件示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<template>
  <i :class="classes" :style="styles" @click="handleClick"></i>
</template>
<script>
import { computed, toRefs } from "vue";

const prefixCls = "ivu-icon";

export default {
  name: "Icon",
  props: {
    type: {
      type: String,
      default: "",
    },
    size: [Number, String],
    color: String,
    custom: {
      type: String,
      default: "",
    },
  },
  emits: ["click"],
  setup(props, ctx) {
    const { type, size, color, custom } = toRefs(props);

    const classes = computed(() => {
      return [
        `${prefixCls}`,
        {
          [`${prefixCls}-${type.value}`]: type.value !== "",
          [`${custom.value}`]: custom.value !== "",
        },
      ];
    });

    const styles = computed(() => {
      let style = {};

      if (size) {
        style["font-size"] = `${size.value}px`;
      }

      if (color) {
        style.color = color.value;
      }

      return style;
    });

    const handleClick = (evt) => {
      ctx.emit("click", evt);
    };

    return {
      handleClick,
      classes,
      styles,
    };
  },
};
</script>