- 博客(49)
- 收藏
- 关注
RSS订阅原创 vue项目http-server运行后，报TypeError: l.then is not a function
报TypeError: l.then is not a function
2022-11-07 09:25:18
1343
2
原创 前端新宠 Svelte，呜呜，卷不动了
这是一篇在掘金上看到的文章，vue后期可能借鉴Svelte，Svelte打包出来的包非常小，没有虚拟dom，Svelte 会监听顶层组件所有变量，一旦某个变量发生变化，就更新使用过该变量的组件。这就仅仅只需更新受影响的那部分DOM元素，而不需要整个组件更新。
2022-09-29 09:57:27
344
原创 -webkit-overflow-scrolling:touch导致ios中z-index失效(弹窗层级设置无效)
解决方法：直接去掉-webkit-overflow-scrolling:touch[不合理，页面卡顿] 弹窗放到根位置，也就是跟遮布平级[根下不存在含有-webkit-overflow-scrolling:touch]动态修改-webkit-overflow-scrolling:touch的样式值 vant可以使用van-popup，添加teleport(3x)、get-container(2x) 的属性指定位置挂载(原理2一样)...
2021-12-30 09:23:06
1979
原创 npm插件开发
好久没有发文章，最近在学react，简单测试一下npm插件的打包发布，现在插件开发也是面试的一个亮点。组件/插件局部组件(某处使用) 全局组件(多次调用到就可以注册成全局组件（一般超过5次）) 插件(共享vue生态圈，在不同项目中只要install都可以调用)插件开发//这里跟组件开发一样 plugins/组件<template> <div> <el-table ref="el-from" :data="tableData" s
2021-08-27 15:27:59
899
原创 vue3.0二次封装el-table
实现效果：注意点：vue3取消slot-scope，改用v-slot，简写#。刚学vue3不久，语法不太熟悉，花了点时间。核心代码:详细代码://子组件<template> <div> <el-table ref="el-from" :data="tableData" stripe style="width:100%" v-loading="loading"> <!-- 多选框 --&.
2021-07-22 14:33:55
1641
原创 vue3.0首次渲染watch没有触发
如下图，点击编辑时候，能拿到值，watch没有更新，组件值没有赋值到自定义组件上。查询了一波，官方提供了一个属性可以处理：immediate，于是我加上去(vue2.x也是同理)https://v3.cn.vuejs.org/api/instance-methods.html#watch直接可以了：...
2021-07-22 10:22:20
1720
原创 vue3 vs vue2.x
1.Tree-shankingvue3引入tree-shanking(术语)，通常用于描述移除js上下文中未引用的代码(dead-code)。在vue2.x版本中，很多函数都挂载到全局vue对象上，例如set、nextTick等函数。虽然我们平时可能用不到，但打包时还是会将这些全局函数都打包到bundle中。而vue3采用es6模块化方式引入，这样能让webpack和rollup等打包工具在打包时候对没有用到的api进行剔除，减少bundle的体积。创建app实例的方式，由原来的new Vu
2021-07-21 11:47:51
2168
原创 vue3.0项目实现表单拖拽
项目采用vue3.0+ts+elementPlus去开发管理后台，但element没有提供表单拖拽的功能，这里可以借用第三方库（SortableJS）来实现次需求。github地址：https://github.com/SortableJS/Sortable中文文档：http://www.sortablejs.com/index.html#使用方式：1. npm install sortablejs --save2.在单页面使用importSortablefrom'sorta...
2021-07-21 11:40:16
1199
2
原创 纯vue导出word
参考：https://www.jianshu.com/p/b3622d6f8d98这里我也附带代码，区别上面的：上面导出后在docx中会有存在换行问题，核心代码：new docxtemplater(zip, { linebreaks: true }) 可以解决导出换不了行的问题。出现最多的问题：解决就是加 ./ 。private exportWord() { const That = this; const outname = That.data.post.
2021-04-22 16:33:59
756
原创 2021年面经题
整理了最近去面试遇到的一些面试题，就当是积累复习，巩固扩展知识面，题先列出来，后续持续完善...Vue1.vue的双向绑定原理？2.vue的组件值的传递有哪些方法? 子组件接收props,传送给父组件$emit 采用refs 采用vuex 采用eventBus，原理是new Vue作为中间层 $emit、 $on provide 、inject 3.computed和watch的区别和使用场景？4.vuex有哪些属性，请进行说明?有五个.
2021-04-17 02:07:52
380
原创 vue-cli引入elementui版本使用问题
vue-cli2之前版本引入element形式入右图:https://element.eleme.cn/#/zh-CN/component/installationvue-cli3-4则采用左图vue add elementui然后会自动生成element.js，运行起来后页面时一片空白的，这里原因是vue-cli3后，取消了Vue 这个对象。官方提供另一种方式(这个仔细看文档才知道)：element-plus,具体操作可以点击跳转查看在 main.js 中写入以下内容：import.
2021-03-25 22:22:46
894
原创 layui 图片上传（多次提交，files叠加）
这里我第一次上传是没有问题的，然后进行第二次提交，会把之前的图片信息进行二次提交，这将会导致触发两次处理方式:1：(这里我试过，失败了)方法2：核心代码时候choose中的方法。这里我是这样解决的upload.render({ elem: '#test2', exts: 'jpg|png|jpeg|gif',//设置可上传文件 url: globalUrl+'/admin/uploadImg', //改成您自己的上传接口
2021-03-17 19:58:28
1615
4
原创 layui子页面触发父页面创建tab选项卡，同时处理click首次不触发的问题
实现子页面调用父页面去创建tab选项卡//父文件 <div class="page-content"> <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false"> <ul class="layui-tab-title"> <li lay-id='1'>首页</li> &
2021-03-13 01:00:08
1242
原创 vue面试题
1.什么是vue的生命周期vue实例从创建到销售的过程，就是生命周期。开始创建>初始化数据>编译模板>挂载dom>渲染、更新>渲染、卸载等一系列过程，就是生命周期2.vue生命周期对应的过程(重要)beforeCreate(创建前):data和mothods中的数据还未初始化，所以此时不能使用data中的数据和methods中的方法。 created(创建后):data和methods初始化完毕，此时可以使用methods中的方法和data中的数据 b.
2021-02-24 01:06:53
394
原创 html面试题
1.你知道哪些布局2.h5有哪些新特性3.Canvas和SVG有什么区别？4.px与 em和 rem的区别？5.<img>的title和alt有什么区别6.简述src 与href的区别？7.html语义化8.script 标签中 defer 和 async 的区别？...
2021-02-22 17:15:16
159
原创 正则简单整理
1.什么是正则，常用的处理方式正则：它是一个规则，用来处理字符串的一个规则处理：// (1)判断一个字符串是否符合我们制定的规则 ->test"reg.test(str) var reg = /\d/; //->包含一个0-9之间的数字 console.log(reg.test("正则")) //false console.log(reg.test("1")) //true console.log(reg.test("正则1")) //true// (2)把字符串中符合我
2021-01-06 10:30:06
108
原创 减少回流(reflow)和重绘，采用文档碎片
一般我们将内容插入到页面，如appendChild()、innerHtml()都会触发回流或重绘。appebdChild()优势：把需要的动态绑定的内容一个个追加到页面中，对原来的元素没有任何影响缺点：每当创建一个li标签，我们就添加到页面中，引发一次回流innerHtml() 字符串拼接的方式（最常用）优势：事先把内容拼接好，最后统一添加到页面中，值引发一次回流缺点：我们把新拼接的字符串添加到url中，原有的三个鼠标滑动效果都消失（样式不受影响）回流(又称重排，reflow)：
2021-01-04 16:38:05
251
原创 js求平均值
函数的参数都是类数组的集合，因此需要先转换成数组，再进行操作。平均值：要去最大值，最小值后再合计相除，就得出结果。1.常规做法// 获取平均数// arguments.sort() //->argument.sort is not function arguments是一个类数组集合，它不是数组，不能直接使用数组的方法function avgFn(){ // ->将类数组转换为数组 let ary = []; for(var i=0;i<argum
2020-12-31 17:53:17
5331
1
原创 封装一个时间转换(正则)的方法
var myFormatTime=function(str,time){ var numreg = /\d+/g,arr = []; time.replace(numreg,function(){ arr.push(arguments[0]) }) var reg = /{(\d+)}/g; //加()是进行分组 str = str.replace(reg,function(){ var num = arguments[1],val.
2020-12-31 17:25:35
144
原创 js数组求最大值和最小值
找出数组中的最大值和最小值，你能想出几种方法呢？1.排序法 sortvar ary = [12,23,24,46,13,59]ary.sort((a,b)=>{ return a-b;})var min = ary[0];var max = ary[ary.length-1]console.log(min,max)2.假设法 *var ary = [12,23,24,46,13,59]var min = ary[0],max = ary[0];for(v.
2020-12-22 10:27:02
3348
2
原创 图片懒加载(IntersectionObserver)
图片的性能优化也是我们经常用到的。实现效果如下：图片在视口的底部出现加载的图片(占位 保证页面不空白)，当图片完全显示在视口就将图片加载出来。原理如下：图片向上移动，会触发两个交叉。一次是进入时，一次完全出去时。这里主要方法是：getBoundingClientRect（）获取到可视口的距离。页面：<div class="laztImageBox"> <img src="image/loading.png" lazt-image="https://ti
2020-10-28 16:26:46
692
原创 小程序转发、分享朋友圈
转发分享是通过右上角的图标去触发。参考：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html另一种方式：通过注入的去引用//app.jsvar util = require('utils/util.js')App({ onLaunch: function () { // 注入分享 this.overShare() // 登录 wx.log
2020-10-26 17:27:54
348
原创 小程序获取地址、客服聊天、用户授权
小程序获取地址有两种方式：1.引入第三方地图（腾讯地图）等 。2.小程序提供的获取地址api这里我是用到第二种：代码：wx.getLocation({ type: "wgs84", success(res) { wx.chooseLocation({ latitude: res.latitude, longitude: res.longitude, success: (data)
2020-10-26 17:04:33
640
原创 vant-Weapp开发小程序
官方网站：https://youzan.github.io/vant-weapp/#/intro最近写了一套基于vant-Weapp的小程序，里面有些功能还是挺实用的，但部分缺少可以通过solt，或者自己重写组件，遇到的一些坑进行分享一下：调用这个框架需要以下条件：1.npminstall vant-Weapp2.小程序中设置勾选npm构建,生成miniprogram_npm文件调用组件，这个在官网上说的很清晰，我大概描述一下：在app.json中全局注入，单独使用也可在单页面调用...
2020-10-26 16:33:11
1668
原创 轮播跳转外部链接
swiper想要点击banner进行跳转外部链接，但这里小程序是不支持个人小程序！！！直接调用wx.navigator来跳转外部链接会报错：小程序提供web-viewhttps://developers.weixin.qq.com/miniprogram/dev/component/web-view.html，这个可以进行跳转链接。但相对麻烦，需要在小程序管理该公众号！案例：https://github.com/wangxiaoting666/weixinlink参考:htt..
2020-09-29 17:25:26
605
原创 了解http协议
http协议1.http是什么？htto是超文本传输协议.拆分为三部分：超文本、传输、协议2.http常见的状态码有哪些？200:表示一切正常,f非head请求，服务器返回的响应头都会有body数据。204:也是成功的状态码，但响应头没有body数据301:表示重定向302:表示临时重定向400:表示客户端请求报文错误403:表示服务器禁止访问资源404:表示请求的资源在服务器上不存在或未找到500:服务器错误502:服务器...
2020-09-24 15:02:50
612
原创 wangeditor修改-修改上传视频大小
提了个需求支持修改上传视频的大小，wangeditor支持修改图片的大小这个我们是知道的，但视频的大小的修改，源码是没有的，搜索也没有找到，因此只能读源码以及参考修改图片大小的案例作为参考进行整改,实现效果如下：修改如下:1.给上传的视频新增一个绑定的方法来获取上传视频的信息2.可以根据_imgHandle的位置后加入该方法_videoHandle:function _videoHandle(){ var editor = this.editor; var $textE
2020-08-07 11:41:35
3333
原创 pc、h5微信授权登录
pc登录微信登录(通过后端返回一个qrcode重定向到页面上，进行扫码授权，获取code即可，再根据code获取登录信息)h5登录微信授权登录:(支持微信浏览器，其它浏览器无法拉起微信的授权)：调用接口获取code、用户信息(进行存储)官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html// h5微信授权function login(.
2020-07-23 10:07:19
890
原创 swiper（左右滑动）动态加载数据
实现效果如图：(自动滚动切换)代码：function exampleBoutiqueList() { params = { page: 1, pageSize: 3 } flowload(params, app.serverUrl + "/boutique/get/exampleBoutiqueList", "GET", '.swiper-wrapper') //懒加载}var swiperlis = []function flowload(data, url, type
2020-06-30 11:09:33
2031
原创 swiper(pagination)自定义分页swiper中loop:true时，click点击无效
参考：swiper官方文档自定义分页这里我碰到的问题：1.swiper默认是是小圆点，而我这里需要矩形的。通过官方的pagination中的rederCustom()来进行自定义。2.碰到另一个坑，loop：true时，onclick会失效，这时候可以通过on进行绑定方法。3.当切换列表重新加载图片时，图片不更新，这里可以在autoplay中设置stopOnLastSlide: false,disableOnInteraction: false，在这里的作用是进行初始化。(每次点击切换就会.
2020-06-12 16:25:59
4665
原创 layui-tab设置默认选中
效果图:tab依赖：element,demo需要去layui-tab 中设置lay-filter="demo"layui.use('element', function() { var element = layui.element; //一些事件监听 element.on('tab(demo)', function(data) { }); });由于在官方文档中找不到改功能，只能通过dom操作实现：$('.layui-tab
2020-06-10 22:39:53
5161
原创 实现定位(百度地图)
实现效果图：实现步骤：1.先去百度api创建,并引入：2.定制一个容器（弹窗）3.执行方法（这里我写了不同的获取地址方法，主要原理都是根据经纬度来进行定位）function getMap(){ // 获取客户的经纬度 var map = new BMap.Map("allmap"); let maplist = _all.province.center.split(',') var point = new BMap.Point(maplist[0],maplist[
2020-05-25 00:18:00
806
原创 vue中动态插入值，@click失效解决方法
项目是html引入vue的格式。将生成的数据插入html()进行插入，发现template中@click失效，但onclick方法却可以执行，但我项目中需要用到emit来进行传值，查了一下，有人说通过vue.render()来重新渲染模板，但我这里是引入的，用不了，然后我参考以下的博客，发现可以了，所以分享一下，当做积累参考：https://blog.csdn.net/weixin_42633131/article/details/100579381?utm_medium=distribute.pc_r
2020-05-22 21:15:32
1954
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人