javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix the color picker can't colse on click twice and add z-index for the notification (#619)

Browse Source 
* fix(select): fix the bug about clicking the select component

fix the bug about clicking the select component

fix #496

* docs: fix some bug in the docs of upload and infiniteScroll

fix some bug in the docs of upload and infiniteScroll

* docs: change the options api to composition api in the avatar docs

change the options api to composition api in the avatar docs

re #540

* Update avatar.md

* Revert update avatar.md

* fix(color-picker): fix the color picker can't colse on click twice

fix the color picker can't colse on click twice

fix #602

* fix(notification): fix notification does not have hight z-index

fix notification does not have hight z-index

fix #602

Co-authored-by: zazzaz <izazzaz@hotmail.com>
This commit is contained in:
SMJ
2020-11-18 22:18:27 +08:00
committed by GitHub
parent 80e3de348b
commit 33e80d6e25
2 changed files with 38 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
packages/color-picker/src/index.vue
View File

@@ -1,18 +1,16 @@
<template>
<el-popper
ref="popper"
v-model:visible="showPicker"
effect="light"
manual-mode
trigger="click"
:show-arrow="false"
popper-class="el-color-picker__panel el-color-dropdown"
@after-leave="doDestroy"
>
<template #default>
<div
v-click-outside="hide"
>
<div v-click-outside="hide" style="display: inline-block;">
<el-popper
ref="popper"
v-model:visible="showPicker"
effect="light"
manual-mode
trigger="click"
:show-arrow="false"
popper-class="el-color-picker__panel el-color-dropdown"
@after-leave="doDestroy"
>
<template #default>
<div class="el-color-dropdown__main-wrapper">
<hue-slider
ref="hue"
@@ -56,32 +54,32 @@
{{ t('el.colorpicker.confirm') }}
</el-button>
</div>
</div>
</template>
<template #trigger>
<div
:class="[
'el-color-picker',
colorDisabled ? 'is-disabled' : '',
colorSize ? `el-color-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 }">
<span
class="el-color-picker__color-inner"
:style="{
backgroundColor: displayedColor
}"
></span>
<span v-if="!modelValue && !showPanelColor" class="el-color-picker__empty el-icon-close"></span>
</span>
<span v-show="modelValue || showPanelColor" class="el-color-picker__icon el-icon-arrow-down"></span>
</template>
<template #trigger>
<div
:class="[
'el-color-picker',
colorDisabled ? 'is-disabled' : '',
colorSize ? `el-color-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 }">
<span
class="el-color-picker__color-inner"
:style="{
backgroundColor: displayedColor
}"
></span>
<span v-if="!modelValue && !showPanelColor" class="el-color-picker__empty el-icon-close"></span>
</span>
<span v-show="modelValue || showPanelColor" class="el-color-picker__icon el-icon-arrow-down"></span>
</div>
</div>
</div>
</template>
</el-popper>
</template>
</el-popper>
</div>
</template>
<script lang="ts">

2
packages/theme-chalk/src/notification.scss
View File

@@ -13,7 +13,7 @@
box-shadow: $--notification-shadow;
transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s;
overflow: hidden;
z-index: 9999;
&.right {
right: 16px;
}