Vue3
文章平均质量分 65
Vue3
Southern Wind
前端
展开
-
vite + vue3 + ts 移动端开箱即用现代开发模板
vite + vue3 + ts 移动端开箱即用现代开发模板。原创 2024-09-13 10:33:27 · 1010 阅读 · 0 评论 -
Vue3+Ts+Element-Plus多级表头以及动态合并单元格
【代码】Vue3+Ts+Element-Plus多级表头以及动态合并单元格。原创 2024-08-06 13:58:04 · 935 阅读 · 2 评论 -
vue3——H5页面调起微信订阅通知
/ 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。// 必填,需要使用的JS接口列表。// 必填,公众号的唯一标识。// 必填,生成签名的时间戳。// 必填,生成签名的随机串。原创 2024-04-08 11:47:47 · 988 阅读 · 1 评论 -
HbuilderX使用Uniapp+Vue3安装uview-plus
如果你是vue2版本想使用uniapp去配置uviewui库可以参考之前的文章小程序的第三方ui库推荐较多的还是uview的,看起来比较美观,功能也比较完善,下面将提一下Vue3安装uview-plus库的教程。原创 2023-12-08 22:00:00 · 2356 阅读 · 0 评论 -
Three.js——十五、Box3、相机动画、lookAt()视线方向、管道漫游案例、OrbitControls旋转缩放限制、以及相机控件MapControls
正投影相机和透视相机的区别如果都以高处俯视去看整个场景,正投影相机就类似于 2d 的可视化的效果,透视相机就类似于人眼观察效果如果你想整体预览全部立方体,就需要调整相机的渲染范围,比如设置上下左右的范围。使用场景:正投影可以用来预览中国地图,或者 2D 可视化的效果透视投影相机一般是人在场景用漫游,或者高俯视整个就是将整个模型的所有顶点包裹起来形成一个长方体,此长方体就是 Box3改变相机的位置.position,三维场景在 canvas 画布上呈现不同的效果,如果连续改变相机的位置.positi原创 2023-07-17 10:24:06 · 2323 阅读 · 0 评论 -
Threejs——十四、关于深度冲突、重叠、以及加载模型进度条效果实现(附完整代码)
两个模型重叠的模型,通过浏览器旋转预览,会发现模型旋转的时候会发生闪烁。这种情况,主要是两个模型重合,电脑分不清谁在前谁在后,这种情况,可以理解为深度冲突。效果:适当偏移,解决深度冲突,偏移尺寸相对模型尺寸比较小,视觉上两个几何体近似还是重合效果。这种情况我这里遇到过一次,通过压缩模型后进行放大缩小会发现出现模型闪烁的 bug,所以这里可以用解决冲突问题。注意:如果两模型面间隙过小,或者重合,,此渲染器对数深度缓冲区也是没有效果的区别:不加这里拿来测试这里可以进行判断,如果等于100,也就原创 2023-07-17 09:44:41 · 959 阅读 · 0 评论 -
Three.js——十三、自定义大小画布、UI交互按钮以及3D场景交互、渲染画布为文件(图片)
- canvas元素默认是行内块元素 --> < div class = " model " style = " background-color : #ff0000;-- canvas元素默认是行内块元素 --> < div class = " model " style = " background-color : #ff0000;原创 2023-07-17 09:41:24 · 1143 阅读 · 0 评论 -
Three.js——十二、MeshPhysicalMaterial清漆层、粗糙度、物理材质透光率以及折射率(结尾附代码)
和都是拥有金属度、粗糙度属性的PBR材质,是的子集,除了继承了他的这些属性以外,还新增了清漆、透光率、反射率、光泽、折射率等等清漆层属性可以用来模拟物体表面刷了一层透明的模的范围0到1,默认0。关于MeshPhysicalMaterial材质是Three.js中的一种材质类型,它是基于物理的渲染(PBR)材质,可以模拟真实世界中的光照和材质反射。它支持金属和非金属材质,可以设置粗糙度、金属度、环境光遮蔽、法线贴图、位移贴图等属性,以实现更真实的渲染效果。还支持高光反射和透明度,可以用于创建逼真的玻璃、水原创 2023-07-17 09:37:13 · 1275 阅读 · 0 评论 -
Three.js——十一、PBR材质金属度、粗糙度以及环境贴图的使用
如果想使用环境贴图对scene所有Mesh添加贴图材质,可以通过Scene的场景环境属性.environment实现,把环境贴图对应纹理对象设置为.environment的属性值即可。用于设置环境贴图的强度。当然在实际开发中,环境贴图的不同也会对渲染效果造成影响,也需要选择合适的贴图,往往这种贴图可以让美术提供即可。表示模型表面的光滑或者说粗糙程度,越光滑镜面反射能力越强,越粗糙,表面镜面反射能力越弱,更多地表现为漫反射。总结:粗糙度越小,反射效果越强,如果设置为0,那么他将完全镜面反射,等同于镜子。原创 2023-07-11 12:08:49 · 1701 阅读 · 0 评论 -
Threejs——十、关于 gltf 模型的介绍、引入方法以及设置属性添加功能(结尾附代码)
前端推荐使用 Blender 三维建模软件,模型推荐使用 gltf 或者 glb 文件。后续会更新 Blender 的使用方法glTF(GL Transmission Format)是一种用于传输和加载 3D 模型的开放标准格式。它是由 Khronos Group 开发的,旨在提供一种轻量级、高效、可扩展的 3D 模型格式,以便在 Web 和移动设备等平台上实现快速加载和渲染。glTF 格式支持包括几何体、材质、纹理、动画和场景等多种 3D 模型元素,并且可以使用 JSON 格式进行序列化和压缩,从而减少原创 2023-07-11 11:17:03 · 6009 阅读 · 0 评论 -
Element-Plus——暗黑主题设置
暗黑主题设置原创 2023-06-15 10:55:39 · 2304 阅读 · 0 评论 -
Vue3——404、重定向以及导航守卫
【代码】Vue3——404、重定向以及导航守卫。原创 2023-06-15 09:31:48 · 1055 阅读 · 0 评论 -
Vue3——首屏加载速度过慢解决方案
具体一点讲,如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次,如果刷新率是75Hz,那么这个时间间隔就变成了1000/75=13.3ms,换句话说就是,requestAnimationFrame的步伐跟着系统的刷新步伐走。在函数内部,创建了一个frameCount ref对象,并定义了一个updateFrameCount函数,用于递增frameCount的值,并在达到maxCount时停止递增。最后,函数返回一个defer函数,用于检查当前帧数是否达到指定的值n。用于实现一个延迟函数。原创 2023-06-06 11:20:10 · 2348 阅读 · 0 评论 -
Vue3接收静态页面URL中携带的参数
从HTML页面中的a链接里携带的参数要在vue3项目里接收到此参数目前有两个项目一个静态项目一个vue项目,我需要从静态页面的链接跳转到Vue项目中,并且这两个项目可以通过参数进行关联这里有两种方案:一种是将静态页面中的id存在本地,在vue中通过获取本地id传给接口从而渲染页面影响:可能会出现跨域第二种通过getUrlKey.js获取URL地址栏中跳转携带的参数。原创 2023-06-02 13:26:46 · 2201 阅读 · 0 评论 -
Element-plus图片上传
Element-plus图片上传功能原创 2023-05-29 09:37:00 · 859 阅读 · 0 评论 -
Three——glb模型压缩
引入外部模型太大?用DRACOLoader压缩一下!原创 2023-04-23 09:31:54 · 1961 阅读 · 0 评论 -
Vue3——v-md-editor(markDown编辑器)使用教程
v-md-editor一款基于Vue3易上手的MarkDown编辑器原创 2023-03-29 16:55:34 · 7418 阅读 · 2 评论 -
Vue3——自定义封装上传图片样式
封装上传图片效果原创 2023-03-16 21:30:00 · 1299 阅读 · 0 评论 -
Vue 3 axios配置以及cookie的使用方法
调用验证码方法在Request.js也就是axios中添加切换验证码方法在Login.vue的请求接口中使用errorCallback方法封装的验证码地址写法如下登录有两种验证方案,可以使用token验证或者用cookie验证,这里说一下Cookie验证。原创 2023-02-09 10:35:50 · 3568 阅读 · 0 评论 -
Vue3+TS+Vant3——增删改input和通过双页面进行增删改操作
两种方案:第一种点击添加按钮添加一项,缺点:页面过于臃肿,用户体验较差第二种:分成两种页面进行添加等操作先说一下第一种,我这里用到了vant3Ui组件库直接上代码:新增节点其中obj里的对象名称要跟reactive中创建这个的数组里的名称一样Vue3是通过v-model生成新的节点,无需用克隆节点生成新的Dom这里因为不需要进入页面,所以直接引入接口就可以了,无需写编辑事件删除:获取对应选中的div盒子,之后对盒子进行删除操作第二种方法下面是详情页这个是把数据存到本地上了,真实项目需原创 2022-12-29 11:03:33 · 1441 阅读 · 0 评论 -
vue3通过css对按钮替换主题颜色
最后通过v-bind给最外层的盒子添加需要替换的颜色。最后弄一个按钮来控制这个颜色的变化。定义一个对象用来存放颜色。写个方法用来存储对象。原创 2022-12-13 16:04:45 · 864 阅读 · 0 评论 -
Vue3+Vant3——监听物理返回退出功能
vue3+vant做h5转App时,会遇到用手机上的返回键会直接回退到手机桌面,只能用过按钮来实现back回退,网上也有很多实现方法,但mui对vue3来说可能不太支持,所以这里使用原生js的方法实现。完成后通过npm run build打包在手机上进行查看。在index.html中引入vant链接。事件来对物理返回键进行配置。接着写js部分,通过。原创 2022-11-14 13:40:06 · 2821 阅读 · 0 评论 -
Vue3——压缩字体font-spider,完美解决字体压缩后会出现字体消失现象
打包出现字体文件过大怎么办?压缩字体后出现问题怎么办?来看这篇文章哦~原创 2022-09-21 15:40:24 · 5439 阅读 · 0 评论 -
Vue3+ts——动画Loading以及引入本地随机背景效果
超级好看的loading样式!!我这里是采用loading为例子制作的随机背景效果(底部附上代码和成品效果展示)原创 2022-09-20 17:01:29 · 1914 阅读 · 0 评论 -
Vue3——使用inject和provide对页面进行刷新
这里的provide和inject可以实现嵌套组件之间进行传递数据。直接看代码即可:首先,需要修改一下app.vue文件,通过reload方法来控制router-view的显示或者隐藏写好之后就可以在子页面中调用即可最后看一下项目实现效果:这时候就有人问了,为什么不适用location.reload()或者router.go(0)来刷新页面呢?这里的缺点也显而易见,这种刷新就类似于ctrl+F5来进行强制刷新,整张页面看起来会出现白屏的现象,用户交互的体验感不好,而这种用provide和inje原创 2022-09-19 16:38:52 · 2161 阅读 · 1 评论 -
Vue3——使用v-if或v-show来实现过渡的动画效果
想要通过v-if或者v-show来实现动画的衔接动作,也看了网上的一些例子,这里给总结一下。这里如果是想点击一次过渡过去再次点击一次过渡回来的话,是不需要给两个不同的。这种过渡效果很简单,只需要用if语句来判断动画出现顺序即可。标签设置两种动画,只需要用同一个动画即可。就不需要加**name=‘h1’**了。原创 2022-09-15 16:35:03 · 8286 阅读 · 0 评论 -
Vue3——动态input边框效果实现
因为这里使用的是Vant移动端写的,所以不好给自带的input框添加foucs样式,所以我这里就给他一个hover代替点击焦点样式,效果是一致的。原创 2022-09-13 16:13:03 · 1743 阅读 · 0 评论 -
Vue3——teleport 传送门
我们可以在组件的逻辑位置写模板代码,这意味着我们可以使用组件的 data 或 props。场景:像 modals,toast 等这样的元素,很多情况下,我们将它完全的和我们的 Vue 应用的 DOM 完全剥离,管理起来反而会方便容易很多。Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术,就有点像哆啦A梦的“任意门”。另外,像 modals,toast 等这样的元素需要使用到 Vue 组件的状态(data 或者 props)的值。...原创 2022-08-15 09:19:42 · 1007 阅读 · 0 评论 -
Vue2转Vue3快速上手第二篇(共两篇)
续上篇:这里说一下传送,这个传送就是我可以把teleport标签通过to="名称"放在我想要放在的标签里面看个例子:Home.vue子组件ModalButton.vue我们来具体看一下效果:把to中的body替换成#one再看效果:最后再尝试把to中的#one替换成.two,可想而知效果是一致的效果:如果写成这样:(是进行不了传送的)为什么我们需要 TeleportTeleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术,就有点像哆啦A梦的“任意原创 2022-08-30 17:02:52 · 399 阅读 · 0 评论 -
Vue2转Vue3快速上手第一篇(共两篇)
v2-v3的学习成本不高,只要有v2基础,基本可以上手vue3setup中不能访问v2的配置比如data,methods等使用ref可以创建一个对象,可以是基本类型,也可以是对象例如:这是一个对象类型的响应数据,例:例:特性,也可以说成和watch的区别所有的声明周期要放在setup中Vue3的生命周期如下:1、beforeCreate -> 使用 setup()2、created -> 使用 setup()3、beforeMount -> onBeforeMount4、mount原创 2022-08-11 14:48:50 · 2462 阅读 · 1 评论 -
Vue3——Suspense组件
它是一个内置组件,用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成,并可以在等待时渲染一个加载状态。在最坏的情况下,我们可能会在页面上看到三个旋转的加载态,在不同的时间显示出内容。组件后,我们就可以在等待整个多层级组件树中的各个异步依赖获取结果时,在顶层展示出加载中或加载失败的状态。在这个组件树中有多个嵌套组件,要渲染出它们,首先得解析一些异步资源。意思就是此组件用来等待异步组件时渲染一些额外内容,让应用有更好的用户体验。就是你指定的加载中的静态组件。原创 2022-08-22 11:49:59 · 1239 阅读 · 0 评论 -
Vue3+Vant3通过mock引入本地图片路径
组件中通过new Url('路径/${图片}',import.meta.url).href。在接口中只需要写入图片名称,通过函数的形式拼接字符串,vite中有专门的写法。原创 2022-08-16 16:26:48 · 3673 阅读 · 0 评论 -
Vue2,Vue3——Vant,Vant3自定义表单验证效果实现
官网上面有正则函数异步三种验证效果,但是并没有详细说明多个表单验证该如何实现,这里提一下首先要有form标签 <van-form @submit="onSubmit">这个标签包裹提交按钮 onSubmit(values) { console.log("submit", values); },之后在里面写input框 <van-field v-model="form.tel" type="tel"原创 2022-01-27 13:14:53 · 10857 阅读 · 0 评论 -
Vue 3 + TypeScript + Vite + Element-Plus + Router + Axios + Pinia项目搭建(内含完整架构)
Vue 3 + TypeScript + Vite + Element-Plus + Router + Axios + Pinia项目搭建(内含完整架构)原创 2022-08-09 12:33:26 · 2118 阅读 · 0 评论 -
Vue3+TS——使用@代替src路径中的../
找到vite.config.ts。原创 2022-08-10 11:24:43 · 661 阅读 · 0 评论 -
Vant3——复选框点击其他后格外出现一个输入框
因为复选框选出来的值为数组形式,这里的listData里面的这个checkboxZL是一个对象的形式,我们这里需要转换一下。原创 2022-08-05 15:01:08 · 1057 阅读 · 0 评论 -
Vant3—— 点击对应的name名称跳转到下一页对应的tab栏的name的位置
这里稍微注意一下动态的name要绑定循环的列表中的name。首先我们这里要给前一个页面配置相应的数据结构。这里是通过Pinia去写✈️。原创 2022-08-01 16:43:18 · 1184 阅读 · 0 评论 -
Vue3+ts+Vite项目使用mockjs模拟数据
在vite中使用mockjs进行模拟数据,需要借助新的依赖进行使用。如果只是本地开发环境时使用,直接看下面即可步骤。原创 2022-07-28 15:33:07 · 3800 阅读 · 3 评论 -
Vue3+TS+Vant3+Pinia(H5端)配置教程
该模板将帮助您开始使用Vue3、Vite3.0中的TypeScript以及Pinia、Vant3进行开发。该模板使用Vue3,请查看文档了解更多教程。原创 2022-07-27 10:12:35 · 2084 阅读 · 2 评论 -
Vue——初始化样式
代码】Vue——初始化样式。原创 2022-07-20 10:44:43 · 1359 阅读 · 0 评论