From 547612bf6eb0dbf6c2d7dd0a9da89ba5964f7020 Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Fri, 23 Dec 2016 12:47:55 +0800 Subject: [PATCH] update --- examples/docs/en-US/table.md | 1 + examples/docs/zh-CN/table.md | 1 + packages/scrollbar/src/main.js | 54 +++++++++++++++--------- packages/scrollbar/src/util.js | 27 ------------ packages/table/src/table-layout.js | 4 +- packages/table/src/table.vue | 3 ++ packages/theme-default/src/scrollbar.css | 8 ++-- src/index.js | 8 +++- src/utils/scrollbar-width.js | 28 ++++++++++++ 9 files changed, 83 insertions(+), 51 deletions(-) create mode 100644 src/utils/scrollbar-width.js diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md index 2d9150f55..29c79859c 100644 --- a/examples/docs/en-US/table.md +++ b/examples/docs/en-US/table.md @@ -1362,6 +1362,7 @@ Customize table column so it can be integrated with other components. | row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on | Function(row)/String | — | — | | context | context of Table, e.g. `_self` refers to the current context, `$parent` parent context, `$root` root context, can be overridden by `context` in `el-table-column` | Object | - | current context where Table lies | | empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | | - | No Data | +| virtual-scrollbar | Enable virtual scrollbar | Boolean | - | false | ### Table Events | Event Name | Description | Parameters | diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md index 5de412faa..235f5d863 100644 --- a/examples/docs/zh-CN/table.md +++ b/examples/docs/zh-CN/table.md @@ -1369,6 +1369,7 @@ | row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的 | Function(row)/String | — | — | | context | 设置上下文环境，例如设置当前上下文就是 `_self`，父级就是 `$parent`，根组件 `$root`。优先读取 column 的 context 属性。 | Object | - | Table 所处上下文 | | empty-text | 空数据时显示的文本内容，也可以通过 `slot="empty"` 设置 | String | | - | 暂无数据 | +| virtual-scrollbar | 启用虚拟滚动条 | Boolean | - | false | ### Table Events | 事件名 | 说明 | 参数 | diff --git a/packages/scrollbar/src/main.js b/packages/scrollbar/src/main.js index e67613799..35a2ff8db 100644 --- a/packages/scrollbar/src/main.js +++ b/packages/scrollbar/src/main.js @@ -1,6 +1,7 @@ // reference https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'; +import scrollbarWidth from 'element-ui/src/utils/scrollbar-width'; import * as util from './util'; import Bar from './bar'; @@ -10,6 +11,7 @@ export default { components: { Bar }, props: { + native: Boolean, wrapStyle: {}, wrapClass: {}, viewClass: {}, @@ -37,7 +39,7 @@ export default { }, render(h) { - let gutter = util.getScrollBarWidth(); + let gutter = scrollbarWidth(); let style = this.wrapStyle; if (gutter) { @@ -50,31 +52,43 @@ export default { style += `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`; } } + const view = h(this.tag, { + class: ['el-scrollbar__view', this.viewClass], + style: this.viewStyle, + ref: 'resize' + }, this.$slots.default); const wrap = (
- { - h(this.tag, { - class: ['el-scrollbar__view', this.viewClass], - style: this.viewStyle, - ref: 'resize' - }, this.$slots.default) - } + class={ [this.wrapClass, 'el-scrollbar__wrap el-scrollbar__wrap--hidden-default'] }> + { [view] }
); - const nodes = ([ - wrap, - , - - ]); + let nodes; + + if (!this.native) { + nodes = ([ + wrap, + , + + ]); + } else { + nodes = ([ +
+ { [view] } +
+ ]); + } return h('div', { class: 'el-scrollbar' }, nodes); }, @@ -99,11 +113,13 @@ export default { }, mounted() { + if (this.native) return; this.$nextTick(this.update); !this.noresize && addResizeListener(this.$refs.resize, this.update); }, destroyed() { + if (this.native) return; !this.noresize && removeResizeListener(this.$refs.resize, this.update); } }; diff --git a/packages/scrollbar/src/util.js b/packages/scrollbar/src/util.js index b7ca25a15..70b784c7c 100644 --- a/packages/scrollbar/src/util.js +++ b/packages/scrollbar/src/util.js @@ -23,33 +23,6 @@ export const BAR_MAP = { } }; -let scrollBarWidth; - -export function getScrollBarWidth() { - if (Vue.prototype.$isServer) return 0; - if (scrollBarWidth !== undefined) return scrollBarWidth; - - const outer = document.createElement('div'); - outer.className = 'el-scrollbar__wrap'; - outer.style.visibility = 'hidden'; - outer.style.width = '100px'; - outer.style.position = 'absolute'; - outer.style.top = '-9999px'; - document.body.appendChild(outer); - - const widthNoScroll = outer.offsetWidth; - outer.style.overflow = 'scroll'; - - const inner = document.createElement('div'); - inner.style.width = '100%'; - outer.appendChild(inner); - - const widthWithScroll = inner.offsetWidth; - outer.parentNode.removeChild(outer); - - return widthNoScroll - widthWithScroll; -}; - export function renderThumbStyle({ move, size, bar }) { const style = {}; const translate = `translate${bar.axis}(${ move }%)`; diff --git a/packages/table/src/table-layout.js b/packages/table/src/table-layout.js index a5c1afd2e..8d58ee444 100644 --- a/packages/table/src/table-layout.js +++ b/packages/table/src/table-layout.js @@ -1,3 +1,5 @@ +import scrollbarWidth from 'element-ui/src/utils/scrollbar-width'; + class TableLayout { constructor(options) { this.table = null; @@ -17,7 +19,7 @@ class TableLayout { this.viewportHeight = null; // Table Height - Scroll Bar Height this.bodyHeight = null; // Table Height - Table Header Height this.fixedBodyHeight = null; // Table Height - Table Header Height - Scroll Bar Height - this.gutterWidth = 0; + this.gutterWidth = scrollbarWidth(); for (let name in options) { if (options.hasOwnProperty(name)) { diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue index 8a013cb0c..854ad5b0c 100644 --- a/packages/table/src/table.vue +++ b/packages/table/src/table.vue @@ -21,6 +21,7 @@