vue - 随笔分类 - kitty20180903suzhou

Vue3 如何让代码变得清新优雅，代码洁癖患者进！（2）

摘要：将搜索功能单独封装成组件， **如果你想问这又是何必呢？** 未经他人苦莫劝他人善！就是要封装，不想看见一坨一坨的代码。 **温馨提示：** 在搜索组件中，搜索条件初始值获取 ruote.query 获取，这样刷新浏览器依然可以保留上一次的数据，注意，搜索条件里没有 pageNum 和 p 阅读全文

posted @ 2023-06-05 10:45 kitty20180903suzhou 阅读(79) 评论(0) 推荐(0)

Vue3 如何让代码变得清新优雅，代码洁癖患者进！（3）

摘要：将含有表单的弹窗单独封装成组件， **如果你想问这又是何必呢？** 未经他人苦莫劝他人善！就是要封装，不想看见一坨一坨的代码。 **温馨提示：** 若依获取字典方法还是很好用的，但是要放在初始化数据（方法 init ）的时候使用，proxy.useDict，避免字典重复加载！已加载的阅读全文

posted @ 2023-06-05 10:45 kitty20180903suzhou 阅读(627) 评论(0) 推荐(0)

Vue3 如何让代码变得清新优雅，代码洁癖患者进！（4）

摘要：列表页面来啦！ **温馨提示：** 在列表页面中，使用若依的分页组件： Pagination，图片预览组件：ImagePreview，标签组件 DictTag ，还有公共方法 parseTime 等等对若依 respect ! 搜索或翻页时通过 router.push 跳转路由，使用阅读全文

posted @ 2023-06-05 10:45 kitty20180903suzhou 阅读(276) 评论(0) 推荐(0)

Vue3 通过ossId 调用接口获取文件信息，多个或单个

摘要：天呐，离谱了兄弟们！关于文件上传的问题，在表单提交的时候，对于上传的文件要，新增或修改的接口要传 ossId，但是回显的时候又没有给我 ossId，只有文件信息，导致修改的时候就有问题。还有多文件的时候，多个就让我传文件路径，单个就传 ossId。我信你个鬼！直接让后端回显的时候不要给我返回阅读全文

posted @ 2023-06-05 10:45 kitty20180903suzhou 阅读(192) 评论(0) 推荐(0)

Vue3 如何让代码变得清新优雅，代码洁癖患者进！（1）

摘要：继续上上上上...上一篇 [列表的批量操作组件封装 + 权限，如何更优雅的实现呢？Vue3](https://www.cnblogs.com/kitty-blog/p/17380714.html)，继续谈一下，如何优雅封装页面上的组件。页面上的组件有很多种，最让人头疼的是弹窗表单组件，最讨厌写表阅读全文

posted @ 2023-05-08 16:23 kitty20180903suzhou 阅读(240) 评论(0) 推荐(0)

Vue3 QuillEditor 富文本编辑器

摘要：对于这个组件，我是又爱又恨，上代码： <template> <div>  <QuillEditor ref="myQuillEditor" theme="snow" :content="content" :options="data.edi 阅读全文

posted @ 2023-05-08 15:37 kitty20180903suzhou 阅读(672) 评论(0) 推荐(0)

vue3 多级数据下拉选择组件

摘要：若依的下拉组件太复杂，我改了一下，希望对大家有帮助，基于 element-plus el-tree-select 组件：举个栗子，TreeSelect.vue： ``` ``` 阅读全文

posted @ 2023-05-08 15:33 kitty20180903suzhou 阅读(699) 评论(0) 推荐(0)

vue3 通过fuse.js 实现前端模糊查询

摘要：在项目中写好多个查询组件，基于 element-plus el-select 组件：举个栗子，SelectAllCompany.vue： ``` 未找到相关客户信息，请前往客户管理中添加 ``` 阅读全文

posted @ 2023-05-08 15:23 kitty20180903suzhou 阅读(205) 评论(0) 推荐(0)

若依--图片预览组件

摘要：**若依的图片预览组件，很实用，放在这里：** 上代码，ImagePreview： ``` ``` 阅读全文

posted @ 2023-05-08 14:48 kitty20180903suzhou 阅读(2296) 评论(0) 推荐(0)

Vue3 文件上传组件

摘要：基于 vue3 element-plus 文件上传组件封装，兄弟姐妹们，将就看一下吧：支持：粘贴文件路径上传、文件识别开关，上代码，FileUpload.vue ``` 开启识别（仅支持 .jpg .png .jpeg .bmp文件格式）选择上传文件请上传大小不超过 {{ fileSize 阅读全文

posted @ 2023-05-08 14:44 kitty20180903suzhou 阅读(432) 评论(0) 推荐(0)

Vue3 图片上传组件

摘要：基于 vue3 element-plus 图片上传组件封装，兄弟姐妹们，将就看一下吧，上代码，ImageUpload.vue： ``` 1" :before-upload="handleBeforeUpload" :on-preview="handlePictureCardPreview" :htt 阅读全文

posted @ 2023-05-08 14:44 kitty20180903suzhou 阅读(678) 评论(0) 推荐(0)

vue3 证件识别上传组件封装

摘要：**证件图片识别上传** 根据业务需要，经常涉及到证件上传，例如身份证上传、银行卡、营业执照等信息，根据设计师的设计，单独封装了一个上传组件。识别接口后端用的是阿里云的。上传组件用的是 element-plus el-upload 上代码，CertificateUpload.vue： ``` = 阅读全文

posted @ 2023-05-08 14:23 kitty20180903suzhou 阅读(448) 评论(0) 推荐(0)

若依--字典标签组件完善

摘要：**由于若依是基于element，但是在实际业务中，往往会出现标签不够用的情况，数据标签回显样式只有一下六种：** ``` // 数据标签回显样式 const listClassOptions = ref([ { value: "default", label: "默认" }, { value: " 阅读全文

posted @ 2023-05-08 11:29 kitty20180903suzhou 阅读(1455) 评论(0) 推荐(0)

若依--自定义指令 v-hasPermi 和 v-hasRole

摘要：为什么大家都在用若依？若依版本有很多种，前端的，后端的，大家点击去看看 http://doc.ruoyi.vip/，看完记得回来！第一次接触到若依是进入这家公司之后，以前做项目都是“白手起家”，若依项目结构清晰，很多轮子都被造好了，不用自己搭建项目，git clone 就完成了，happy！还阅读全文

posted @ 2023-05-08 11:28 kitty20180903suzhou 阅读(3701) 评论(0) 推荐(0)

列表的批量操作组件封装 + 权限，如何更优雅的实现呢？Vue3

摘要：1. **这个组件解决的问题？** 在以往的项目当中，我从未想过要对批量/列表数据的操作按钮做什么变动，直到最近的一次开发。当页面功能多而复杂，整个页面会变得十分混乱，就比如，当操作按钮过多时，操作按钮的触发判断条件、权限指令、更多下拉操作等等，这使得页面十分混乱，维护起来让人头疼。当然也会出阅读全文

posted @ 2023-05-08 09:27 kitty20180903suzhou 阅读(237) 评论(0) 推荐(0)

富文本编辑器 Vue3 Tinymce

摘要：使用yarn 或 npm 安装： "tinymce": "^6.1.2" 和 "@tinymce/tinymce-vue": "4" public 文件夹下新建 tinymce： skins 从 node_modules/tinymce 中复制 langs 下载：https://files.cnbl 阅读全文

posted @ 2022-09-09 11:40 kitty20180903suzhou 阅读(1025) 评论(0) 推荐(0)

vue2.x 复制粘贴文件路径上传文件（element-ui）

摘要：最近开发的产品，需要拥有上传发票的功能，原本是点击上传按钮选择文件上传，经理问：能不能复制粘贴文件然后直接上传？这样就方便多了！能！当然能！互联网时代无所不能！只有你想不到没有code 做不到的。上代码：第一步：需要一个输入框，给用户复制粘贴文件路径：@paste.native 监听粘贴的动作阅读全文

posted @ 2022-03-17 16:35 kitty20180903suzhou 阅读(690) 评论(0) 推荐(0)

uniapp 使用uni.request发送multipart/form-data请求的方法

摘要：最近开发的时候遇到一个问题，小程序上需要向后端传 base64 的图片，且需要使用multipart/form-data 的方式将数据传给后端，然而(wx|uni).request 没有直接支持 multipart/form-data，百度了半天终于找到了解决方法，在这里记录一下。第一个问题：请阅读全文

posted @ 2022-03-17 16:12 kitty20180903suzhou 阅读(3244) 评论(0) 推荐(0)

GraceUI - 地区联动组件内数据转换成 element-china-area-data 的数据

摘要：1 // import provinceData from '../data/city-data/province.js'; 2 // import cityData from '../data/city-data/city.js'; 3 // import areaData from '../da 阅读全文

posted @ 2021-07-06 11:37 kitty20180903suzhou 阅读(427) 评论(0) 推荐(0)

文件上传组件（基于 antd ）

摘要：组件功能：1、可以上传文件、图片；2、限制大小、文件类型 3、预览 <template> <div class="clearfix" style="position:relative"> <a-upload name="file" list-type="picture-card" class="a 阅读全文

posted @ 2020-11-24 18:25 kitty20180903suzhou 阅读(824) 评论(0) 推荐(0)

我的博客我做主

公告

随笔分类 - vue