1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- export default defineMixin({
- emits: ['click'],
- props: {
- // 图标大小
- size: {
- type: Number,
- default: 24
- },
- // 线段粗细
- strokeWidth: {
- type: Number,
- default: 4
- },
- // 图标风格(颜色)
- theme: {
- type: String,
- default: "outline"
- },
- // 图标颜色["外部描边颜色","外部填充颜色","内部描边颜色","内部填充颜色"]
- fill: {
- type: Array,
- default: ["#000000"]
- },
- // 端点类型
- strokeLinecap: {
- type: String,
- default: "round"
- },
- // 拐点类型
- strokeLinejoin: {
- type: String,
- default: "round"
- }
- },
- methods: {
- onClick() {
- this.$emit("click");
- },
- /**
- * 获取当前颜色
- */
- currentColor(index : number, defaultColor : string) : string {
- const fill = this.fill as string[];
- const isExistence : boolean = fill.length >= (index + 1) ? true : false;
- return isExistence ? fill[index] : defaultColor;
- },
- /**
- * 多色
- */
- multiColor() : string[] {
- return [this.currentColor(0, "#000000"), this.currentColor(1, "#2F88FF"), this.currentColor(2, "#FFFFFF"), this.currentColor(3, "#43CCF8")];
- },
- /**
- * 双色
- */
- twoTone() : string[] {
- return [this.currentColor(0, "#000000"), this.currentColor(1, "#2F88FF"), this.currentColor(0, "#000000"), this.currentColor(1, "#2F88FF")];
- },
- /**
- * 填充
- */
- filled() : string[] {
- return [this.currentColor(0, "#000000"), this.currentColor(0, "#000000"), "#FFFFFF", "#FFFFFF"];
- },
- /**
- * 线性
- */
- outline() : string[] {
- return [this.currentColor(0, "#000000"), "none", this.currentColor(0, "#000000"), "none"];
- },
- /**
- * 根据主题取色彩
- */
- colors(index : number) : string {
- if (this.theme == "filled") {
- return this.filled()[index]
- } else if (this.theme == "two-tone") {
- return this.twoTone()[index]
- } else if (this.theme == "multi-color") {
- return this.multiColor()[index]
- } else {
- return this.outline()[index]
- };
- }
- }
- })
|