![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
常用功能与方法
前端开发中经常实现的功能以及方法
深海有鱼呀
永远年轻,永远热泪盈眶
展开
-
前端导出excel
import * as R from 'ramda'import XLSX from 'xlsx'import XLSXS from 'xlsx-style'import FileSaver from 'file-saver' batchExport() { if (this.checkList.length === 0) { this.$message.error('请选择要导出的数据!') return } const原创 2021-12-23 15:03:01 · 457 阅读 · 0 评论 -
egg文件上传下载
<el-upload :before-upload="beforeUpload" :before-remove="beforeRemove" :on-success="handleSuccess" :on-preview="download" :file-list="filelist" accept=".sh,....原创 2021-11-26 17:16:55 · 583 阅读 · 0 评论 -
node使用ssh2
import { Client } from 'ssh2';const shellCmd = 'cd /xxxx/xxxx/ xxxx/ sh xx.shell';const conn = new Client();conn.on('ready', async() => { // 准备就绪 const readyMsg = `++++++++Client :: ready: ${ip} ++++++++`; conn.exec(shellCmd, async (err原创 2021-11-19 16:46:15 · 2622 阅读 · 0 评论 -
JS按字节计算字符串长度,按字节截取字符串
/** * 按字节计算字符串长度 * @param bytes 字节数 * @returns */ String.prototype.byteLength = function(){ var len = 0; for ( var i = 0; i < this.length; i++) { //UTF8编码一个中文按3个字节算(GBK编码一个中文按2个字节) len += (this.charCodeAt(i) >原创 2021-11-16 10:30:31 · 522 阅读 · 0 评论 -
nodeJs实现文件上传
import * as fs from 'fs';import * as path from 'path';import * as fse from 'fs-extra';import * as uuidv4 from 'uuid/v4'; /** * @description: 上传简历 * @param {type} * @return: */ async upload() { const { ctx } = this; try { //原创 2021-08-03 10:48:50 · 1386 阅读 · 0 评论 -
nodej实现Excel解析上传、导出
import * as R from 'ramda';const XLSX = require('xlsx');/*** @description: 下载模板* @param {*}* @return {*}*/ async download() { const options = { '!cols': [ { wpx: 140 }, { wpx: 140 }, { wpx: 140 }, { wpx: 14原创 2021-07-08 14:14:22 · 330 阅读 · 0 评论 -
JS树结构操作:查找、遍历、筛选、树结构和列表结构相互转换
JS树结构操作:查找、遍历、筛选、树结构和列表结构相互转换经常有同学问树结构的相关操作,在这里总结一下JS树形结构一些操作的实现思路,并给出了简洁易懂的代码实现。本文内容结构大概如下:遍历树结构1. 树结构介绍JS中树结构一般是类似于这样的结构:let tree = [ { id: '1', title: '节点1', children: [ { id: '1-1', title: '节点1-1' },原创 2021-04-08 23:43:51 · 5139 阅读 · 0 评论 -
(js) 封装dialog模态框插件
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <!-- IMPORT CSS原创 2021-04-06 23:36:06 · 605 阅读 · 0 评论 -
(jq)封装jQuery树形插件
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>zTree树形结构菜单</title> <!-- import css --> <link rel="stylesheet" href="css/reset.min.css"> <style> * { -webkit-user-select: none; }原创 2021-04-06 22:51:43 · 345 阅读 · 0 评论 -
(js)拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-04-06 00:52:58 · 73 阅读 · 0 评论 -
数组去重
let ary = [1,2,3,4,4,5,8,9,45,45,6,2,3]1、循环原来数组中的每一项,每拿到一项都添加到新数组(但是在添加之前先判断新数组中是否有这一项)let newAry = []for(let i = 0;i < ary.length;i++){ let item = ary[i] if(newAry.includes(item)){ continue } newAry.push(item)}2、循环原数组中的每一项,每次拿出来的值和它后面原创 2020-12-17 17:56:57 · 154 阅读 · 0 评论 -
获取n-m之间的随机数
原创 2020-06-19 16:22:04 · 407 阅读 · 0 评论 -
小技巧--数组比较取出不同
concat合并数组filter处理数组indexOf首次出现位置lastIndexOf最后出现位置如果存在相同元素,首尾返回位置不同(返回false)如果只有一个元素,首尾位置为同一位置(返回true)let a = [1,3,4], b = [2,3,4];let c = a.concat(b).filter((cur, i, arr) => {return arr.in...原创 2020-06-19 16:51:14 · 246 阅读 · 0 评论 -
时间格式处理
// 当前年份const FullYear=()=>{ var myDate = new Date(); return myDate.getFullYear(); }//2017-01-01 转成 时间戳 123123123412function changeTime(time) { return Date.parse(new Date(time)); ...原创 2020-06-19 16:56:08 · 202 阅读 · 0 评论 -
(vue)自定义指令实现图片懒加载插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box {原创 2020-09-08 20:01:07 · 246 阅读 · 0 评论 -
(vue)基于vuex封装插件
命名空间认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望你的模块具有更高的封装度和复用性,你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如:const store = new Vuex.Store({ modules:原创 2020-08-19 00:29:52 · 295 阅读 · 0 评论 -
(vue)封装插件
组件和插件组件(Component) 是用来构成你的 App 的业务模块,它的目标是 App.vue。插件(Plugin) 是用来增强你的技术栈的功能模块,它的目标是 Vue 本身。插件的功能插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制,一般有下面几种:添加全局方法或者 property。如:vue-custom-element添加全局资源:指令/过滤器/过渡等。如 vue-touch通过全局混入mixin 方法添加一些组件选项。如 vue-router原创 2020-08-16 23:05:31 · 427 阅读 · 0 评论 -
(vue)封装弹出框
dialog.vue<template> <div class="dialog" v-show="showMask" @click.self ="closeMask()"> <div class="dialog-container"> <div class="dialog-title">{{title...原创 2020-06-19 16:35:09 · 452 阅读 · 0 评论 -
(vue)多选框
<section class="group-con-search newInp" style="margin:10px;"> <el-input v-model="searchCon" placeholder="请输入搜索内容" @keyup.13.native="labelSearch"> <i class=...原创 2020-06-19 16:38:23 · 699 阅读 · 0 评论 -
(vue)多选框
{{item.app_name}} // 选中check(item,index){item.isSelected = !item.isSelected}.applist {width: 112px;height: 85px;background-color: #F9F9...原创 2020-06-19 16:50:21 · 191 阅读 · 0 评论 -
(vue)自定义指令实现loading状态
dom.jsfunction hasClass( elements,cName ){ return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判断前面是否有空格 (\\s | $ )判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断}function...原创 2020-06-19 16:52:58 · 400 阅读 · 0 评论 -
(vue) 弹出层时禁止页面滑动
/***滑动限制***/ stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,false);//禁止页面滑动 }, ...原创 2020-06-19 16:56:34 · 371 阅读 · 0 评论 -
(vue)循环实现多选高亮显示
<template> <div class="container"> <ul class="tab-list"> <li class="tab-li" :class="item.isSelected ?'Active' : '' " v-for="(item,index) in list" ...原创 2020-06-19 16:58:30 · 1306 阅读 · 0 评论 -
(vue) 循环实现单选
{{item.app_name}} // 选中check(item,index){// console.log(index,this.current) if(index!=this.current){ this.current = index; }else{ this.current = -1; }}...原创 2020-06-19 16:57:55 · 1477 阅读 · 0 评论 -
(js)复制
copy() {var Url2 = document.getElementById(“biao1”);Url2.select(); // 选择对象document.execCommand(“Copy”); // 执行浏览器复制命令this.$message({message: ‘复制成功’,type: “success”,duration: 1000,customClass: ...原创 2020-06-19 16:40:10 · 74 阅读 · 0 评论 -
(css/js实现)鼠标 滑过/点击 显示隐藏详情
滑过.box { box-sizing:border-box; position:relative; margin:20px auto; width:200px; height:40px; line-height:40px; text-align:center; border:1px solid lightcoral; } .box .detail { display:none; posit...原创 2020-03-12 11:59:41 · 1447 阅读 · 0 评论 -
(js)选项卡
htmlcssjs功能没有实现,点的时候i=3解决办法一:自定义属性> 闭包解决办法es6 let解决方案原创 2020-03-13 15:49:44 · 96 阅读 · 0 评论