github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update vc-dropdown to 2.4.1

Browse Source
pull/666/head
wangxueliang 6 years ago
parent a04d8a56f4
commit d2ce2e50f0
4 changed files with 302 additions and 2 deletions
Show Stats Download Patch File Download Diff File

218
components/vc-dropdown/assets/index.less
Unescape View File

@ -0,0 +1,218 @@
@dropdownPrefixCls: rc-dropdown;
@font-face {
font-family: 'anticon';
src: url('//at.alicdn.com/t/font_1434092639_4910953.eot');
/* IE9*/
src: url('//at.alicdn.com/t/font_1434092639_4910953.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/font_1434092639_4910953.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/font_1434092639_4910953.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/font_1434092639_4910953.svg#iconfont') format('svg');
/* iOS 4.1- */
}
.@{dropdownPrefixCls} {
position: absolute;
left: -9999px;
top: -9999px;
z-index: 1070;
display: block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 1.5;
&-hidden {
display: none;
}
&-menu {
outline: none;
position: relative;
list-style-type: none;
padding: 0;
margin: 2px 0 0 0;
text-align: left;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 1px 5px #ccc;
background-clip: padding-box;
border: 1px solid #ccc;
> li {
margin: 0;
padding: 0;
}
&:before {
content: "";
position: absolute;
top: -4px;
left: 0;
width: 100%;
height: 4px;
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.01);
}
& > &-item {
position: relative;
display: block;
padding: 7px 10px;
clear: both;
font-size: 12px;
font-weight: normal;
color: #666666;
white-space: nowrap;
&:hover, &-active, &-selected {
background-color: #ebfaff;
}
&-selected {
position: relative;
&:after {
content: '\e613';
font-family: 'anticon';
font-weight: bold;
position: absolute;
top: 6px;
right: 16px;
color: #3CB8F0;
}
}
&-disabled {
color: #ccc;
cursor: not-allowed;
pointer-events: none;
&:hover {
color: #ccc;
background-color: #fff;
cursor: not-allowed;
}
}
&:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
&:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
&-divider {
height: 1px;
margin: 1px 0;
overflow: hidden;
background-color: #e5e5e5;
line-height: 0;
}
}
}
.effect() {
animation-duration: 0.3s;
animation-fill-mode: both;
transform-origin: 0 0;
display: block !important;
}
&-slide-up-enter,&-slide-up-appear {
.effect();
opacity: 0;
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
animation-play-state: paused;
}
&-slide-up-leave {
.effect();
opacity: 1;
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
animation-play-state: paused;
}
&-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft,
&-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft,
&-slide-up-enter&-slide-up-enter-active&-placement-bottomCenter,
&-slide-up-appear&-slide-up-appear-active&-placement-bottomCenter,
&-slide-up-enter&-slide-up-enter-active&-placement-bottomRight,
&-slide-up-appear&-slide-up-appear-active&-placement-bottomRight {
animation-name: rcDropdownSlideUpIn;
animation-play-state: running;
}
&-slide-up-enter&-slide-up-enter-active&-placement-topLeft,
&-slide-up-appear&-slide-up-appear-active&-placement-topLeft,
&-slide-up-enter&-slide-up-enter-active&-placement-topCenter,
&-slide-up-appear&-slide-up-appear-active&-placement-topCenter,
&-slide-up-enter&-slide-up-enter-active&-placement-topRight,
&-slide-up-appear&-slide-up-appear-active&-placement-topRight {
animation-name: rcDropdownSlideDownIn;
animation-play-state: running;
}
&-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft,
&-slide-up-leave&-slide-up-leave-active&-placement-bottomCenter,
&-slide-up-leave&-slide-up-leave-active&-placement-bottomRight {
animation-name: rcDropdownSlideUpOut;
animation-play-state: running;
}
&-slide-up-leave&-slide-up-leave-active&-placement-topLeft,
&-slide-up-leave&-slide-up-leave-active&-placement-topCenter,
&-slide-up-leave&-slide-up-leave-active&-placement-topRight {
animation-name: rcDropdownSlideDownOut;
animation-play-state: running;
}
@keyframes rcDropdownSlideUpIn {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0);
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
}
@keyframes rcDropdownSlideUpOut {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0);
}
}
@keyframes rcDropdownSlideDownIn {
0% {
opacity: 0;
transform-origin: 0% 100%;
transform: scaleY(0);
}
100% {
opacity: 1;
transform-origin: 0% 100%;
transform: scaleY(1);
}
}
@keyframes rcDropdownSlideDownOut {
0% {
opacity: 1;
transform-origin: 0% 100%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 0% 100%;
transform: scaleY(0);
}
}
}

39
components/vc-dropdown/demo/simple.jsx
Unescape View File

@ -0,0 +1,39 @@
import Menu, { Item as MenuItem, Divider } from '../../vc-menu/index';
import Dropdown from '../src/index.js';
import '../assets/index.less';
export default {
data() {
return {};
},
methods: {
onSelect({ key }) {
console.log(`${key} selected`);
},
onVisibleChange(visible) {
console.log(visible);
},
},
render() {
return (
<div style="margin: 100px">
<div style="height: 100px"/>
<div>
<Dropdown
trigger={['click']}
animation="slide-up"
onVisibleChange={this.onVisibleChange}
>
<Menu slot="overlay" onSelect={this.onSelect}>
<MenuItem disabled>disabled</MenuItem>
<MenuItem key="1">one</MenuItem>
<Divider />
<MenuItem key="2">two</MenuItem>
</Menu>
<button style="width: 100px">open</button>
</Dropdown>
</div>
</div>
);
},
};

45
components/vc-dropdown/src/Dropdown.jsx
Unescape View File

@ -1,3 +1,4 @@
import classNames from 'classnames';
import PropTypes from '../../_util/vue-types';
import Trigger from '../../vc-trigger';
import placements from './placements';
@ -12,10 +13,15 @@ export default {
prefixCls: PropTypes.string.def('rc-dropdown'),
transitionName: PropTypes.string,
overlayClassName: PropTypes.string.def(''),
openClassName: PropTypes.string,
animation: PropTypes.any,
align: PropTypes.object,
overlayStyle: PropTypes.object.def({}),
placement: PropTypes.string.def('bottomLeft'),
overlay: PropTypes.oneOfType([
PropTypes.any,
PropTypes.func,
]),
trigger: PropTypes.array.def(['hover']),
alignPoint: PropTypes.bool,
showAction: PropTypes.array.def([]),
@ -77,9 +83,21 @@ export default {
return !alignPoint;
},
getOverlayElement() {
const overlay = this.overlay || this.$slots.overlay || this.$scopedSlots.overlay;
let overlayElement;
if (typeof overlay === 'function') {
overlayElement = overlay();
} else {
overlayElement = overlay;
}
return overlayElement;
},
getMenuElement() {
const { onClick, prefixCls, $slots } = this;
this.childOriginEvents = getEvents($slots.overlay[0]);
const overlayElement = this.getOverlayElement();
const extraOverlayProps = {
props: {
prefixCls: `${prefixCls}-menu`,
@ -89,13 +107,32 @@ export default {
click: onClick,
},
};
if (typeof overlayElement.type === 'string') {
delete extraOverlayProps.props.prefixCls;
}
return cloneElement($slots.overlay[0], extraOverlayProps);
},
getMenuElementOrLambda() {
const overlay = this.overlay || this.$slots.overlay || this.$scopedSlots.overlay;
if (typeof overlay === 'function') {
return this.getMenuElement;
}
return this.getMenuElement();
},
getPopupDomNode() {
return this.$refs.trigger.getPopupDomNode();
},
getOpenClassName() {
const { openClassName, prefixCls } = this.$props;
if (openClassName !== undefined) {
return openClassName;
}
return `${prefixCls}-open`;
},
afterVisibleChange(visible) {
if (visible && this.getMinOverlayWidthMatchTrigger()) {
const overlayNode = this.getPopupDomNode();
@ -112,6 +149,12 @@ export default {
}
}
},
renderChildren() {
const children = this.$slots.default && this.$slots.default[0];
const { sVisible } = this;
return (sVisible && children) ? cloneElement(children, { class: this.getOpenClassName() }) : children;
},
},
render() {
@ -160,7 +203,7 @@ export default {
const child = this.$slots.default && this.$slots.default[0];
return (
<Trigger {...triggerProps}>
{child && !child.tag ? <span>{child}</span> : child}
{this.renderChildren()}
<template slot="popup">{this.$slots.overlay && this.getMenuElement()}</template>
</Trigger>
);

2
components/vc-dropdown/src/index.js
Unescape View File

@ -1,3 +1,3 @@
// base in 2.2.1
// base in 2.4.1
import Dropdown from './Dropdown';
export default Dropdown;

Write Preview
Loading…
Cancel
Save