- 博客(162)
- 收藏
- 关注
RSS订阅原创 用js手动写一个纵向滚动条
业务场景：由于通过css无法改动ios设备的滚动条样式，所以这里采取用js手动写一个纵向滚动条功能：实现滚动的时候出现滚动条，停止滚动，滚动条消失，示例代码如下：
2023-11-30 17:53:36
1192
原创 如何解决安卓手机无法预览pdf文件而是需要直接下载的问题
4、在业务组件跳转到pdfH5组件。3、在路由文件引入pfdH5组件。2、构建一个pdhH5组件。1、安装pdfh5插件。
2023-11-22 16:14:46
1591
原创 实现一个简单的瀑布流列表
*思路：**利用flex布局，将列表分为左右两侧，因为这种方式存在一个弊端，就是当有一侧的高度越来越高的时候，滑到底部的时候就会出现一个很明显的高度差，为了修复这个漏洞，写一个算法，计算每一页两侧列表的高度差，举个例子，当左侧高度比右侧高很多的时候，则把下一页列表的第一个数据放在右侧，补齐高度，反之同理；如果数据是无限滚动加载不会滑动到底部的话，则可以不做处理；
2023-11-13 16:10:44
249
原创 如何灵活实现文本或图片的展开收起功能？
首先要根据内容的高度是否超过指定高度来判断展开按钮显示与否，所以需要先获取dom元素，以及元素的高度，由于页面渲染需要时间，所以在获取元素高度这里需要加一个延时；然后因为图片渲染的时间要比文本更长，尤其是有很多张图片的情况下，所以在判断内容有图片的情况下，需要在图片的onload事件里执行获取元素的高度，也就是在图片渲染完成以后再去获取元素的高度；由于加了延时以后，图片会有一个先展开了全部然后突然被收起的动作，用户体验很不好，所以在这里加了一个骨架屏起到一个隐藏渲染过程的效果。
2023-11-02 14:53:18
399
原创 vue3实现一个滚动分页加载瀑布流列表
项目框架：vue3+JS+vite瀑布流框架：vue-waterfall-next问了chatGPT，对于vue3有哪些好用的瀑布流插件，回答如下：对于 Vue 3，有一些瀑布流插件可供选择。以下是几个常用的 Vue 3 瀑布流插件：vue-waterfall-next：这是一个基于 Vue 3 的瀑布流插件，它提供了简单易用的 API，可以帮助你实现瀑布流布局。它支持动态加载数据和无限滚动，并且具有自定义配置选项，如列数、间距等。vue-masonry-wall：这是一个基于 Vue 3 的瀑布流
2023-10-27 17:07:45
2576
2
原创 vue3+element-plus props中的变量使用 v-model 报错
prop 是单向数据流，这里只能用:model-value，不能用v-model。// 控制弹出框的显示与隐藏。
2023-10-15 19:13:15
770
1
原创 JS实现瀑布流页面布局
每列的宽度相等而高度不等，且第二行的第一个容器需要放在第一行高度最小的容器下面，依次类推放置。代码仅实现了瀑布流的布局方式和 resize 监听，如果大家有需要，可以自己拓展下：实现监听滚动事件，页面滚动加载图片的功能。代码中写了详细注释，可以直接使用。实现效果如下：
2023-09-15 13:18:46
85
原创 使用js控制文字大小自动适应div不换行，div中文字字号自动调整大小以适应固定宽度
* 隐藏溢出的内容 *//* 初始字体大小 *//* 禁止文字换行 */
2023-09-08 22:41:14
539
原创 vite打包后的项目在有的浏览器上报错globalThis is not defined
【代码】vite打包后的项目在有的浏览器上报错globalThis is not defined。
2023-04-11 11:39:56
1380
1
原创 前端加密，后端解密（用RSA和AES256双重加密）
7、服务器端收到key_str用RSA2048私钥解密key_str得到AES256密钥，然后用AES256密钥解密sec_text获得请求数据。4、前端发请求的时候random一个AES256的key，然后用RSA2048公钥加密Key生成key_str。5、前端发的请求体用AES256key整个加密生成sec_text。6、前端发请求的时候将key_str放入请求头（或者请求体也可以）3、后端RSA2048私钥写到配置文件中。2、前端写死RSA2048公钥。
2023-04-07 10:25:40
2077
2
原创 前端开发环境配置搭建
npm存储包文件的服务器在国外，有时候会被抢，速度很慢，所以我们需要解决这个问题，国内淘宝的开发团队把npm在国内做了一个备份，网址是：http://npm.taobao.org/，复制下面两句话到nvm的安装目录（C:\Users\XXXX\AppData\Roaming\nvm）下的settings.txt的最后。配置到淘宝服务器：npm config set registry https://registry.npm.taobao.org。nvm list：查看当前安装的Node.js所有版本。
2023-03-27 20:42:21
458
原创 如何将自己的本地项目上传到GitHub并且能通过链接访问
1、找到本地项目所在目录，git bash here，打开git终端。2、按照这些命令去执行。
2023-03-27 10:46:14
436
原创 在vscode终端上无法运行ts文件解决方案
用管理员身份打开powershell,输入命令：set-ExecutionPolicy RemoteSigned，然后输入Y选择是。
2023-01-03 19:00:49
581
原创 react脚手架搭建项目文件
reportWebVitals.js ------- 页面性能分析文件（需要web-vitals库的支持）setupTest.js ------组件单元测试的文件（需要jest-dom库的支持）manifest.json -------应用加壳的配置文件。robot.txt -------爬虫协议文件。index.html ------主页面。logo.svg ------logo图。index.js ------入口文件。App.js ------App组件。index.css ------样式。
2022-09-12 15:36:50
69
原创 react 生命周期
4.componentDidMount()-=====>常用-----一般在这个钩子做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息。2.更新阶段：由组件内部 this.setsate() 或父组件render触发。2.更新阶段：由组件内部 this.setsate() 或父组件render触发。1.初始化阶段：由ReactDoM.render(）触发—初次渲染。1.初始化阶段：由ReactDoM.render(）触发—初次渲染。
2022-09-12 11:22:16
237
原创 高阶函数 &&函数柯里化
常见的高阶函数有：Promise,setTimeout,arr.map()等等。通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码方式。2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2022-09-04 17:48:42
82
原创 react创建类式组件&&state用法
1.创建类必须要继承React.Component。2.里面必须有一个render函数，且必须有返回值。
2022-09-03 19:41:17
100
原创 vue中使用el-table组件checkbox进行分页多选，回显、切换分页记住上一页所勾选和取消的选项
vue中使用el-table组件checkbox进行分页多选，回显、切换分页记住上一页所勾选和取消的选项
2022-07-14 13:46:31
984
原创 ES6的空值合并运算符和可选链
ES6的空值合并运算符：//ES5写法if(value !== null && value !== undefined && value !== ''){ //...}//ES6写法if((value??'') !== ''){ //...}es6可选链：//ES5写法const name = obj && obj.name//ES6写法const name = obj?.name...
2022-05-09 23:04:52
133
原创 vue混入mixins时注意的问题
mixin.js - 方式一：导出对象：const mixin = { mounted () { console.log('eeeeeeeeee') }, methods: { }}export { mixin }使用时，就应该使用对象的方式导入，即：{ mixin }import { mixin } from './mixins/mixin.js'export default { mixins: [mixin]}mixin.js - 方式二：导出变量c
2022-05-07 00:38:21
323
原创 关于以逗号分隔的字符串和数组的互相转换以及map的使用
//以逗号分隔的字符串转数组let stringA = '1,2,3,4'let arrA = [];arrA = stringA .split();//输出arrA:[1,2,3,4]//数组转换为以逗号分隔的字符串let arrB = [1,2,3,4];let stringB = '';stringB = arrB.join();//输出stringB :'1,2,3,4'...
2022-04-27 15:37:01
651
原创 在js函数有默认参数情况下如何增加自定义参数而不覆盖原本的默认参数
<el-uploadname="file":action="uploadUrl":on-success=" ($event) => uploadEduSuccess(item, $event)":on-error="uploadError"> </el-upload>uploadEduSuccess(item, response) { console.log("--------item", response, item);},
2022-04-26 16:41:51
696
原创 vue el-select可多选可单选 选择全部后不能选择其他；其他可多选
<el-select size="middle" clearable v-model="form.ground" @change="handlePlat" placeholder="请选择小组" filterable multiple style="width: 400px;"> <el-option label="全部" value="全部"></el-option> <el-option v-for="(item, index) in groundL
2022-04-26 13:09:54
139
原创 vue如何实现水平方向拖拽容器改变宽度
1.定义一个指令方法：Vue.directive('horizontalDrag', { bind: function (el, binding) { const dragbar = el.querySelector('.dragbar'); dragbar.onmousedown = e => { const disX = el.offsetLeft; console.log('disX:', disX);
2022-04-19 16:42:11
558
原创 vue如何实现垂直方向拖拽容器改变高度
1.定义一个指令方法：Vue.directive('drag-log', { bind(el, binding) { const dragbar = el.querySelector('.dragbar') dragbar.onmousedown = (e) => { if (e.target.classList.contains('header')) return; // if (!e.altKey) retu
2022-04-19 16:33:25
915
原创 Vue常用的插件合集
1.代码优化：《代码整洁之道》2.Vue常用的插件合集：element-饿了么出品的 Vue2的web UI工具套件Vux - 基于Vue和WeU的组件库mint-ui - Vue2的移动UI元素iview - 基于Vuejs的开源UI组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue2 建立精美的app应用muse-ui - 三端样式一致的响应式UI库vuetify - 为移动而生的Vue JS 2组件框架vonic -
2022-04-07 09:57:32
202
原创 vue一个界面有两个form表单如何进行校验
<template> <div style="width: 500px; margin: 0 auto"> <el-form :model="ruleFormA" :rules="rules" ref="ruleFormA"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleFormA.name"&
2022-03-29 14:36:14
3885
原创 纯前端实现页面的回到顶部和回到底部功能
方法一：使用element ui的回到顶部组件实现回到顶部功能：<template> <div class="wraper"> <template> Scroll down to see the bottom-right button. <el-backtop target=".wraper"> <div st
2022-03-26 12:05:02
2410
原创 如何在浏览器关闭之前处理一些逻辑
vue项目中，需要在浏览器关闭之前调一个后端接口解决方案：在main.js文件中写下以下代码：window.onbeforeunload = function (e) { navigator.sendBeacon('url',data) //url为接口地址，接口地址中无需带域名和端口号，data 参数是将要发送的 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据，如果没有，可以写一个空字符串}
2022-03-10 16:08:48
1460
1
原创 在main.js中封装vue事件总线方法
let evtbusVm = new Vue();window.vebEmit = function (evtName, evtVal) { evtbusVm.$emit(evtName,evtVal);}window.vebOn = function (evtName, cb) { evtbusVm.$on(evtName, (evtData) => { cb && cb(evtDatta); })}window.vgOff = function (ev
2021-12-22 17:26:25
176
原创 关于el-input的远程搜索
<el-autocomplete v-model="keyword" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect" @input="search" :trigger-on-focus="false"> <el-button @click="gotoSearch"></el-button></el-autocomplete
2021-12-22 17:20:20
1408
原创 如何给一个元素加上右边框线
【注】由于border-right属性容易受影响，所以这里用伪类实现.border-class { position:relative;}.border-class::after { content: ""; position: absolute; top: 0; bottom:0; right: 0; width: 3px; backfround: #0a63f1}
2021-12-22 17:04:12
189
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人