Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 修复更多选择时颜色设置未生效 #34

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix: 修复更多选择时颜色设置未生效 #34

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f2c519e
fix: 更多设置时无法正确更新颜色
floyd-li Dec 21, 2023
54ae7a4
typo: updataValue -> updateValue
floyd-li Dec 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 12 additions & 9 deletions packages/color-picker/src/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,12 @@ const colorConfig = [
]
// 标准颜色
const bColor = ['#c21401', '#ff1e02', '#ffc12a', '#ffff3a', '#90cf5b', '#00af57', '#00afee', '#0071be', '#00215f', '#72349d']
const html5Color = props.modelValue
const html5Color = computed({
get: () => props.modelValue,
set: (value) => {
updateValue(value)
}
})
// 计算属性：显示面板颜色
const showPanelColor = computed(() => {
if (hoveColor.value) {
Expand Down Expand Up @@ -90,14 +95,13 @@ const triggerHtml5Color = () => {
html5ColorEl.value?.click()
}
// 更新组件的值
const updataValue = (value: string) => {
const updateValue = (value: string) => {
emits('update:modelValue', value)
emits('change', value)
openStatus.value = false
}
// 设置默认颜色
const handleDefaultColor = () => {
updataValue(props.defaultColor)
updateValue(props.defaultColor)
}

/**
Expand Down Expand Up @@ -170,7 +174,7 @@ const gradient = (startColor: string, endColor: string, step: number) => {
:style="{ backgroundColor: color }"
@mouseover="handleOver(color)"
@mouseout="handleOver('')"
@click="updataValue(color)"
@click="updateValue(color)"
></li>
</ul>
<ul class="bColor">
Expand All @@ -182,7 +186,7 @@ const gradient = (startColor: string, endColor: string, step: number) => {
:style="{ backgroundColor: color }"
@mouseover="handleOver(color)"
@mouseout="handleOver('')"
@click="updataValue(color)"
@click="updateValue(color)"
></li>
</ul>
</li>
Expand All @@ -195,15 +199,14 @@ const gradient = (startColor: string, endColor: string, step: number) => {
:style="{ backgroundColor: color }"
@mouseover="handleOver(color)"
@mouseout="handleOver('')"
@click="updataValue(color)"
@click="updateValue(color)"
></li>
</ul>
<h3 @click="triggerHtml5Color">更多颜色...</h3>
<!-- 用以激活HTML5颜色面板 -->
<input type="color"
ref="html5ColorEl"
v-model="html5Color"
@change="updataValue(html5Color)">
v-model="html5Color">
</div>
</div>
</div>
Expand Down