- 博客(62)
- 收藏
- 关注
RSS订阅原创 前端检测dom是否被遮盖
new IntersectionObserver(([change]) => { console.log(change); // 被覆盖就是false，反之true console.log(change.isVisible) }, { threshold: [1.0], delay: 1000, trackVisibility: true,}).observe(document.querySelector(".first"));
2022-03-17 20:36:38
1875
原创 虚拟列表渲染（不进行后台加载）
import { defineComponent, PropType, computed } from "vue";import "./style.less";import Service from "./virtual_list.service";export default defineComponent({ name: "VirtualList", props: { // 容器总高度 screenHeight: { type: Number,
2022-02-24 10:58:55
398
原创 css实现地图点位效果
<!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>Document&l
2021-11-12 11:10:20
650
原创 前端浏览本地文件（图片视频等）
引入文件的相对地址使用window.URL.createObjectURL方法。代码如下<!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,.
2021-11-01 14:57:58
2892
原创 js对象数组去重
const obj = {}; this.model.topics = this.model.topics.reduce((prev, item) => { obj[item.topic] ? "" : obj[item.topic] = true && prev.push(item); return prev; }, [] as Array<Topic>);
2021-10-11 17:08:49
102
原创 去除ie edge浏览器的 type = ”password“ 的输入框的默认图标
input::-ms-reveal { display: none; }input::-ms-clear { display: none; }input::-o-clear { display: none; }
2021-08-25 17:26:37
885
原创 前端rsa md5加密
下包npm install --save js-md5npm i jsencryptmd5使用md5(password)rsa使用 const rsaObj = new JsEncrypt(); // data 为后台提供的公钥 rsaObj.setPublicKey(data); const mPass = rsaObj.encrypt(password);配合使用 const rsaObj = new JsEncrypt(); rsaObj.setPubli
2021-08-25 10:39:40
313
原创 mockjs在vue中简单使用
安装npm install mockjs --save-dev建立mock.ts文件夹并导入mockjsimport Mock from "mockjs";import { login } from "./detailMock"; Mock.mock(/\/api\/xxx\/xxx\/xxx/ ,'post', login);其中login的代码部分export const login = (option: any) => { const { username } = JSO
2021-08-23 14:44:01
200
原创 前端短时间内拦截重复请求，并返回同一结果。
有个需求，页面加载有一个组件被加载上百次，这个组件内部会从接口拿数据，有相同的也有不同的。需要拦截这些请求，让相同参数的请求只发送一次，但所有组件都需要拿到数据。axios的处理重复请求，我只看到可以取消，并未统一返回。type User = { username: string; name: string;}class RequestStore { /** * 根据用户名获取用户信息 * @param username 用户名 */ getUserByUserNa
2021-08-13 17:22:47
883
原创 vue中使用Mqtt实现在线聊天
安装插件npm install mqtt --save、设置(后台帮助订阅topic)import { GlobalStore } from "@/store";import mqtt, { IConnectPacket, MqttClient, Packet } from "mqtt";import { computed } from "vue";export interface MqttMsgHander { (message: string): void;}export d
2021-07-19 10:14:10
962
原创 position: sticky
css position的值除了relative，absolute，fixed，static外多了一个粘性布局sticky。它的作用是在dom元素滚动到父元素外的时候可以念在某个位置，利用js也可以实现这个效果。 <style> .father { /* width: 100px; */ height: 50vh; border: 1px solid #ccc; overflow: auto; } .son {
2021-07-14 14:53:46
123
原创 前端大量重复请求
例如人员信息这样的组件，根据id获取信息， 可能一下会请求很多次数据， 前端需要处理 userRequest: Array<{ key: string, list: Array<any> }> = []; timer: null | number = null; result: Array<{ k: string, v: User }> = []; getUserByUsername(username: User["username"]) {
2021-07-09 11:31:46
982
原创 vue中下载图片跨域
首先在vue.config.js中配置跨域 '/upload': { //代理图片下载的接口 target: "http://resource.zhuyiyun.com", changeOrigin: true, secure: false, // 设置支持https协议的代理 pathRewrite: { '^/upload': '' } }由于项目中的请求是走的
2021-07-01 17:15:33
4480
2
原创 col 加起来为24的处理一次
eleList: Ref<Array<EleHandel>> = ref([]); // 统一处理col的高度 handelHeight() { // @ts-ignore const allCol = Array.from(document.querySelectorAll(".data-item-col")).map(ele => { const col = Array.from(ele.classList).filter(classN..
2021-06-21 17:00:36
192
原创 vue项目首屏加载动画
首先在index.html中做动画，由于拿不到dom元素。需要手动去创建let animateTimer; // 创建loading的盒子 function loadingBox() { const html = document.documentElement const loadBox = document.createElement("div"); loadBox.className = "first-loading" html.app
2021-06-09 13:53:49
1471
原创 clipboard复制服务器端数据
下载npm install clipboard --save导入包import Clipboard from "clipboard";使用中会遇到需要点击两次的情况是因为需要实例化一次， 在此我选择手动触发一次实现 const ele = document.querySelector(`#copy${phone}`); if (!this.departModal.clickFlag) { this.departModal.clickFlag = true;
2021-06-04 09:50:15
133
原创 前端vue华为obs使用
下载obs的browser.js在public的index.html中引入js包<script src="./esdk.js"></script>请求获取公钥私钥地址创建实例 const obs = new ObsClient({ access_key_id: res.ak, secret_access_key: res.sk, server: `https://${res.endPoint}` })发送请
2021-05-12 15:31:58
2759
8
原创 防抖节流
防抖事件触发单位时间后做处理， 单位时间内再次触发，重新计算时间 douChange() { if (this.modal.time1) clearTimeout(this.modal.time1); this.modal.time1 = setTimeout(() => { console.log("gogogo") }, 3000) }节流在单位时间只触发一次 liuChange() { if (!this.modal.flag)
2021-05-07 17:44:06
74
原创 去除win10图标小箭头
去除， bat文件reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Shell Icons" /v 29 /d "%systemroot%\system32\imageres.dll,197" /t reg_sz /ftaskkill /f /im explorer.exeattrib -s -r -h "%userprofile%\AppData\Local\iconcache.db"del
2021-01-30 17:04:21
156
原创 监听页面元素大小改变
// @ts-ignore const resizeObserver = new ResizeObserver(ele => { console.log(ele.target.style) service.widget.height = ele[0].target.style.height; }) watch( () => service.widget.multiRow, (multiRow) => { ...
2021-01-22 13:43:08
618
原创 css滚动条设置
&::-webkit-scrollbar { width: 10px; height: 8px; } // 滚动条框框背景 &::-webkit-scrollbar-track { background: @aside-background; border-radius: @box-radio; } // 滚动条条条背景 &::-webkit-scrollbar-thumb {...
2021-01-11 15:41:05
200
原创 求对象数组的差集
const a = [{ id: 1, name: "renyu" }, { id: 2, name: "renyu" }] const b = [{ id: 4, name: "renyu" }] const result = a.filter(item => { const flag = b.some(data => { return data.id === item.id }) if (!flag) { return item..
2021-01-11 14:24:07
203
原创 社区版ag-grid使用
安装：npm install --save ag-grid-community提供表格盒子 <div id="myGrid" class="grid-table ag-theme-alpine" style="height: 150px; width: 1648px" />引入样式，和初始化表格方法import "ag-grid-community/dist/styles/ag-grid.css";import "ag-grid-community/dist/
2020-12-21 11:44:31
1535
原创 vex-table for vue3的使用
安装npm install xe-utils vxe-table@next在main.js中导入import 'xe-utils'import VXETable from 'vxe-table'import 'vxe-table/lib/style.css'const app = createApp(App)app.use(VXETable)使用 <vxe-table :data="demo1.tableData"> <vxe-table-column
2020-11-18 16:44:25
2058
1
原创 统一导出某种特定文件
const formIconsFiles = require.context(“…/…/…/…/assets/svg/form/grid”,false,/.svg$/);const draggableSettingMap: Record<string, any> = {};formIconsFiles.keys().forEach(key => {const iconKey = key.substring(2, key.length - 4);draggableSettin
2020-11-06 14:58:31
159
原创 在vue3中动态切换ant-design-vue主题
1:首先安装babel-plugin-importnpm add babel-plugin-import --dev2：在babel.config.js中添加配置plugins: [ [ "import", { libraryName: "ant-design-vue", libraryDirectory: "es", style: true } ] ]babel.config.jsmodule.exports = { presets: ["@vue/cli-plugin-babel/pr
2020-09-21 14:11:34
3157
1
原创 vue3深度监听ref值的变化
watch( () => userRecover.value, (userRecover, prevuserRecover) => { console.log(userRecover); console.log(prevuserRecover); }, { deep: true } )
2020-09-16 15:45:22
8109
1
原创 vue3语法
vue3的语法。import { reactive, toRefs } from 'vue';属性跟方法定义在setup函数中,但是都需要return出去，setup函数的执行时机是beforecreate跟created之间，获取数据，可以在setup中定义，并直接执行。 setup() { const state = reactive({ areaList: [], controlList: [], areaNum: [], }); c
2020-08-10 16:34:22
3789
原创 面向对象同事交流
面向对象什么是面向对象说到面向对象的概念，就不得不提到面向过程。在计算机发展初期，编程人员在编写代码的时候，考虑的是如何处理事件。例如开饭店的一天，我们需要买菜、洗菜、炒菜、招待···。面向过程的思维就是从买菜开始，我注意的就是买菜这件事，洗菜的时候我注意的又是洗菜的事情，我们注重的是正在发生的事情。在写代码的时候体现在为了做到某件事情，我们编写合适的方法去处理得到结果。然后处理下一个。平时我就是这么干的，教练提到这样的思维更加贴近机器的思维，亲力亲为的拿到问题，分析问题，处理问题。但是问题来了，某一
2020-08-05 20:13:31
156
原创 搭建vue3项目
写于八月一日：首先升级vue脚手架至4.5.0npm install vue-cli@next -g其次就可以使用脚手架搭建vue3的项目，选择的时候需要选中Choose Vue version，如何就如同vue2的项目一样选择以及搭建。
2020-08-03 14:59:22
151
原创 typescript中获取对象属性失败的解决方法
在书写typescript的过程中，用js的方式去调用对象的属性obj.name发现并不能成功，错误为Property ‘name’ does not exist on type ‘object’。解决这个错误可以通过1：设置obj对象为any let a:any = item a.name 2：使用断言强制执行(item as any).name3：通过接口定义对象所具有的属性var obj: obj = Object.create(null);obj.name=
2020-08-03 11:44:41
2801
1
原创 git操作
git init 初始化gtigit remote add origin ### 往已经建好的仓库里建立连接git push -u origin master 提交初始化代码git clone ##### 下载代码git add . 提交所有修改文件 也可以暂存某个据体的文件git add auth.htmlgit commit - m ‘提交到本地仓库’git push 提交到远程仓库git pull 从仓库拉取代码git status 查看状态git branch 查看分支gi
2020-08-02 18:07:06
76
原创 尝试vue3的学习。
2020-7-29日目前创建vue3项目有几种方式，其中较为流行的是在vue2项目中下载导入vue3的composition api。并在main.js中导入api并使用，下载代码如下：npm install @vue/composition-api --save引用如下：import vueComponsition from '@vue/composition-api'Vue.use(vueComponsition)之后我们就可以基于vue2的项目尝试vue3的语法特性。第二种是在创建的
2020-07-29 15:07:18
527
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人