mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-01 13:36:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix cascader style can not work

Browse Source
This commit is contained in:
songwanli2025@163.com 2019-08-01 15:15:25 +08:00
parent 1f8d8db4e9
commit a6609cf5fc
5 changed files with 85 additions and 83 deletions

4
packages/common/Cascader/src/Cascader.vue → packages/common/Cascader/src/MutipleCascader.vue
View File

@ -52,7 +52,6 @@
</div> </div>
<div <div
v-if="active"
ref="contentWrapper" ref="contentWrapper"
class="n-cascader-menu__content-wrapper" class="n-cascader-menu__content-wrapper"
> >
@ -65,6 +64,7 @@
> >
<transition name="n-select-menu--transition"> <transition name="n-select-menu--transition">
<CasPanel <CasPanel
v-if="active"
:data="items" :data="items"
:selected-items="selectedItems" :selected-items="selectedItems"
:selected="selected" :selected="selected"
@ -85,7 +85,7 @@ import toggleable from '../../../mixins/toggleable'
import CasPanel from './CasPanel' import CasPanel from './CasPanel'
export default { export default {
name: 'Cascader', name: 'MutipleCascader',
components: { components: {
NIcon, NIcon,
CasPanel CasPanel

4
packages/common/Cascader/src/main.vue
View File

@ -2,7 +2,7 @@
/** /**
* Warning: There are some potential problems if there are too many items! * Warning: There are some potential problems if there are too many items!
*/ */
import Cascader from './Cascader' import MutipleCascader from './MutipleCascader'
export default { export default {
name: 'NCascader', name: 'NCascader',
@ -70,7 +70,7 @@ export default {
change: this.handleChange.bind(this), change: this.handleChange.bind(this),
setactive: this.handleSetActive.bind(this) setactive: this.handleSetActive.bind(this)
} }
return h(Cascader, { return h(MutipleCascader, {
props: { ...this.$props, active: this.active, placement: 'bottom-start', widthMode: 'activator' }, props: { ...this.$props, active: this.active, placement: 'bottom-start', widthMode: 'activator' },
on on
}) })

157
styles/Cascader.scss
View File

@ -2,90 +2,91 @@
@import './mixins/mixins.scss'; @import './mixins/mixins.scss';
@import './theme/default.scss'; @import './theme/default.scss';
@include b(cascader) { .n-cascader-menu__content-wrapper {
font-family: $default-font-family; position: fixed;
.n-cascader-menu__content-wrapper { left: 0;
position: fixed; top: 0;
left: 0; width: 0;
top: 0; height: 0;
width: 0; overflow: visible;
height: 0; transform: translateZ(0);
overflow: visible; .n-cascader-menu__item {
transform: translateZ(0); height: $default-height;
.n-cascader-menu__item { line-height: $default-height;
height: $default-height; min-width: 100px;
line-height: $default-height; cursor: pointer;
min-width: 100px; &:hover {
background: $select-item-background-color--active;
} }
.n-cascader-menu__item-next::after { }
content: "\f3d1"; .n-cascader-menu__item-next::after {
font-family: "n-Ionicons"; content: "\f3d1";
position: absolute; font-family: "n-Ionicons";
right: 8px; position: absolute;
} right: 8px;
.n-cascader-menu__item-next--selected::after { }
content: "\f3d1"; .n-cascader-menu__item-next--selected::after {
font-family: "n-Ionicons"; content: "\f3d1";
position: absolute; font-family: "n-Ionicons";
right: 10px; position: absolute;
color: red; right: 10px;
} color: red;
.n-cascader-menu__item--selected::after { }
content: "\f3ff"; .n-cascader-menu__item--selected::after {
font-family: "n-Ionicons"; content: "\f3ff";
position: absolute; font-family: "n-Ionicons";
right: 8px; position: absolute;
color: #63E2B7FF; right: 8px;
font-size: 18px; color: #63E2B7FF;
} font-size: 18px;
.n-cascader-menu__content { }
margin-top: 4px; .n-cascader-menu__content {
.n-cascader-menu { margin-top: 4px;
display: inline-block; .n-cascader-menu {
height: 185px; display: inline-block;
overflow-y: auto; height: 185px;
z-index: 0; overflow-y: auto;
z-index: 0;
position: relative;
border-radius: 9px;
background-color: #4b516a;
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.16);
.n-cascader-menu__item {
display: flex;
padding: 0px 20px;
white-space: nowrap;
position: relative; position: relative;
border-radius: 9px; transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background-color: #4b516a; span {
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.16); display: flex
.n-cascader-menu__item {
display: flex;
padding: 0px 20px;
white-space: nowrap;
position: relative;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
span {
display: flex
}
.n-cascader-menu__item-select {
margin-right: 8px;
}
.n-cascader-menu_item-icon {
margin-left: auto;
align-items: center;
}
} }
.n-cascader-menu__item--active.n-cascader-menu__item-next::after { .n-cascader-menu__item-select {
color: #63E2B7FF; margin-right: 8px;
} }
&::-webkit-scrollbar { .n-cascader-menu_item-icon {
width: 5px; margin-left: auto;
} align-items: center;
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 2.5px;
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.3);
}
table thead tr th:last-of-type {
padding-left: 32px;
} }
} }
.n-cascader-menu__item--active.n-cascader-menu__item-next::after {
color: #63E2B7FF;
}
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 2.5px;
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.3);
}
table thead tr th:last-of-type {
padding-left: 32px;
}
} }
} }
} }

2
styles/Select.scss
View File

@ -288,7 +288,7 @@
.n-select-menu__light-bar { .n-select-menu__light-bar {
position: absolute; position: absolute;
width:100%; width:100%;
background-color: rgba(96, 220, 178, 0.3); background-color: $select-item-background-color--active;
top: 0; top: 0;
left: 0; left: 0;
transition: top .15s $default-cubic-bezier; transition: top .15s $default-cubic-bezier;

1
styles/theme/default.scss
View File

@ -63,6 +63,7 @@ $select-text-color--disabled: rgba(255, 255, 255, .2);
$select-placeholder-color--disabled: rgba(255, 255, 255, .2); $select-placeholder-color--disabled: rgba(255, 255, 255, .2);
$select-placeholder-color: rgba(255, 255, 255, .4); $select-placeholder-color: rgba(255, 255, 255, .4);
$select-background-color--active: rgba(99, 226, 183, 0.1); $select-background-color--active: rgba(99, 226, 183, 0.1);
$select-item-background-color--active: rgba(96, 220, 178, 0.3);
$select-border-radius: 8px; $select-border-radius: 8px;
$select-border-color--active: $main-color; $select-border-color--active: $main-color;