toesbieya
6 years ago
parent
f727314a67
commit
5794f76fe0
@ -0,0 +1,217 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<slot name="reference"/> |
||||||
|
<transition :name="transition" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave"> |
||||||
|
<div |
||||||
|
ref="popper" |
||||||
|
v-show="!disabled && showPopper" |
||||||
|
class="el-popover el-popper" |
||||||
|
:class="[popperClass, content && 'el-popover--plain']" |
||||||
|
:style="{ width: width + 'px' }" |
||||||
|
:id="tooltipId" |
||||||
|
> |
||||||
|
<div class="el-popover__title" v-if="title"> |
||||||
|
<slot name="title">{{title}}</slot> |
||||||
|
</div> |
||||||
|
<slot>{{ content }}</slot> |
||||||
|
</div> |
||||||
|
</transition> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Popper from '@ele/mixins/vue-popper' |
||||||
|
import {on, off} from 'element-ui/lib/utils/dom' |
||||||
|
import {addClass, removeClass} from 'element-ui/lib/utils/dom' |
||||||
|
import {generateId} from 'element-ui/lib/utils/util' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "ElPopover", |
||||||
|
|
||||||
|
mixins: [Popper], |
||||||
|
|
||||||
|
props: { |
||||||
|
trigger: { |
||||||
|
type: String, |
||||||
|
default: 'click', |
||||||
|
validator: value => ['click', 'focus', 'hover', 'manual'].indexOf(value) > -1 |
||||||
|
}, |
||||||
|
openDelay: {type: Number, default: 0}, |
||||||
|
closeDelay: {type: Number, default: 200}, |
||||||
|
transition: {type: String, default: 'fade-in-liner'}, |
||||||
|
popperClass: String, |
||||||
|
title: String, |
||||||
|
disabled: Boolean, |
||||||
|
content: String, |
||||||
|
width: {}, |
||||||
|
arrowOffset: {type: Number, default: 0} |
||||||
|
}, |
||||||
|
|
||||||
|
data() { |
||||||
|
return {} |
||||||
|
}, |
||||||
|
|
||||||
|
computed: { |
||||||
|
tooltipId() { |
||||||
|
return `el-popover-${generateId()}` |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
watch: { |
||||||
|
showPopper(val) { |
||||||
|
if (this.disabled) return |
||||||
|
this.$emit(val ? 'show' : 'hide') |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
doToggle() { |
||||||
|
this.showPopper = !this.showPopper |
||||||
|
}, |
||||||
|
|
||||||
|
doShow() { |
||||||
|
this.showPopper = true |
||||||
|
}, |
||||||
|
|
||||||
|
doClose() { |
||||||
|
this.showPopper = false |
||||||
|
}, |
||||||
|
|
||||||
|
handleFocus() { |
||||||
|
addClass(this.referenceElm, 'focusing') |
||||||
|
if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = true |
||||||
|
}, |
||||||
|
|
||||||
|
handleClick() { |
||||||
|
removeClass(this.referenceElm, 'focusing') |
||||||
|
}, |
||||||
|
|
||||||
|
handleBlur() { |
||||||
|
removeClass(this.referenceElm, 'focusing') |
||||||
|
if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = false |
||||||
|
}, |
||||||
|
|
||||||
|
handleMouseEnter() { |
||||||
|
window.clearTimeout(this._timer) |
||||||
|
if (this.openDelay) { |
||||||
|
this._timer = setTimeout(() => this.showPopper = true, this.openDelay) |
||||||
|
} |
||||||
|
else this.showPopper = true |
||||||
|
}, |
||||||
|
|
||||||
|
handleKeydown(ev) { |
||||||
|
if (ev.keyCode === 27 && this.trigger !== 'manual') { // esc |
||||||
|
this.doClose() |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
handleMouseLeave() { |
||||||
|
window.clearTimeout(this._timer) |
||||||
|
if (this.closeDelay) { |
||||||
|
this._timer = setTimeout(() => this.showPopper = false, this.closeDelay) |
||||||
|
} |
||||||
|
else this.showPopper = false |
||||||
|
}, |
||||||
|
|
||||||
|
handleDocumentClick(e) { |
||||||
|
let reference = this.reference || this.$refs.reference |
||||||
|
const popper = this.popper || this.$refs.popper |
||||||
|
|
||||||
|
if (!reference && this.$slots.reference && this.$slots.reference[0]) { |
||||||
|
reference = this.referenceElm = this.$slots.reference[0].elm |
||||||
|
} |
||||||
|
if (!this.$el || |
||||||
|
!reference || |
||||||
|
this.$el.contains(e.target) || |
||||||
|
reference.contains(e.target) || |
||||||
|
!popper || |
||||||
|
popper.contains(e.target)) return |
||||||
|
this.showPopper = false |
||||||
|
}, |
||||||
|
|
||||||
|
handleAfterEnter() { |
||||||
|
this.$emit('after-enter') |
||||||
|
}, |
||||||
|
|
||||||
|
handleAfterLeave() { |
||||||
|
this.$emit('after-leave') |
||||||
|
this.doDestroy() |
||||||
|
}, |
||||||
|
|
||||||
|
cleanup() { |
||||||
|
if (this.openDelay || this.closeDelay) { |
||||||
|
window.clearTimeout(this._timer) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
mounted() { |
||||||
|
let reference = this.referenceElm = this.reference || this.$refs.reference |
||||||
|
const popper = this.popper || this.$refs.popper |
||||||
|
|
||||||
|
if (!reference && this.$slots.reference && this.$slots.reference[0]) { |
||||||
|
reference = this.referenceElm = this.$slots.reference[0].elm |
||||||
|
} |
||||||
|
|
||||||
|
if (reference) { |
||||||
|
addClass(reference, 'el-popover__reference') |
||||||
|
|
||||||
|
if (this.trigger !== 'click') { |
||||||
|
on(reference, 'focusin', () => { |
||||||
|
this.handleFocus() |
||||||
|
const instance = reference.__vue__ |
||||||
|
if (instance && typeof instance.focus === 'function') { |
||||||
|
instance.focus() |
||||||
|
} |
||||||
|
}) |
||||||
|
on(popper, 'focusin', this.handleFocus) |
||||||
|
on(reference, 'focusout', this.handleBlur) |
||||||
|
on(popper, 'focusout', this.handleBlur) |
||||||
|
} |
||||||
|
on(reference, 'keydown', this.handleKeydown) |
||||||
|
on(reference, 'click', this.handleClick) |
||||||
|
} |
||||||
|
if (this.trigger === 'click') { |
||||||
|
on(reference, 'click', this.doToggle) |
||||||
|
on(document, 'click', this.handleDocumentClick) |
||||||
|
} |
||||||
|
else if (this.trigger === 'hover') { |
||||||
|
on(reference, 'mouseenter', this.handleMouseEnter) |
||||||
|
on(popper, 'mouseenter', this.handleMouseEnter) |
||||||
|
on(reference, 'mouseleave', this.handleMouseLeave) |
||||||
|
on(popper, 'mouseleave', this.handleMouseLeave) |
||||||
|
} |
||||||
|
else if (this.trigger === 'focus') { |
||||||
|
if (reference.querySelector('input, textarea')) { |
||||||
|
on(reference, 'focusin', this.doShow) |
||||||
|
on(reference, 'focusout', this.doClose) |
||||||
|
} |
||||||
|
else { |
||||||
|
on(reference, 'mousedown', this.doShow) |
||||||
|
on(reference, 'mouseup', this.doClose) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
beforeDestroy() { |
||||||
|
this.cleanup() |
||||||
|
|
||||||
|
const reference = this.reference |
||||||
|
|
||||||
|
off(reference, 'click', this.doToggle) |
||||||
|
off(reference, 'mouseup', this.doClose) |
||||||
|
off(reference, 'mousedown', this.doShow) |
||||||
|
off(reference, 'focusin', this.doShow) |
||||||
|
off(reference, 'focusout', this.doClose) |
||||||
|
off(reference, 'mousedown', this.doShow) |
||||||
|
off(reference, 'mouseup', this.doClose) |
||||||
|
off(reference, 'mouseleave', this.handleMouseLeave) |
||||||
|
off(reference, 'mouseenter', this.handleMouseEnter) |
||||||
|
off(document, 'click', this.handleDocumentClick) |
||||||
|
}, |
||||||
|
|
||||||
|
deactivated() { |
||||||
|
this.cleanup() |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
import Message from "./components/Message" |
||||||
|
import Popover from './components/Popover' |
||||||
|
import Select from './components/Select/Select' |
||||||
|
|
||||||
|
const components = [Popover, Select] |
||||||
|
|
||||||
|
export default function (Vue) { |
||||||
|
components.forEach(component => { |
||||||
|
Vue.component(component.name, component) |
||||||
|
}) |
||||||
|
|
||||||
|
Vue.prototype.$message = Message |
||||||
|
} |
||||||
@ -1,92 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<el-input :value="value" :readonly="readonly" clearable @clear="$emit('clear')" @focus="dialogVisible=true"/> |
|
||||||
<dialog-form |
|
||||||
v-drag-dialog |
|
||||||
v-model="dialogVisible" |
|
||||||
:loading="loading" |
|
||||||
append-to-body |
|
||||||
title="选择行政区域" |
|
||||||
@close="closeDialog" |
|
||||||
> |
|
||||||
<el-tree |
|
||||||
ref="tree" |
|
||||||
:data="limit ? limitTree : regionTree" |
|
||||||
:expand-on-click-node="false" |
|
||||||
node-key="id" |
|
||||||
@node-click="nodeClick" |
|
||||||
> |
|
||||||
<span slot-scope="{data}" class="el-tree-node__label"> |
|
||||||
{{limit ? data.name + `(${data.value})` : data.name}} |
|
||||||
</span> |
|
||||||
</el-tree> |
|
||||||
</dialog-form> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {mapState} from 'vuex' |
|
||||||
import DialogForm from '@/components/DialogForm' |
|
||||||
import {createLimitTree, getNodeId} from "@/utils/tree" |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "RegionTreeSelector", |
|
||||||
|
|
||||||
components: {DialogForm}, |
|
||||||
|
|
||||||
props: { |
|
||||||
value: String, |
|
||||||
readonly: Boolean, |
|
||||||
getChildrenOnClick: Boolean, |
|
||||||
limit: Boolean, |
|
||||||
limitApi: Function |
|
||||||
}, |
|
||||||
|
|
||||||
data() { |
|
||||||
return { |
|
||||||
loading: false, |
|
||||||
dialogVisible: false, |
|
||||||
limitTree: [] |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
computed: { |
|
||||||
...mapState('dataCache', { |
|
||||||
regionTree: state => state.regionTree |
|
||||||
}) |
|
||||||
}, |
|
||||||
|
|
||||||
methods: { |
|
||||||
closeDialog() { |
|
||||||
this.dialogVisible = false |
|
||||||
}, |
|
||||||
|
|
||||||
nodeClick(obj) { |
|
||||||
const payload = [obj] |
|
||||||
if (this.getChildrenOnClick) { |
|
||||||
let ids = getNodeId(obj.children) |
|
||||||
ids.unshift(obj.id) |
|
||||||
payload.push(ids) |
|
||||||
} |
|
||||||
|
|
||||||
this.$emit('select', ...payload) |
|
||||||
|
|
||||||
this.closeDialog() |
|
||||||
}, |
|
||||||
|
|
||||||
init() { |
|
||||||
this.loading = true |
|
||||||
const hasInit = this.regionTree.length > 0 |
|
||||||
const promise = () => hasInit ? Promise.resolve() : this.$store.dispatch('dataCache/initRegion') |
|
||||||
promise() |
|
||||||
.then(() => this.limit ? this.limitApi() : Promise.resolve()) |
|
||||||
.then(data => data && (this.limitTree = createLimitTree(this.regionTree, data))) |
|
||||||
.finally(() => this.loading = false) |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
mounted() { |
|
||||||
this.init() |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -0,0 +1,82 @@ |
|||||||
|
<script type="text/jsx"> |
||||||
|
import DialogForm from "@/components/DialogForm" |
||||||
|
import {createLimitTree, getNodeId} from "@/utils/tree" |
||||||
|
|
||||||
|
export default { |
||||||
|
components: {DialogForm}, |
||||||
|
|
||||||
|
data() { |
||||||
|
return { |
||||||
|
loading: false, |
||||||
|
visible: false, |
||||||
|
handler: null, |
||||||
|
limitTree: [], |
||||||
|
getChildrenOnClick: false, |
||||||
|
limit: false, |
||||||
|
limitApi: null |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
computed: { |
||||||
|
regionTree() { |
||||||
|
return this.$store.state.dataCache.regionTree |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
closeDialog() { |
||||||
|
this.visible = false |
||||||
|
}, |
||||||
|
|
||||||
|
nodeClick(obj) { |
||||||
|
const payload = [obj] |
||||||
|
if (this.getChildrenOnClick) { |
||||||
|
let ids = getNodeId(obj.children) |
||||||
|
ids.unshift(obj.id) |
||||||
|
payload.push(ids) |
||||||
|
} |
||||||
|
|
||||||
|
this.handler(payload) |
||||||
|
|
||||||
|
this.closeDialog() |
||||||
|
}, |
||||||
|
|
||||||
|
init() { |
||||||
|
this.loading = true |
||||||
|
const hasInit = this.regionTree.length > 0 |
||||||
|
const promise = () => hasInit ? Promise.resolve() : this.$store.dispatch('dataCache/initRegion') |
||||||
|
return promise() |
||||||
|
.then(() => this.limit ? this.limitApi() : Promise.resolve()) |
||||||
|
.then(data => data && (this.limitTree = createLimitTree(this.regionTree, data))) |
||||||
|
.finally(() => this.loading = false) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<dialog-form |
||||||
|
v-model={this.visible} |
||||||
|
directives={[{name: 'drag-dialog'}]} |
||||||
|
class="tree-dialog" |
||||||
|
title="选择行政区域" |
||||||
|
loading={this.loading} |
||||||
|
appendToBody={true} |
||||||
|
v-on:close={this.closeDialog} |
||||||
|
> |
||||||
|
<el-tree |
||||||
|
data={this.limit ? this.limitTree : this.regionTree} |
||||||
|
expand-on-click-node={false} |
||||||
|
node-key="id" |
||||||
|
v-on:node-click={this.nodeClick} |
||||||
|
> |
||||||
|
{({data}) => ( |
||||||
|
<span className="el-tree-node__label"> |
||||||
|
{this.limit ? data.name + `(${data.value})` : data.name} |
||||||
|
</span> |
||||||
|
)} |
||||||
|
</el-tree> |
||||||
|
</dialog-form> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
<script type="text/jsx"> |
||||||
|
import Vue from 'vue' |
||||||
|
import TreeDialog from "./TreeDialog" |
||||||
|
|
||||||
|
const TreeDialogConstructor = Vue.extend(TreeDialog) |
||||||
|
|
||||||
|
let limit, full |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "RegionTreeSelector", |
||||||
|
|
||||||
|
props: { |
||||||
|
value: String, |
||||||
|
readonly: Boolean, |
||||||
|
size: String, |
||||||
|
getChildrenOnClick: Boolean, |
||||||
|
limit: Boolean, |
||||||
|
limitApi: Function |
||||||
|
}, |
||||||
|
|
||||||
|
data() { |
||||||
|
return { |
||||||
|
dialogVisible: false, |
||||||
|
limitTree: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
openDialog() { |
||||||
|
if (this.limit) { |
||||||
|
this.initLimit() |
||||||
|
return limit.visible = true |
||||||
|
} |
||||||
|
else { |
||||||
|
!full && this.initFull() |
||||||
|
full.visible = true |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
handler(payload) { |
||||||
|
this.$emit('select', ...payload) |
||||||
|
}, |
||||||
|
|
||||||
|
initLimit() { |
||||||
|
if (limit) { |
||||||
|
limit.getChildrenOnClick = this.getChildrenOnClick |
||||||
|
limit.limit = this.limit |
||||||
|
limit.limitApi = this.limitApi |
||||||
|
return limit.init() |
||||||
|
} |
||||||
|
|
||||||
|
const data = {...this.$props, handler: this.handler} |
||||||
|
limit = new TreeDialogConstructor({data}).$mount() |
||||||
|
document.body.appendChild(limit.$el) |
||||||
|
|
||||||
|
return limit.init() |
||||||
|
}, |
||||||
|
|
||||||
|
initFull() { |
||||||
|
if (full) { |
||||||
|
return full.getChildrenOnClick = this.getChildrenOnClick |
||||||
|
} |
||||||
|
|
||||||
|
const data = {getChildrenOnClick: this.getChildrenOnClick, handler: this.handler} |
||||||
|
full = new TreeDialogConstructor({data}).$mount() |
||||||
|
document.body.appendChild(full.$el) |
||||||
|
|
||||||
|
return full.init() |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<el-input |
||||||
|
value={this.value} |
||||||
|
readonly={this.readonly} |
||||||
|
size={this.size} |
||||||
|
clearable |
||||||
|
v-on:clear={() => this.$emit('clear')} |
||||||
|
v-on:focus={this.openDialog} |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
Loading…
Reference in new issue