icons.uts 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. export default defineMixin({
  2. emits: ['click'],
  3. props: {
  4. // 图标大小
  5. size: {
  6. type: Number,
  7. default: 24
  8. },
  9. // 线段粗细
  10. strokeWidth: {
  11. type: Number,
  12. default: 4
  13. },
  14. // 图标风格(颜色)
  15. theme: {
  16. type: String,
  17. default: "outline"
  18. },
  19. // 图标颜色["外部描边颜色","外部填充颜色","内部描边颜色","内部填充颜色"]
  20. fill: {
  21. type: Array,
  22. default: ["#000000"]
  23. },
  24. // 端点类型
  25. strokeLinecap: {
  26. type: String,
  27. default: "round"
  28. },
  29. // 拐点类型
  30. strokeLinejoin: {
  31. type: String,
  32. default: "round"
  33. }
  34. },
  35. methods: {
  36. onClick() {
  37. this.$emit("click");
  38. },
  39. /**
  40. * 获取当前颜色
  41. */
  42. currentColor(index : number, defaultColor : string) : string {
  43. const fill = this.fill as string[];
  44. const isExistence : boolean = fill.length >= (index + 1) ? true : false;
  45. return isExistence ? fill[index] : defaultColor;
  46. },
  47. /**
  48. * 多色
  49. */
  50. multiColor() : string[] {
  51. return [this.currentColor(0, "#000000"), this.currentColor(1, "#2F88FF"), this.currentColor(2, "#FFFFFF"), this.currentColor(3, "#43CCF8")];
  52. },
  53. /**
  54. * 双色
  55. */
  56. twoTone() : string[] {
  57. return [this.currentColor(0, "#000000"), this.currentColor(1, "#2F88FF"), this.currentColor(0, "#000000"), this.currentColor(1, "#2F88FF")];
  58. },
  59. /**
  60. * 填充
  61. */
  62. filled() : string[] {
  63. return [this.currentColor(0, "#000000"), this.currentColor(0, "#000000"), "#FFFFFF", "#FFFFFF"];
  64. },
  65. /**
  66. * 线性
  67. */
  68. outline() : string[] {
  69. return [this.currentColor(0, "#000000"), "none", this.currentColor(0, "#000000"), "none"];
  70. },
  71. /**
  72. * 根据主题取色彩
  73. */
  74. colors(index : number) : string {
  75. if (this.theme == "filled") {
  76. return this.filled()[index]
  77. } else if (this.theme == "two-tone") {
  78. return this.twoTone()[index]
  79. } else if (this.theme == "multi-color") {
  80. return this.multiColor()[index]
  81. } else {
  82. return this.outline()[index]
  83. };
  84. }
  85. }
  86. })