[O] Optimize vue-property-decorator usage
This commit is contained in:
@@ -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
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user