项目
文章平均质量分 52
....492
这个作者很懒,什么都没留下…
展开
-
在前端开发中,文件上传和预览功能是常见的需求之一。本文将介绍如何利用 Ant Design Vue 组件库实现文件上传与预览功能。我们将使用 Ant Design Vue 中的 Upload 组件来实
- 使用 Ant Design 的 Upload 组件实现文件上传 --> < a-upload v-model: file-list = " fileList " :action="uploadFileParams.url" :headers="uploadFileParams.headers"原创 2024-05-14 11:22:12 · 923 阅读 · 1 评论 -
基于Vue3和anta的拖拽模态框组件实现车牌号输入功能
创建一个拖拽模态框组件,其中包含一个显示车牌键盘的区域和一个确定按钮。使用Ant Design Vue组件库的DragModal组件来实现拖拽功能,并设置相关样式。在车牌键盘区域内,使用Vue的v-for指令遍历键盘按键,并为每个按键添加点击事件。在确定按钮上添加点击事件,用于提交输入的车牌号。使用Vue的响应式数据机制,监听车牌号的变化,并在变化时更新视图。原创 2023-09-14 15:17:57 · 966 阅读 · 0 评论 -
自定义导出弹窗
本文将介绍一个基于 Vue3 的组件开发实例,实现了一个自定义导出弹窗。该弹窗允许用户选择需要导出的字段,并可以拖动排序。最后,用户可以保存设置和导出数据。显示一个弹窗来自定义导出配置加载状态显示左侧区域展示可选字段列表右侧区域展示已选字段,并支持拖拽排序保存设置按钮,用于保存用户选择的字段导出按钮,用于导出数据错误处理和加载状态反馈。原创 2023-08-14 14:01:29 · 285 阅读 · 0 评论 -
下拉选择框组件
以上就是完整的组件代码。在模板部分,我们使用了Ant Design的a-select组件来实现下拉选择框功能,根据需要添加了一些相关属性和事件处理函数。脚本部分包含了一些用于处理选择值、获取选项列表和更新选择状态的逻辑。样式部分定义了一些简单的样式规则。原创 2023-08-14 11:23:13 · 228 阅读 · 0 评论 -
基于 Vue.js 的可拖拽排序的表格组件
该组件使用了 Vue 3 的 ref、computed 和 defineComponent,以及 setup 钩子函数。在 setup 钩子函数中,我们定义了 newDataSource 这个计算属性,用于监听 props.dataSource 的变化,并在发生变化时派发名为 update:dataSource 的事件向父组件传递新的数据源。同时,我们也定义了几个响应式的变量 dragItem、dragIndex 和 targetArr,分别用于存储当前拖拽的项、当前拖拽项的索引和目标行的数组。原创 2023-08-14 11:01:09 · 226 阅读 · 0 评论 -
实现可拖拽功能的Vue模态框组件 基于antd Vue3 加ts
在Vue开发中,我们经常需要使用模态框组件来展示提示、对话框等信息。今天我们将介绍如何实现一个可拖拽的Vue模态框组件,使用户可以通过拖拽模态框的标题栏来改变其位置,使用场景后代管理系统。首先,我们需要使用Vue的单文件组件来构建我们的模态框组件。在单文件组件中,我们可以定义模态框的HTML模板和相关的JavaScript逻辑。原创 2023-08-09 11:03:24 · 655 阅读 · 0 评论 -
下拉列表存vuex
在这里插入图片描述。原创 2023-05-14 21:48:18 · 78 阅读 · 0 评论 -
数据持久化vue
在仓库 localStorageTodo(‘todo’).value || []设置 localStorage.set(‘todolist’,state)获取localStorage.get(‘todolist’),原创 2023-05-11 22:34:57 · 58 阅读 · 0 评论 -
创建项目vue
Vite是一款基于ESM原生模块化开发的构建工具,可以快速启动项目并提供快速的热更新服务。以上就是使用Vite创建Vue3项目的基本步骤,Vite的热更新机制可以在修改代码后快速更新页面,大大提高了开发效率。打开浏览器,在 http://localhost:8080/ 查看项目。打开浏览器,在 http://localhost:3000/ 查看项目。以上就是Vue2创建脚手架的基本步骤,可以根据需要进行配置和修改。安装Node.js和npm(已安装可跳过)安装Node.js和npm(已安装可跳过)原创 2023-05-11 22:26:08 · 47 阅读 · 0 评论 -
pc端自适应
安装amfe-flexible和postcss-pxtorem。postcss-pxtorem将px转为rem;在main.js中引入amfe-flexible。根目录下添加postcss.config.js。amfe-flexible可进行屏幕自适应;原创 2023-05-01 19:37:02 · 238 阅读 · 0 评论 -
Vue 项目中,可以使用 postcss-pxtorem 插件将 px 单位自动转换为 rem 单位
这样配置后,项目中的 CSS 文件中的 px 单位就会自动转换为 rem 单位。例如,如果 rootValue 设置为 16,则 1px 会转换为 0.0625rem。在 Vue 项目中,可以使用 postcss-pxtorem 插件将 px 单位自动转换为 rem 单位。原创 2023-05-01 18:50:43 · 2046 阅读 · 0 评论