merge
commit
d4713df7e0
|
@ -4,7 +4,6 @@ import align from 'dom-align'
|
||||||
import addEventListener from '../_util/Dom/addEventListener'
|
import addEventListener from '../_util/Dom/addEventListener'
|
||||||
import { cloneElement } from '../_util/vnode.js'
|
import { cloneElement } from '../_util/vnode.js'
|
||||||
import isWindow from './isWindow'
|
import isWindow from './isWindow'
|
||||||
import isEqual from 'lodash.isequal'
|
|
||||||
function noop () {
|
function noop () {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -44,42 +43,46 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.prevProps = { ...this.$props }
|
this.$nextTick(() => {
|
||||||
const props = this.$props
|
this.prevProps = { ...this.$props }
|
||||||
// if parent ref not attached .... use document.getElementById
|
const props = this.$props
|
||||||
!this.aligned && this.forceAlign()
|
// if parent ref not attached .... use document.getElementById
|
||||||
if (!props.disabled && props.monitorWindowResize) {
|
!this.aligned && this.forceAlign()
|
||||||
this.startMonitorWindowResize()
|
if (!props.disabled && props.monitorWindowResize) {
|
||||||
}
|
this.startMonitorWindowResize()
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
updated () {
|
updated () {
|
||||||
const prevProps = this.prevProps
|
this.$nextTick(() => {
|
||||||
const props = this.$props
|
const prevProps = this.prevProps
|
||||||
let reAlign = false
|
const props = this.$props
|
||||||
if (!props.disabled && this.visible) {
|
let reAlign = false
|
||||||
if (prevProps.disabled || prevProps.align !== props.align) {
|
if (!props.disabled && this.visible) {
|
||||||
reAlign = true
|
if (prevProps.disabled || prevProps.align !== props.align) {
|
||||||
} else {
|
|
||||||
const lastTarget = prevProps.target()
|
|
||||||
const currentTarget = props.target()
|
|
||||||
if (isWindow(lastTarget) && isWindow(currentTarget)) {
|
|
||||||
reAlign = false
|
|
||||||
} else if (lastTarget !== currentTarget) {
|
|
||||||
reAlign = true
|
reAlign = true
|
||||||
|
} else {
|
||||||
|
const lastTarget = prevProps.target()
|
||||||
|
const currentTarget = props.target()
|
||||||
|
if (isWindow(lastTarget) && isWindow(currentTarget)) {
|
||||||
|
reAlign = false
|
||||||
|
} else if (lastTarget !== currentTarget) {
|
||||||
|
reAlign = true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
if (reAlign) {
|
if (reAlign) {
|
||||||
this.forceAlign()
|
this.forceAlign()
|
||||||
}
|
}
|
||||||
|
|
||||||
if (props.monitorWindowResize && !props.disabled) {
|
if (props.monitorWindowResize && !props.disabled) {
|
||||||
this.startMonitorWindowResize()
|
this.startMonitorWindowResize()
|
||||||
} else {
|
} else {
|
||||||
this.stopMonitorWindowResize()
|
this.stopMonitorWindowResize()
|
||||||
}
|
}
|
||||||
this.prevProps = { ...this.$props }
|
this.prevProps = { ...this.$props }
|
||||||
|
})
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
this.stopMonitorWindowResize()
|
this.stopMonitorWindowResize()
|
||||||
|
|
|
@ -32,7 +32,6 @@ export default {
|
||||||
<Ghost />
|
<Ghost />
|
||||||
<Icon/>
|
<Icon/>
|
||||||
<Loading />
|
<Loading />
|
||||||
<h1>TODO : Multiple</h1>
|
|
||||||
<Multiple />
|
<Multiple />
|
||||||
<Size />
|
<Size />
|
||||||
<api>
|
<api>
|
||||||
|
|
|
@ -9,13 +9,29 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
|
||||||
</us>
|
</us>
|
||||||
|
|
||||||
```html
|
```html
|
||||||
// TODO: 依赖组件开发中
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<a-button type="primary">Primary</a-button>
|
<a-button type="primary">Primary</a-button>
|
||||||
<a-button>Default</a-button>
|
<a-button>secondary</a-button>
|
||||||
<a-button type="dashed">Dashed</a-button>
|
<a-dropdown overlay={menu}>
|
||||||
<a-button type="danger">Danger</a-button>
|
<a-menu slot="overlay" @click="handleMenuClick">
|
||||||
|
<a-menu-item key="1">1st item</a-menu-item>
|
||||||
|
<a-menu-item key="2">2nd item</a-menu-item>
|
||||||
|
<a-menu-item key="3">3rd item</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
<a-button>
|
||||||
|
Actions <a-icon type="down" />
|
||||||
|
</a-button>
|
||||||
|
</a-dropdown>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
handleMenuClick(e) {
|
||||||
|
console.log('click', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
|
@ -78,3 +78,5 @@ export { Select, SelectOption, SelectOptGroup }
|
||||||
|
|
||||||
export { default as Switch } from './switch'
|
export { default as Switch } from './switch'
|
||||||
|
|
||||||
|
export { default as LocaleProvider } from './locale-provider'
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import TextArea from './TextArea'
|
import TextArea from './TextArea'
|
||||||
import omit from 'omit.js'
|
import omit from 'omit.js'
|
||||||
import inputProps from './inputProps'
|
import inputProps from './inputProps'
|
||||||
import hasProp from '../_util/props-util'
|
import { hasProp, getComponentFromProp } from '../_util/props-util'
|
||||||
|
|
||||||
function fixControlledValue (value) {
|
function fixControlledValue (value) {
|
||||||
if (typeof value === 'undefined' || value === null) {
|
if (typeof value === 'undefined' || value === null) {
|
||||||
|
@ -68,8 +68,9 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
renderLabeledInput (children) {
|
renderLabeledInput (children) {
|
||||||
const props = this.props
|
const props = this.$props
|
||||||
let { addonBefore, addonAfter } = this.$slots
|
let addonAfter = getComponentFromProp(this, 'addonAfter')
|
||||||
|
let addonBefore = getComponentFromProp(this, 'addonBefore')
|
||||||
// Not wrap when there is not addons
|
// Not wrap when there is not addons
|
||||||
if ((!addonBefore && !addonAfter)) {
|
if ((!addonBefore && !addonAfter)) {
|
||||||
return children
|
return children
|
||||||
|
@ -117,7 +118,8 @@ export default {
|
||||||
},
|
},
|
||||||
renderLabeledIcon (children) {
|
renderLabeledIcon (children) {
|
||||||
const { prefixCls } = this.$props
|
const { prefixCls } = this.$props
|
||||||
let { prefix, suffix } = this.$slots
|
let prefix = getComponentFromProp(this, 'prefix')
|
||||||
|
let suffix = getComponentFromProp(this, 'suffix')
|
||||||
if (!prefix && !suffix) {
|
if (!prefix && !suffix) {
|
||||||
return children
|
return children
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,31 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div style="margin-bottom: 16px">
|
||||||
|
<a-input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
|
||||||
|
</div>
|
||||||
|
<div style="margin-bottom: 16px">
|
||||||
|
<a-input defaultValue="mysite">
|
||||||
|
<a-select slot="addonBefore" defaultValue="Http://" style="width: 90px">
|
||||||
|
<a-select-option value="Http://">Http://</a-select-option>
|
||||||
|
<a-select-option value="Https://">Https://</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<a-select slot="addonAfter" defaultValue=".com" style="width: 80px">
|
||||||
|
<a-select-option value=".com">.com</a-select-option>
|
||||||
|
<a-select-option value=".jp">.jp</a-select-option>
|
||||||
|
<a-select-option value=".cn">.cn</a-select-option>
|
||||||
|
<a-select-option value=".org">.org</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-input>
|
||||||
|
</div>
|
||||||
|
<div style="margin-bottom: 16px">
|
||||||
|
<a-input defaultValue="mysite">
|
||||||
|
<a-icon slot="addonAfter" type="setting"/>
|
||||||
|
</a-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -12,6 +12,8 @@
|
||||||
<Size />
|
<Size />
|
||||||
<h1>TextArea</h1>
|
<h1>TextArea</h1>
|
||||||
<TextArea />
|
<TextArea />
|
||||||
|
<h1>Addon</h1>
|
||||||
|
<Addon />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
@ -21,6 +23,7 @@ import Presuffix from './presuffix'
|
||||||
import SearchInput from './search-input'
|
import SearchInput from './search-input'
|
||||||
import Size from './size'
|
import Size from './size'
|
||||||
import TextArea from './textarea'
|
import TextArea from './textarea'
|
||||||
|
import Addon from './addon'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
Basic,
|
Basic,
|
||||||
|
@ -29,6 +32,7 @@ export default {
|
||||||
SearchInput,
|
SearchInput,
|
||||||
Size,
|
Size,
|
||||||
TextArea,
|
TextArea,
|
||||||
|
Addon,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import PropTypes from '../_util/vue-types'
|
||||||
export default {
|
export default {
|
||||||
prefixCls: {
|
prefixCls: {
|
||||||
default: 'ant-input',
|
default: 'ant-input',
|
||||||
|
@ -22,17 +23,16 @@ export default {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
},
|
},
|
||||||
readOnly: Boolean,
|
readOnly: Boolean,
|
||||||
// addonBefore: React.ReactNode,
|
addonBefore: PropTypes.any,
|
||||||
// addonAfter: React.ReactNode,
|
addonAfter: PropTypes.any,
|
||||||
// onPressEnter?: React.FormEventHandler<any>;
|
// onPressEnter?: React.FormEventHandler<any>;
|
||||||
// onKeyDown?: React.FormEventHandler<any>;
|
// onKeyDown?: React.FormEventHandler<any>;
|
||||||
// onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
// onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
||||||
// onClick?: React.FormEventHandler<any>;
|
// onClick?: React.FormEventHandler<any>;
|
||||||
// onFocus?: React.FormEventHandler<any>;
|
// onFocus?: React.FormEventHandler<any>;
|
||||||
// onBlur?: React.FormEventHandler<any>;
|
// onBlur?: React.FormEventHandler<any>;
|
||||||
// autoComplete: String;
|
prefix: PropTypes.any,
|
||||||
// prefix: React.ReactNode,
|
suffix: PropTypes.any,
|
||||||
// suffix: React.ReactNode,
|
|
||||||
spellCheck: Boolean,
|
spellCheck: Boolean,
|
||||||
autoFocus: Boolean,
|
autoFocus: Boolean,
|
||||||
}
|
}
|
||||||
|
|
|
@ -56,7 +56,7 @@ export default {
|
||||||
// changeConfirmLocale()
|
// changeConfirmLocale()
|
||||||
},
|
},
|
||||||
render () {
|
render () {
|
||||||
return this.$slots.default
|
return this.$slots.default[0]
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,44 @@
|
||||||
|
// import Pagination from 'rc-pagination/lib/locale/zh_CN'
|
||||||
|
// import DatePicker from '../date-picker/locale/zh_CN'
|
||||||
|
// import TimePicker from '../time-picker/locale/zh_CN'
|
||||||
|
// import Calendar from '../calendar/locale/zh_CN'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
locale: 'zh-cn',
|
||||||
|
// Pagination,
|
||||||
|
// DatePicker,
|
||||||
|
// TimePicker,
|
||||||
|
// Calendar,
|
||||||
|
Table: {
|
||||||
|
filterTitle: '筛选',
|
||||||
|
filterConfirm: '确定',
|
||||||
|
filterReset: '重置',
|
||||||
|
emptyText: '暂无数据',
|
||||||
|
selectAll: '全选当页',
|
||||||
|
selectInvert: '反选当页',
|
||||||
|
},
|
||||||
|
Modal: {
|
||||||
|
okText: '确定',
|
||||||
|
cancelText: '取消',
|
||||||
|
justOkText: '知道了',
|
||||||
|
},
|
||||||
|
Popconfirm: {
|
||||||
|
cancelText: '取消',
|
||||||
|
okText: '确定',
|
||||||
|
},
|
||||||
|
Transfer: {
|
||||||
|
notFoundContent: '无匹配结果',
|
||||||
|
searchPlaceholder: '请输入搜索内容',
|
||||||
|
itemUnit: '项',
|
||||||
|
itemsUnit: '项',
|
||||||
|
},
|
||||||
|
Select: {
|
||||||
|
notFoundContent: '无匹配结果',
|
||||||
|
},
|
||||||
|
Upload: {
|
||||||
|
uploading: '文件上传中',
|
||||||
|
removeFile: '删除文件',
|
||||||
|
uploadError: '上传错误',
|
||||||
|
previewFile: '预览文件',
|
||||||
|
},
|
||||||
|
}
|
|
@ -27,14 +27,8 @@ export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
destroyPopup: false,
|
destroyPopup: false,
|
||||||
initAlign: false, // mounted之后再实例化align,即改变this.$el位置后实例化,避免位置计算不正确
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initAlign = true
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
this.$el.remove()
|
this.$el.remove()
|
||||||
},
|
},
|
||||||
|
@ -128,13 +122,15 @@ export default {
|
||||||
let useTransition = !!transitionName
|
let useTransition = !!transitionName
|
||||||
const transitionEvent = {
|
const transitionEvent = {
|
||||||
beforeEnter: (el) => {
|
beforeEnter: (el) => {
|
||||||
el.style.display = el.__vOriginalDisplay
|
// el.style.display = el.__vOriginalDisplay
|
||||||
// this.$refs.alignInstance.forceAlign()
|
// this.$refs.alignInstance.forceAlign()
|
||||||
},
|
},
|
||||||
enter: (el, done) => {
|
enter: (el, done) => {
|
||||||
// align updated后执行动画
|
// align updated后执行动画
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
animate(el, `${transitionName}-enter`, done)
|
this.$refs.alignInstance.$nextTick(() => {
|
||||||
|
animate(el, `${transitionName}-enter`, done)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
leave: (el, done) => {
|
leave: (el, done) => {
|
||||||
|
@ -194,7 +190,7 @@ export default {
|
||||||
|
|
||||||
getMaskElement () {
|
getMaskElement () {
|
||||||
const props = this.$props
|
const props = this.$props
|
||||||
let maskElement
|
let maskElement = null
|
||||||
if (props.mask) {
|
if (props.mask) {
|
||||||
const maskTransition = this.getMaskTransitionName()
|
const maskTransition = this.getMaskTransitionName()
|
||||||
maskElement = (
|
maskElement = (
|
||||||
|
@ -222,15 +218,11 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { destroyPopup, getMaskElement, getPopupElement, initAlign } = this
|
const { destroyPopup, getMaskElement, getPopupElement } = this
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{initAlign ? (
|
{getMaskElement()}
|
||||||
getMaskElement(),
|
{ destroyPopup ? null : getPopupElement()}
|
||||||
destroyPopup
|
|
||||||
? null : getPopupElement()
|
|
||||||
) : null }
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
|
|
@ -338,6 +338,7 @@ export default {
|
||||||
popupProps: { ...popupProps },
|
popupProps: { ...popupProps },
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
parent: self,
|
||||||
el: div,
|
el: div,
|
||||||
render () {
|
render () {
|
||||||
const { popupEvents, ...otherProps } = this.popupProps
|
const { popupEvents, ...otherProps } = this.popupProps
|
||||||
|
|
|
@ -1,29 +1,34 @@
|
||||||
<script>
|
<script>
|
||||||
import * as AllDemo from '../demo'
|
import * as AllDemo from '../demo'
|
||||||
import Header from './header'
|
import Header from './header'
|
||||||
|
import zhCN from 'antd/locale-provider/zh_CN'
|
||||||
|
import enUS from 'antd/locale-provider/default'
|
||||||
export default {
|
export default {
|
||||||
render () {
|
render () {
|
||||||
const { name, demo } = this.$route.params // eslint-disable-line
|
const { name, demo } = this.$route.params // eslint-disable-line
|
||||||
let { lang } = this.$route.params
|
let { lang } = this.$route.params
|
||||||
const Demo = AllDemo[name]
|
const Demo = AllDemo[name]
|
||||||
|
let locale = zhCN
|
||||||
if (lang !== 'cn') {
|
if (lang !== 'cn') {
|
||||||
lang = 'us'
|
lang = 'us'
|
||||||
|
locale = enUS
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div class='site'>
|
<a-locale-provider locale={locale}>
|
||||||
<Header />
|
<div class='site'>
|
||||||
<div class='main-wrapper'>
|
<Header />
|
||||||
<a-menu class='nav' selectedKeys={[name]}>
|
<div class='main-wrapper'>
|
||||||
{Object.keys(AllDemo).map(d => <a-menu-item key={d}>
|
<a-menu class='nav' selectedKeys={[name]}>
|
||||||
<router-link to={{ path: `/${lang}/components/${d}` }}>{d}</router-link>
|
{Object.keys(AllDemo).map(d => <a-menu-item key={d}>
|
||||||
</a-menu-item>)}
|
<router-link to={{ path: `/${lang}/components/${d}` }}>{d}</router-link>
|
||||||
</a-menu>
|
</a-menu-item>)}
|
||||||
<div class='content main-container'>
|
</a-menu>
|
||||||
{Demo ? <Demo /> : '正在紧急开发中...'}
|
<div class='content main-container'>
|
||||||
|
{Demo ? <Demo /> : '正在紧急开发中...'}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</a-locale-provider>
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,7 +3,7 @@ const AsyncComp = () => {
|
||||||
const hashs = window.location.hash.split('/')
|
const hashs = window.location.hash.split('/')
|
||||||
const d = hashs[hashs.length - 1]
|
const d = hashs[hashs.length - 1]
|
||||||
return {
|
return {
|
||||||
component: import(`../components/select/demo/${d}.md`),
|
component: import(`../components/input/demo/${d}`),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export default [
|
export default [
|
||||||
|
|
Loading…
Reference in New Issue