- 博客(44)
- 收藏
- 关注
RSS订阅原创 uniapp+汉印，实现蓝牙打印
打印图片logo时候，需要输入的指令字符，无法生成（没有找到工具，不是正常的十六进制）运行效果：弹出预览弹框，点击蓝牙打印，触发打印机。推荐使用汉印官方提供的SDK。
2024-05-07 10:31:37
59
原创 详解vue组件（属性、事件和插槽）
详解vue组件（属性、事件和插槽）一、属性1.自定义属性props可以得出props 可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。通过一般属性实现父向子通信；通过函数属性实现子向父通信2.inheritAttrs3. data与props区别相同点两者选项里都可以存放各种类型的数据，当行为操作改变时，所有行为操作所用到和模板所渲染的数据同时都会发生同步变化。不同点data 被称之为动态数据，在各自实例中，在任何情况下，我们
2023-01-29 10:21:34
1086
原创 浏览器缓存
cookie保存方式：cookie保存在浏览器端生命周期：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。作用：用来跟踪浏览器用户身份的会话方式版本：HTML4本地存储存储的大小：单个cookie保存的数据不能超过4kb应用场景：（1）判断用户是否登陆过网站，以便下次登录
2023-01-29 10:19:36
424
原创 生成器（generator）和Promise
生成器是一种特殊类型的函数。我们正常从头到尾运行标准函数时候，最多只能生成一个值(return出一个值)，但是生成器函数会在几次运行请求中暂停，因此每次运行都可能会生成一个值。1、生成器函数生成器函数能生成一组值得序列，但是每个值的生成是基于每次请求的，并且不是标准函数那样立即生成。必须显示的项生成器函数请求一个新的值，随后生成器要么响应出一个新值，要么告诉我们之后都不会再生成新值。...
2022-09-01 22:26:54
115
原创 elementui+select实现全选
实现下拉选择器支持全选运行效果输入2后，模糊查询后，点击全选，选中的是当前筛选后的全部，并不是实际所有下拉选项的全部此修改时所处情况：当时该系统已经处于迭代更新状态，需求要求将所有多选的下拉选择器都改成支持 模糊查询 全选(是根据模糊查询后 现有匹配项的当前全选) 反选 有编码的还有支持输入编码可以自动匹配选中功能；功能不复杂但是涉及页面很多，所以在能够兼容全局页面的情况下编...
2022-01-09 16:12:13
109
转载 梳理webpack
1、有哪些常见的Loader？他们是解决什么问题的？2、Loader和Plugin的不同？3、是否写过Loader和Plugin？描述一下编写loader或plugin的思路？4、webpack的热更新是如何做到的？说明其原理？5、如何提高webpack的构建速度？6、npm打包时需要注意哪些？如何利用webpack来更好的构建？7、如何在vue项目中实现按需加载？...
2021-10-29 16:02:58
150
原创 PDF在线盖章
需求：需要实现给预览的PDF文件，盖上电子印章实现效果：(注：pdf文件资源和图片资源都是网上获取到的)安装插件 npm install pdfjs-dist --save引入```import PDFJS from 'pdfjs-dist';PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/p...
2021-10-26 23:13:15
23
原创 vuex的工作原理
讨论vuex的工作原理那么必须先从vue的双向绑定开始vue的双向绑定vue的双向绑定主要做了两件事：1、数据劫持 2、添加观察者数据劫持的实现vue2.x通过 Object.defineProperty 递归可以实现通过Object.defineProperty劫持对象的get和set方法；在所代理的属性的get方法中，当dep.Target存在的时候，就会调用dep.depend()vue3.x通过proxy实现Proxy(data, { get(target,
2021-10-22 14:53:57
680
2
原创 在浏览器地址栏输入URL之后发生了什么？
一共包括以下几个过程：URL解析DNS解析（域名解析）浏览器主机根据ip地址与服务器建立TCP连接发送HTTP请求服务器处理请求断开TCP连接浏览器解析文件浏览器布局渲染一、URL解析二、DNS解析1.先到各种缓存信息中查找先到浏览器缓存记录中查找------浏览器会缓存DNS一段时间系统缓存-----如果浏览器中没有找到，浏览器会有一个系统调用，获得系统缓存中的记录路由器缓存-----接着将请求发给路由器，路由器一般也有自己的DNS缓存
2021-10-15 14:26:17
212
原创 WebSocket
webSocket使用原因客户端（浏览器）与服务端（服务器）通信时，传统的http请求不能较好的满足需求（无法做到实时接收消息，服务端无法主动推送信息）。注：基于http的请求做到实时接收消息可以通过ajax的轮询解决，但是会存在有多与请求（浪费资源）、获取数据有延迟等问题；服务端也可以采取堵塞性的方案，服务端将客户端发送的ajax请求挂起直到有新数据返回；HTTP协议超文本传输协议、是一个客户端终端（用户）和服务器端（网站）请求和应答的标准（TCP），通过使用网页浏览器、网络爬虫
2021-10-13 15:58:06
136
原创 elementui表格单元格合并及表头单元格合并
elementui表格单元格合并及表头单元格合并页面效果如下代码html部分 <base-table default-height="true" class="numTable sorTable noTableBorder" :border-style="true" :columns="c...
2021-10-12 09:48:17
56
原创 Vue3.x
Composition API作用：将零散分布的逻辑组合起来一起维护，并且可以将大单独的功能逻辑查分成单独的文件setup是Vue3.x新增的一个选项，他是组件内使用Composition API的入口。setup执行时机是在beforeCreate之前setup参数需要两个参数，1 props：组件传入的属性 2 contextsetup中接收的props是响应式的，当传入新的props时候，会被更新；犹豫是响应式的，所以不能使用ES6的解构接收。reactive、ref、
2021-10-11 14:13:21
151
原创 for in，for of，for三者区别
forfor循环可以使用return 和 break来跳出for in可以用来遍历对象和数组，但是更适合遍历对象for of只有具有iterator 这个属性的淑女结果才能使用for of如下数据结构具有：数组 Array Map Set String arguments对象 Nodelist对象, 就是获取的dom列表集合不能循环对象，如果想要循环对象 可以配合Object.keyslet obj = {a: '1', b: '2', c: '3', d: '
2021-10-08 17:33:00
80
原创 垃圾回收机制与闭包
垃圾回收机制如果一个对象不再被引用，那么这个对象就会被垃圾回收机制回收；如果两个对象互相引用，且不被第三个对象所引用，那么这两个互相引用的对象也会被回收。（注：在闭包中，父函数被子函数引用，子函数又被外部函数的变量引用，这就是父函数不被回收的原因）垃圾回收机制通常有两种方法：1、标记清除在一个函数中设置一个变量，就将这个变量标记为‘进入环境’，从逻辑上来说，永远不会释放进入环境所占得内存（因为只要执行流进入相应的环境，就会被用到）。而当变量离开环境时，就会被标记‘离开环境’；垃圾
2021-10-08 17:30:01
199
原创 echarts----带分割块的圆环图
效果展示组件封装基本思路首先我们知道，使用echarts作图，必须有个dom，作为图片显示的位置；图表显示的时候，我们可以通过grid下的一些配置来控制图表显示的位置，所以，如上图，就可以理解为是一个能显示占比的环形饼图、一个能分隔的分隔环（仪表盘）、最外圈的外圈图（当然也可以是个背景图）三部分组成。template部分<div class="pie"> <div :id="ID"></div></div>da..
2021-08-19 10:22:41
2356
转载 async await和promise执行顺序
转载：https://segmentfault.com/a/11900000172247991、带async关键字的函数，它是得函数的返回值必定是promise对象2、遇到await，是从右到左执行3、await等到之后，做的事情； 分为两种情况，不是promise和是promise如果不是promise，await会阻塞后边的代码，先执行async外边的同步代码，同步代码执行完成后再回到async内部，把这个非promise的东西，作为await表达式的结果如果是p...
2021-07-08 16:08:22
542
原创 vuex原理
安装：vuex里面的state为什么是响应式的？暂时可以将他看作是data中的属性，也就是我们当前的状态。state里面的这些属性都会被加入到响应式系统里面，而响应式系统会监听属性的变化，一旦属性发生变化，会通知所有用到这个属性的界面并进行刷新。但有一个前提，所有的属性都必须先初始化好，如果直接在mutations里面添加一个新的属性，界面是不会显示的。store是怎么注册的？我们知道了vuex是利用vue的mixin混入机制，在beforeCreate钩子前混入vuexInit方
2021-07-05 15:12:40
206
原创 Vue.set
Vue.set(target,key,val)如果是数组的话，调用的是splice方法如果是对象的话，首先调用defineReactive（功能就是定义一个响应式对象，给对象动态添加getter和setter），将新增的属性定义为响应式属性然后调用ob.dep.notify()通知视图更新首先判断 target是数组并且key是一个合格的下标，则通过Math.max求长度，通过splice加新值；又判断key是不是已经存在，存在则直接赋值返回；获取target.__ob__给ob，.
2021-07-01 11:28:57
101
原创 history路由详解
单页面应用中history路由是很受欢迎的，经常使用的api有push、go、forward、bcak、replace等。都是html内置的history对象
2021-07-01 10:52:43
1211
原创 hash路由详解
#号的含义#号代表网页中的一个位置。右边的字符表示该位置上的标识符http://www.example.com/index.html#print这个URL代表的是这个www.example.com域名的这个index.html页面下的print位置。浏览器读取这个URL后，会自动的将print所在的位置滚动到可视区域内。跳转到页面的定值位置可以使用a标签的name属性（锚点），或者使用id属性其实也就是#后边的字符不会被发送给服务端改变#后边的内容也就不会重新发送请求，
2021-06-30 18:21:37
2423
原创 nextTick 相关知识
原理是什么：vue用异步队列的方式来控制DOM更新和nextTick回调先后执行microtask因为其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕因为兼容性问题，vue不得不做了microtask向macrotask的降级方案是如何监听到函数完成的：首先必须知道能实现监听DOM的api是MutationObservervue并不是使用MutationObserver监听节点dom的更新，而是通过它打包队列控制的目的（macrotask总要等到microta
2021-06-30 14:59:05
125
原创 函数柯里化
函数柯里化是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。// 普通的add函数function add(x, y) { return x + y}// 柯里化后function curryingAdd(x) { return function (y) { return x + y }}add(1, 2) // 3curryingAdd(1
2021-03-01 11:53:39
133
原创 虚拟DOM和Diff算法
浏览器渲染引擎工作流程大致分为五步：创建Dom树--->创建styleRules--->创建Render树--->布局Layout--->绘制PaintingDom树的构建是文档加载完成开始的吗？（不是）Dom树是一个渐进过程，为了更好的用户体验，渲染引擎会尽快将内容显示在屏幕上，它不必等到整个HTML文档解析完毕之后才开始构建render树和布局render树是dom树和cssom树构建完毕才开始构建的吗？（不是）一边加载，一边解析，一边渲染（不完全独立，..
2021-02-28 16:57:17
80
原创 vue结合viewer.js的使用
vue结合viewer.js的使用官网地址安装npm install v-viewer --save引入import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'template<div id="index"> <img :key="src" :src="src" class="showPic" /></div>data data() {
2021-02-26 17:45:16
903
原创 antv/g6结合vue实现某一流程的流程图展示
antv/g6结合vue实现某一流程的展示安装antv/g6npm install --save @antv/g6注意版本控制目前版本已经更新到4.x以下代码使用的是3.1.3版本的引入importG6from'@antv/g6';展示效果本文主要实现的需求是，配合后端模板引擎，展示某一业务的实现流程与完成状态，根据nodes数据中status判断节点处于什么状态改变样式；创建js文件，引入g6传入容器的宽高，容器id，数据源，当时创建容器的...
2021-02-25 19:57:25
4527
原创 promise--又双叒叕学
了解promise之前需要先了解什么是异步编程异步编程：我们知道Javascript语言的执行环境是"单线程"。也就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务。但是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。因此出现了两种模式：同步和异步异步任务就是不具有”堵塞“效应Promise就是异步编程的解决方案之一Promise本身是一个对象，是一个构造函数，它需要传入一个参数，并且这个参数必须是函数；传入的这个函.
2021-02-09 13:37:25
226
3
原创 Blob实现文件导出
import axios from 'axios';import { getSessionStorage} from './storage';axios.defaults.headers = { 'X-Requested-With': 'XMLHttpRequest'};axios.defaults.timeout = 1000 * 60 * 10;function actionDownload(href, filename) { const aLink = document.
2021-01-21 22:14:26
595
原创 二进制十进制小数转换
方法：十进制的小数转为二进制，主要是小数部分乘以2，取整数部分一次从左往右放在小数点后，直至小数点后为0（就是为整数时）eg：0.125 二进制的小数转换为十进制主要是乘以2的负次方，从小数点后开始，依次乘以2的负一次方，2的负二次方，2的负三次方等。eg： 二进制数0.001转换为十进制。转载百度...
2021-01-20 13:58:07
3390
原创 ES6---继承
继承ES6之前，没有extends继承，可以通过构造函数+元原型对象模拟实现继承，被称为组合继承call（）调用这个函数，可以修改函数运行时this的指向function.call(thisArg,arg1,arg2,.....)借用构造函数继承父类型属性核心原理：call()把父类型的this指向子类型的this```typescriptfunction father(uname, age) {// this指向父构造函数的对象实例 this.uname = uname;
2021-01-03 18:31:03
51
原创 keep-alive
以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染。（在开发Vue项目的时候，有一部分部分组件是没必要多次渲染的）一般用来使用在，路由不改变，但是组件内部内容改变的情况可以结合elementui的el-radio-group组价使用 import combination from ‘./combination’;import projectType from ‘./projectType’;const currentNodeMap = {8: project
2021-01-02 00:49:47
125
原创 echarts----饼图+环形图(子集颜色取父级同色系颜色)
饼图+环形图运行效果代码`let that = this;this.contractPie = echarts.init(document.getElementById(‘contract_pie’));window.addEventListener(‘resize’, function() {that.contractPie.resize();});let option = {// 所有饼图 分布颜色tooltip: {trigger: ‘item’,formatter: ‘
2020-12-31 16:18:58
1528
原创 vuex和数据持久化
vuex和数据持久化前端将所需数据存储在vuex中，但是vuex中数据在刷新后会被清空，而数据持久化，就是在执行浏览器刷新操作时，将vuex中的数据转存在本地localstorge中，在刷新时先去local中取，取到之后渲染到页面，再将数据转存到vuex中，清空localstorge，也就实现了数据的持久化...
2020-11-16 09:50:47
204
原创 自定义字体，字号----vue-quill-editor
富文本-vue-quill-editor（一）缺点1，不容易支持行间距2，不容易支持表格（二）优点1，部分工具的引入支持 class也可支持style引入2、可扩展性（三）在vue中的使用1，安装npm install vue-quill-editor --savenpm install quill --save2，使用import { quillEditor } from "vue-quill-editor"; //调用编辑器import 'quill/dist/quill.
2020-11-05 14:45:50
1498
原创 PC端页面全屏展示
功能描述：实现点击一个按钮，全屏展示，再点击退出全屏；html<div class="userImg userImg1"> <span v-if="!isFullScreen" class="fullScreenBtn" @click="handleFullScreen" > <svg-icon icon-class="full-screen-line">
2020-10-20 17:44:17
1096
原创 Vue 结合html2canvas和jsPDF实现html页面转pdf
Vue 结合html2canvas和jsPDF实现html页面转pdf安装npm install html2canvasnpm install jspdf使用htmlToPdf.js文件路径,例中为src/common/utils/htmlToPdf.jsimport html2canvas from “html2canvas”import JsPD Ffrom “jspdf”/**@param ele要生成 pdf 的DOM元素（容器）@param padfName P
2020-10-05 15:00:01
566
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人