refine main.js

This commit is contained in:
Pan 2017-08-21 15:55:46 +08:00
parent e912cea26a
commit 9768305166
9 changed files with 146 additions and 142 deletions

View file

@ -10,7 +10,7 @@
import SimpleMDE from 'simplemde'; import SimpleMDE from 'simplemde';
export default { export default {
name: 'Sticky', name: 'simplemde-md',
props: { props: {
value: String, value: String,
id: { id: {

View file

@ -1,47 +1,44 @@
import './waves.css'; import './waves.css';
const vueWaves = {}; export default{
vueWaves.install = (Vue, options = {}) => { bind(el, binding) {
Vue.directive('waves', { el.addEventListener('click', e => {
bind(el, binding) { const customOpts = Object.assign({}, binding.value);
el.addEventListener('click', e => { const opts = Object.assign({
const customOpts = Object.assign(options, binding.value); ele: el, // 波纹作用元素
const opts = Object.assign({ type: 'hit', // hit点击位置扩散center中心点扩展
ele: el, // 波纹作用元素 color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
type: 'hit', // hit点击位置扩散center中心点扩展 }, customOpts),
color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色 target = opts.ele;
}, customOpts), if (target) {
target = opts.ele; target.style.position = 'relative';
if (target) { target.style.overflow = 'hidden';
target.style.position = 'relative'; const rect = target.getBoundingClientRect();
target.style.overflow = 'hidden'; let ripple = target.querySelector('.waves-ripple');
const rect = target.getBoundingClientRect(); if (!ripple) {
let ripple = target.querySelector('.waves-ripple'); ripple = document.createElement('span');
if (!ripple) { ripple.className = 'waves-ripple';
ripple = document.createElement('span'); ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
ripple.className = 'waves-ripple'; target.appendChild(ripple);
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'; } else {
target.appendChild(ripple); ripple.className = 'waves-ripple';
} else {
ripple.className = 'waves-ripple';
}
switch (opts.type) {
case 'center':
ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
break;
default:
ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
}
ripple.style.backgroundColor = opts.color;
ripple.className = 'waves-ripple z-active';
return false;
} }
}, false); switch (opts.type) {
} case 'center':
}) ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
}; ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
break;
default:
ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
}
ripple.style.backgroundColor = opts.color;
ripple.className = 'waves-ripple z-active';
return false;
}
}, false);
}
}
export default vueWaves;

14
src/errorLog.js Normal file
View file

@ -0,0 +1,14 @@
import Vue from 'vue'
import errLog from '@/store/errLog'
// 生产环境错误日志
if (process.env.NODE_ENV === 'production') {
Vue.config.errorHandler = function(err, vm) {
console.log(err, window.location.href);
errLog.pushLog({
err,
url: window.location.href,
vm
})
};
}

View file

@ -1,102 +1,27 @@
// The Vue build version to load with the `import` command import Vue from 'vue'
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. import App from './App'
import Vue from 'vue'; import router from './router'
import App from './App'; import store from './store'
import router from './router'; import 'normalize.css/normalize.css'// normalize.css 样式格式化
import store from './store'; import ElementUI from 'element-ui'
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-default/index.css'
import 'element-ui/lib/theme-default/index.css'; import '@/assets/iconfont/iconfont' // iconfont 具体图标见https://github.com/PanJiaChen/vue-element-admin/wiki
import 'assets/custom-theme/index.css'; // 换肤版本element-ui css import IconSvg from '@/components/Icon-svg'// svg组件
import NProgress from 'nprogress'; // Progress 进度条 import * as filters from '@/filters' // 全局filter
import 'nprogress/nprogress.css';// Progress 进度条 样式 import '@/errorLog'// error log
import 'normalize.css/normalize.css';// normalize.css 样式格式化 import '@/permission' // 权限
import 'assets/iconfont/iconfont'; // iconfont 具体图标见https://github.com/PanJiaChen/vue-element-admin/wiki import '@/mock/index.js' // 该项目所有请求使用mockjs模拟
import * as filters from './filters'; // 全局vue filter
import Multiselect from 'vue-multiselect';// 使用的一个多选框组件element-ui的select不能满足所有需求
import 'vue-multiselect/dist/vue-multiselect.min.css';// 多选框组件css
import Sticky from 'components/Sticky'; // 粘性header组件
import IconSvg from 'components/Icon-svg';// svg 组件
import vueWaves from './directive/waves';// 水波纹指令
import errLog from 'store/errLog';// error log组件
import './mock/index.js'; // 该项目所有请求使用mockjs模拟
import { getToken } from 'utils/auth';
// register globally // register globally
Vue.component('multiselect', Multiselect);
Vue.component('Sticky', Sticky);
Vue.component('icon-svg', IconSvg) Vue.component('icon-svg', IconSvg)
Vue.use(ElementUI); Vue.use(ElementUI)
Vue.use(vueWaves);
// register global utility filters. // register global utility filters.
Object.keys(filters).forEach(key => { Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key]) Vue.filter(key, filters[key])
}); })
// permissiom judge Vue.config.productionTip = false
function hasPermission(roles, permissionRoles) {
if (roles.indexOf('admin') >= 0) return true; // admin权限 直接通过
if (!permissionRoles) return true;
return roles.some(role => permissionRoles.indexOf(role) >= 0)
}
// register global progress.
const whiteList = ['/login', '/authredirect', '/reset', '/sendpwd'];// 不重定向白名单
router.beforeEach((to, from, next) => {
NProgress.start(); // 开启Progress
if (getToken()) { // 判断是否有token
if (to.path === '/login') {
next({ path: '/' });
} else {
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(res => { // 拉取user_info
const roles = res.data.role;
store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
next({ ...to }); // hack方法 确保addRoutes已完成
})
}).catch(() => {
store.dispatch('FedLogOut').then(() => {
next({ path: '/login' });
})
})
} else {
// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
if (hasPermission(store.getters.roles, to.meta.role)) {
next();//
} else {
next({ path: '/401', query: { noGoBack: true } });
}
// 可删 ↑
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单,直接进入
next()
} else {
next('/login'); // 否则全部重定向到登录页
NProgress.done(); // 在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 pshistory模式下无问题可删除该行
}
}
});
router.afterEach(() => {
NProgress.done(); // 结束Progress
});
Vue.config.productionTip = false;
// 生产环境错误日志
if (process.env.NODE_ENV === 'production') {
Vue.config.errorHandler = function(err, vm) {
console.log(err, window.location.href);
errLog.pushLog({
err,
url: window.location.href,
vm
})
};
}
new Vue({ new Vue({
el: '#app', el: '#app',

56
src/permission.js Normal file
View file

@ -0,0 +1,56 @@
import router from './router'
import store from './store'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式
import { getToken } from '@/utils/auth' // 验权
// permissiom judge
function hasPermission(roles, permissionRoles) {
if (roles.indexOf('admin') >= 0) return true // admin权限 直接通过
if (!permissionRoles) return true
return roles.some(role => permissionRoles.indexOf(role) >= 0)
}
// register global progress.
const whiteList = ['/login', '/authredirect', '/reset', '/sendpwd']// 不重定向白名单
router.beforeEach((to, from, next) => {
NProgress.start() // 开启Progress
if (getToken()) { // 判断是否有token
if (to.path === '/login') {
next({ path: '/' })
} else {
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(res => { // 拉取user_info
const roles = res.data.role
store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
next({ ...to }) // hack方法 确保addRoutes已完成
})
}).catch(() => {
store.dispatch('FedLogOut').then(() => {
next({ path: '/login' })
})
})
} else {
// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
if (hasPermission(store.getters.roles, to.meta.role)) {
next()//
} else {
next({ path: '/401', query: { noGoBack: true } })
}
// 可删 ↑
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单,直接进入
next()
} else {
next('/login') // 否则全部重定向到登录页
NProgress.done() // 在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 pshistory模式下无问题可删除该行
}
}
})
router.afterEach(() => {
NProgress.done() // 结束Progress
})

View file

@ -24,9 +24,13 @@
<script> <script>
import MdInput from 'components/MDinput'; import MdInput from 'components/MDinput';
import PanThumb from 'components/PanThumb'; import PanThumb from 'components/PanThumb';
import waves from '@/directive/waves.js';//
export default { export default {
components: { MdInput, PanThumb }, components: { MdInput, PanThumb },
directives: {
waves
},
data() { data() {
return { return {
title: '' title: ''

View file

@ -2,7 +2,7 @@
<div class="createPost-container"> <div class="createPost-container">
<el-form class="form-container" :model="postForm" :rules="rules" ref="postForm"> <el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">
<Sticky :className="'sub-navbar '+postForm.status"> <sticky :className="'sub-navbar '+postForm.status">
<template v-if="fetchSuccess"> <template v-if="fetchSuccess">
<div style="display:inline-block"> <div style="display:inline-block">
@ -57,7 +57,7 @@
<el-tag>发送异常错误,刷新页面,或者联系程序员</el-tag> <el-tag>发送异常错误,刷新页面,或者联系程序员</el-tag>
</template> </template>
</Sticky> </sticky>
<div class="createPost-main-container"> <div class="createPost-main-container">
<el-row> <el-row>
@ -107,7 +107,7 @@
</el-form-item> </el-form-item>
<div class="editor-container"> <div class="editor-container">
<Tinymce :height=400 ref="editor" v-model="postForm.content"></Tinymce> <tinymce :height=400 ref="editor" v-model="postForm.content"></tinymce>
</div> </div>
<div style="margin-bottom: 20px;"> <div style="margin-bottom: 20px;">
@ -122,14 +122,17 @@
<script> <script>
import Tinymce from 'components/Tinymce' import Tinymce from 'components/Tinymce'
import Upload from 'components/Upload/singleImage3' import Upload from 'components/Upload/singleImage3'
import MDinput from 'components/MDinput'; import MDinput from 'components/MDinput'
import { validateURL } from 'utils/validate'; import Multiselect from 'vue-multiselect'// 使element-uiselect
import { getArticle } from 'api/article'; import 'vue-multiselect/dist/vue-multiselect.min.css'// css
import { userSearch } from 'api/remoteSearch'; import Sticky from 'components/Sticky' // header
import { validateURL } from 'utils/validate'
import { getArticle } from 'api/article'
import { userSearch } from 'api/remoteSearch'
export default { export default {
name: 'articleDetail', name: 'articleDetail',
components: { Tinymce, MDinput, Upload }, components: { Tinymce, MDinput, Upload, Multiselect, Sticky },
data() { data() {
const validateRequire = (rule, value, callback) => { const validateRequire = (rule, value, callback) => {
if (value === '') { if (value === '') {

View file

@ -151,6 +151,7 @@
<script> <script>
import { fetchList, fetchPv } from 'api/article_table'; import { fetchList, fetchPv } from 'api/article_table';
import waves from '@/directive/waves.js';//
import { parseTime } from 'utils'; import { parseTime } from 'utils';
const calendarTypeOptions = [ const calendarTypeOptions = [
@ -168,6 +169,9 @@
export default { export default {
name: 'table_demo', name: 'table_demo',
directives: {
waves
},
data() { data() {
return { return {
list: null, list: null,

View file

@ -46,6 +46,7 @@
<script> <script>
import { toggleClass } from 'utils'; import { toggleClass } from 'utils';
import '@/assets/custom-theme/index.css'; // element-ui css
export default { export default {
data() { data() {