gyb的常用lazyCopy

常用代码片段

文字一行显示,溢出省略

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

2 css两行显示,超出省略

p {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

3.数组对象去重

//数组对象去重
function(arr, key) {for (let i = 0; i < arr.length; i++) {for (let j = i + 1; j < arr.length; j++) {if (arr[i][key]) {if (arr[i][key] === arr[j][key]) {arr.splice(j, 1)j = j - 1}}}}return arr
}

4.验收手机号码格式

// 验证手机号码格式
export const phoneVerification = function(phone) {let phoneCodeVerification = /^[1][3,4,5,7,8][0-9]{9}$/return phoneCodeVerification.test(phone)
}

验证邮箱格式

// 验证邮箱格式
export const emailVerification = function(email) {let emailCodeVerification = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/return emailCodeVerification.test(email)
}

6.html编码和解码

// html解码
export function ESCAPE_HTML(str, moreSign = {}) {let arrEntities = {lt: '<',gt: '>',nbsp: ' ',amp: '&',quot: '"',...moreSign}let newEntities = {'40': '@','2b': '+','24': '$','23': '#','2c': ',','7c': '|'}str = str.replace(/javascript:void\(0\);|javascript:void\(0\)/g, '#')// console.log('str--', str)// 直接过滤document script eval三个特殊单词str = str.replace(/document|script|eval/g, '')str = str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function(all, t) {return arrEntities[t]})// FIXME 待优化把两个正则合并成一个return str.replace(/%(40|2b|24|23|2c|7c);/gi, function(all, t) {return newEntities[t]})
}// 编码到后台
export function HTML_ESCAPE(str, noEscape = []) {str = str.replace(/javascript:void\(0\);|javascript:void\(0\)/g, '#')return str.replace(/[<>&"@+$#,|]/g, function(c) {// 哪些字符不需要过滤if (noEscape.includes(c)) {return c}return {'<': '&lt;','>': '&gt;','&': '&amp;','"': '&quot;','@': '%40;','+': '%2b;',$: '%24;','#': '%23;',',': '%2c;','|': '%7c;'}[c]})
}

7.将手机号中间4位替换为* 号

        let phone = '13800138000'let reg  = /(\d{3})\d{4}(\d{3})/gconsole.log(reg.test(phone));console.log(phone.replace(reg,'$1****$2'));   // 138****8000

Excel 转base64 下载

excel下载 responseType: 'blob',  //在请求api 添加上这一于// 接口返回的数据 获取到 res.data  //将接口返回的数据rse.data  直接给下面这段方法 执行自动下载
let url = window.URL.createObjectURL(res.data)let link = document.createElement('a') link.style.display = 'none'link.href = urllink.setAttribute('download', '文件名.xlsx')  //(设置按钮执行下载事件download  ,下载的文件名)document.body.appendChild(link)link.click()

9 Excel文件上传( formdata)

Excel 文件上传<input type="file" class="uploadExcel" accept=".xls, .xlsx" id="importExcel"@change="submitCollectionFlowImport" />        data() {return {form: {name: ''},file: undefined  //}},       // 选择上传文件触发事件submitCollectionFlowImport(e) {var excelFile = document.getElementById('importExcel').files[0]  //根据获取到的input dom元素 获取到上传的文件console.log(excelFile)let fileFormData = new window.FormData()  //创建一个FormData对象 vue环境创建 要window.FormDatafileFormData.append('file', excelFile)  //(上传的文件, 上传的文件名) this.file = fileFormData},async submit() {const res = await importClientExcel(this.file)   //调用接口发请求 直接把file文件传参console.log(res)if (res.data.code === 0) {this.$message.success('导入成功')} else {this.$message.error(res.data.msg)}this.dialogShowSwitch = false}

使用 encodeURIComponent加码 decodeURIComponent 解码

        //    使用 encodeURIComponent加码 decodeURIComponent 解码// 加码var objectToQueryString = (obj) => Object.keys(obj).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');objectToQueryString({ name: '王总', slogen: '属实', age: 26, icon: '/' })  //name=%E7%8E%8B%E6%80%BB&slogen=%E5%B1%9E%E5%AE%9E&age=26&icon=%2F// 解码let url = 'name=%E7%8E%8B%E6%80%BB&slogen=%E5%B1%9E%E5%AE%9E&age=26&icon=%2F'console.log(decodeURIComponent(url)); //name=王总&slogen=属实&age=26&icon=/

h5c3部分属性代码

背景属性复合写法
//background: 颜色 url() 平铺 水平定位 纵向定位/ 缩放或长度 缩放或宽度background: url(./logo.png) no-repeat 0 0/142px 58px;background: green url(img/bg.jpg) no-repeat 0 0 100% 100%background: green url(img/bg.jpg) no-repeat left  bottom 100% 100%background: green url(img/bg.jpg) no-repeat center center 100% 100%

Ajax的get请求 XMLHttpRequest.readyState的四个阶段MDN链接

 return new Promise((resolve, reject) => {//步骤一:创建异步对象var ajax = new XMLHttpRequest();//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数ajax.open('get', 'http://127.0.0.1:5000/api/longlist');//步骤三:发送请求ajax.send();//步骤四:注册事件 onreadystatechange 状态改变就会调用// XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest  代理当前所处的状态 包含四个状态// 0    UNSENT  代理被创建，但尚未调用 open() 方法。// 1   OPENED  open() 方法已经被调用。// 2 HEADERS_RECEIVED    send() 方法已经被调用，并且头部和状态已经可获得。// 3 LOADING 下载中； responseText 属性已经包含部分数据。// 4    DONE    下载操作已完成。ajax.onreadystatechange = function () {console.log(ajax);if (ajax.readyState == 4 && ajax.status == 200) {//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的resolve(JSON.parse(ajax.responseText))}}})

封装axios 请求

先在unils文件夹封装一个fetch 请求方法

// request拦截器
import axios from 'axios'
// import Message from '@/lib/ego-ui/packages/message'
import { Message } from 'element-ui'
// import router from '../router'
// 创建axios实例
const service = axios.create({timeout: null // 请求超时时间
})
let serviceTips = '服务器超时'// request拦截器
service.interceptors.request.use(config => {// 获取本地tokenlet token = localStorage.getItem('tokendata')// 设置请求头let headers = 'application/json'// 是否携带tokenlet tokenFlag = true// 防止IE浏览器获取到缓存数据if (config.url.indexOf('?time') < 1) {if (config.url.indexOf('?') < 1) {config.url += '?time=' + new Date().getTime()} else {config.url += '&time=' + new Date().getTime()}}// 是否修改请求信息if (config.opts) {// 获取携带token状态tokenFlag = config.opts ? config.opts.token : true// 获取请求头// headers = config.opts.Header ? config.opts.Header : 'application/json'// 拓展头部参数let Head = config.opts.Headif (Head) {for (let key in Head) {config.headers[key] = Head[key]if (key === 'Content-Type') {headers = Head[key]}}}}if (token && tokenFlag) {// 条件允许，携带token请求// config.headers['token'] = tokenconfig.headers['X-Auth0-Token'] = token} else {// headers = 'application/x-www-form-urlencoded'}// 设置请求格式config.headers['Content-Type'] = headers// config.headers['Content-Type'] = 'application/x-www-form-urlencoded'return config},err => {return Promise.reject(err)}
)// http response 服务器响应拦截器
service.interceptors.response.use(response => {if (response.data.code === -401 ||response.data.code === 3001 ||response.data.code === 40001 // ❌和后台返回code码 冲突 临时注释) {localStorage.removeItem('tokendata')window.location.href = window.location.origin// router.replace({//   path: '/login'// })}return response},error => {if (error.response) {switch (error.response.status) {case 400:console.log(error.response)error.response.data = '资源不存在'breakcase 401:error.response.data = '登陆超时，重新登陆'localStorage.removeItem('tokendata')window.location.href = window.location.origin// router.replace({//   path: '/login',//   query: {//     // redirect: router.currentRoute.fullPath//   } // 登录成功后跳入浏览的当前页面// })breakcase 404:error.response.data = '资源不存在'breakcase 406:error.response.data = '头部无携带token'breakcase 412:localStorage.removeItem('tokendata')// 拦截错误 并重新跳入登页重新获取tokenwindow.location.href = window.location.origin// router.replace({//   path: '/login',//   query: {//     redirect: router.currentRoute.fullPath//   } // 登录成功后跳入浏览的当前页面// })error.response.data = '秘钥失效'localStorage.removeItem('tokendata') // 清除tokenbreakcase 415:error.response.data = '请求type有误'breakcase 500:error.response.data = '服务器异常'break}serviceTips = error.response.data}// Message({//   message: serviceTips,//   theme: 'danger'// })Message.error(serviceTips)return Promise.reject(serviceTips)}
)
export default service

引入fetch方法,封装各个aip请求接口

// 引入拦截器
import Ajax from '@/utils/fetch'
// 引入公共JS
import until from '@/utils/until'
import Qs from 'qs'// 引入接口前缀
const scrmAdminBase = until.scrmAdminBase// 查询企微客户列表
function getQwList(data) {return Ajax({method: 'get',url: scrmAdminBase + `/externalContact/list?${Qs.stringify(data, { indices: false })}`// url: scrmAdminBase + `/externalContact/list/`,// params: data})
}

在对应的vue组件中引入直接调用发起接口请求


import { clientManageApi } from '@/api/api'
const { getQwList } = clientManageApicreated() {this.getQwList()},methods: {// 企微客户列表async getQwList() {this.loading = truethis.exportQueryForm = {}const res = await getQwList({ ...this.queryForm, ...this.commonQueryForm })this.exportQueryForm = this.commonQueryFormconsole.log(this.exportQueryForm)// console.log(res)if (res.data.code === 0) {console.log('获取到企微客户列表', res)res.data.data.records.map((item) => {item.totalSocure = []item.followUserList.map((item1) => {// console.log(item.totalSocure)// console.log(item1.addWay)if (item.totalSocure.indexOf(item1.addWay) === -1) {item.totalSocure.push({ addWay: item1.addWay, addWayType: item1.addWayType })console.log(item.totalSocure.length)}})})// console.log(this.tableData)this.tableData = res.data.data.recordsthis.total = res.data.data.total} else {this.$message.error('数据加载异常')}this.loading = false},

element-dialog弹窗代码片段

<template><div><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%"@closed="handleClose"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></div>
</template><script>
export default {props:{show:{type:Boolean,default:false},},data() {return {dialogVisible:false}},watch: {show(newV){this.dialogVisible = newV},},methods: {handleClose(){this.$emit('update:show',this.dialogVisible)   },},
}
</script><style></style>

时间戳转换为日期

    filters:{localTimeType(val){   //时间戳转换为日期let now = new Date(parseInt(val + '000')) //标准长度的时间戳不用加三个零  var y = now.getFullYear()var m = now.getMonth() + 1var d = now.getDate();var h = now.getHours()var min= now.getMinutes()return  `${y}-${m}-${d} ${h}:${min}`   // 输出时间格式: 2022-6-24 14:51}},

vue watch监听computed计算属性,实现动态监听vuex中state属性变化

    computed:{newPageName(){  return this.$store.state.pageName   //引用vuex动态属性}},  watch:{newPageName:{  //监听计算属性handler(newV){console.log('窗口切换',newV);this.showAddBtn = (newV === 'draft'?false:true)},immediate:true  //深度监听}},

一键复制图片操作

 // img转base64imageToBase64(image) {let canvas = document.createElement('canvas')let width = image.widthlet height = image.heightcanvas.width = widthcanvas.height = heightlet context = canvas.getContext('2d')context.drawImage(image, 0, 0, width, height)// console.log(canvas.toDataURL('image/png'));return canvas.toDataURL('image/png')},//url图片转base64urlToBase64(url) {let image = new Image()image.setAttribute('crossOrigin', 'Anonymous')image.src = url + '?v=' + Math.random()image.onload = async ()=>{let dataURL = await this.imageToBase64(image)await this.base64ToBlob(dataURL)}},async base64ToBlob(code) {var parts = code.split(";base64,");var contentType = parts[0].split(":")[1];var raw = window.atob(parts[1]);var rawLength = raw.length;var uint8Array = new Uint8Array(rawLength);for (var i = 0; i < rawLength; i++) {uint8Array[i] = raw.charCodeAt(i);}let blobInput = new Blob([uint8Array], {type: contentType});try{const clipboardItemInput = await new ClipboardItem({ 'image/png': blobInput });console.log(blobInput)await navigator.clipboard.write([clipboardItemInput]);this.$message.success('图片已复制至剪切板')}catch(e){this.$message.error("该图片格式无法复制，请选择下载");console.error(new Error('\n\n--------------------\n复制失败原因: \n- 该图片格式/类型无法复制至剪切板\n- 该图片链接有跨越设置,无法复制\n- 该图片体积过大\n--------------------\n\n( dddd )\n\n'))} },

gyb的常用lazyCopy相关推荐

Kubectl 常用命令, 开发人员常用k8s命令
Kubectl 常用命令: 什么是常用,我用的,就是常用的
力扣1002.查找常用字符
力扣 1002. 查找常用字符本人力扣练习已上传至码云,可互相学习借鉴. 难度-简单题目: 给定仅有小写字母组成的字符串数组 A,返回列表中的每个字符串中都显示的全部字符(包括重复字符)组成的列表 ...
spring boot项目中止运行最常用的几种方法
spring boot项目中止运行最常用的几种方法: 1. 调用接口,停止应用上下文 @RestController public class ShutdownController impleme ...
作为一个java程序员，常用的linux命令（越攒越多）
本篇记录我在工作中不断遇到的常用的linux命令,并进行总结,时常更新! 1. 升级服务时先停止服务,然后进行替换 linux中杀进程时候,如果你是知道它所占用的端口号的话,可以通过 netstat ...
后端怎么防止重复提交？（常用的做法）
后端怎么防止重复提交?(常用的做法) 客户端的抖动,快速操作,网络通信或者服务器响应慢,造成服务器重复处理.防止重复提交,除了从前端控制,后台也需要控制.因为前端的限制不能解决彻底.接口实现,通常要求 ...
nginx介绍及常用功能
什么是nginx nginx跟Apache一样,是一个web服务器(网站服务器),通过HTTP协议提供各种网络服务. Apache:重量级的,不支持高并发的服务器.在Apache上运行数以万计的并发访 ...
docker常用命令详解
docker常用命令详解本文只记录docker命令在大部分情境下的使用,如果想了解每一个选项的细节,请参考官方文档,这里只作为自己以后的备忘记录下来. 根据自己的理解,总的来说分为以下几种: Doc ...
常用开源协议介绍以及开源软件规范列表
1. 开源协议介绍 GPL: General Public License,开源项目最常用的许可证,衍生代码的分发需开源并且也要遵守此协议.该协议也有很多变种,不同变种要求会略微不同. MPL: MP ...
常用的高性能 KV 存储 Redis、Memcached、etcd、Zookeeper 区别
1. 什么是 KV 存储 KV 是 Key-Value 的缩写,KV 存储也叫键值对存储.简单来说,它是利用 Key 做索引来实现数据的存储.修改.查询和删除功能. 常用的高性能 KV 存储主要有 R ...
RabbitMQ 入门系列（11）— RabbitMQ 常用的工作模式（simple模式、work模式、publish/subscribe模式、routing模式、topic模式）
1. simple 模式 simple 模式是最简单最常用的模式 2. work 模式 work 模式有多个消费者消息产生者将消息放入队列.生产者系统不需知道哪一个任务执行系统在空闲,直接将任务扔到 ...

gyb的常用lazyCopy

常用代码片段

封装axios 请求

gyb的常用lazyCopy相关推荐

最新文章

热门文章