Skip to content

Commit 9768305

Browse files
PanJiaChenPanJiaChen
committed
refine main.js
1 parent e912cea commit 9768305

File tree

9 files changed

+146
-142
lines changed

9 files changed

+146
-142
lines changed

‎src/components/MdEditor/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
import SimpleMDE from 'simplemde';
1111
1212
export default {
13-
name: 'Sticky',
13+
name: 'simplemde-md',
1414
props: {
1515
value: String,
1616
id: {

‎src/directive/waves.js‎

Lines changed: 39 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,44 @@
11
import './waves.css';
22

3-
const vueWaves = {};
4-
vueWaves.install = (Vue, options = {}) => {
5-
Vue.directive('waves', {
6-
bind(el, binding) {
7-
el.addEventListener('click', e => {
8-
const customOpts = Object.assign(options, binding.value);
9-
const opts = Object.assign({
10-
ele: el, // 波纹作用元素
11-
type: 'hit', // hit点击位置扩散center中心点扩展
12-
color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
13-
}, customOpts),
14-
target = opts.ele;
15-
if (target) {
16-
target.style.position = 'relative';
17-
target.style.overflow = 'hidden';
18-
const rect = target.getBoundingClientRect();
19-
let ripple = target.querySelector('.waves-ripple');
20-
if (!ripple) {
21-
ripple = document.createElement('span');
22-
ripple.className = 'waves-ripple';
23-
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
24-
target.appendChild(ripple);
25-
} else {
26-
ripple.className = 'waves-ripple';
27-
}
28-
switch (opts.type) {
29-
case 'center':
30-
ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
31-
ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
32-
break;
33-
default:
34-
ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
35-
ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
36-
}
37-
ripple.style.backgroundColor = opts.color;
38-
ripple.className = 'waves-ripple z-active';
39-
return false;
3+
export default{
4+
bind(el, binding) {
5+
el.addEventListener('click', e => {
6+
const customOpts = Object.assign({}, binding.value);
7+
const opts = Object.assign({
8+
ele: el, // 波纹作用元素
9+
type: 'hit', // hit点击位置扩散center中心点扩展
10+
color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
11+
}, customOpts),
12+
target = opts.ele;
13+
if (target) {
14+
target.style.position = 'relative';
15+
target.style.overflow = 'hidden';
16+
const rect = target.getBoundingClientRect();
17+
let ripple = target.querySelector('.waves-ripple');
18+
if (!ripple) {
19+
ripple = document.createElement('span');
20+
ripple.className = 'waves-ripple';
21+
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
22+
target.appendChild(ripple);
23+
} else {
24+
ripple.className = 'waves-ripple';
4025
}
41-
}, false);
42-
}
43-
})
44-
};
26+
switch (opts.type) {
27+
case 'center':
28+
ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
29+
ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
30+
break;
31+
default:
32+
ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
33+
ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
34+
}
35+
ripple.style.backgroundColor = opts.color;
36+
ripple.className = 'waves-ripple z-active';
37+
return false;
38+
}
39+
}, false);
40+
}
41+
}
42+
4543

46-
export default vueWaves;
4744

‎src/errorLog.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Vue from 'vue'
2+
import errLog from '@/store/errLog'
3+
4+
// 生产环境错误日志
5+
if (process.env.NODE_ENV === 'production') {
6+
Vue.config.errorHandler = function(err, vm) {
7+
console.log(err, window.location.href);
8+
errLog.pushLog({
9+
err,
10+
url: window.location.href,
11+
vm
12+
})
13+
};
14+
}

‎src/main.js‎

Lines changed: 16 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,27 @@
1-
// The Vue build version to load with the `import` command
2-
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3-
import Vue from 'vue';
4-
import App from './App';
5-
import router from './router';
6-
import store from './store';
7-
import ElementUI from 'element-ui';
8-
import 'element-ui/lib/theme-default/index.css';
9-
import 'assets/custom-theme/index.css'; // 换肤版本element-ui css
10-
import NProgress from 'nprogress'; // Progress 进度条
11-
import 'nprogress/nprogress.css';// Progress 进度条 样式
12-
import 'normalize.css/normalize.css';// normalize.css 样式格式化
13-
import 'assets/iconfont/iconfont'; // iconfont 具体图标见https://github.com/PanJiaChen/vue-element-admin/wiki
14-
import * as filters from './filters'; // 全局vue filter
15-
import Multiselect from 'vue-multiselect';// 使用的一个多选框组件，element-ui的select不能满足所有需求
16-
import 'vue-multiselect/dist/vue-multiselect.min.css';// 多选框组件css
17-
import Sticky from 'components/Sticky'; // 粘性header组件
18-
import IconSvg from 'components/Icon-svg';// svg 组件
19-
import vueWaves from './directive/waves';// 水波纹指令
20-
import errLog from 'store/errLog';// error log组件
21-
import './mock/index.js'; // 该项目所有请求使用mockjs模拟
22-
import { getToken } from 'utils/auth';
1+
import Vue from 'vue'
2+
import App from './App'
3+
import router from './router'
4+
import store from './store'
5+
import 'normalize.css/normalize.css'// normalize.css 样式格式化
6+
import ElementUI from 'element-ui'
7+
import 'element-ui/lib/theme-default/index.css'
8+
import '@/assets/iconfont/iconfont' // iconfont 具体图标见https://github.com/PanJiaChen/vue-element-admin/wiki
9+
import IconSvg from '@/components/Icon-svg'// svg组件
10+
import * as filters from '@/filters' // 全局filter
11+
import '@/errorLog'// error log
12+
import '@/permission' // 权限
13+
import '@/mock/index.js' // 该项目所有请求使用mockjs模拟
2314

2415
// register globally
25-
Vue.component('multiselect', Multiselect);
26-
Vue.component('Sticky', Sticky);
2716
Vue.component('icon-svg', IconSvg)
28-
Vue.use(ElementUI);
29-
Vue.use(vueWaves);
17+
Vue.use(ElementUI)
3018

3119
// register global utility filters.
3220
Object.keys(filters).forEach(key => {
3321
Vue.filter(key, filters[key])
34-
});
35-
36-
// permissiom judge
37-
function hasPermission(roles, permissionRoles) {
38-
if (roles.indexOf('admin') >= 0) return true; // admin权限 直接通过
39-
if (!permissionRoles) return true;
40-
return roles.some(role => permissionRoles.indexOf(role) >= 0)
41-
}
42-
43-
// register global progress.
44-
const whiteList = ['/login', '/authredirect', '/reset', '/sendpwd'];// 不重定向白名单
45-
router.beforeEach((to, from, next) => {
46-
NProgress.start(); // 开启Progress
47-
if (getToken()) { // 判断是否有token
48-
if (to.path === '/login') {
49-
next({ path: '/' });
50-
} else {
51-
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
52-
store.dispatch('GetInfo').then(res => { // 拉取user_info
53-
const roles = res.data.role;
54-
store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
55-
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
56-
next({ ...to }); // hack方法 确保addRoutes已完成
57-
})
58-
}).catch(() => {
59-
store.dispatch('FedLogOut').then(() => {
60-
next({ path: '/login' });
61-
})
62-
})
63-
} else {
64-
// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
65-
if (hasPermission(store.getters.roles, to.meta.role)) {
66-
next();//
67-
} else {
68-
next({ path: '/401', query: { noGoBack: true } });
69-
}
70-
// 可删 ↑
71-
}
72-
}
73-
} else {
74-
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
75-
next()
76-
} else {
77-
next('/login'); // 否则全部重定向到登录页
78-
NProgress.done(); // 在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
79-
}
80-
}
81-
});
82-
83-
router.afterEach(() => {
84-
NProgress.done(); // 结束Progress
85-
});
86-
87-
Vue.config.productionTip = false;
22+
})
8823

89-
// 生产环境错误日志
90-
if (process.env.NODE_ENV === 'production') {
91-
Vue.config.errorHandler = function(err, vm) {
92-
console.log(err, window.location.href);
93-
errLog.pushLog({
94-
err,
95-
url: window.location.href,
96-
vm
97-
})
98-
};
99-
}
24+
Vue.config.productionTip = false
10025

10126
new Vue({
10227
el: '#app',

‎src/permission.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import router from './router'
2+
import store from './store'
3+
import NProgress from 'nprogress' // Progress 进度条
4+
import 'nprogress/nprogress.css'// Progress 进度条样式
5+
import { getToken } from '@/utils/auth' // 验权
6+
7+
// permissiom judge
8+
function hasPermission(roles, permissionRoles) {
9+
if (roles.indexOf('admin') >= 0) return true // admin权限 直接通过
10+
if (!permissionRoles) return true
11+
return roles.some(role => permissionRoles.indexOf(role) >= 0)
12+
}
13+
14+
// register global progress.
15+
const whiteList = ['/login', '/authredirect', '/reset', '/sendpwd']// 不重定向白名单
16+
router.beforeEach((to, from, next) => {
17+
NProgress.start() // 开启Progress
18+
if (getToken()) { // 判断是否有token
19+
if (to.path === '/login') {
20+
next({ path: '/' })
21+
} else {
22+
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
23+
store.dispatch('GetInfo').then(res => { // 拉取user_info
24+
const roles = res.data.role
25+
store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
26+
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
27+
next({ ...to }) // hack方法 确保addRoutes已完成
28+
})
29+
}).catch(() => {
30+
store.dispatch('FedLogOut').then(() => {
31+
next({ path: '/login' })
32+
})
33+
})
34+
} else {
35+
// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
36+
if (hasPermission(store.getters.roles, to.meta.role)) {
37+
next()//
38+
} else {
39+
next({ path: '/401', query: { noGoBack: true } })
40+
}
41+
// 可删 ↑
42+
}
43+
}
44+
} else {
45+
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
46+
next()
47+
} else {
48+
next('/login') // 否则全部重定向到登录页
49+
NProgress.done() // 在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
50+
}
51+
}
52+
})
53+
54+
router.afterEach(() => {
55+
NProgress.done() // 结束Progress
56+
})

‎src/views/components/mixin.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,13 @@
2424
<script>
2525
import MdInput from 'components/MDinput';
2626
import PanThumb from 'components/PanThumb';
27+
import waves from '@/directive/waves.js';// 水波纹指令
2728
2829
export default {
2930
components: { MdInput, PanThumb },
31+
directives: {
32+
waves
33+
},
3034
data() {
3135
return {
3236
title: ''

‎src/views/example/form.vue‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="createPost-container">
33
<el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">
44

5-
<Sticky :className="'sub-navbar '+postForm.status">
5+
<sticky :className="'sub-navbar '+postForm.status">
66
<template v-if="fetchSuccess">
77
<div style="display:inline-block">
88

@@ -57,7 +57,7 @@
5757
<el-tag>发送异常错误,刷新页面,或者联系程序员</el-tag>
5858
</template>
5959

60-
</Sticky>
60+
</sticky>
6161

6262
<div class="createPost-main-container">
6363
<el-row>
@@ -107,7 +107,7 @@
107107
</el-form-item>
108108

109109
<div class="editor-container">
110-
<Tinymce :height=400 ref="editor" v-model="postForm.content"></Tinymce>
110+
<tinymce :height=400 ref="editor" v-model="postForm.content"></tinymce>
111111
</div>
112112

113113
<div style="margin-bottom: 20px;">
@@ -122,14 +122,17 @@
122122
<script>
123123
import Tinymce from 'components/Tinymce'
124124
import Upload from 'components/Upload/singleImage3'
125-
import MDinput from 'components/MDinput';
126-
import { validateURL } from 'utils/validate';
127-
import { getArticle } from 'api/article';
128-
import { userSearch } from 'api/remoteSearch';
125+
import MDinput from 'components/MDinput'
126+
import Multiselect from 'vue-multiselect'// 使用的一个多选框组件，element-ui的select不能满足所有需求
127+
import 'vue-multiselect/dist/vue-multiselect.min.css'// 多选框组件css
128+
import Sticky from 'components/Sticky' // 粘性header组件
129+
import { validateURL } from 'utils/validate'
130+
import { getArticle } from 'api/article'
131+
import { userSearch } from 'api/remoteSearch'
129132
130133
export default {
131134
name: 'articleDetail',
132-
components: { Tinymce, MDinput, Upload },
135+
components: { Tinymce, MDinput, Upload, Multiselect, Sticky },
133136
data() {
134137
const validateRequire = (rule, value, callback) => {
135138
if (value === '') {

‎src/views/example/table/table.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@
151151

152152
<script>
153153
import { fetchList, fetchPv } from 'api/article_table';
154+
import waves from '@/directive/waves.js';// 水波纹指令
154155
import { parseTime } from 'utils';
155156
156157
const calendarTypeOptions = [
@@ -168,6 +169,9 @@
168169
169170
export default {
170171
name: 'table_demo',
172+
directives: {
173+
waves
174+
},
171175
data() {
172176
return {
173177
list: null,

‎src/views/theme/index.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646

4747
<script>
4848
import { toggleClass } from 'utils';
49+
import '@/assets/custom-theme/index.css'; // 换肤版本element-ui css
4950
5051
export default {
5152
data() {

0 commit comments

Comments
 (0)