- 博客(95)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 学习TS的基础知识，个人总结，附带栗子（二）
接口让我们继续扩展这个示例应用。这里我们使用接口来描述一个拥有 firstName 和 lastName 字段的对象。 在 TypeScript 里，只在两个类型内部的结构兼容，那么这两个类型就是兼容的。 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements 语句。interface Person { firstName: string lastName: string}function greeter (person: Person) {
2021-12-28 17:13:22
281
原创 学习TS的基础知识，个人总结，附带栗子（一）
初识 TypeScriptTypeScript 作为 JavaScript 语言的超级，它为 JavaScript 添加了可选择的类型标注，大大增强了代码的可读性和可维护性。同时，它提供最新和不断发展的 JavaScript 特性，能让我们建立更健壮的组件。TypeScript 的特点TypeScript 主要有 3 大特点：始于JavaScript，归于JavaScriptTypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js
2021-12-28 17:11:20
340
原创 Vue3+Element Plue+Ts实现表单的基础搜索、重置等功能
从Vue2的写法转变为Vue3的格式之后，会有一些写法和代码结构的改变，这里对一些重点进行介绍。代码结构：写法一(推荐)：<script setup lang="ts">import { ref, reactive } from 'vue'import type { ElForm } from 'element-plus'const myform = ref<InstanceType<typeof ElForm>>()const formData = .
2021-12-20 19:28:13
3222
1
原创 使用谷歌浏览器的speechSynthesis的API，实现语音播报功能
测试实现效果：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title></title></head><body> <button onclick='playRadio()' id="played">播报语音</button> <button onclick='pauseRadi
2021-10-30 17:26:11
2024
2
原创 Vue3后台项目实现一键全屏缩放功能
今天分享使用screenfull实现全屏功能！效果图全屏前全屏后第一步安装 screenfull$ npm install screenfull第二步封装screenfull，用户体验更好<!-- * @Author: your name * @Date: 2021-10-28 19:31:51 * @LastEditTime: 2021-10-28 19:56:25 * @LastEditors: Please set LastEditors * @Descri.
2021-10-28 20:04:30
622
原创 使用el-upload上传图片，改造预览功能
今天给大家介绍一下在使用Element的el-upload上传图片的过程中，改造原有的预览功能。官网预览效果图：改造之后的预览效果：区别如下官网的预览效果，只能单纯预览当前图片改造之后，可以对预览图片进行放大、缩小、旋转、下一张等操作实现代码<el-upload action="#" multiple list-type="picture-card" :class="{'is-not-allow-access':picIDListCount>
2021-10-24 18:18:25
5059
3
原创 Vue中样式绑定的多种用法
今天给大家介绍一下Vue中样式绑定的多种用法样式如下：<style> .red { color: red; } .green { color: green; } </style><script> const app = Vue.createApp({ data() { return { // 字符串写法 classString: 'red', .
2021-10-21 10:59:33
160
原创 Vue事件修饰符和按键修饰符用法总结
今天给大家介绍Vue的事件修饰符、按键修饰符 、 鼠标修饰符！事件修饰符stop 阻止事件继续传播 <div @click.stop="handleClick">hello word</div>prevent 阻止标签默认行为 <div @click.prevent="handleClick">hello word</div>capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
2021-10-20 17:46:34
461
原创 new FormData()的使用及问题记录
创建一个formData对象var formData = new FormData();往formData里面添加数据formData.append("username", "Groucho");获取formData里面的数据formData.get("username");删除formData里面的某个key值formData.delete('username')获取formData里面的所有数据在控制台打印formData是看不到的。因为外界访问不到，你使用append方法后，
2021-10-11 15:06:30
1714
1
原创 深入浅出的说出对Promises的理解
Promises/A+ 规范作为 Modern JavaScript 基础设施的一部分，Promises 对前端开发者而言异常重要。它是 async/await 语法的基础，是 JavaScript 中处理异步的标准形式。并且，未来的 Web API，只要是异步的，都会以 Promises 的形式出现。如果不理解 Promises 相关的知识和运行机制，将来可能无法完成 Web 开发的日常工作。因此，Promises 成为了前端面试中的必问问题之一。在网络上，也可以搜索到很多 Promises
2021-09-25 00:51:21
91
原创 Vue 3 Composition API 及 Demo
一、前奏1、组合APIsetup函数是组合API的入口函数setup() { // 定义一个名称叫count变量， 这个变量的初始值为0 // 这个变量发生改变后， Vue会自动更新UI let count = ref(0) // 在组合API中， 如果想定义方法， 不用定义到methods中， 直接定义即可 function myFn() { alert(123); } //在组合API 中定义的变量/方法，要想在外界使用， 必须通过return {xx,xx
2021-09-25 00:48:22
455
原创 检查JavaScript对象上是否存在某一个属性？
在JavaScript中，有几种方法可以检查对象上是否存在一个属性。选择哪种方法在很大程度上取决于实际需求，所以需要我们了解每种方法的工作原理。让我们来看看最常用的几种方法。1. 用undefined判断自有属性和继承属性均可判断。var o={x:1};o.x!==undefined; //trueo.y!==undefined; //falseo.toString!==undefined //true2. in 操作符如果一个属性存在于一个对象或其原.
2021-09-16 15:39:56
4524
原创 在AntD的table里面实现点击按钮跳转路由
在AntD的table组件的操作栏里面，实现点击按钮跳转到路由指定路由，并携带参数第一种// 引入import { useHistory } from "react-router-dom";// 处理逻辑let history = useHistory();const onDetail = (row: ITableNode) => { let id: string = row.key history.push(`/havePowerDetail/${id}`) }{.
2021-09-09 15:36:00
2155
原创 常用的JS格式化函数，手机号和身份证号脱敏处理等
以下为一些常用的格式化函数，建议收藏备用！隐藏手机号中间4位 // 隐藏手机号中间4位 formatPhone(phone) { phone += ''; return phone.replace(/(\d{3})\d*(\d{4})/g, '$1***$2') }, 隐藏身份证号中11位 // 隐藏身份证号中11位 formatIdentity(number) { number += ''; .
2021-09-07 21:57:11
915
原创 移动端Web页面适配方案（附完整代码）
移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。代码如下：(function (window, document) { // 给hotcss开辟个命名空间 const hotcss = {} ; (function () { // 根据devicePixelRatio自定计算scale // 可以有效解决移动端1px这个世纪难.
2021-09-06 16:27:32
1083
原创 如何在项目中使用pdf.js查看PDF文件
最近在做后台管理类的系统，需要在web页面阅读pdf文件。发现一个很好用的插件 pdf.js，简单的介绍一下官方文档地址：http://mozilla.github.io/pdf.js/在线演示地址：http://mozilla.github.com/pdf.js/web/viewer.html介绍一下官网的例子页面引入pdf.js使用PDFJS.getDocument(‘helloworld.pdf’)方式加载要打开的PDF文件通过Promise的then方式处理后续的方法PDFJ
2021-08-29 17:00:05
2150
1
原创 TypeScript:比较Interface和Type
如果你用过TypeScript，一定接触过Interface和Type 。5秒钟思考一下，他俩有什么相同和不同？如果你对他们的不同一无所知，那么请继续往下看。如果我们声明一个Point类型，可以通过以下两种方式都会达到我们想要的结果：interface Point { x: number; y: number;}或者type Point = { x: number; y: number;}上面的列子没有表现出 interface和 type 之间的不同。让我们进一步
2021-08-29 16:51:02
257
原创 快速搭建 TypeScript 学习开发环境
TypeScript前言之前一直使用的Vue技术栈，在一个大型无代码平台的业务项目中使用过TypeScript，当时感觉很不好用，之后一直不想在业务项目中使用TypeScript直到最近创建了一个React+TS项目，才深刻体会到用TypeScript写业务代码真TMD爽，之前在Vue项目中完全没有体会到TS这么好用。JavaScript代码只有在运行时(runtime)才能发现错误，言外之意把项目跑起来，查看浏览器中效果不对或者控制台报错了，才能发现错误。TypeScript在你写代码的过程
2021-08-29 16:42:28
765
原创 为什么推荐使用hooks,它有什么好处？
1. Hook 用来解决什么问题一句话，Hook 是用来让我们更好地复用 React 状态逻辑代码的。注意这里说的不是模板代码，模板代码可以用组件来复用；而单纯的状态逻辑代码没法用组件复用有的同学可能会说，普通的函数不就可以实现逻辑代码复用吗？答案是：普通的函数可以复用逻辑代码，但是没法复用带状态的逻辑代码。什么是React的状态？举个例子：const Comp = () => { const [id, setId] = useState(0) const [assets, s
2021-08-29 12:26:58
3249
1
原创 使用GraphQL实现递归查询
问题描述最近遇到了一个场景，想创建一个 GraphQL 查询，该查询可以递归调用类型的子项。就像一个棵树(Tree)，数据中有孩子，孩子可能还有孩子，深度不确定。结构如下：type Menu { id:ID; parentId:String; name:String; createTime:String; updateTime:String #子类也是Menu类型 children:Menu[] }如果可以确定 层级深度，,这里假设深度为 3，我们可以这样写GraphQ
2021-08-29 12:09:15
933
2
原创 手把手教你如何配置Babel系列(一)
目标本文的目的是帮助对Babel不熟悉的人了解 如何书写Babel的配置文件，设计一个“最完美”的 Polyfill 方案由于内容比较多，我会把下面的目录中的内容分成四个章节去讲解第一章节什么是Babel插件和预设配置文件简单Demo演示第二章节什么是core-js？第三章节什么是Polyfill？@babel/polyfill介绍@babel/preset-env实战第四个章节@babel/runtime实战@babel/plugin-transform-r.
2021-07-21 11:10:38
2370
原创 webpack4中hash、chunkhash、contenthash区别！
网站响应速度是用户体验的第一要素，其重要性不言而喻。响应速度受很多因素影响，比如不同的业务场景，不同的用户终端，不同的技术栈。为了获得更快的响应速度，一方面期望每次请求页面资源时，获得的都是最新的资源；另一方面期望在资源没有发生变化时，能够复用缓存以此来提高页面加载速度。使用文件名+文件哈希值 的方式，就可以实现只要通过文件名，就可以区分资源是否有更新。而webpack就内置了hash计算方法，对生成文件的可以在输出文件中添加hash字段先了解一下 webpack中hash、chunkhash、c.
2021-07-20 15:19:20
964
2
原创 借助axios的拦截器实现Vue.js中登陆状态校验的思路
在做Vue中的登陆校验时，思路应该是这样的：先确定一个路由页面是否需要登陆才能访问，如果需要，就需要用户登陆，如果不需要，用户直接可以访问。那么，首先来说，后台系统中，不一定每一个页面都要进行登陆权限，所以我们要通过路由的meta标签对需要做校验的路由页面做好标记，在配置路由时，我们可以在meta属性中，加入是否需要登陆的字段，如果requireAuth是true，就说明这条路由需要登陆才能访问：{ path: '/userInfo', name: 'userInfo', meta: ..
2021-07-19 18:43:30
310
2
原创 为什么Vue中的slot不能应用v-show指令
今天偶然发现，在Vue中使用插槽slot，是无法通过v-show控制slot的显示的，来看代码Vue.component('fade', { props: ['show'], template: ` <transition @before-enter="handleBeforeEnter" @enter="handleEnter"> <slot v-show="show"></slot> <
2021-07-19 18:39:05
912
原创 Vue中如何使用null去避免空的class
使用Vue时候， 给class动态绑定类名的时候，如果传入了一个 ’ ’ (空的字符串)，可能导致DOM输出一个空的class。通过三元表达式，用null代替 ’ ’ ，将不会生成一个空的class。<!-- 不建议 --><div :class="isBold ? 'bold' : ''"></div><!-- <div class> --><!-- 推荐写法 --><div：class ="isBold？..
2021-07-19 14:36:17
307
1
原创 Vue使用自定义指令实现页面图片懒加载功能
Vue使用自定义指令实现页面图片懒加载功能项目场景实现思路实现效果实现代码项目场景当我们向下滚动的时候图片资源才被请求到，这也就是我们本次要实现的效果，进入页面的时候，只请求可视区域的图片资源这也就是懒加载。比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。这个功能非常常见，你打开淘宝的首页，向下滚动，就会看到会有图片不断的加载；你在百度中搜索图片，结果肯定成千上万条，不可能所有的都一下子加载出来的，很重要.
2021-06-03 15:41:04
708
1
原创 Vue使用自定义指令实现按钮在区域内任意拖拽移动
Vue使用自定义指令实现按钮在区域内任意拖拽移动项目场景实现思路实现效果实现代码项目场景实现一个按钮，然后这个按钮可以在页面范围内，被拖拽到任意位置。实现思路实现父子两个div，并且设置需要拖拽的子元素为相对定位，其父元素为绝对定位当鼠标按下(onmousedown)时，记录此时目标元素当前的 left 和 top 值在鼠标移动(onmousemove)的过程中，计算每次移动的横向距离和纵向距离的变化值，然后实时并改变元素的 left 和 top 值最后，鼠标松开(onmouseup)时.
2021-06-02 18:41:48
2108
3
原创 Vue使用自定义指令实现页面底部加水印功能
Vue使用自定义指令实现页面底部加水印功能项目场景实现思路实现效果实现代码项目场景给项目的整个背景加上自定义水印，可以改变水印的文案和字体颜色等实现思路这里使用的技术主要是canvas,在实现水印的过程中，通过canvas 特性生成 base64 格式的图片文件使用 canvas 特性生成 base64 格式的图片文件，然后设置其字体大小，颜色等最后将其设置为背景图片，这就实现了页面的水印效果实现效果实现代码<template> <div> &l.
2021-06-02 17:54:38
521
1
原创 Vue使用自定义指令实现按钮防抖功能，防止多次调接口
Vue使用自定义指令实现按钮长按提示功能，超简单！项目场景实现思路实现效果实现代码项目场景需求：实现长按，用户需要按下并按住按钮几秒钟，触发相应的事件实现思路创建一个计时器，2 秒后执行函数 当用户按下按钮时触发 mousedown 事件，启动计时器；用户松开按钮时调用 mouseout事件如果 mouseup 事件 2 秒内被触发，就清除计时器，当作一个普通的点击事件如果计时器没有在 2 秒内清除，则判定为一次长按，可以执行关联的函数。在移动端要考虑 touchstart，touche.
2021-06-02 17:36:09
1371
1
原创 Vue使用自定义指令实现按钮长按提示功能，超简单！
Vue使用自定义指令实现按钮长按提示功能，超简单！项目场景实现思路实现效果实现代码项目场景需求：实现长按，用户需要按下并按住按钮几秒钟，触发相应的事件实现思路创建一个计时器，2 秒后执行函数 当用户按下按钮时触发 mousedown 事件，启动计时器；用户松开按钮时调用 mouseout事件如果 mouseup 事件 2 秒内被触发，就清除计时器，当作一个普通的点击事件如果计时器没有在 2 秒内清除，则判定为一次长按，可以执行关联的函数。在移动端要考虑 touchstart，touche.
2021-06-02 16:07:42
1329
5
原创 Vue使用自定义指令实现点击复制功能，超简单！
Vue使用自定义指令实现点击复制功能，超简单！项目场景实现思路实现效果实现代码项目场景需求：实现一键复制文本内容，用于鼠标右键粘贴。实现思路动态创建 textarea 标签，并设置 readOnly 属性及移出可视区域将要复制的值赋给 textarea 标签的 value 属性，并插入到 body选中值 textarea 并复制将 body 中插入的 textarea 移除在第一次调用时绑定事件，在解绑时移除事件实现效果实现代码<template> <di.
2021-06-02 15:54:15
688
原创 使用Chrome插件搭建本地的临时服务器，快速上手！
一秒变http服务器，轻松传资源，解决以下三个问题：静态网站文件列表下载其他设备可以拖动上传文件临时服务器用处很大呀，比如临时上传下载个文件、看一张照片、播放一段视频等等。Web Server for Chrome 就能实现，只需要运行以后，打开 Web Server：第一步：打开Chrome网上应用商店地址：https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlo
2021-05-25 22:11:56
1652
1
原创 前后端如何解决跨域问题
解决跨域问题什么情况下会跨域前端解决跨域后端解决跨域什么情况下会跨域同源策略同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。参数原因：由 Netscape 公司 1995 年引入浏览器，它是浏览器最核心也最基本的安全功能，现在所有支持 JavaScript 的浏览器都会使用这个策略。如果缺少了同源策略，浏览器很容易受到 XSS、 CSFR 等攻击。跨域跨域就是
2021-05-17 11:09:04
1515
原创 TS之类型推论、联合类型、类型断言
类型推论 - type inference// 先把str赋值为string，TS就默认str为string类型let str = 'str'// 再将str赋值为number会报错，因为TS认为它已经是string类型str = 123联合类型 - union types// 我们只需要用中竖线来分割两个let numberOrString: number | string // 当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有.
2021-05-16 23:38:51
533
原创 Vue.js实现动态修改页面的标题
业务需求，进入页面的时候，网页有个默认标题，加载的网页内容不同时，标题需要变更. 例:首页，详情页，个人中心等。Vue下有很多的方式去修改网页标题，这里总结下解决此问题的两种方案:方案一（不推荐）结合业务直接在Vue生命周期函数 created 中，给 document.title赋值。<script>import axios from 'axios'export default { created () { document.title = '功能授权' }}.
2021-05-08 11:36:29
1033
原创 Vue.js的Object.defineProperty对比Proxy，究竟差在哪里？
Vue.js 区别于 React 的一大特色是它的数据是响应式的，这个特性从 Vue.js 1.x 版本就一直伴随着，这也是 Vue.js 粉喜欢 Vue.js 的原因之一，DOM 是数据的一种映射，数据发生变化后可以自动更新 DOM，用户只需要专注于数据的修改，没有其余的心智负担。在 Vue.js 内部，想实现这个功能是要付出一定代价的，那就是必须劫持数据的访问和更新。其实这点很好理解，当数据改变后，为了自动更新 DOM，那么就必须劫持数据的更新，也就是说当数据发生改变后能自动执行一些代码去更新 DOM
2021-05-07 14:39:49
367
2
原创 JS依据对象的某个属性值进行排序
代码如下：var friends = [{name: 'John', age: 30}, {name: 'Ana', age: 20},{name: 'Chris', age: 25}]; function comparePerson(a, b){ if (a.age < b.age){ return -1 } if (a.age > b.age){ return 1 } return 0; } console.log(friends.sort(c
2021-04-27 15:28:01
99
原创 JS将数组中指定的元素挪到第一位
代码如下：function todo(arr, id){ var index = 1, newArr = [], length = arr.length; for ( var i=0; i<length; i++){ if ( arr[i].id == id ){ newArr[0] = arr[i]; } else{ newArr[index++] = arr[i]; } }
2021-04-26 17:05:34
3032
原创 实用的JavaScript开发技巧
判断是否为移动端// 利用是否拥有移动端事件来判断 得到一个布尔值'ontouchend' in document禁止复制网页内容<script type="text/javascript"> // oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单 document.oncontextmenu=new Function("event.returnValue=false"); // onselectstart几乎可以用于所有对象，.
2021-04-20 15:34:24
77
原创 Vue子组件调用父组件的方法及传值
//父组件<template> <div class="home"> <HelloWorld ref="mychild"></HelloWorld> <div @click="clickParent">click me</div> </div></template><script> import HelloWorld from '@/components/HelloW
2021-04-14 18:11:42
997
js实现移动端APP的方格布局横向滑动翻页带滚动条
2020-11-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人