toesbieya
6 years ago
parent
5794f76fe0
commit
8954fe89c0
@ -1,217 +0,0 @@ |
||||
<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,263 @@ |
||||
<template> |
||||
<el-select |
||||
ref="select" |
||||
:value="value" |
||||
:disabled="readonly" |
||||
:size="size" |
||||
clearable |
||||
@clear="() => $emit('clear')" |
||||
@visible-change="visibleChange" |
||||
> |
||||
<template slot="empty"> |
||||
<div class="rg-header"> |
||||
<span>行政区划选择器</span> |
||||
<button class="rg-removeall-button" type="button" title="清除已选" @click="removeAll"> |
||||
<i class="el-icon-delete"/> |
||||
</button> |
||||
<button class="rg-done-button" type="button" title="完成" @click="done"> |
||||
<i class="el-icon-check"/> |
||||
</button> |
||||
</div> |
||||
<div class="rg-search"> |
||||
<input |
||||
ref="searchInput" |
||||
v-model="searchText" |
||||
class="rg-input" |
||||
type="text" |
||||
placeholder="输入地区id或名称，回车搜索" |
||||
@keyup.enter="search" |
||||
> |
||||
</div> |
||||
<div class="rg-level-tabs"> |
||||
<ul> |
||||
<li v-for="(tab,index) in selected" :key="tab.name" :class="{active:index+1 === currentLevel}"> |
||||
<a href="javascript:" @click="()=>clickTab(index,tab)">{{tab.name}}</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div v-loading="loading" class="rg-results-container"> |
||||
<ul class="rg-results"> |
||||
<li |
||||
v-for="item in items" |
||||
:key="item.id" |
||||
:class="{'rg-item': true, 'active': isItemActive(item.id)}" |
||||
@click="()=>clickItem(item)" |
||||
> |
||||
{{limit ? item.name + `(${item.value})` : item.name}} |
||||
</li> |
||||
<li v-if="items.length === 0" class="rg-message-box">无匹配项目</li> |
||||
</ul> |
||||
</div> |
||||
</template> |
||||
</el-select> |
||||
</template> |
||||
|
||||
<script> |
||||
import {createLimitTree, getNodeId} from "@/utils/tree" |
||||
import common from '../mixin' |
||||
|
||||
const PROVINCE_CITIES = ['北京市', '天津市', '上海市', '重庆市'] |
||||
const DEFAULT_TABS = [{name: '省/直辖市'}, {name: '市'}, {name: '区/县'}, {name: '乡/镇/街道'}] |
||||
const DEFAULT_MAX_LEVEL = 4 |
||||
|
||||
export default { |
||||
name: "RegionTabSelector", |
||||
|
||||
mixins: [common], |
||||
|
||||
props: { |
||||
value: [String, Array], |
||||
separation: {type: String, default: ','} |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
loading: false, |
||||
searchText: '', |
||||
currentLevel: 1, |
||||
maxLevel: DEFAULT_MAX_LEVEL, |
||||
selected: [], |
||||
treeData: [], |
||||
items: [] |
||||
} |
||||
}, |
||||
|
||||
computed: { |
||||
regionTree() { |
||||
return this.$store.state.dataCache.regionTree |
||||
}, |
||||
}, |
||||
|
||||
watch: { |
||||
currentLevel(v) { |
||||
this.setItems(v) |
||||
} |
||||
}, |
||||
|
||||
methods: { |
||||
//select的下拉框展开收起 |
||||
visibleChange(v) { |
||||
if (v) { |
||||
this.transformValueToSelected() |
||||
this.$nextTick(() => this.$refs.searchInput.focus()) |
||||
} |
||||
else this.removeAll() |
||||
}, |
||||
|
||||
search() { |
||||
const parent = this.selected[this.currentLevel - 2] || {children: this.treeData} |
||||
|
||||
if (!this.searchText) return this.items = parent.children |
||||
|
||||
const predicate = item => item.id.startsWith(this.searchText) || item.name.startsWith(this.searchText) |
||||
|
||||
this.items = parent.children.filter(predicate) |
||||
}, |
||||
|
||||
clickTab(index, tab) { |
||||
//点击当前激活的tab时不处理 |
||||
if (index + 1 === this.currentLevel) return |
||||
|
||||
this.currentLevel = index + 1 |
||||
}, |
||||
|
||||
clickItem(item) { |
||||
this.setTabs(item, this.currentLevel) |
||||
|
||||
this.nextTab() |
||||
}, |
||||
|
||||
setTabs(item, level) { |
||||
const prev = this.selected.slice(0, level - 1) |
||||
prev.push(item) |
||||
const next = JSON.parse(JSON.stringify(DEFAULT_TABS)) |
||||
|
||||
if (level === 1) { |
||||
//选择直辖市的时候，最大深度-1，移除'市'tab |
||||
if (PROVINCE_CITIES.includes(item.name)) { |
||||
next.splice(1, 1) |
||||
this.maxLevel = DEFAULT_MAX_LEVEL - 1 |
||||
} |
||||
else this.maxLevel = DEFAULT_MAX_LEVEL |
||||
} |
||||
|
||||
this.selected = prev.concat(next.slice(level, this.maxLevel)) |
||||
}, |
||||
|
||||
nextTab() { |
||||
this.searchText = '' |
||||
//若选择的是最后一级节点，直接完成 |
||||
if (this.currentLevel >= this.maxLevel) { |
||||
this.done() |
||||
} |
||||
else this.currentLevel++ |
||||
}, |
||||
|
||||
//判断是否是已选项 |
||||
isItemActive(id) { |
||||
const selected = this.selected[this.currentLevel - 1] |
||||
return selected && selected.id === id |
||||
}, |
||||
|
||||
//根据激活的tab改变显示的行政区划 |
||||
setItems(level) { |
||||
//顶级节点返回完整的树 |
||||
if (level === 1) this.items = this.treeData |
||||
|
||||
//否则返回上一级节点的children |
||||
else { |
||||
const parent = this.selected[level - 2] |
||||
this.items = parent ? parent.children || [] : [] |
||||
} |
||||
}, |
||||
|
||||
//将传入的value转换为已选项 |
||||
transformValueToSelected() { |
||||
if (!this.value) return |
||||
|
||||
const result = [], |
||||
loopArray = Array.isArray(this.value) |
||||
? this.value |
||||
: this.value.split(this.separation).filter(Boolean) |
||||
|
||||
for (let i = 0; i < loopArray.length; i++) { |
||||
const str = loopArray[i], |
||||
parent = result[i - 1] || {children: this.treeData} |
||||
|
||||
const node = parent.children.find(predicate(str)) |
||||
if (!node) break |
||||
result.push(node) |
||||
} |
||||
|
||||
result.forEach((item, index) => this.setTabs(item, index + 1)) |
||||
}, |
||||
|
||||
removeAll() { |
||||
this.maxLevel = DEFAULT_MAX_LEVEL |
||||
this.selected = JSON.parse(JSON.stringify(DEFAULT_TABS)) |
||||
this.currentLevel = 1 |
||||
}, |
||||
|
||||
done() { |
||||
const result = this.selected.filter(item => item.id) |
||||
this.$emit('input', result.map(item => item.name).join(this.separation)) |
||||
|
||||
if (result.length === 0) { |
||||
this.$emit('select', {}, []) |
||||
return this.$refs.select.blur() |
||||
} |
||||
|
||||
const node = result[result.length - 1] |
||||
const payload = [node] |
||||
|
||||
if (this.getChildrenOnSelect) { |
||||
const ids = getNodeId(node.children) |
||||
ids.unshift(node.id) |
||||
payload.push(ids) |
||||
} |
||||
|
||||
this.$emit('select', ...payload) |
||||
|
||||
this.$refs.select.blur() |
||||
}, |
||||
|
||||
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 => { |
||||
this.treeData = data ? createLimitTree(this.regionTree, data) : this.regionTree |
||||
this.setItems(this.currentLevel) |
||||
}) |
||||
.finally(() => this.loading = false) |
||||
} |
||||
}, |
||||
|
||||
created() { |
||||
this.selected = JSON.parse(JSON.stringify(DEFAULT_TABS)) |
||||
}, |
||||
|
||||
mounted() { |
||||
this.init() |
||||
} |
||||
} |
||||
|
||||
//根据node的类型生成查找断言，支持{id:'10',...}、{name:'北京市',...}、'10'、'北京市' 等四种类型 |
||||
function predicate(node) { |
||||
if (typeof node === 'object') { |
||||
const key = node.hasOwnProperty('id') ? 'id' : 'name' |
||||
return item => item[key] === node[key] |
||||
} |
||||
else { |
||||
const firstCharCode = node.charCodeAt(0) |
||||
const key = 48 <= firstCharCode && firstCharCode <= 57 ? 'id' : 'name' |
||||
return item => item[key] === node |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
@import "./style.scss"; |
||||
</style> |
||||
@ -0,0 +1,178 @@ |
||||
.rg-header, .rg-search { |
||||
padding: 2px 10px 0; |
||||
background-color: white; |
||||
} |
||||
|
||||
.rg-header { |
||||
h3 { |
||||
line-height: normal; |
||||
padding: 6px 80px 10px 10px; |
||||
margin: 0; |
||||
text-align: left; |
||||
color: #24292e; |
||||
font-size: 16px; |
||||
white-space: nowrap; |
||||
|
||||
.rg-header-selected { |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
font-size: 14px; |
||||
max-width: 310px; |
||||
display: inline-block; |
||||
} |
||||
} |
||||
|
||||
button { |
||||
position: absolute; |
||||
-webkit-appearance: none; |
||||
padding: 0; |
||||
cursor: pointer; |
||||
background: 0 0; |
||||
border: 0; |
||||
outline: none; |
||||
color: #999; |
||||
top: 9px; |
||||
|
||||
i { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
&:hover { |
||||
color: black; |
||||
} |
||||
|
||||
&.rg-removeall-button { |
||||
right: 32px |
||||
} |
||||
|
||||
&.rg-done-button { |
||||
right: 8px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.rg-level-tabs { |
||||
margin-top: 10px; |
||||
background-color: #fff; |
||||
|
||||
ul { |
||||
padding: 0; |
||||
margin: 0; |
||||
line-height: 1.5; |
||||
border-bottom: 1px solid #eee; |
||||
|
||||
li { |
||||
display: inline-block; |
||||
position: relative; |
||||
|
||||
a { |
||||
display: block; |
||||
padding: 0.2rem 1rem 0.6rem; |
||||
font-size: 14px; |
||||
color: #bbb; |
||||
text-decoration: none; |
||||
cursor: pointer; |
||||
line-height: 1.43; |
||||
} |
||||
|
||||
&.active { |
||||
a { |
||||
color: #333; |
||||
background-color: #fff; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
&::after { |
||||
content: ""; |
||||
display: block; |
||||
position: absolute; |
||||
bottom: 0; |
||||
height: 0.2rem; |
||||
width: 100%; |
||||
background-color: #bbb; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.rg-results-container { |
||||
background-color: #fff; |
||||
list-style: none; |
||||
margin: 0; |
||||
padding: 0; |
||||
position: relative; |
||||
width: 100%; |
||||
overflow-y: auto; |
||||
overflow-x: hidden; |
||||
clear: both; |
||||
border-bottom-left-radius: 2px; |
||||
border-bottom-right-radius: 2px; |
||||
|
||||
.rg-results { |
||||
background-color: #fff; |
||||
list-style: none; |
||||
margin: 0; |
||||
padding: 5px; |
||||
width: 364px; |
||||
line-height: 1.5; |
||||
|
||||
li { |
||||
margin: 0; |
||||
overflow: hidden; |
||||
padding: 3px 10px; |
||||
position: relative; |
||||
text-align: left; |
||||
white-space: nowrap; |
||||
font-size: 14px; |
||||
color: black; |
||||
cursor: pointer; |
||||
|
||||
&.rg-item { |
||||
display: inline-block; |
||||
border-radius: 2px; |
||||
margin-right: 5px; |
||||
color: #777; |
||||
|
||||
&:hover { |
||||
color: black; |
||||
background-color: #F5F5F5; |
||||
} |
||||
|
||||
&.active { |
||||
background-color: #E4EAEE; |
||||
color: black; |
||||
} |
||||
} |
||||
|
||||
&.rg-message-box { |
||||
height: 30px; |
||||
line-height: 30px; |
||||
text-align: center; |
||||
box-sizing: content-box; |
||||
font-size: 14px; |
||||
cursor: default; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.rg-input { |
||||
display: block; |
||||
background-color: #f5f5f5; |
||||
margin: 0 !important; |
||||
border: 0; |
||||
width: 100%; |
||||
font-size: 14px; |
||||
line-height: 1.42; |
||||
padding: 4px 6px; |
||||
vertical-align: middle; |
||||
box-sizing: border-box; |
||||
outline: none !important; |
||||
border-radius: 2px; |
||||
|
||||
&::-webkit-input-placeholder { |
||||
color: #999; |
||||
} |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
<script> |
||||
import Tree from './Tree' |
||||
import Tab from './Tab' |
||||
|
||||
export default { |
||||
name: "RegionSelector", |
||||
|
||||
functional: true, |
||||
|
||||
props: { |
||||
type: {type: String, default: 'tab', validator: v => ['tree', 'tab'].includes(v)} |
||||
}, |
||||
|
||||
render(h, context) { |
||||
return h(context.props.type === 'tree' ? Tree : Tab, context.data) |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,10 @@ |
||||
export default { |
||||
props: { |
||||
value: String, |
||||
readonly: Boolean, |
||||
size: String, |
||||
getChildrenOnSelect: Boolean, |
||||
limit: Boolean, |
||||
limitApi: Function |
||||
} |
||||
} |
||||
@ -0,0 +1,41 @@ |
||||
<template> |
||||
<div style="width: 500px"> |
||||
<div class="tip-row"> |
||||
行政区划选择，<a href="https://github.com/modood/Administrative-divisions-of-China" target="_blank">数据由此获取</a> |
||||
</div> |
||||
<div class="tip-row"> |
||||
<p>树形</p> |
||||
<div> |
||||
<region-selector :value="value" type="tree" @clear="clear" @select="select"/> |
||||
</div> |
||||
</div> |
||||
<div class="tip-row"> |
||||
<p>选项卡型，支持v-model，<a href="https://github.com/TerryZ/v-region" target="_blank">样式搬的这个</a></p> |
||||
<div> |
||||
<region-selector v-model="value" @clear="clear"/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import RegionSelector from '@/components/RegionSelector' |
||||
|
||||
export default { |
||||
name: "regionSelectorExample", |
||||
components: {RegionSelector}, |
||||
data() { |
||||
return { |
||||
value: '北京市' |
||||
} |
||||
}, |
||||
methods: { |
||||
clear() { |
||||
this.value = null |
||||
}, |
||||
select(obj) { |
||||
this.value = obj.fullname |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue