随笔分类 - Vue相关
摘要：需求 使用iframe展示后端接口传输来的文件流（pdf），如果接口返回错误则弹出提示 html部分 <iframe :src="url" width="100%" /> 接口部分 // 接口封装已忽略，注意：如需接口接收文件流，请在请求中加入responseType: 'blob'以及type:
阅读全文
摘要：错误截图 解决方法 package.json文件中修改dev项为set NODE_OPTIONS openssl-legacy-provider & vue-cli-service serve： "scripts": { "dev": "set NODE_OPTIONS openssl-legacy
阅读全文
摘要：目录认识vue3-pdf-app安装vue3-pdf-app代码子组件封装: PdfView.vue父组件调用: index.vue中文配置文件viewer.properties 本文参考来自于 CSDN作者theMuseCatcher《Vue3PDF预览（vue3-pdf-app）》 认识vue3
阅读全文
摘要：时间格式化使用moment.js，按需求添加，如不需要请手动格式化至相应格式 npm install moment --save 获取当天起始时间 moment().startOf('day').format('YYYY-MM-DD HH:mm:ss') // 格式化为 2022-12-30 00:
阅读全文
摘要：问题 elementUI input、radio等组件失效： 绑定数值已经被修改, 但是页面回显数值没有修改 原因 组件嵌套试用导致数据刷新不及时。 解决方法 input： 在标签中添加 @input="$forceUpdate()" radio： 在标签中添加 @change="$forceUpd
阅读全文
摘要：问题 Q： 前端显示一张图片，该图片可被重新上传, 后端存储时全部命名为【/照片.jpg】。 当重新上传该图片时，请求详情接口后被更新的图片字段名称返回依旧是【/照片.jpg】，此时页面图片不更新，仍是未更新前的图片，重新刷新页面后图片更新。 如何使页面不刷新就更新图片？ 解答 A： 发生问题的原因
阅读全文
摘要：项目创建 全局安装vite-app npm i -g create-vite-app 创建项目 vue3test-project是项目名称 create-vite-app vue3test-project 代码编写 实例化vue 引用vue import { reactive, toRefs, on
阅读全文
摘要：预览： 代码： 页面部分: <template> <div class="roadnum-all" ref="roadnumall"> <div id="roadnum" ref="dom"></div> </div> </template> CSS部分: .roadnum-all { width:
阅读全文
摘要：预览: 代码: 页面部分: <template> <div class="tagcloud-all" ref="tagcloudall"> <a v-for="item in tagList" :href="item.url" :style="'color:' + item.color + ';to
阅读全文
摘要：最近项目中需要用到省市区联动，ui用的是有赞的Vant-UI 看了一下文档，UI中已经给我们提供了一个写好的省市区联动组件，如果没有特殊需求的话可以直接使用： 但是这个组件的架构和项目中的需求有一些出入——项目中所需的行政区标识code使用的不是标准行政区六位代码，是自定义的标识，需要从后台请求拿到
阅读全文
摘要：跨页多选翻页保存问题折磨了我一天，终于找到了合适的解决方法分享一下。 需求： 项目中使用Element UI： 表格中数据通过网络请求得到； 给后台接口发送页码（pagenum）和每一页条数（pagesize）实现数据分页； 实现单页内全选 翻页保存之前选中的数据 解决方式： 使用官方文档中提供的r
阅读全文
摘要：问题描述 项目前台有个tab标签页切换，三个TabPane标签，分别挂载三个不同的组件，三个组件中都有网络请求，且第三组件中数据量大无分页，需要进行前端显示优化——Tab页怎样进入页面时只请求默认显示项的数据？ HTML代码大致如下，pending-table、warning-select、thre
阅读全文
摘要：iview UI 按需引入 此时Select组件下拉框未生效，显示无匹配数据 解决方法： 引入时将Option组件一起引用
阅读全文
摘要：项目前台页面用的iview-UI,下面对表格相关的样式修改和数据渲染进行一下总结 数据渲染相关 正常渲染 直接从教程中拿出来的组件代码: <Table :columns="columns" :data="data"></Table> columns中填写的数据必须是一个数组,代表的是表头相关,常用的
阅读全文
摘要：项目中表单填写提交前需要进行验证,记录一下踩坑的几个地方 [TOC] rules验证和自带验证 在data中用rules自定义了验证信息,注意,prop的值应该与v model的值和rules中的值一样,否则无法触发rules验证。 例子如下： 在实际使用中,当el form item标签与rule
阅读全文
摘要：项目预览 首页((http://localhost:8080/) 首页样式 首页功能 导航下拉框 热门推荐 搜索联想 侧弹框 轮播图 选项卡切换 猫眼电影 切换城市(http://localhost:8080/ChangeCityPage.html) 切换城市页样式 切换城市页功能 下拉框省市联动
阅读全文
摘要：[TOC] API 商品列表 参数 返回 创建订单 参数 返回 订单列表 参数 返回 查询订单详情 参数 返回 取消订单 参数 返回 获取openid 参数 返回 支付订单 参数 返回 获取产品评价列表 参数 返回 获取全部评价 参数 返回 创建评价 参数 返回 后端 订单列表 参数 返回 取消订单
阅读全文
摘要：[TOC] 前言 最近做项目，项目要求某个网页中嵌入一个地图控件，对这个控件的要求是能动态获取后台数据传来的json数据中的位置信息。 经过一番筛选（尝试了好几种地图），我最后在众多地图中选择了百度地图。 地图选好了 ，那么我们怎么把地图控件放入网页中使用呢？ 前置操作 以下是前置操作，一共四步：
阅读全文
摘要：最近做项目中，碰到了点小麻烦： 后台从接口请求回来的城市相关的数据只有城市名称，没有排序，铺页面的时候要排序就很麻烦； 面向百度编程时候找到了一个包，用它来将字符串转成拼音，就可以通过字符串截取取出拼音首字母，这样就可以进行首字母排序了。 这个包的名字叫 js pinyin 。 npm下载 npm
阅读全文
摘要：在实现双向绑定之前，先了解一个函数的作用： Object.defineProperty() Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。 想要对Object.defineProperty()这个函数有更深入的了解
阅读全文
