sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改背景色颜色更新显示问题

v1.0.0
于肖磊 2024-08-15 09:44:43 +08:00
parent 55bf2e997d
commit 9da8eb00af
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/common/mult-color-picker/index.vue
View File

@ -47,42 +47,42 @@ const props = defineProps({
}); });
const predefine_colors = ref(['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)', '#c7158577']); const predefine_colors = ref(['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)', '#c7158577']);
const direction_type = ref(props.type); const direction_type = ref(props.type);
let color_list = reactive( let state = reactive({
//将数组['#fff']改为对象数组 color_list: props.value.map((item: any) => {
props.value.map((item: any) => {
return { return {
color: item.color, color: item.color,
color_percentage: item.color_percentage, color_percentage: item.color_percentage,
}; };
}) })
); });
const { color_list } = toRefs(state);
const emit = defineEmits(['update:value']); const emit = defineEmits(['update:value']);
const direction_type_change = (type: any) => { const direction_type_change = (type: any) => {
direction_type.value = type.toString(); direction_type.value = type.toString();
update_value(); update_value();
}; };
const reset_event = () => { const reset_event = () => {
color_list = [{ color: '', color_percentage: '' }]; color_list.value = [{ color: '', color_percentage: '' }];
update_value(); update_value();
}; };
const del_event = (index: number) => { const del_event = (index: number) => {
color_list.splice(index, 1); color_list.value.splice(index, 1);
update_value(); update_value();
}; };
const add_event = () => { const add_event = () => {
color_list.push({ color: '', color_percentage: '' }); color_list.value.push({ color: '', color_percentage: '' });
update_value(); update_value();
}; };
const change_color = (index: number, color: string | null) => { const change_color = (index: number, color: string | null) => {
color_list[index].color = color; color_list.value[index].color = color;
update_value(); update_value();
}; };
const change_color_percentage = (index: number, percentage: string | null) => { const change_color_percentage = (index: number, percentage: string | null) => {
color_list[index].color_percentage = percentage; color_list.value[index].color_percentage = percentage;
update_value(); update_value();
}; };
const update_value = () => { const update_value = () => {
emit('update:value', color_list, direction_type.value); emit('update:value', color_list.value, direction_type.value);
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>