baidu_41601048的博客

实现自定义组件<User v-model="userInfo" v-model:gender="gender"></User>

就能正常访问page1，和page2了，展示的内容分别是page1项目和page2项目的app.vue的内容。但是我们的page1和page2项目可不止一个app.vue,我们要通过路由配置不同的路由访问不同的页面。这是我们配置的最原始的一个结构,如图，带+的是新增的文件（文件夹）特别注意新增的page1.html和page2.html，这两个模版文件是一定不能忘记的。我们在page1和page2这两个项目下分别新增了一个views文件夹，用来存放页面，同时新增了一个home和list页面，用来测试。

vue3封装一个下拉刷新组件

利用uniapp实现一个左滑出现删除按钮的效果。实现平滑的动画效果

利用移动端事件touchstart，touchmove和touchend实现移动端下拉刷新。并封装成全局组件。

自定义文件上传第二次点击无效

vue3+typescript实现图片预览和上一张下一张切换

树形数组平铺展示实现多层嵌套数据并列展示

vue3 开发一个日历组件

自定义tree组件封装传值遇到的坑

koa 图片上传功能实现

vue3实现图片预览插件开发

vue 插件开发，图片预览插件开发

pini作为vue生态圈新出来的状态管理工具，因为相交vuex具备更简洁的语法和更好的ts支持，成了vue官方默认的状态管理新方案

这一次，我们以vue3项目为例。实现在项目中保存文件，自动格式化。包括js语法，css样式格式化和html的标签格式化；我们用vite新建一个项目：1，我们在项目总安装如下依赖：（1）安装ESLint：npm i -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin（2）安装Prettiernpm i -D prettier eslint-config-pre

1 如何创建vite项目？step 1 : npm init vite@latest yarn create vitestep2 :npm init vite@latest my-vue-app --template vuenpm 7+, 需要额外的双横线：npm init vite@latest my-vue-app -- --template vue# yarnyarn create vite my-vue-app --template vue2 如何让vite项目启动时

最近uniapp做了一个项目：效果如图：小程序和h5效果基本一致主要涉及到以下几个功能：1 瀑布流布局，2 上拉加载更多3 点击图片预览ui框架-：uview-----------------------------------------------------------------------先说下遇到的几个问题：1 瀑布流的实现。由于uview1.x版本提供了瀑......

vue slot基本用法

provide、inject一般用在组件间嵌套过多，而子组件一层层的传递很麻烦，此时通过provide、inject可以跨层传递。但是最近在使用的过程中发现一个问题:祖组件中data里的响应式数据通过provide return以后，发现孙组件无法接受到最新的值//祖组件<template> <div> this is grandparent component</div></template><script>expor

基于vue实现图片预览功能。实现图片旋转，下载，放大。缩小功能基本使用：父组件<template> <el-button @click="open">预览</el-button> <CompleteCav :url="url3" v-model="show"/></template><script>import CompleteCav from './completeCav'export d.

步骤：1 在pubic文件夹下的index.html中引入高德地图的js文件<scripttype="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=自己申请的key&plugin=AMap.CitySearch"></script>2 在methods中写一个获取位置的方法getLngLatLocation() { AMap.plugin('AMap....

方案一：（rem+vw）现代浏览器支持设备屏幕宽度为100vw，也就是把设备宽度分成了10份，每一份为10vw，而对于常见的移动度设备宽度。一般为375/750,为例。我们可以得到这样一个关系：100vw=375/750(px）.我们以具体的750为例。100vw被划分为750px,那1px=100/750=0.133333vw，那100px=13.3333vw,那此时如果我们把html的根字体大小设置成13.333vw,那就意味着1rem=13.333vw,也就是1rem=13.333vw=1

swiper插件踩坑

el-menu菜单实现思路：1 el-submenu --（有子菜单出现时采用该组件）2el-menu-item --（无子菜单出现时采用该组件）所以大概结构我们将是这样：:index="item.catalogCode"v-if="item.childCatalogs&&item.childCatalogs.length>0":key="item.catalogCode"...

事故起因：因为在模拟器上切换不同手机机型时，样式不能立即同步，必须重新刷新一下。所以最开始打算在每次window.resize的时候强制刷新。也就是resizewin.js-------------------------------------------------------------window.addEventListener("resize",function(){ window.location.reload()})----------------...

第一种：手动设置以设计稿是375为例。1 在plugins文件夹中新建一个fontsize.client.js文件，计算根字体大小document.documentElement.style.fontSize=document.documentElement.clientWidth/3.75+"px"2在nuxt.config.js文件中引入plugins: [ { // src: '@/plugins/lib-flexible.js', src: '@/plugi...

我们实现一个message弹窗，将在axios封装中替换第三方组件库提供的message-----------------------message.js

最近遇到这样一个需求。ui设计稿如下：zhuy

在vue3中自定义组件双向绑定语法的改变，使得写法和vue2大为不同。我们以element-plus的dialog组件为例。基于它。封装一个自己的对话框，同时介绍两种实现思路：思路一：数据驱动型：我们封装一个test-dialog组件：<el-button @click="open">打开</el-button><test-dialog ref="testDom" v-model:visible="flag" ></test-dialog>..

1 级联选择器cascader省市县三级菜单联动是项目中一个比较常见的功能。利用cascader也能轻松实现这个效果。但是这其中有个坑cascader的change事件只能在选择最后一级以后才会响应最后选择的数据。真实的场景中。我们选择省的时候，需要得到省的id，选择市的时候需要得到市的id。显然直接通过change事件是无法做到的。解决的办法有两个：1 也是最符合真实场景的：动态加载：所以我们修改代码如下：这时我们在lazyload中就会发现console.l...

写一个简单的vue loading插件。集成message功能：目录：plugins ---loading --loading.vue //插件的样式和基本方法 ---index.js //插件的逻辑 ---type.js //用来区分loading，warning，error，success等类型的一个render函数---------------------------------------------------...

需求：封装一个dialog组件。实现如下功能：1可以自定义dialog的header，content和footer内容。2点击关闭按钮关闭弹窗实现基础：1小程序 slot ---自定义组件内容2 小程序父子组件通信，自定义事件-------------------------------------------------------------组件名称为toast。toast.wxml结构如下：<viewclass="toast-box{{isShow?...

1 一个报错<div> 今日还剩<divclass="block">1</div><divclass="block"><ScrollComp/></div> 套</div>如上。一个div中的内容是文本+标签的形势。那么编译会报错vue.runtime.esm.js?a593:619 [Vue warn]: The client-side...

importaxiosfrom'axios'import{Loading,Message}from'element-ui';importrouterfrom"../router/index"importqsfrom'qs'import{db}from"../utils/utils"importErrorMessagefrom"@/common/restMessage"importstorefrom"@/vuex"conster...

今天碰到一个问题：如图：一个标准的页面。设计稿底部白色区域是200px,上面绿色区域放一张图片。这个简单的布局最初样式如下<div class='wrap'><divclass="imgBoxcenter"><imgv-lazy="imgUrl"alt/></div><divclass="foot"></div></div>.imgBox {100...

记录几个vue-masonry插件使用中的坑：1 引入方法：通过npm ivue-masonry以后，引入方法是import{VueMasonryPlugin}from'vue-masonry';我用的版本是0.11.8而不是网上很多文字写的那样 importmasonryfrom'vue-masonry';如npm 官方包所述（个别人发布文章非常不负责任，误人子弟）2 一定要记得给item选项添加v-masonry-tile属性。vue-masonry...

提示：此坑在css中实现效果：全局app不实现页面左右切换动画。只有某个板块进入以后实现该效果问题重现：进入板块以后首次进入会出现两个页面打搅的现象代码如下：由于只是某一模块采用动画。所以采用了嵌套路由方式 ：以下home ，question，submit都位于answer这个路由之下，answer页面承接了一个router-view容器-----------------...

需要封装一个dialog组件。但是出现一个问题。初始第一次点击某个按钮可以正常弹出。但是后面无论怎么点击都无法出现。解决办法：给dialog添加一个v-if。代码如下：弹窗组件login.vue-------------------------------------------------<el-dialog:modal-append...

2 微信公众号支付的基本逻辑如下 《1》---配置好一个url,直接通过window.location.href的方式访问 ，与此同时会重定向到配置好的redicturl中，微信会给改url自动加上两个参数：code和state 《2》---前端截取到code参数，访问后端接口拿到如下参数 "appId":self.appId, //公众号名称，由商户传入 ...

syntax-dynamic-import实现懒加载1 npm install --save-dev @babel/plugin-syntax-dynamic-import2 在根目录新建一个babel.config.js文件 （注意：本实例采用vuecli3）module.exports = {"presets": ["@vue/app"],"plugins": [...