vue - 随笔分类 - jimyking

前端（vue）导出pdf

摘要：纯前端导出 pdf 实现方法如下： 1. 安装 html2pdf、jspdf npm install html2canvas jspdf --save 2. 项目 ==utils== 文件夹中新建一个 html2pdf.js（文件名称自拟）文件，内容如下： import jsPDF from 'js 阅读全文

posted @ 2023-02-08 15:24 jimyking 阅读(2336) 评论(3) 推荐(2)

echarts 滚动条

摘要：X轴图片仅作例子展示 dataZoom: [ { start: 0, // 默认为0 end: 100, // 默认为100 type: 'slider', maxValueSpan: 2, // 显示数据的条数(默认显示10个，注意：从 0 开始计算) show: this.XData.leng 阅读全文

posted @ 2022-11-24 18:03 jimyking 阅读(1139) 评论(0) 推荐(0)

Failed to resolve component: router-view at <App>

摘要：在新建Vue3项目时，在App.vue文件中使用router-view会出现如下警告，并且页面不显示：出现此问题的主要原因是在main.js中app.use(router)在app.mount('#app')后引入，只需要如下图改下引用顺序即可阅读全文

posted @ 2022-08-05 11:05 jimyking 阅读(933) 评论(0) 推荐(0)

一文解决Vue中实现 Excel下载到本地以及上传Excel

摘要：相信大家在项目中经常会遇到一些上传下载文件的相关功能，本文就Excel的相关功能进行简述：咱直接看代码： <div class="import-main-content"> <div class="import-main-button" @click="checkFile"> <div class 阅读全文

posted @ 2022-07-14 09:24 jimyking 阅读(790) 评论(0) 推荐(0)

Vue实现批量选择操作（上下架，删除等）

摘要：在处理一些列表之类的数据时，经常会有一些批量处理的操作，以下仅以批量删除为例来做简单的分析，其主要代码如下： <template> <el-button size="small" type="danger" plain @click="selectDeletePrize('08',prizeId)" 阅读全文

posted @ 2022-06-28 09:46 jimyking 阅读(555) 评论(0) 推荐(0)

el-form 中的数组表单验证(数组可动态添加删除)

摘要：除了一些简单的表单验证之外，我们还会有一些稍微复杂点的多层级表单的验证，如下图所示可点击添加，删除对数组进行操作，当点击确定时需要验证每一条form-item不能为空其tempalte部分主要代码如下所示： <el-form :model="form" ref="cardForm" :rules= 阅读全文

posted @ 2022-05-25 09:35 jimyking 阅读(898) 评论(0) 推荐(0)

Vue中组件通信的几种方法（Vue3的7种和Vue2的12种组件通信）

摘要：Vue3组件通信方式： props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法： props 用 props 传数据给子组件有两种方法，如下方法一，混合写法 // Parent.vue 传送 <child :msg1=" 阅读全文

posted @ 2022-02-18 11:40 jimyking 阅读(911) 评论(4) 推荐(2)

Vue项目中实现文件下载到本地的功能

摘要：公司业务需求，我需要实现一个合同模板，自定义输入内容后生成合同随后导出下载合同。(自定义部分用到的是) 为了实现这个文件下载到本地的功能，真的是废了九牛二虎之力，以至于差点放弃（主要还是自己菜）。刚开始自己用到的是Window.open()的方法，发现这个方法只能将你的合同在新页面打开，并不能实现下阅读全文

posted @ 2022-02-11 17:36 jimyking 阅读(2155) 评论(0) 推荐(0)

新建Vue项目时的一些初始化配置（项目运行，浏览器自动打开；src文件夹简写，即配置别名，关闭eslint）

摘要：新建一个Vue项目时，为了在后续更加方便的使用，通常会设置一些比较省时省力的配置： 1.运行项目浏览器自动打开：在package.json文件下的scripts进行简单配置： "serve": "vue-cli-service serve --open", 2.配置别名：在示例app中创建一个j 阅读全文

posted @ 2021-12-14 11:11 jimyking 阅读(163) 评论(0) 推荐(0)

Vue中怎么使用联动选择

摘要：如下图所示，在项目中需求是通过首先选择学生的专业，选好之后在每个专业下面选择对应的学期，每个学期有对应的学费，因此就需要联动选择来实现这一功能。以下仅展示此功能主要代码： <div class="item"> <div class="item-left"> <span class="star">* 阅读全文

posted @ 2021-11-03 16:26 jimyking 阅读(368) 评论(0) 推荐(0)

uni-app 使用API中的uni.chooseImage 上传照片以及uni.previewImage图片预览（身份证照片为例）

摘要：在uni-app项目中通常需要用户上传照片，如下图所示：其中部分参数为本项目中请求接口时所需要的，可以根据需求自行修改对应的参数等，代码如下： <template> <div class="container"> <div class="user-info"> <div class="id-inf 阅读全文

posted @ 2021-08-04 15:52 jimyking 阅读(3082) 评论(0) 推荐(0)

通过vue在uni-app中设置当前北京时间（动态时间）

摘要：在项目中通常需要在页面中显示当前时间，具体代码如下所示： <template> <div class="container"> <div class="times"> <span>{{ hour }} : {{ minutes }}</span> <span style="font-size: 38 阅读全文

posted @ 2021-08-02 10:19 jimyking 阅读(1133) 评论(0) 推荐(0)

uni-app中当uni.navigateTo传的参数为object时，通过传递的不同参数，在显示单页面内通过v-if判断显示出对应的内容（可实现多页面效果）

摘要：通过uni-app中当uni.navigateTo传的参数为object时，通过传递的不同参数，在显示单页面内通过v-if判断显示出对应的内容（可实现多页面效果）起始页跳转到对应页面，并传递参数（object），如下图所示： <template> <div> <div class="item" v 阅读全文

posted @ 2021-07-20 14:30 jimyking 阅读(593) 评论(0) 推荐(0)

uni-app中组件picker的基本使用（日期选择器为例）

摘要：例：需要在下图“自定义日期”中使用日期选择器 <template> <div> <picker mode="date" @change="bindDateChange"> <div :class="timeIndex == 4 ? 'active-time' : ''">{{anyDate}}</d 阅读全文

posted @ 2021-07-08 14:38 jimyking 阅读(5617) 评论(0) 推荐(1)

随笔分类 - vue