
Vue
文章平均质量分 54
vue.js工作&学习-知识点
JackieDYH
阅技术、码经验、勤总结、乐分享、喜交流。
展开
-
Vue中使用antd-table组件实现数据选择、禁用、已选择禁用-demo
2、当状态为1时,表示之前已经选择过,显示状态为勾选并禁用状态,禁止取消。selectStatus: "0", // 0未选中 1选中 2不可选。注意:表头上的全选按钮,只能操作状态为0的数据,其他数据不能操作。1、当状态为0时,表示前台页面可以自由选择和取消。3、当状态为2时,表示不可选择,显示为禁用状态。表格根据从后端获取的数据进行状态显示和控制。原创 2025-04-07 09:44:10 · 133 阅读 · 0 评论 -
Vue中使用antd-table组件时,树形表格展开配置不生效-defaultExpandedRowKeys-默认展开配置不生效
defaultExpandAllRows这个属性仅仅是用来设置默认值的,只在第一次渲染的时候起作用,后续再去改变,无法实现响应式。原创 2025-03-31 10:56:20 · 218 阅读 · 0 评论 -
Vue项目中动态导入图片提示require is not defined-Vite项目
src="require(@/assets/images/third/${amountNum}.svg)" 提示ReferenceError: require is not definedVue 项目中,特别是使用 Vue 3 和 Vite 构建工具时,require通常不再被使用,而是使用动态导入(dynamic import)来处理模块和资源。你遇到的错误是因为 Vite 不支持require语法。原创 2025-02-25 11:12:17 · 372 阅读 · 0 评论 -
Vue中使用wangeditor/editor富文本编辑器
Vue中使用wangeditor/editor富文本编辑器。原创 2024-12-16 14:35:38 · 1892 阅读 · 0 评论 -
Vue中使用Antd中a-table实现表格数据列合并展示
根据需求实现当前两列数据中有相同数据时,合并列单元格。原创 2024-11-05 09:18:29 · 506 阅读 · 0 评论 -
Vue3基于Element-plus的Select组建进行二次封装-demo
Vue3基于Element-plus的Select组件进行二次封装可以提高开发效率,使组件的使用更加简便。在组件中使用template标签,包裹Element-plus的Select组件,并使用v-model绑定选中的值。创建一个组件文件,比如Select.vue,引入Element-plus的Select组件。在父组件中使用该组件,通过v-model绑定选中的值,并通过props属性传入选项。在需要使用该组件的父组件中,引入组件并传入props属性。最后,在父组件中处理选中值的变化。原创 2024-10-22 15:37:28 · 616 阅读 · 0 评论 -
axios图片上传elementui图片上传组件如何使用
首先需要安装axios和element-ui依赖:npm install axios element-ui --save。注意:上传文件时需要设置Content-Type为multipart/form-data。原创 2024-10-24 08:00:00 · 340 阅读 · 0 评论 -
Vue中app.config.globalProperties&Vue.prototype和getCurrentInstance的使用
在Vue 3中,我们可以使用 app.config.globalProperties 来定义全局的属性和方法。这个属性和Vue 2中的 Vue.prototype 类似,但是在某些方面有所不同。以下是Vue3中 app.config.globalProperties 和Vue2中的 Vue.prototype 的对比:1、异步行为不同Vue 3中是异步创建组件实例并挂载DOM,所以在 app.config.globalProperties 定义的方法中使用异步方法会更加安全。原创 2024-10-21 15:09:18 · 622 阅读 · 0 评论 -
vue2和vue3中依赖注入provide 和 inject是如何使用的具体案例
在Vue3中,provide和inject实现起来更加简单,只需要在setup函数中使用即可,而不需要在组件声明中使用。同时,Vue3也支持provide和inject的类型声明,在开发时更加方便。原创 2024-10-21 15:07:51 · 453 阅读 · 0 评论 -
Vue3中shallowRef和ref区别
在 Vue 3 中,ref和shallowRef都是用来创建响应式引用的工具,但它们之间存在一些关键的区别,主要在于它们如何处理对象的响应式特性。原创 2024-09-18 09:26:46 · 615 阅读 · 0 评论 -
Vue中使用Ant Design Vue-Modal对话框关闭弹窗时如何正确销毁子元素或者数据重置-destroyOnClose
设置这个属性是会销毁a-modal内的子元素,如果直接将页面结构内容写在弹窗里,弹窗加载直接就运行了,里面没有生命周期,可以采用弹窗结构(组件)和页面结构(组件)分离开然后设置destroyOnClose属性就能生效。如果一定要写在弹窗内,可以使用watch监听弹窗属性的变化,去动态改变内部的值。原创 2024-08-19 10:39:35 · 1238 阅读 · 0 评论 -
Vue项目中手搓滑动校验模块-demo
Vue项目中手搓滑动校验模块原创 2024-08-05 10:14:03 · 351 阅读 · 0 评论 -
Vue3+Vite项目中使用tailwindcss-安装配置
确保你已经安装了 TypeScript 和 Tailwind CSS 的类型定义。原创 2024-08-05 10:13:45 · 666 阅读 · 0 评论 -
Vue项目移动端h5页面在IOS上点击input输入文本框页面会自动放大的问题
需要给 ios 和安卓 app 开发 h5 页面,在安卓上测试没有问题,但是 ios上点击输入框会导致页面缩放失败。原创 2024-07-29 09:02:00 · 580 阅读 · 0 评论 -
Vue-Request 帮你方便快捷的管理项目的请求接口
在以往的业务项目中,我们经常会被 loading 状态的管理、请求的节流防抖、接口数据的缓存、分页等重复的功能实现所困扰。每次开启一个新项目都需要重新实现一遍,这是一项重复的工作,还需要确保团队的一致性。VueRequest 的目的是为开发人员提供一种方便、快速的方式来管理 API 状态。通过简单的配置,可以省去那些繁琐的任务,专注于业务核心的开发。是一个异步的请求函数,换句话说,你可以使用。当请求完成后,则将会根据请求结果来设定。来获取数据,然后返回一个。原创 2024-07-22 09:00:00 · 759 阅读 · 0 评论 -
vue-lazyload-项目图片懒加载-默认图片和加载失败图片展示
是一个 Vue 组件库,用于高效地渲染大量数据项,通过虚拟滚动来提升性能。它适用于长列表、网格、表格等场景。原创 2024-07-08 09:33:09 · 659 阅读 · 0 评论 -
vue-virtual-scroller-展示大量数据列表-虚拟列表展示优化
是一个 Vue 组件库,用于高效地渲染大量数据项,通过虚拟滚动来提升性能。它适用于长列表、网格、表格等场景。原创 2024-07-08 09:33:30 · 1205 阅读 · 0 评论 -
fetch 封装 文件流下载进度监控-demo
在实际应用中,确保处理各种可能的异常情况,并提供用户反馈。此外,由于 CORS 策略,你可能无法从其他域获取。当读取到新的数据块时,进度回调会被调用,更新下载进度。读取完成后,它将所有数据块合并到一个。如果没有这个头,或者它的值不正确,那么进度指示将无法工作。头,除非其他域的服务器设置了适当的 CORS 头来允许这样做。函数接受一个文件 URL 和一个进度回调函数。API 下载文件并监控下载进度,你需要处理响应的。请注意,进度监控假设服务器发送了正确的。,最终生成一个可以下载的 URL。原创 2024-06-24 09:01:26 · 502 阅读 · 0 评论 -
Vue项目中实现骨架占位效果-demo
Vue项目中实现骨架占位效果-demo原创 2024-06-17 08:59:52 · 401 阅读 · 0 评论 -
Nodejs中循坏代码目录,提取代码中中文文本到文件中
Nodejs中循坏代码目录,提取代码中中文文本到文件中。原创 2024-05-30 11:45:57 · 340 阅读 · 0 评论 -
前端使用TradingView与websocket数据推送-demo
前端使用TradingView与websocket数据推送-demo。原创 2024-05-30 11:42:00 · 410 阅读 · 0 评论 -
vue测试环境打包文件不添加hash和生产环境打包不一致
测试环境打包出来文件和生产包有差异。原创 2024-05-27 12:23:21 · 769 阅读 · 0 评论 -
Vue2和Vue3中使用WebSocker-封装
在Vue.js中实现WebSocket的封装通常需要创建一个单独的模块或插件,以便在整个应用中使用WebSocket。下面是一个简单的例子,演示如何在Vue.js中封装WebSocket:首先,你可以创建一个名为例子中,我们创建了一个WebSocket实例,并在Vue插件中定义了一些生命周期事件的处理程序。我们使用Vue的$emit方法将收到的消息传递给Vue组件。然后,在Vue应用的入口文件(通常是main.js现在,在Vue组件中,你可以通过来访问WebSocket实例。原创 2024-05-20 11:15:53 · 1697 阅读 · 2 评论 -
axios封装各种请求方式-请求拦截器和响应拦截器
在Vue项目中使用axios时,封装请求方式、请求拦截器和响应拦截器是一个良好的实践。下面是一个简单的axios封装的例子,包括GET、POST、PUT、DELETE请求,以及请求拦截器和响应拦截器。原创 2024-04-22 10:54:08 · 452 阅读 · 0 评论 -
element-ui按需引入配置babel-preset-es2015 有问题?
报错 Error: Cannot find module ‘babel-preset-es2015。原创 2024-04-15 10:36:51 · 398 阅读 · 0 评论 -
el-upload上传组件二次封装-数据回显-demo
el-upload上传组件二次封装-数据回显原创 2024-04-10 14:15:43 · 513 阅读 · 0 评论 -
Vite+TS-Vue项目中找不到模块“@/xx”或其相应的类型声明-错误提示
找不到模块“@/components/pagination.vue”或其相应的类型声明。但是使用。原创 2024-03-26 10:52:01 · 1276 阅读 · 0 评论 -
Vue上实现上下左右无缝滚动、单步滚动-demo
拷贝列表次数,默认拷贝一次,当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果。singleHeight and singleWidth 是否开启 rem 度量。控制滚动方向,可选值up,down,left,right。通过v-model控制动画滚动与停止,默认开始滚动。开启滚动的数据量,只有列表长度大于等于该值才会滚动。在开启鼠标悬停的情况下是否开启滚轮滚动,默认不开启。无缝滚动列表数据,组件内部使用列表长度。动画效果,可以传入贝塞尔曲线数值。动画循环次数,默认无限循环。原创 2024-03-25 11:20:27 · 1717 阅读 · 1 评论 -
Vue中使用轮播图滚动组件-swiperjs-demo
Vue中使用轮播图滚动组件-swiperjs-demo。原创 2024-03-21 10:38:34 · 455 阅读 · 0 评论 -
html+css+JavaScript实现左右滑动区域添加自定义按钮实现移动
选项可以使滚动动作更平滑,但这并不是在所有浏览器中都支持的。如果需要支持更多浏览器,可能需要使用polyfill或者自定义JavaScript动画来实现平滑滚动效果。要在一个左右可以滑动的容器中添加两个固定位置的按钮(左边一个、右边一个),你可以使用。,以便让按钮相对于该容器定位。这样,按钮就会随着容器一起滚动,但始终保持在容器的两侧。需要为按钮添加JavaScript来处理滚动动作。来定位按钮,同时为这个滑动容器设置。原创 2024-03-11 13:28:34 · 1519 阅读 · 0 评论 -
Web端使用Lottie渲染AE导出的json动画-lottie-web-demo
创建LottieAni文件。原创 2024-03-11 13:28:11 · 2115 阅读 · 0 评论 -
Vue中使用element-UI的el-date-picker-修改弹出窗样式
因为el的时间选择器弹出窗是挂载在body中的,并不是在元素下面挂载,所以需要使用提供的popper-class去选择修改样式。原创 2024-02-18 09:34:52 · 1423 阅读 · 0 评论 -
Vue中使用elementUI的DatePicker-IOS移动端会有表单t聚焦时页面放大效果-解决办法
可以像 width=600 这样设为确切的像素数,或者设为 device-width 特殊值,代表缩放为 100% 时以 CSS 像素计量的屏幕宽度。相应的也有 height 及 device-height 属性,可能对包含基于视口高度调整大小及位置的元素的页面有用。是可以看到 Web 内容的窗口区域,通常与渲染出的页面的大小不同,这种情况下,浏览器会提供滚动条以滚动访问所有内容。属性控制页面最初加载时的缩放等级,即当页面第一次 load 的时候缩放比例。属性控制允许用户缩放到的最小比例。原创 2024-01-29 10:23:20 · 657 阅读 · 0 评论 -
vue3使用css变量实现主题切换-黑白切换
vue3使用css变量实现主题切换-黑白切换原创 2024-01-18 15:32:13 · 705 阅读 · 0 评论 -
aws-S3上传文件配置-uploadS3.js
aws-S3上传文件配置-uploadS3.js。原创 2024-01-18 15:31:46 · 605 阅读 · 0 评论 -
Vue如何实现获取可视范围内的数据
通过使用 Intersection Observer API,你可以动态地观察元素是否在视口内,并根据需要更新相关的数据。在 Vue 中,要获取可视范围内的数据,你可以使用 Intersection Observer API 来观察元素是否在视口内,并根据需要更新数据。当目标元素进入视口时,会触发回调函数,我们可以在回调函数中更新数据或执行其他操作。当目标元素进入或离开视口时,你可以在回调函数中执行相应的逻辑来更新数据或执行其他操作。引用元素,你需要给目标元素添加。首先,你可以在 Vue 组件的。原创 2024-01-18 15:29:20 · 766 阅读 · 0 评论 -
JavaScript实现对数组按ABCD...依据给定顺序排序
首先,遍历数组中的每一个对象,取出其name属性的第一个字符,并将其转化为大写字母。然后,判断该字符是否在enList中,如果在则将其作为键名存储在结果对象中,如果不在则将其归为'#'键名中。首先,对于输入的列表进行排序,方法是先按照name属性进行排序,然后依次比较每一项的name属性的首字母和enList数组的元素,找到对应的enList下标,将这一项添加到对应的字母分类中。最后,遍历结果对象,将每一个键名对应的数组按字母顺序进行排序,并返回排序后的结果对象。原创 2024-01-18 15:26:34 · 1149 阅读 · 0 评论 -
Vue2和Vue3中页面循环添加多个ref-dom
Vue2和Vue3中页面循环添加多个ref-dom。原创 2024-01-18 15:23:07 · 963 阅读 · 0 评论 -
Vue eslint 报错 error Component name “xxxx“ should always be multi-word-创建文件后的命名问题导致报错
组件命名的时候没按照 ESLint 的官方代码规范进行命名,根据 ESLint 官方代码风格指南,除了根组件App.vue以外,其他自定义组件命名要。ignores: ['Home', 'User'] //在这个数组中加入需要忽略的组件名。如:myHome.vue、userPwd.vue等等。经过上面的配置后,只需要重启项目即可。// 添加组件命名忽略规则。// 关闭组件命名规则。原创 2024-01-15 07:15:00 · 795 阅读 · 0 评论 -
Vue-页面解决浏览器自动填充input输入框账号密码
登录注册页面禁止浏览器自动填充账号密码。原创 2023-12-18 10:47:19 · 1657 阅读 · 0 评论