[O] Optimize vue-property-decorator usage

This commit is contained in:
Hykilpikonna
2021-12-11 17:56:59 -05:00
parent bf4e657a70
commit 17cc91aae3
+10 -11
View File
@@ -20,17 +20,16 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import {Options, Vue} from 'vue-class-component';
import "vue3-colorpicker/style.css"; import "vue3-colorpicker/style.css";
import {ColorPicker} from "vue3-colorpicker"; import {ColorPicker} from "vue3-colorpicker";
import {Color} from "three";
import {range} from "@/utils"; import {range} from "@/utils";
import {Model} from "vue-property-decorator"; import {Emit, Model} from "vue-property-decorator";
import {Vue, Options} from "vue-class-component";
@Options({components: {ColorPicker}}) @Options({components: {ColorPicker}})
export default class MyColorPicker extends Vue export default class MyColorPicker extends Vue
{ {
@Model() color!: Color @Model('color') color!: string // Color prop in #ffffffff format
colorModel = '' // Color model in #ffffffff format colorModel = '' // Color model in #ffffffff format
colorInput = '' // Color input in ffffff format colorInput = '' // Color input in ffffff format
palette: string[][] = [] palette: string[][] = []
@@ -40,7 +39,7 @@ export default class MyColorPicker extends Vue
*/ */
created(): void created(): void
{ {
this.colorModel = '#' + this.color.getHexString() + 'ff' this.colorModel = this.color
this.colorInput = this.colorModel.substr(1, 6) this.colorInput = this.colorModel.substr(1, 6)
const storedPalette = localStorage.getItem('palette') const storedPalette = localStorage.getItem('palette')
@@ -51,12 +50,11 @@ export default class MyColorPicker extends Vue
/** /**
* Color change * Color change
*/ */
change(color: string): void @Emit('update:color')
change(color: string): string
{ {
this.colorInput = color.substr(1, 6) this.colorInput = color.substr(1, 6)
const c = new Color(this.colorModel.substr(0, 7)) return this.colorModel
this.$emit('update:color', c)
this.$emit('updateColor', c)
} }
/** /**
@@ -79,10 +77,11 @@ export default class MyColorPicker extends Vue
} }
} }
storePalette(): void @Emit('updatePalette')
storePalette(): string[][]
{ {
localStorage.setItem('palette', JSON.stringify(this.palette)) localStorage.setItem('palette', JSON.stringify(this.palette))
this.$emit('updatePalette', this.palette) return this.palette
} }
/** /**