vue
文章平均质量分 57
冬久久
这个作者很懒,什么都没留下…
展开
-
2021-11-23 vue3.2.21借助dayjs封装dateTimeSelector日期时间选择器组件
参考element的ui样式,自己动手写封装一个dateTime选择器组件;自己动手写clickOutSide指令;原创 2021-11-23 22:59:34 · 805 阅读 · 0 评论 -
vue 中你不知道的刷新姿势
笔者啊,你居然写篇文章说页面的刷新?那多简单啊,window.location.reload 不就完事了嘛,小样。reload真的是你想要刷新吗?调用 reload 刷新整个页面重新加载资源处理html、css,执行js各种初始化…我jo的这是刷新,但不是追求极致的我们的想要的刷新谈谈我认为该怎么刷新创建一个redirect页面,这个页面的作用只有一个,就是跳转,即const { params, query } = useRouter()replace({ path:原创 2021-08-09 16:04:56 · 113 阅读 · 1 评论 -
在使用vue3开发了几个项目后的小技巧分享
vue3使用总结reactive通过reactive定义的响应式数据,解构出来后会丢失响应;需要使用toRefs,为源响应式对象上的property新创建一个 ref const testReactiveVal = reactive({ name: '渣渣辉' , desc: '一刀99999'}); const { name, desc } = testReactiveVal; // name, desc丢失响应式 const { name, desc } = toRef(testRe原创 2021-08-06 17:58:06 · 541 阅读 · 0 评论 -
vue3-proxy响应式原理实现
vue2.x使用defineProperty重写get,set实现响应式,同时无法监听数组的变化,需要重写push、pop等方法。并且在初始化的时候遍历data,对每个数据进行处理,当data中的数据多,层级多时可能出现白屏的情况。而vue3使用proxy实现响应式,本身就可以监听数组的变化,同时在get的时候 return reactive(result),使的只有在调用的时候才会进行处理,与vue2相比有了极大的优化,并且除了get和set外,还能监听delete!let data = { se原创 2021-03-13 17:20:32 · 688 阅读 · 0 评论 -
vue2.x响应式原理实现-代码干货带你手写响应式
vue作为现在热门的三大框架之一,相信大部分前端开发者都能够熟练的使用vue,但是能够深入了解其原理的可能并不多,很多人都知道vue响应式是通过difineProperty来实现的,相信随便百度一下,相关的面试题及答案一大堆,你知道是通过defineProperty重写get,set方法实现的,可是你有真正的了解过吗?好了,上干货!!!实现对象的监听此时能够监听对象数据的变化,还不能监听数组的变化。为什么?因为它本身就不可以呀,那你可能要问了,明明vue的数组,,通过push、pop、shift等等方法原创 2021-03-13 16:01:10 · 198 阅读 · 0 评论 -
canvas生成二维码海报-可配置
简介可通过选择图片、配置图片间距、是否展示合伙人等,使用canvas来生成海报,下面为选择4和2张图片的海报截图;开发过程中学到的东西1、自动闭合及非零环绕原则在绘制气泡和海报的时候需要绘制圆角,网上有查找到相关的方案但是并不满意,后来了解到canvas绘制arc会首尾相连,即第一个arc的终点会连接第二个arc的起点(在没有使用moveTo的情况,使用moveTO已经把画笔移动走了,当然不会连接啦),这样只需要绘制四个角的圆弧就可以啦;_drawCanvasBoard (ctx) {//原创 2021-03-06 16:30:52 · 465 阅读 · 0 评论 -
封装vue组件库-vaui库
vaui第一次发包有点小激动,这是一个根据公司ui的设计习惯,简单封装了这个vue2.X ui组件库,该组件库参考了bootstrap、element和vant,但是还是有很多不完善的地方,希望自己继续学习,继续努力,继续加油吧!!!安装yarn add @fei_w/vaui// 或者npm install --save @fei_w/vaui使用在main.js中import { Icon, Cell, Avatar, Layout, DividerLine} f原创 2021-02-27 17:40:45 · 388 阅读 · 0 评论 -
vue3+ts使用g2
安装g2npm install @antv/g2plot --save引入并使用在需要使用的页面引入g2,记住要在onMounted中使用哦,不然节点还没渲染出来,没有容器。下面提供一个例子,引入折线图:<div class="pr-3 pl-3"> <p>近一年收益情况:</p> <div class="d-flex m-btn-wrapper pt-2"> <button class="w-50 btn ac原创 2021-01-21 23:28:07 · 3525 阅读 · 0 评论 -
微信开发者工具网页h5本地开发,解决微信公众号绑定域名,本地无法调用微信api问题
第一步 本地配置文件以及固定端口号项目使用vue开发,首先修改vue.config.js配置文件,固定端口号,在项目目录中新建.env文件,vue启动的时候如果是本地,会自动调用.env文件,启动的时候怎么知道是本地呢?这是我学习vue后好长一段时间都疑惑的问题,后来了解到,当你本地启动项目的时候是这样的:yarn serve 或者npm run dev 或者npm run serve你执行了命令,vue就能知道你是本地启动的呢,于是它便自动查找是否存在.env配置文件,如果有便读取,所以我们做原创 2020-09-05 14:07:29 · 2291 阅读 · 0 评论 -
swiper6填坑:vue-awesome-swiper
swiper6填坑:vue-awesome-swiper1.引入cssswiper6的css变了位置import 'swiper/swiper-bundle.css'2.err swiper not drfined在项目中使用了vue-awesome-swiper,在已引用的情况下报错:"Error in mounted hook: “ReferenceError: Swiper is not defined”,仔细查看错误提示,“ at src/components/card/cardLa原创 2020-07-31 21:55:14 · 3319 阅读 · 0 评论