这是一个没有套路的前端博主,热衷各种前端向的骚操作,经常想到哪就写到哪,如果有感兴趣的技术和前端效果可以留言~博主看到后会去代替大家踩坑的~主页:oliver尹的主页格言:跌倒了爬起来就好~目录一、前言二、效果图三、核心思路四、代码实现4.1本月日期计算4.2上月日期补齐4.3下个月日期补齐4.4转化成二位数组4.5使用v-for生成日历4.6农历,假期等五、小结一、前言近来项目中需要用到一个日历组件,由于找了找没有找到合适的,因此决定自己简单动手做一个,项目中肯定比这个复杂的多,这里只是给各个小伙伴一个思路或者说是开发的方向~耐心看完,也许有所收获......(PS:如果要源码留下邮箱,博主
newDate()效果2023-06-12注:本文示例以获取当天为例一、newDate() 在vue中使用newDate()获取当月第一天、最后一天、当天、二、使用步骤1、定义方法代码如下(示例):/***@param//type0第一天;1最后一天;不传当天;*/getCurMonthFirstOrLast(type=2){letdate=newDate;lety=date.getFullYear().toString();letm=(date.getMonth()+1).toString().padStart(2,0);letd=(['1',newDate(y,m,0).ge
近期项目中大屏展示需要3D饼图(PS:别问为什么不使用2D的,问就是产品觉得3D的好看),所以度娘找了一波。 直接找到了用echarts-gl做3D饼图的示例,Echarts3D饼图开发_长剑浣花咻咻咻的博客-CSDN博客Echarts3D饼图指示线开发https://blog.csdn.net/sinat_28071063/article/details/125393621 看完我直接好家伙,大哥洋洋洒洒写了一堆,看起来就很厉害。于是乎当起了C-V战士,搬过来以后,不对,是我开发完以后呢,按照自己想要的效果修修改改了一下,看着确实不错。其中他的引导线的方案是在3D的饼图上面盖一个等数
按住分割线调节比例实现并不难,但是网上其他的文章实在是把简单的事情复杂化了今天教大家的方法超级简洁!!!!只用50行代码!!当鼠标在分割线位置按下时triggerDragging变量变为true这时split-pane-wrapper的mousemove中判断triggerDragging如果为true则改变leftOffset,pane-left的width就会随之改变pane-trigger-con的width是固定的而pane-right采用了弹性布局的flex:1;使其填充剩余部分,填充部分适合用于网页的内容展示部分exportdefault{name:"Home",data(){re
以下方法为px自动转换rem,顾名思义,配置完成后,不用再关心rem换算等等,只需按照设计稿的px值写入即可,当你保存后PostCSS插件会自动将px转换成所配置的rem值,并且你在浏览控制台观测界面时你会发现你在代码里写的是px单位,在控制台被转换成了rem单位。postcss一种对css编译的工具,本身不会对css一顿操作,它通过插件实现功能。1.使用第三方包实现px自动转换rem1.1首先下载需要的npm包npmiamfe-flexible//用于设置rem基准值npminstallpostcss-pxtorem-D//是一款postcss插件,用于将px单位转化为rem需要注意的是:该
Vue3正式版已经发布有两年多了,如今它也已成为Vue的默认开发版本,如果你想要对之前Vue2项目进行升级重构,可以从以下几个维度入手:①构建工具②入口文件③插件④指令⑤路由⑥状态管理⑦其他一、构建工具Vue3推荐使用Vite作为构建工具,相对Webpack来说Vite超快的热更新速度能极大提高开发效率,项目越大效果越明显。1.安装npmivite-gnpmcreatevite@latest更多详情可以看我之前写的一篇文章→Vue3+Vite初体验初始项目结构大致如下:然后我们可以将Vue2项目的src目录下的内容直接复制粘贴到新创建项目的src目录下,然后再继续接下来的重构操作。2.修改配置
Vue3.2语法糖使用总结一.概述在Vue2时期,组件里定义的各类变量、方法、计算属性等是分别存放到data、methods、computed等选项里,这样编写的代码不便于后期的查阅,查找一个业务逻辑需要在各个选项来回切换。vue3.0组合式APIsetup函数的推出就是为了解决这个问题,它让我们的逻辑关注点更加集中,语法也更加精简,但是当我们在使用vue3.0的语法就构建组件的时候,总是需要把外面定义的方法变量必须要return出去才能在,比较麻烦一些.vue3.2语法糖的出现以及一些新增的API,让我们的代码进一步简化。什么是语法糖?语法糖(英语:Syntacticsugar)是由英国计算
很多朋友从vue2.0更新到vue3.0,有很多不熟悉的地方。或者是直接没有过Typescript的使用经验,那么我们今天聊聊vue3.0怎么样。Vue3.0是一个流行的JavaScript框架,用于构建用户界面。它是基于Vue2.x的升级版本,带来了许多新功能和改进。以下是Vue3.0的一些主要特点:响应式数据绑定:Vue3.0引入了响应式数据绑定功能,使得数据可以实时更新而无需重新渲染整个页面。组件化:Vue3.0支持组件化开发,使得代码更加模块化,易于维护和扩展。数据流:Vue3.0引入了数据流(dataflow)功能,使得数据可以在组件之间流动,提高了代码的可读性和可维护性。动态导入:
vue路由传参按照传参方式可划分为params传参和query传参;params传参分为在url中显示和影藏参数两种方式1params传参(url地址栏显示参数)1.1声明式router-link通过router-link的to属性实现,该方法的参数可以是一个字符串;使用该方式时,需要子路由中提前配置好参数,如://1路由配置{path:'content/:id',name:'Content',component:Content,},//2页面跳转进入//3获取方式this.$route.params.id//输出1231.2编程式this.$router.push使用该方式传参时,需要在路由
一、watch与Vue2.x中watch配置功能一致两个小“坑”:监视reactive定义的响应式数据时:oldValue无法正确获取、强制开启了深度监视(deep配置失效)。监视reactive定义的响应式数据中某个属性时:deep配置有效。//情况一:监视ref定义的响应式数据watch(sum,(newValue,oldValue)=>{console.log("sum变化了",newValue,oldValue);},{immediate:true});//情况二:监视多个ref定义的响应式数据watch([sum,msg],(newValue,oldValue)=>{console.