mirror of https://github.com/ElemeFE/element
fix: codepen vue version and table-header sync (#21863)
* fix: codepen vue version * fix table-header syncpull/21892/head^2
bofeng
GitHub
parent
2f4f6962c6
commit
0144bad33c
|
|
@ -25,11 +25,11 @@ We recommend our users to lock Element's version when using CDN. Please refer to
|
|||
|
||||
### Hello world
|
||||
|
||||
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://codepen.io/ziyoung/pen/rRKYpd)
|
||||
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://codepen.io/bofeng/pen/poaEmJY)
|
||||
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/bofeng/embed/poaEmJY/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/bofeng/pen/poaEmJY/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/bofeng'>@bofeng</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
If you are using npm and wish to apply webpack, please continue to the next page: [Quick Start](/#/en-US/component/quickstart).
|
||||
|
|
|
|||
|
|
@ -24,11 +24,11 @@ Recomendamos a nuestros usuarios congelar la versión de Element cuando usas un
|
|||
|
||||
### Hello world
|
||||
|
||||
Si esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://codepen.io/ziyoung/pen/rRKYpd)
|
||||
Si esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://codepen.io/bofeng/pen/poaEmJY)
|
||||
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/bofeng/embed/poaEmJY/?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/bofeng/pen/poaEmJY/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/bofeng'>@bofeng</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
Si esta usando npm y desea combinarlo con webpack, por favor continué a la siguiente página: [Quick Start](/#/es/component/quickstart)
|
||||
|
|
|
|||
|
|
@ -25,11 +25,11 @@ Il est recommandé de fixer la version d'Element lors de l'utilisation du CDN. R
|
|||
|
||||
### Hello world
|
||||
|
||||
Si vous utilisez un CDN, une page hello-world peut être obtenue facilement avec Element ([démo en ligne](https://codepen.io/ziyoung/pen/rRKYpd)).
|
||||
Si vous utilisez un CDN, une page hello-world peut être obtenue facilement avec Element ([démo en ligne](https://codepen.io/bofeng/pen/poaEmJY)).
|
||||
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/bofeng/embed/poaEmJY/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/bofeng/pen/poaEmJY/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/bofeng'>@bofeng</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
Si vous utilisez npm et souhaitez ajouter webpack, continuez sur la page suivante: [Démarrer](/#/fr-FR/component/quickstart).
|
||||
|
|
|
|||
|
|
@ -25,11 +25,11 @@ npm i element-ui -S
|
|||
|
||||
### Hello world
|
||||
|
||||
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://codepen.io/ziyoung/pen/rRKYpd)
|
||||
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://codepen.io/bofeng/pen/poaEmJY)
|
||||
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/bofeng/embed/poaEmJY/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/bofeng/pen/poaEmJY/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/bofeng'>@bofeng</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：[快速上手](/#/zh-CN/component/quickstart)。
|
||||
|
|
|
|||
|
|
@ -412,7 +412,7 @@
|
|||
},
|
||||
|
||||
// TODO 使用 CSS transform
|
||||
syncPostion: throttle(20, function() {
|
||||
syncPostion() {
|
||||
const { scrollLeft, scrollTop, offsetWidth, scrollWidth } = this.bodyWrapper;
|
||||
const { headerWrapper, footerWrapper, fixedBodyWrapper, rightFixedBodyWrapper } = this.$refs;
|
||||
if (headerWrapper) headerWrapper.scrollLeft = scrollLeft;
|
||||
|
|
@ -427,17 +427,30 @@
|
|||
} else {
|
||||
this.scrollPosition = 'middle';
|
||||
}
|
||||
},
|
||||
|
||||
throttleSyncPostion: throttle(16, function() {
|
||||
this.syncPostion();
|
||||
}),
|
||||
|
||||
onScroll(evt) {
|
||||
let raf = window.requestAnimationFrame;
|
||||
if (!raf) {
|
||||
this.throttleSyncPostion();
|
||||
} else {
|
||||
raf(this.syncPostion);
|
||||
}
|
||||
},
|
||||
|
||||
bindEvents() {
|
||||
this.bodyWrapper.addEventListener('scroll', this.syncPostion, { passive: true });
|
||||
this.bodyWrapper.addEventListener('scroll', this.onScroll, { passive: true });
|
||||
if (this.fit) {
|
||||
addResizeListener(this.$el, this.resizeListener);
|
||||
}
|
||||
},
|
||||
|
||||
unbindEvents() {
|
||||
this.bodyWrapper.removeEventListener('scroll', this.syncPostion, { passive: true });
|
||||
this.bodyWrapper.removeEventListener('scroll', this.onScroll, { passive: true });
|
||||
if (this.fit) {
|
||||
removeResizeListener(this.$el, this.resizeListener);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue