vue管理系统 切换子页面 导航菜单选中
watch: {
'$route' (to,from) {
this.breadcrumb = this.$route.matched//监听面包屑
this.currentActive=[to.path]//监听当前导航菜单
}
},
vue指令 - 处理权限问题
/*
在项目里新建一个common文件夹用于存放全局 .js 文件
这种全局文件夹做法相当普遍，一般项目里都应该有这样一个文件夹来管理全局的东西
*/
// common/jurisdiction.js 用于存放与权限相关的全局函数/变量
export function checkJurisdiction(key) {
// 权限数组
let jurisdictionList = ['1', '2', '3', '5']
let index = jurisdictionList.indexOf(key)
console.log('index:',index)
if (index > -1) {
// 有权限
return true
} else {
// 无权限
return false
}
}
// 将全局权限Js挂载到全局中
// main.js
import { checkJurisdiction } from './common/jurisdiction'
// 优雅操作 - VUE自定义指令
Vue.directive('permission',{
inserted(el, binding){
// inserted → 元素插入的时候
let permission = binding.value // 获取到 v-permission的值
if(permission){
let hasPermission = checkJurisdiction(permission)
if(!hasPermission){
// 没有权限 移除Dom元素
el.parentNode && el.parentNode.removeChild(el)
}
}else{
throw new Error('需要传key')
}
}
})
// 使用方式
<template>
<div>
<h1>I am Home</h1>
<!-- 按钮根据value -->
<div v-permission="'10'">
<button>权限1</button>
</div>
<div v-permission="'5'">
<button>权限2</button>
</div>
</div>
</template>
vue指令 -处理动态按钮重复点击
export default {
install (Vue) {
Vue.directive('preventClick', {
inserted (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, 60000)
}
})
}
})
}
}
<button class="btn"
v-preventClick
@click="getData">获取</button>
2.//防抖
const debounce = {
inserted: function (el, binding) {
let timer
el.addEventListener('keyup', () => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
binding.value()
}, 1000)
})
},
}
export default debounce
<template>
<button v-debounce="debounceClick">防抖</button>
</template>
<script>
export default {
methods: {
debounceClick () {
console.log('只触发一次')
}
}
}
</script>
自动清除console.log输出日志
1、安装 babel-plugin-transform-remove-console
npm install babel-plugin-transform-remove-console --save-dev
2、修改 babel.config.js 文件
const prodPlugin = []
// 如果是生产环境，则自动清理掉打印的日志，但保留error 与 warn
if (process.env.NODE_ENV === 'production') {
prodPlugin.push([
'transform-remove-console',
{
exclude: ['error', 'warn']
}
])
}
module.exports = {
plugins: [
...prodPlugin
]
}
防抖和节流装饰器
import { debounce, throttle } from 'lodash'
/**
* 函数防抖装饰器
* @param {number} wait 需要延迟的毫秒数。
* @param {Object} options 选项对象
* [options.leading=false] (boolean): 指定在延迟开始前调用。
* [options.maxWait] (number): 设置 func 允许被延迟的最大值。
* [options.trailing=true] (boolean): 指定在延迟结束后调用。
*/
// 防抖
export default function (wait, options = {}) {
return function (target, name, descriptor) {
descriptor.value = debounce(descriptor.value, wait, options)
}
}
// 节流
export default function (wait, options = {}) {
return function (target, name, descriptor) {
descriptor.value = throttle(descriptor.value, wait, options)
}
}
//使用
@throttle //函数节流
@debounce //函数防抖
移动端适配
//postcss.config.js
//npm install postcss-loader --save--dev
//npm install postcss-px2rem --save--dev
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
// 视窗的宽度，对应的是我们设计稿的宽度，一般是750
viewportWidth: 375,
// 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
// viewportHeight: 1334,
// 指定`px`转换为视窗单位值的小数位数
unitPrecision: 3,
// 指定需要转换成的视窗单位，建议使用vw
viewportUnit: 'vw',
// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
selectorBlackList: ['.ignore'],
// 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
minPixelValue: 1,
// 允许在媒体查询中转换`px`
mediaQuery: false
}
}
}
JS数组方法
JS数组方法_20200909090904.jpg
