From d49180441676360b218f60191b51ff06f99c7b61 Mon Sep 17 00:00:00 2001 From: toesbieya <1647775459@qq.com> Date: Mon, 17 Aug 2020 14:37:06 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue/src/component/AbstractForm/FormAnchor.vue | 11 +++- vue/src/component/FormDialog/index.vue | 9 ++- .../component/RegionSelector/Tab/index.vue | 60 +++++++++++++------ .../layout/component/TagsView/ScrollPane.vue | 30 +++++----- vue/src/layout/component/TagsView/index.vue | 4 +- vue/src/layout/component/TagsView/style.scss | 10 ---- 6 files changed, 70 insertions(+), 54 deletions(-) diff --git a/vue/src/component/AbstractForm/FormAnchor.vue b/vue/src/component/AbstractForm/FormAnchor.vue index 5fd44b2..a09edd5 100644 --- a/vue/src/component/AbstractForm/FormAnchor.vue +++ b/vue/src/component/AbstractForm/FormAnchor.vue @@ -3,11 +3,12 @@
{{ i.label }}
+
关闭导航
@@ -32,6 +33,11 @@ export default { data: () => ({cur: null}), methods: { + close() { + this.$el.remove() + this.$destroy() + }, + getCur(offsetTop, bounds) { const sections = [] const container = this.getContainer() @@ -98,13 +104,12 @@ export default { right: 0; top: 200px; min-width: 72px; - overflow: hidden; border-radius: 4px 0 0 4px; background: #fff; box-shadow: 0 2px 12px 0 rgba(166, 167, 173, 0.5); z-index: 100; - > div { + &-item { width: inherit; height: 28px; line-height: 28px; diff --git a/vue/src/component/FormDialog/index.vue b/vue/src/component/FormDialog/index.vue index 3e58d8f..40b15b3 100644 --- a/vue/src/component/FormDialog/index.vue +++ b/vue/src/component/FormDialog/index.vue @@ -15,11 +15,10 @@ export default { }, render(h, context) { - const {value, title, loading, top, width} = context.props - const l = context.listeners + const {data, children, listeners, props: {value, title, loading, top, width}} = context function onClose() { - l.input && l.input(false) + listeners.input && listeners.input(false) } return ( @@ -30,7 +29,7 @@ export default { top={top} width={width} on-close={onClose} - {...context.data} + {...data} > {title} @@ -38,7 +37,7 @@ export default {
- {context.children} + {children}
diff --git a/vue/src/component/RegionSelector/Tab/index.vue b/vue/src/component/RegionSelector/Tab/index.vue index 2816ac8..8322b1e 100644 --- a/vue/src/component/RegionSelector/Tab/index.vue +++ b/vue/src/component/RegionSelector/Tab/index.vue @@ -64,9 +64,46 @@ import {createLimitTree, getNodeId} from "@/util/tree" import {store, init} from '../store' import common from '../mixin' -const PROVINCE_CITIES = ['北京市', '天津市', '上海市', '重庆市'] +const PROVINCE_CITIES = [ + {id: '11', name: '北京市'}, + {id: '12', name: '天津市'}, + {id: '31', name: '上海市'}, + {id: '50', name: '重庆市'} +] const DEFAULT_TABS = [{name: '省/直辖市'}, {name: '市'}, {name: '区/县'}, {name: '乡/镇/街道'}] +//根据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 + } +} + +//根据叶子id获取树节点 +function topDownById(tree, id) { + //判断深度，深度=id.length/2 + const depth = Math.floor(id.length / 2) + if (depth < 1) return [] + const result = [] + for (let i = 1; i <= depth; i++) { + const parentId = id.substring(0, i * 2) + const parent = tree.find(node => node.id === parentId) + if (!parent) return result + result.push(parent) + if (i === 1 && PROVINCE_CITIES.some(i => i.id === parentId)) { + i++ + } + tree = parent.children || [] + } + return result +} + export default { name: "RegionTabSelector", @@ -131,7 +168,6 @@ export default { clickItem(item) { this.setTabs(item, this.currentLevel) - this.nextTab() }, @@ -142,7 +178,7 @@ export default { if (level === 1) { //选择直辖市的时候，最大深度-1，移除'市'tab - if (PROVINCE_CITIES.includes(item.name)) { + if (PROVINCE_CITIES.some(i => i.id === item.id)) { next.splice(1, 1) this.realMaxLevel = this.maxLevel - 1 } @@ -189,10 +225,9 @@ export default { : 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 str = loopArray[i], parent = result[i - 1] || {children: this.treeData} const node = parent.children.find(predicate(str)) + //只要有一次不满足就退出，保留之前的查找结果 if (!node) break @@ -256,19 +291,6 @@ export default { 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 - } -} diff --git a/vue/src/layout/component/TagsView/ScrollPane.vue b/vue/src/layout/component/TagsView/ScrollPane.vue index 2c2b3b0..a4c4773 100644 --- a/vue/src/layout/component/TagsView/ScrollPane.vue +++ b/vue/src/layout/component/TagsView/ScrollPane.vue @@ -1,5 +1,5 @@ @@ -12,24 +12,24 @@ export default { data: () => ({rAF: null}), - computed: { - scrollWrapper() { + methods: { + getWrapper() { return this.$refs.scrollContainer.$refs.wrap }, - }, - methods: { handleScroll(e) { const eventDelta = e.wheelDelta || -(e.detail || 0) * 40 - if (eventDelta > 0 && this.scrollWrapper.scrollLeft === 0) return - if (eventDelta < 0 && this.scrollWrapper.scrollWidth <= this.scrollWrapper.scrollLeft + this.scrollWrapper.clientWidth) return + const {scrollLeft, scrollWidth, clientWidth} = this.getWrapper() + if (eventDelta > 0 && scrollLeft === 0 + || eventDelta < 0 && scrollWidth <= scrollLeft + clientWidth) { + return + } this.smoothScroll(-eventDelta * 2) }, moveToTarget(currentTag) { - const $container = this.$refs.scrollContainer.$el - const $containerWidth = $container.offsetWidth - const $scrollWrapper = this.scrollWrapper + const $containerWidth = this.$refs.scrollContainer.$el.offsetWidth + const {scrollWidth, scrollLeft} = this.getWrapper() const tagList = this.$parent.$refs.tag let firstTag = null @@ -45,7 +45,7 @@ export default { this.scrollLeft(0) } else if (lastTag === currentTag) { - this.scrollLeft($scrollWrapper.scrollWidth - $containerWidth) + this.scrollLeft(scrollWidth - $containerWidth) } else { // find preTag and nextTag @@ -59,17 +59,17 @@ export default { // the tag's offsetLeft before of prevTag const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing - if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) { + if (afterNextTagOffsetLeft > scrollLeft + $containerWidth) { this.scrollLeft(afterNextTagOffsetLeft - $containerWidth) } - else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) { + else if (beforePrevTagOffsetLeft < scrollLeft) { this.scrollLeft(beforePrevTagOffsetLeft) } } }, scrollLeft(val) { - this.scrollWrapper.scrollTo({ + this.getWrapper().scrollTo({ left: val, behavior: 'smooth' }) @@ -80,7 +80,7 @@ export default { let cost = 300, times = cost / 16, gap = val / times + 1 const frameFunc = () => { if (times > 0) { - this.scrollWrapper.scrollLeft += gap + this.getWrapper().scrollLeft += gap this.rAF = window.requestAnimationFrame(frameFunc) times-- } diff --git a/vue/src/layout/component/TagsView/index.vue b/vue/src/layout/component/TagsView/index.vue index b3a1008..c7d62d2 100644 --- a/vue/src/layout/component/TagsView/index.vue +++ b/vue/src/layout/component/TagsView/index.vue @@ -1,6 +1,6 @@