qq_41485537的博客

原创 vscode常用插件（自留）

原创 每日前端面试题repo

1.css的filter属性以下是原图：img{ filter: blur(3px); //模糊}img{ filter: brightness(30%); //调整图片亮度或者暗度}img{ filter: hue-rotate(320deg); //色相旋转}img{ filter: invert(100%); //曝光 }img{ filter: grayscale(100%) //灰色}2.不使用border，画出

原创 js判断设备（pc端、移动端）

设备信息：移动端：安卓手机自带浏览器：Linux aarch64，UC浏览器例外：Linux armv8l微信浏览器：Linux aarch64苹果手机：iphone部分Nokia、sony、samsung设备：SymbianOSpc端export function checkIsPc() { const { userAgent } = navigator; if (userAgent.match(/(Win32|Win16|WinCE|Mac68K|MacIntel|MacIntel

原创 js判断浏览器类型

在实际开发中，会碰到多种业务场景需要判断浏览器类型做不同处理，例如处理下载文件的二进制流，获取到文件名后进行解密 ， 火狐浏览器的处理与其他的不一样，所以需要进行判断是否为火狐浏览器，去做不同的解密处理一、封装方法目前只做浏览器判断，不做版本判断const kUserAgent = { Opera: 'Opera', FF: 'FF', Chrome: 'Chrome', Safari: 'Safari', IE: 'IE',};const getUserAgent = ()

原创 前端实现下拉框和树节点模糊查询

在实际开发中，部分模糊查询可由前端来实现，以下介绍下拉框和树节点场景第一步：安装pinyin-matchnpm install pinyin-match --save第二步：封装成公共方法const PinyinMatch = require('pinyin-match/dist/main.js');export function filterCommon(query: any, list: any, labelName = "label") { if (query) { retu

原创 前端常用数据处理方法

1.一个对象匹配另一个对象相同属性名的值, 不相同则不赋值const obj1 = { weather:'sun', day:'two', people：'3'}const obj2 = { weather:'', day:'',}const listAssign = (arrA:any, arrB:any) => Object.keys(arrA).forEach((key:any) => { arrA[key] = arrB[key] || arrA[key]

原创 上传下载功能

上传下载功能

原创 a标签disabled属性失效

之前写JQuery项目时遇到了a标签disabled属性失效的情况，给a标签设置一个pointer-events: none可以解决，或者去掉disabled属性，动态添加forbid-click类也ok.forbid-click { pointer-events: none; /*禁止触发点击事件*/ filter: alpha(opacity=50); /*IE滤镜，透明度50%*/ -moz-opacity: 0.5; /*Firefox私有，透明度50%

原创 前端实现在线预览文件

前置条件：后台返回的的ur需支持直接下载在utils文件夹封装统一的BASE64方法const _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";const BASE64 = { encode: function(input: string) { let output = ""; let chr1, chr2, chr3, enc1, enc2, enc3, enc4;

原创 vue3的新特性Teleport

近期项目业务模块较多，其中需点击首页侧边栏的菜单切换主要区域，由于大家负责侧边板块样式交互都不一样，因此使用到了传送门teleport示例：父页面<div id="side-catalog"></div>子页面<div>主区域</div><teleport to="#side-catalog"> <div>侧边</div></teleport>teleport标签将里面的元素挂载到其他的

原创 vue中关于多状态渲染列表数据

在utils文件里面根据后端返回的枚举值进行定义export const PROGRESS = { PENDING: 0, // 待处理 TO_BE_SENT: 1, // 待发送 SENDING: 2, // 传输中 SUCCESS: 3, // 已发送 CANCELED: 4, // 已取消 PAUSED: 5, // 已暂停 FAILED: 6, // 失败};*根据任务设置属性*export const PROGRESS_CONFIG

原创 使用sortablejs实现表格拖拽排序（控制可拖拽区域）

拖拽列表自定义排序需求比较简单，不涉及复杂操作，对符合要求数据进行拖拽更换数据顺序引入sortablejsnpm i sortablejs；import Sortable from "sortablejs"; //在所需文件引入即可代码演示 <el-table ref="tableRef" class="sort-box" :row-class-name="handleDragAllow" :default-sort="{prop: 'ex

原创 vue3.0中使用Element-plus 切换语言为中文

需求：el-calendar默认英文切换为中文如需修改星期为中文，需import ‘dayjs/locale/zh-cn’1.全局使用 2.局部使用