diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index 946a134a..418d5d1d 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -9,7 +9,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') -const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') +// const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') const UglifyJsPlugin = require('uglifyjs-webpack-plugin') function resolve(dir) { @@ -140,7 +140,7 @@ const webpackConfig = merge(baseWebpackConfig, { }), // Compress extracted CSS. We are using this plugin so that possible // duplicated CSS from different components can be deduped. - new OptimizeCSSAssetsPlugin() + // new OptimizeCSSAssetsPlugin() ] } }) diff --git a/package.json b/package.json index ece40d0d..037c8010 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-element-admin", - "version": "3.9.1", + "version": "3.9.2", "description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features", "author": "Pan ", "license": "MIT", diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue new file mode 100644 index 00000000..9698232b --- /dev/null +++ b/src/components/Pagination/index.vue @@ -0,0 +1,99 @@ + + + + + diff --git a/src/utils/index.js b/src/utils/index.js index 3af8b29b..0445827b 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -164,17 +164,6 @@ export function objectMerge(target, source) { return target } -export function scrollTo(element, to, duration) { - if (duration <= 0) return - const difference = to - element.scrollTop - const perTick = (difference / duration) * 10 - setTimeout(() => { - element.scrollTop = element.scrollTop + perTick - if (element.scrollTop === to) return - scrollTo(element, to, duration - 10) - }, 10) -} - export function toggleClass(element, className) { if (!element || !className) { return diff --git a/src/utils/scrollTo.js b/src/utils/scrollTo.js new file mode 100644 index 00000000..8affede6 --- /dev/null +++ b/src/utils/scrollTo.js @@ -0,0 +1,50 @@ +Math.easeInOutQuad = function(t, b, c, d) { + t /= d / 2 + if (t < 1) { + return c / 2 * t * t + b + } + t-- + return -c / 2 * (t * (t - 2) - 1) + b +} + +// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts +var requestAnimFrame = (function() { + return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) } +})() + +// because it's so fucking difficult to detect the scrolling element, just move them all +function move(amount) { + document.documentElement.scrollTop = amount + document.body.parentNode.scrollTop = amount + document.body.scrollTop = amount +} + +function position() { + return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop +} + +export function scrollTo(to, duration, callback) { + const start = position() + const change = to - start + const increment = 20 + let currentTime = 0 + duration = (typeof (duration) === 'undefined') ? 500 : duration + var animateScroll = function() { + // increment the time + currentTime += increment + // find the value with the quadratic in-out easing function + var val = Math.easeInOutQuad(currentTime, start, change, duration) + // move the document.body + move(val) + // do the animation unless its over + if (currentTime < duration) { + requestAnimFrame(animateScroll) + } else { + if (callback && typeof (callback) === 'function') { + // the animation is done so lets callback + callback() + } + } + } + animateScroll() +} diff --git a/src/views/example/components/ArticleDetail.vue b/src/views/example/components/ArticleDetail.vue index 4e3dca2c..6ac6feae 100644 --- a/src/views/example/components/ArticleDetail.vue +++ b/src/views/example/components/ArticleDetail.vue @@ -143,7 +143,8 @@ export default { title: [{ validator: validateRequire }], content: [{ validator: validateRequire }], source_uri: [{ validator: validateSourceUri, trigger: 'blur' }] - } + }, + tempRoute: {} } }, computed: { @@ -161,6 +162,11 @@ export default { } else { this.postForm = Object.assign({}, defaultForm) } + + // Why need to make a copy of this.$route here? + // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page + // https://github.com/PanJiaChen/vue-element-admin/issues/1221 + this.tempRoute = Object.assign({}, this.$route) }, methods: { fetchData(id) { @@ -178,7 +184,7 @@ export default { }, setTagsViewTitle() { const title = this.lang === 'zh' ? '编辑文章' : 'Edit Article' - const route = Object.assign({}, this.$route, { title: `${title}-${this.postForm.id}` }) + const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.postForm.id}` }) this.$store.dispatch('updateVisitedView', route) }, submitForm() { diff --git a/src/views/example/list.vue b/src/views/example/list.vue index 4ab61d38..85ae4e43 100644 --- a/src/views/example/list.vue +++ b/src/views/example/list.vue @@ -50,26 +50,18 @@ -
- -
+