pull/165/head
wangxueliang 2018-02-27 13:37:57 +08:00
commit d4713df7e0
14 changed files with 173 additions and 74 deletions

View File

@ -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()

View File

@ -32,7 +32,6 @@ export default {
<Ghost /> <Ghost />
<Icon/> <Icon/>
<Loading /> <Loading />
<h1>TODO Multiple</h1>
<Multiple /> <Multiple />
<Size /> <Size />
<api> <api>

View File

@ -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>
``` ```

View File

@ -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'

View File

@ -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
} }

View File

@ -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>

View File

@ -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>

View File

@ -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,
} }

View File

@ -56,7 +56,7 @@ export default {
// changeConfirmLocale() // changeConfirmLocale()
}, },
render () { render () {
return this.$slots.default return this.$slots.default[0]
}, },
} }

View File

@ -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: '预览文件',
},
}

View File

@ -27,14 +27,8 @@ export default {
data () { data () {
return { return {
destroyPopup: false, destroyPopup: false,
initAlign: false, // mountedalign,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>
) )
}, },

View File

@ -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

View File

@ -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>
) )
}, },
} }

View File

@ -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 [