From 1fdcaeb56e676866eb6d066e10573266a51a554f Mon Sep 17 00:00:00 2001 From: zyronon Date: Sat, 3 Aug 2019 23:54:03 +0800 Subject: [PATCH] bf --- package-lock.json | 13 ++++++++ package.json | 3 +- src/App.vue | 40 ++++++++++++++++++++--- src/main.js | 7 ++++ src/pages/home/Me.vue | 6 ++-- src/pages/me/MyCard.vue | 71 ++++++++++++++++++++++------------------- vue.config.js | 7 ++++ 7 files changed, 107 insertions(+), 40 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5a1e3db..a084e87 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1581,6 +1581,11 @@ "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=", "dev": true }, + "animate.css": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-3.7.2.tgz", + "integrity": "sha512-0bE8zYo7C0KvgOYrSVfrzkbYk6IOTVPNqkiHg2cbyF4Pq/PXzilz4BRWA3hwEUBoMp5VBgrC29lQIZyhRWdBTw==" + }, "ansi-colors": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz", @@ -12952,6 +12957,14 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "vueg": { + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/vueg/-/vueg-1.4.5.tgz", + "integrity": "sha512-Q+UTTLPZ1yIZp4zQPNBQVMdKTsgINfArzQDVGpiM7Ga02WZ4kkND14v0OfW+BEYV6pd8d8WdT6SILPBCzF3F8A==", + "requires": { + "animate.css": "^3.7.0" + } + }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", diff --git a/package.json b/package.json index 370e332..2966a2d 100755 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "lodash": "^4.17.14", "pinyin": "^2.9.0", "vue": "^2.6.10", - "vue-router": "^3.0.7" + "vue-router": "^3.0.7", + "vueg": "^1.4.5" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.0.3", diff --git a/src/App.vue b/src/App.vue index 0854e47..d7f1f48 100755 --- a/src/App.vue +++ b/src/App.vue @@ -1,13 +1,31 @@ @@ -16,4 +34,18 @@ background: #2e3244; height: 100%; } + + /* 可以设置不同的进入和离开动画 */ + /* 设置持续时间和动画函数 */ + .slide-fade-enter-active { + transition: all .3s ease; + } + .slide-fade-leave-active { + transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); + } + .slide-fade-enter, .slide-fade-leave-to + /* .slide-fade-leave-active for below version 2.1.8 */ { + transform: translateX(10px); + opacity: 0; + } diff --git a/src/main.js b/src/main.js index 0f458e3..c73815e 100755 --- a/src/main.js +++ b/src/main.js @@ -2,6 +2,8 @@ import Vue from 'vue' import App from './App.vue' import Icon from 'vue-svg-icon/Icon.vue' import VueRouter from 'vue-router' +import vueg from 'vueg' + import './assets/scss/index.scss' import Index from './pages/home/Index' import Attention from './pages/home/Attention' @@ -34,6 +36,8 @@ const router = new VueRouter({ { path: '/myCard', component: MyCard }, ] }) +Vue.use(vueg, router) // 传入实例化后的router, Options为可选的插件配置 + Vue.mixin({ methods: { getCss(curEle, attr) { @@ -52,6 +56,9 @@ Vue.mixin({ } reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i return reg.test(val) ? parseFloat(val) : val + }, + nav(path, query = {}) { + this.$router.push({ path, query }) } } }) diff --git a/src/pages/home/Me.vue b/src/pages/home/Me.vue index 9e59551..f711cfd 100644 --- a/src/pages/home/Me.vue +++ b/src/pages/home/Me.vue @@ -1,10 +1,10 @@