diff --git a/build/deploy-ci.sh b/build/deploy-ci.sh index ad8d93798..bb541d62e 100644 --- a/build/deploy-ci.sh +++ b/build/deploy-ci.sh @@ -46,6 +46,7 @@ if [ "$TRAVIS_TAG" ]; then rm -rf $SUB_FOLDER/** # cp -rf ../../examples/element-ui/** . cp -rf ../../examples/element-ui/** $SUB_FOLDER/ + cp -rf ../../examples/element-ui/versions.json . git add -A . git commit -m "$TRAVIS_COMMIT_MSG" git push origin gh-pages diff --git a/examples/app.vue b/examples/app.vue index f229c0c93..630939802 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -210,48 +210,11 @@ methods: { localize() { use(this.lang === 'zh-CN' ? zhLocale : enLocale); - }, - - renderAnchorHref() { - if (/changelog/g.test(location.href)) return; - const anchors = document.querySelectorAll('h2 a,h3 a'); - const basePath = location.href.split('#').splice(0, 2).join('#'); - - [].slice.call(anchors).forEach(a => { - const href = a.getAttribute('href'); - a.href = basePath + href; - }); - }, - - goAnchor() { - if (location.href.match(/#/g).length > 1) { - const anchor = location.href.match(/#[^#]+$/g); - if (!anchor) return; - const elm = document.querySelector(anchor[0]); - if (!elm) return; - - setTimeout(_ => { - document.documentElement.scrollTop = document.body.scrollTop = elm.offsetTop + 120; - }, 50); - } } }, mounted() { this.localize(); - this.renderAnchorHref(); - this.goAnchor(); - }, - - created() { - window.addEventListener('hashchange', () => { - if (location.href.match(/#/g).length < 2) { - document.documentElement.scrollTop = document.body.scrollTop = 0; - this.renderAnchorHref(); - } else { - this.goAnchor(); - } - }); } }; diff --git a/examples/docs/en-US/loading.md b/examples/docs/en-US/loading.md index 2b2157512..7fc3d8539 100644 --- a/examples/docs/en-US/loading.md +++ b/examples/docs/en-US/loading.md @@ -32,7 +32,18 @@ this.fullscreenLoading = true; setTimeout(() => { this.fullscreenLoading = false; - }, 3000); + }, 2000); + }, + openFullScreen2() { + const loading = this.$loading({ + lock: true, + text: 'Loading', + spinner: 'el-icon-loading', + background: 'rgba(0, 0, 0, 0.7)' + }); + setTimeout(() => { + loading.close(); + }, 2000); } } } @@ -102,16 +113,18 @@ Displays animation in a container (such as a table) while loading data. ``` ::: -### Loading text +### Customization -You can customize a text message. +You can customize loading text, loading spinner and background color. -:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. +:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. Similarly, `element-loading-spinner` and `element-loading-background` are for customizing loading spinner class name and background color. ```html @@ -184,7 +202,18 @@ Show a full screen animation while loading data. this.fullscreenLoading = true; setTimeout(() => { this.fullscreenLoading = false; - }, 3000); + }, 2000); + }, + openFullScreen2() { + const loading = this.$loading({ + lock: true, + text: 'Loading', + spinner: 'el-icon-loading', + background: 'rgba(0, 0, 0, 0.7)' + }); + setTimeout(() => { + loading.close(); + }, 2000); } } } @@ -224,4 +253,6 @@ If Element is imported entirely, a globally method `$loading` will be registered | fullscreen | same as the `fullscreen` modifier of `v-loading` | boolean | — | true | | lock | same as the `lock` modifier of `v-loading` | boolean | — | false | | text | loading text that displays under the spinner | string | — | — | +| spinner | class name of the custom spinner | string | — | — | +| background | background color of the mask | string | — | — | | customClass | custom class name for Loading | string | — | — | \ No newline at end of file diff --git a/examples/docs/zh-CN/loading.md b/examples/docs/zh-CN/loading.md index 8b40dd6f6..93541fdd5 100644 --- a/examples/docs/zh-CN/loading.md +++ b/examples/docs/zh-CN/loading.md @@ -32,7 +32,18 @@ this.fullscreenLoading = true; setTimeout(() => { this.fullscreenLoading = false; - }, 3000); + }, 2000); + }, + openFullScreen2() { + const loading = this.$loading({ + lock: true, + text: 'Loading', + spinner: 'el-icon-loading', + background: 'rgba(0, 0, 0, 0.7)' + }); + setTimeout(() => { + loading.close(); + }, 2000); } } } @@ -100,16 +111,18 @@ ``` ::: -### 加载文案 +### 自定义 -可自定义加载文案。 +可自定义加载文案、图标和背景色。 -:::demo 在绑定了`v-loading`指令的元素上添加`element-loading-text`属性，其值会被渲染为加载文案，并显示在加载图标的下方。 +:::demo 在绑定了`v-loading`指令的元素上添加`element-loading-text`属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，`element-loading-spinner`和`element-loading-background`属性分别用来设定图标类名和背景色值。 ```html @@ -182,7 +200,18 @@ this.fullscreenLoading = true; setTimeout(() => { this.fullscreenLoading = false; - }, 3000); + }, 2000); + }, + openFullScreen2() { + const loading = this.$loading({ + lock: true, + text: 'Loading', + spinner: 'el-icon-loading', + background: 'rgba(0, 0, 0, 0.7)' + }); + setTimeout(() => { + loading.close(); + }, 2000); } } } @@ -222,4 +251,6 @@ console.log(loadingInstance1 === loadingInstance2); // true | fullscreen | 同 `v-loading` 指令中的 `fullscreen` 修饰符 | boolean | — | true | | lock | 同 `v-loading` 指令中的 `lock` 修饰符 | boolean | — | false | | text | 显示在加载图标下方的加载文案 | string | — | — | +| spinner | 自定义加载图标类名 | string | — | — | +| background | 遮罩背景色 | string | — | — | | customClass | Loading 的自定义类名 | string | — | — | \ No newline at end of file diff --git a/examples/pages/template/component.tpl b/examples/pages/template/component.tpl index 2a98fddd2..3b6e72a24 100644 --- a/examples/pages/template/component.tpl +++ b/examples/pages/template/component.tpl @@ -209,11 +209,35 @@ } }, methods: { + renderAnchorHref() { + if (/changelog/g.test(location.href)) return; + const anchors = document.querySelectorAll('h2 a,h3 a'); + const basePath = location.href.split('#').splice(0, 2).join('#'); + + [].slice.call(anchors).forEach(a => { + const href = a.getAttribute('href'); + a.href = basePath + href; + }); + }, + + goAnchor() { + if (location.href.match(/#/g).length > 1) { + const anchor = location.href.match(/#[^#]+$/g); + if (!anchor) return; + const elm = document.querySelector(anchor[0]); + if (!elm) return; + + setTimeout(_ => { + this.componentScrollBox.scrollTop = elm.offsetTop; + }, 50); + } + }, toTop() { this.hover = false; this.showBackToTop = false; this.componentScrollBox.scrollTop = 0; }, + handleScroll() { const scrollTop = this.componentScrollBox.scrollTop; this.showBackToTop = scrollTop >= 0.5 * document.body.clientHeight; @@ -235,12 +259,22 @@ bus.$on('navFade', val => { this.navFaded = val; }); + window.addEventListener('hashchange', () => { + if (location.href.match(/#/g).length < 2) { + document.documentElement.scrollTop = document.body.scrollTop = 0; + this.renderAnchorHref(); + } else { + this.goAnchor(); + } + }); }, mounted() { this.componentScrollBar = this.$refs.componentScrollBar; this.componentScrollBox = this.componentScrollBar.$el.querySelector('.el-scrollbar__wrap'); this.throttledScrollHandler = throttle(300, this.handleScroll); this.componentScrollBox.addEventListener('scroll', this.throttledScrollHandler); + this.renderAnchorHref(); + this.goAnchor(); document.body.classList.add('is-component'); }, destroyed() { diff --git a/packages/loading/src/directive.js b/packages/loading/src/directive.js index 6fe2aef59..dc0e88ac8 100644 --- a/packages/loading/src/directive.js +++ b/packages/loading/src/directive.js @@ -74,11 +74,17 @@ exports.install = Vue => { }; Vue.directive('loading', { - bind: function(el, binding) { + bind: function(el, binding, vnode) { + const textExr = el.getAttribute('element-loading-text'); + const spinnerExr = el.getAttribute('element-loading-spinner'); + const backgroundExr = el.getAttribute('element-loading-background'); + const vm = vnode.context; const mask = new Mask({ el: document.createElement('div'), data: { - text: el.getAttribute('element-loading-text'), + text: vm && vm[textExr] || textExr, + spinner: vm && vm[spinnerExr] || spinnerExr, + background: vm && vm[backgroundExr] || backgroundExr, fullscreen: !!binding.modifiers.fullscreen } }); diff --git a/packages/loading/src/loading.vue b/packages/loading/src/loading.vue index 183fced09..59df40934 100644 --- a/packages/loading/src/loading.vue +++ b/packages/loading/src/loading.vue @@ -3,11 +3,13 @@
@@ -19,6 +21,8 @@ data() { return { text: null, + spinner: null, + background: null, fullscreen: true, visible: false, customClass: '' diff --git a/packages/message/assets/error.svg b/packages/message/assets/error.svg deleted file mode 100644 index 92ff47072..000000000 --- a/packages/message/assets/error.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - icon_danger - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/message/assets/info.svg b/packages/message/assets/info.svg deleted file mode 100644 index 8144fe9ae..000000000 --- a/packages/message/assets/info.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - icon_info - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/message/assets/success.svg b/packages/message/assets/success.svg deleted file mode 100644 index a6aa15eba..000000000 --- a/packages/message/assets/success.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - icon_success - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/message/assets/warning.svg b/packages/message/assets/warning.svg deleted file mode 100644 index 1c161c883..000000000 --- a/packages/message/assets/warning.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - icon_warning - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/theme-chalk/src/loading.scss b/packages/theme-chalk/src/loading.scss index 21f3741b8..65309ffec 100644 --- a/packages/theme-chalk/src/loading.scss +++ b/packages/theme-chalk/src/loading.scss @@ -53,6 +53,10 @@ stroke: $--color-primary; stroke-linecap: round; } + + i { + color: $--color-primary; + } } .el-loading-fade-enter,