7.高精度权限控制—自定义指令directive

我们通常给一个元素添加 v-if / v-show 来做权限管理，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。
针对这种情况，我们可以通过全局自定义指令来处理：我们先在新建个 array.js 文件，用于存放与权限相关的全局函数


// array.js
export function checkArray (key) {let arr = ['1', '2', '3', '4', 'demo']let index = arr.indexOf(key)if (index > -1) {return true // 有权限} else {return false // 无权限}
}

然后在将 array 文件挂载到全局中:


// main.js
import { checkArray } from "./common/array";
Vue.directive("permission", {inserted (el, binding) {let permission = binding.value; // 获取到 v-permission的值if (permission) {let hasPermission = checkArray(permission);if (!hasPermission) { // 没有权限 移除Dom元素el.parentNode && el.parentNode.removeChild(el);}}}
});

最后我们在页面中就可以通过自定义指令 v-permission 来判断：

<div class="btns"><button v-permission="'1'">权限按钮1</button>  // 会显示<button v-permission="'10'">权限按钮2</button>  // 无显示<button v-permission="'demo'">权限按钮3</button> // 会显示</div>

6.一劳永逸的组件注册

通常在组件使用前，需要引入后再注册，但如果高频组件多了，每次都这样做，不仅新增很多代码，效率还低！我们应该如何优化呢？

其实，我们可以借助一下webpack的require.context() 方法来创建自己的（模块）上下文，从而实现自动动态require组件。

我们先在components文件夹（这里面都是些高频组件）添加一个叫global.js的文件，在这个文件里使用require.context 动态将需要的高频组件统统打包进来，然后在main.js文件中引入global.js的文件。

//  global.js文件
import Vue from 'vue'
function changeStr (str) {return str.charAt(0).toUpperCase() + str.slice(1)
}
const requireComponent = require.context('./', false, /\.vue$/)
// 查找同级目录下以vue结尾的组件
const install = () => {requireComponent.keys().forEach(fileName => {let config = requireComponent(fileName)console.log(config) // ./child1.vue 然后用正则拿到child1let componentName = changeStr(fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''))Vue.component(componentName, config.default || config)})
}
export default {install // 对外暴露install方法
}

最后我们就可以随时随地在页面中使用这些高频组件，无需再手动一个个引入了。

//main.js
import globals from './components/form/global'
Vue.use(globals)

5.blob2base64

let blob2base64 = async (blobData, type = 'image/jpeg') => {let blob = new Blob([blobData], { type: type })let fileReader = new FileReader()let result = await new Promise((resolve, reject) => {fileReader.readAsDataURL(blob)fileReader.onload = (e) => {resolve(e.target.result)}})return result
}
export default {blob2base64
}

或者这样:

4.base64 字符串之间的转化

const addBase64 = (str) => {// 对字符串进行编码const encode = encodeURI(str);// 对编码的字符串转化base64const base64 = btoa(encode);return base64;
};
// base64转字符串
const transBase64 = (base64) => {// 对base64转编码const decode = atob(base64);// 编码转字符串const str = decodeURI(decode);return str;
};
export {addBase64, transBase64,
};

3格式化日期相关

/*** @description 转UTC时间格式* @param {time} time如果是'start'表示本年度的1月1日00:00:00 ,如果是'end'表示本年度的12月31日23:59:59 ,time也可以是Date构造函数的实参* @return String UTC格式的时间字符串*/
export const formatDateToUtc = (time) => {const curDate = new Date()const curYear = curDate.getFullYear()if (time === 'start') {return new Date(`${curYear}-1-1`).toISOString()} else if (time === 'end') {return new Date(`${curYear + 1}-1-1`).toISOString()} else {return new Date(time).toISOString()}
}
/*** @description UTC时间转正常时间*/
export const dateFormat = (timer) => {let date = new Date(timer)let y = String(date.getFullYear()).padStart(4, 0)let M = String(date.getMonth() + 1).padStart(2, 0)let d = String(date.getDate()).padStart(2, 0)let h = String(date.getHours()).padStart(2, 0)let m = String(date.getMinutes()).padStart(2, 0)let s = String(date.getSeconds()).padStart(2, 0)return `${y}-${M}-${d} ${h}:${m}:${s}`
}**时间戳转正常日期**
function dateFormat(time, format = "YYYY-MM-DD HH:mm:ss") {let date = new Date(time)const config = {YYYY: date.getFullYear(),MM: date.getMonth() + 1,DD: date.getDate(),HH: date.getHours(),mm: date.getMinutes(),ss: date.getSeconds()};for (const key in config) {format = format.replace(key, config[key]);}return format;
}
console.log(dateFormat(1588754368262, "YYYY年MM月DD日"));

2防抖与节流


/*** @description 防抖*/function debance(fn, delay) {let timer = null;return () => {if (timer) {clearTimeout(timer);}timer = setTimeout(() => {fn();}, delay);};
}window.addEventListener("scroll",debance(() => {console.log(111);}, 1000)
);
/**  * @description 节流  *///方法一：设置一个标志function throttle(fn, delay) {let flag = true;return () => {if (!flag) return;flag = false;timer = setTimeout(() => {fn();flag = true;}, delay);};}//方法二：使用时间戳function throttle(fn, delay) {let startTime=new Date()return () => {let endTime=new Date()if (endTime-startTime>=delay){fn()startTime=endTime}else{return}};}window.addEventListener("scroll",throttle(() => {console.log(111);}, 1000));

1截取地址栏参数

    getQueryString: function(key) {var reg = new RegExp('(^|&)' + key + '=([^&]*)(&|$)')var result = window.location.search.substr(1).match(reg)return result ? decodeURIComponent(result[2]) : null}

vue一些utils相关推荐

使用Tape和Vue Test Utils编写快速的Vue单元测试
by Edd Yerburgh 埃德·耶堡(Edd Yerburgh) 使用Tape和Vue Test Utils编写快速的Vue单元测试 (Write blazing fast Vue unit t ...
Vue前端自动化测试-Vue Test Utils
Vue Test Utils简介 vue-test-utils是vue官方的单元测试框架,提供了一系列非常方便的工具,使我们更轻松地为vue构建的应用来编写单元测试.主流的JavaScript测试运行 ...
vue组件测试-Vue Test Utils 应用入门
一.前言我们在vue项目中Vue Test Utils 测试环境已经搭建完成的基础上来进行演示,搭建环境可以看我之前的文章. 本文中使用的相关技术点连接: 测试环境: Vue Test Utils ...
vue里面_Vue中如何使用自定义插件（plugin）
Vue中如何使用自定义插件(plugin) 1.在根目录src下创建一个libs文件夹,在libs文件夹下面创建一个myPlugins文件夹,用来存放我们的自定义插件,在myPlugins文件夹下面再 ...
vue项目构建实战基础知识：SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除...
一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为单页应用程序或单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 u ...
Vue实战狗尾草博客后台管理系统
Vue实战狗尾草博客后台管理系统第一章这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vu ...
vue-element-admin台前端解决方案: 基于 vue 和 element-ui实现
介绍 vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现.它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型 ...
Vue.js 单元测试
单元测试配置和工具任何兼容基于模块的构建系统都可以正常使用,但如果你需要一个具体的建议,可以使用 Karma 进行自动化测试.它有很多社区版的插件,包括对 Webpack 和 Browserify ...
2019年Vue学习路线图
作者|Anthony Gore 译者|无明如果你是 Vue 开发新手,可能已经听过很多行话术语,比如单页面应用程序.异步组件.服务器端渲染,等等.你可能还听说过与 Vue 有关的一些工具和库,比如 ...

vue一些utils

utils