- 博客(13)
- 收藏
- 关注
原创 每日前端面试题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,画出
2022-05-09 14:10:45
176
原创 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
2022-05-06 10:54:57
599
原创 js判断浏览器类型
在实际开发中,会碰到多种业务场景需要判断浏览器类型做不同处理,例如处理下载文件的二进制流,获取到文件名后进行解密 , 火狐浏览器的处理与其他的不一样,所以需要进行判断是否为火狐浏览器,去做不同的解密处理一、封装方法目前只做浏览器判断,不做版本判断const kUserAgent = { Opera: 'Opera', FF: 'FF', Chrome: 'Chrome', Safari: 'Safari', IE: 'IE',};const getUserAgent = ()
2022-05-06 10:19:44
2034
原创 前端实现下拉框和树节点模糊查询
在实际开发中,部分模糊查询可由前端来实现,以下介绍下拉框和树节点场景第一步:安装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
2022-05-05 18:01:32
1116
原创 前端常用数据处理方法
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]
2022-04-29 21:14:04
2731
原创 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%
2022-04-01 14:19:30
2935
原创 前端实现在线预览文件
前置条件:后台返回的的ur需支持直接下载在utils文件夹封装统一的BASE64方法const _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";const BASE64 = { encode: function(input: string) { let output = ""; let chr1, chr2, chr3, enc1, enc2, enc3, enc4;
2022-04-01 11:06:28
586
原创 vue3的新特性Teleport
近期项目业务模块较多,其中需点击首页侧边栏的菜单切换主要区域,由于大家负责侧边板块样式交互都不一样,因此使用到了传送门teleport示例:父页面<div id="side-catalog"></div>子页面<div>主区域</div><teleport to="#side-catalog"> <div>侧边</div></teleport>teleport标签将里面的元素挂载到其他的
2022-04-01 10:50:26
881
原创 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
2022-03-31 16:45:50
935
原创 使用sortablejs实现表格拖拽排序(控制可拖拽区域)
拖拽列表自定义排序需求比较简单,不涉及复杂操作,对符合要求数据进行拖拽更换数据顺序引入sortablejsnpm i sortablejs;import Sortable from "sortablejs"; //在所需文件引入即可代码演示 <el-table ref="tableRef" class="sort-box" :row-class-name="handleDragAllow" :default-sort="{prop: 'ex
2022-03-31 16:16:58
4971
原创 vue3.0中使用Element-plus 切换语言为中文
需求:el-calendar默认英文切换为中文如需修改星期为中文,需import ‘dayjs/locale/zh-cn’1.全局使用 2.局部使用
2021-10-11 15:02:01
1089
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人