mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-17 11:49:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(components): [color-picker] use useNamespace (#5718)

Browse Source
This commit is contained in:
bqy 2022-02-08 05:21:17 +08:00 committed by GitHub
parent e1f78d9c04
commit fae48c8817
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/components/color-picker/src/index.vue
View File

@ -6,7 +6,7 @@
:fallback-placements="['bottom', 'top', 'right', 'left']"
:offset="0"
:gpu-acceleration="false"
:popper-class="`el-color-picker__panel el-color-dropdown ${popperClass}`"
:popper-class="[ns.be('picker', 'panel'), ns.b('dropdown'), popperClass]"
:stop-popper-mouse-event="false"
effect="light"
trigger="click"
@ -15,7 +15,7 @@
>
<template #content>
<div v-click-outside="hide">
<div class="el-color-dropdown__main-wrapper">
<div :class="ns.be('dropdown', 'main-wrapper')">
<hue-slider ref="hue" class="hue-slider" :color="color" vertical />
<sv-panel ref="svPanel" :color="color" />
</div>
@ -26,8 +26,8 @@
:color="color"
:colors="predefine"
/>
<div class="el-color-dropdown__btns">
<span class="el-color-dropdown__value">
<div :class="ns.be('dropdown', 'btns')">
<span :class="ns.be('dropdown', 'value')">
<el-input
v-model="customInput"
:validate-event="false"
@ -39,7 +39,7 @@
<el-button
size="small"
type="text"
class="el-color-dropdown__link-btn"
:class="ns.be('dropdown', 'link-btn')"
@click="clear"
>
{{ t('el.colorpicker.clear') }}
@ -47,7 +47,7 @@
<el-button
plain
size="small"
class="el-color-dropdown__btn"
:class="ns.be('dropdown', 'btn')"
@click="confirmValue"
>
{{ t('el.colorpicker.confirm') }}
@ -58,32 +58,29 @@
<template #default>
<div
:class="[
'el-color-picker',
colorDisabled ? 'is-disabled' : '',
colorSize ? `el-color-picker--${colorSize}` : '',
ns.b('picker'),
ns.is('disabled', colorDisabled),
ns.bm('picker', colorSize),
]"
>
<div v-if="colorDisabled" class="el-color-picker__mask"></div>
<div class="el-color-picker__trigger" @click="handleTrigger">
<span
class="el-color-picker__color"
:class="{ 'is-alpha': showAlpha }"
>
<div v-if="colorDisabled" :class="ns.be('picker', 'mask')"></div>
<div :class="ns.be('picker', 'trigger')" @click="handleTrigger">
<span :class="[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]">
<span
class="el-color-picker__color-inner"
:class="ns.be('picker', 'color-inner')"
:style="{
backgroundColor: displayedColor,
}"
>
<el-icon
v-show="modelValue || showPanelColor"
class="el-color-picker__icon is-icon-arrow-down"
:class="[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]"
>
<arrow-down />
</el-icon>
<el-icon
v-if="!modelValue && !showPanelColor"
class="el-color-picker__empty is-icon-close"
:class="[ns.be('picker', 'empty'), ns.is('icon-close')]"
>
<close />
</el-icon>
@ -112,7 +109,7 @@ import ElButton from '@element-plus/components/button'
import ElIcon from '@element-plus/components/icon'
import { ClickOutside } from '@element-plus/directives'
import { elFormItemKey, elFormKey } from '@element-plus/tokens'
import { useLocale, useSize } from '@element-plus/hooks'
import { useLocale, useSize, useNamespace } from '@element-plus/hooks'
import ElTooltip from '@element-plus/components/tooltip'
import ElInput from '@element-plus/components/input'
import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
@ -162,6 +159,7 @@ export default defineComponent({
emits: ['change', 'active-change', UPDATE_MODEL_EVENT],
setup(props, { emit }) {
const { t } = useLocale()
const ns = useNamespace('color')
const elForm = inject(elFormKey, {} as ElFormContext)
const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)
@ -189,7 +187,7 @@ export default defineComponent({
})
const colorSize = useSize()
const colorDisabled = computed(() => {
return props.disabled || elForm.disabled
return !!(props.disabled || elForm.disabled)
})
const currentColor = computed(() => {
@ -328,6 +326,7 @@ export default defineComponent({
clear,
confirmValue,
t,
ns,
hue,
svPanel,
alpha,