done select
parent
8e265996c7
commit
93b2398682
|
@ -19,13 +19,13 @@ const md = {
|
|||
下拉选择器。
|
||||
## 何时使用
|
||||
- 弹出一个下拉菜单给用户选择操作,用于代替原生的选择器,或者需要一个更优雅的多选器时。
|
||||
- 当选项少时(少于 5 项),建议直接将选项平铺,使用 [Radio](/components/radio/) 是更好的选择。
|
||||
- 当选项少时(少于 5 项),建议直接将选项平铺,使用 [Radio](#/cn/components/radio/) 是更好的选择。
|
||||
## 代码演示`,
|
||||
us: `# Select
|
||||
Select component to select value from options.
|
||||
## When To Use
|
||||
- A dropdown menu for displaying choices - an elegant alternative to the native \`<select>\` element.
|
||||
- Utilizing [Radio](/components/radio/) is recommended when there are fewer total options (less than 5).
|
||||
- Utilizing [Radio](#/us/components/radio/) is recommended when there are fewer total options (less than 5).
|
||||
`,
|
||||
}
|
||||
export default {
|
||||
|
|
|
@ -16,7 +16,6 @@ Select with tags, transform input to tag (scroll the menu)
|
|||
style="width: 100%"
|
||||
@change="handleChange"
|
||||
placeholder="Tags Mode"
|
||||
@popupScroll="test"
|
||||
>
|
||||
<a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">{{(i + 9).toString(36) + i}}</a-select-option>
|
||||
</a-select>
|
||||
|
@ -27,9 +26,6 @@ export default {
|
|||
handleChange(value) {
|
||||
console.log(`selected ${value}`);
|
||||
},
|
||||
test(e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -453,7 +453,7 @@
|
|||
padding-left: 0; // Override default ul/ol
|
||||
list-style: none;
|
||||
max-height: 250px;
|
||||
overflow: auto;
|
||||
// overflow: auto;
|
||||
|
||||
&-item-group-list {
|
||||
margin: 0;
|
||||
|
|
|
@ -6,7 +6,6 @@ import { getSelectKeys, preventDefaultEvent } from './util'
|
|||
import { cloneElement } from '../_util/vnode'
|
||||
import BaseMixin from '../_util/BaseMixin'
|
||||
import { getSlotOptions } from '../_util/props-util'
|
||||
import addEventListener from '../_util/Dom/addEventListener'
|
||||
|
||||
export default {
|
||||
name: 'DropdownMenu',
|
||||
|
@ -33,12 +32,6 @@ export default {
|
|||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.scrollActiveItemToView()
|
||||
const { $refs, $listeners } = this
|
||||
if ($listeners.popupScroll) {
|
||||
console.log($refs.menuContainer)
|
||||
this.menuContainerHandler = addEventListener($refs.menuContainer,
|
||||
'scroll', ()=>{console.log(111)})
|
||||
}
|
||||
})
|
||||
this.lastVisible = this.$props.visible
|
||||
},
|
||||
|
@ -49,12 +42,6 @@ export default {
|
|||
}
|
||||
},
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.menuContainerHandler) {
|
||||
this.menuContainerHandler.remove()
|
||||
this.menuContainerHandler = null
|
||||
}
|
||||
},
|
||||
updated () {
|
||||
const props = this.$props
|
||||
if (!this.prevVisible && props.visible) {
|
||||
|
@ -174,12 +161,13 @@ export default {
|
|||
render () {
|
||||
const renderMenu = this.renderMenu()
|
||||
this.prevVisible = this.visible
|
||||
const { popupFocus } = this.$listeners
|
||||
const { popupFocus, popupScroll } = this.$listeners
|
||||
return renderMenu ? (
|
||||
<div
|
||||
style={{ overflow: 'auto' }}
|
||||
onFocus={popupFocus}
|
||||
onMousedown={preventDefaultEvent}
|
||||
onScroll={popupScroll}
|
||||
ref='menuContainer'
|
||||
>
|
||||
{renderMenu}
|
||||
|
|
|
@ -172,7 +172,7 @@ export default {
|
|||
const mirrorNode = this.getInputMirrorDOMNode()
|
||||
if (inputNode.value) {
|
||||
inputNode.style.width = ''
|
||||
inputNode.style.width = `${mirrorNode.clientWidth}px`
|
||||
inputNode.style.width = `${mirrorNode.clientWidth + 10}px`
|
||||
} else {
|
||||
inputNode.style.width = ''
|
||||
}
|
||||
|
@ -383,7 +383,7 @@ export default {
|
|||
},
|
||||
|
||||
onPlaceholderClick (e) {
|
||||
if (this._focused) {
|
||||
if (this.openStatus) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
if (this.getInputDOMNode()) {
|
||||
|
@ -651,12 +651,10 @@ export default {
|
|||
return null
|
||||
},
|
||||
inputClick (e) {
|
||||
if (this._focused) {
|
||||
if (this.openStatus) {
|
||||
e.stopPropagation()
|
||||
} else {
|
||||
this._focused = false
|
||||
}
|
||||
if (this.openStatus) {
|
||||
e.stopPropagation()
|
||||
} else {
|
||||
this._focused = false
|
||||
}
|
||||
},
|
||||
inputBlur (e) {
|
||||
|
@ -719,6 +717,7 @@ export default {
|
|||
attrs: {
|
||||
...(inputElement.data.attrs || {}),
|
||||
disabled: props.disabled,
|
||||
value: this.inputValue,
|
||||
},
|
||||
domProps: {
|
||||
value: this.inputValue,
|
||||
|
|
|
@ -15,12 +15,12 @@ Dropdown | done
|
|||
Divider | done
|
||||
notification | done
|
||||
message | done
|
||||
Select | done
|
||||
Carousel
|
||||
Mention
|
||||
Input | done |select完成后补全demo
|
||||
InputNumber
|
||||
AutoComplete
|
||||
Select
|
||||
Upload
|
||||
Form
|
||||
Calendar
|
||||
|
|
|
@ -7,6 +7,7 @@ export { default as checkbox } from 'antd/checkbox/demo/index.vue'
|
|||
export { default as grid } from 'antd/grid/demo/index.vue'
|
||||
export { default as icon } from 'antd/icon/demo/index.vue'
|
||||
export { default as input } from 'antd/input/demo/index.vue'
|
||||
export { default as select } from 'antd/select/demo/index.vue'
|
||||
export { default as menu } from 'antd/menu/demo/index.vue'
|
||||
export { default as pagination } from 'antd/pagination/demo/index.vue'
|
||||
export { default as popconfirm } from 'antd/popconfirm/demo/index.vue'
|
||||
|
|
|
@ -7,7 +7,7 @@ const AsyncComp = () => {
|
|||
}
|
||||
}
|
||||
export default [
|
||||
{ path: '/:lang/components/:name/:demo?', component: Demo },
|
||||
{ path: '/:lang?/components/:name/:demo?', component: Demo },
|
||||
{ path: '/:lang?/test/:name/:demo?', component: AsyncComp },
|
||||
{ path: '/*', redirect: '/cn/components/menu' },
|
||||
{ path: '/*', redirect: '/cn/components/select' },
|
||||
]
|
||||
|
|
Loading…
Reference in New Issue