![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
小金的口袋
这个作者很懒,什么都没留下…
展开
-
前端(vue)导出pdf
纯前端(vue)导出pdf原创 2023-02-08 15:18:56 · 997 阅读 · 1 评论 -
echarts 滚动条
echarts 滚动条原创 2022-11-24 18:02:58 · 668 阅读 · 0 评论 -
Failed to resolve component: router-view at <App>
在新建Vue3项目时,在App.vue文件中使用router-view会出现如下警告,并且页面不显示:原创 2022-08-05 11:06:05 · 783 阅读 · 0 评论 -
Vue实现批量选择操作(上下架,删除等)
在处理一些列表之类的数据时,经常会有一些批量处理的操作,以下仅以批量删除为例来做简单的分析,其主要代码如下:批量操作主要是获取被选中的id,然后将选中的id传给后端接口即可。原创 2022-06-28 09:43:04 · 1525 阅读 · 0 评论 -
el-form 中的数组表单验证(数组可动态添加删除)
除了一些简单的表单验证之外,我们还会有一些稍微复杂点的多层级表单的验证,如下图所示可点击添加,删除对数组进行操作,当点击确定时需要验证每一条form-item不能为空其tempalte部分主要代码如下所示:<el-form :model="form" ref="cardForm" :rules="rules" label-position="top" > <el-form-item v-for="(item, index) in form.CARD_RIGHTS_LIST" :l原创 2022-05-25 09:34:36 · 3746 阅读 · 1 评论 -
Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)
Vue3组件通信方式:props$emitexpose / ref$attrsv-modelprovide / injectVuex使用方法:props用 props 传数据给子组件有两种方法,如下方法一,混合写法// Parent.vue 传送<child :msg1="msg1" :msg2="msg2"></child><script>import child from "./child.vue"imp原创 2022-02-18 11:39:34 · 576 阅读 · 0 评论 -
Vue项目中实现文件下载到本地的功能
公司业务需求,我需要实现一个合同模板,自定义输入内容后生成合同随后导出下载合同。(自定义部分用到的是)为了实现这个文件下载到本地的功能,真的是废了九牛二虎之力,以至于差点放弃(主要还是自己菜)。刚开始自己用到的是Window.open()的方法,发现这个方法只能将你的合同在新页面打开,并不能实现下载功能;然后就换了html5 Bolb方法,弄了些许时间后发现还是不能达到自己的需求,最后在不断的挣扎中找到了**FileSaver.js** 首先需要安装即:npm install file-saver --s原创 2022-02-11 17:35:41 · 5653 阅读 · 2 评论 -
新建Vue项目时的一些初始化配置(项目运行,浏览器自动打开;src文件夹简写,即 配置别名)
新建一个Vue项目时,为了在后续更加方便的使用,通常会设置一些比较省时省力的配置:1.运行项目浏览器自动打开:在package.json文件下的scripts进行简单配置:"serve": "vue-cli-service serve --open",2.配置别名:在示例app中创建一个jsconfig.json的文件夹,文件夹的配置如下:{ "complierOptions": { "baseUrl": "./", "paths": {原创 2021-12-14 11:11:44 · 1061 阅读 · 0 评论 -
uni-app(Vue)中(picker)用联动(关联)选择以至于完成某些功能
如下图所示,在项目中需求是通过首先选择学生的专业,选好之后在每个专业下面选择对应的学期,每个学期有对应的学费,因此就需要联动选择来实现这一功能。以下仅展示此功能主要代码:<div class="item"> <div class="item-left"> <span class="star">*</span> <span>目标专业 :</span> </div> <pi原创 2021-11-03 16:26:16 · 749 阅读 · 0 评论 -
uni-app 使用API中的uni.chooseImage 上传照片以及uni.previewImage图片预览(身份证照片为例)
在uni-app项目中通常需要用户上传照片,如下图所示:代码如下:<template> <div class="container"> <div class="user-info"> <div class="id-info">身份证照片</div> <div class="tips">*请上传本人的身份证照片(单张照片限制1M以内)</div> <div> <img原创 2021-08-04 15:55:00 · 2150 阅读 · 0 评论 -
通过vue在uni-app中设置当前北京时间(动态时间)
在项目中通常需要在页面中显示当前时间,具体代码如下所示:<template> <div class="container"> <div class="times"> <span>{{ hour }} : {{ minutes }}</span> <span style="font-size: 38upx;margin-left: 10upx;;">{{ seconds }}s</span> </原创 2021-08-02 10:21:11 · 1165 阅读 · 0 评论 -
uni-app中当uni.navigateTo传的参数为object时,通过传递的不同参数,在显示单页面内通过v-if判断显示出对应的内容(可实现多页面效果)
通过uni-app中当uni.navigateTo传的参数为object时,通过传递的不同参数,在显示单页面内通过v-if判断显示出对应的内容(可实现多页面效果)起始页跳转到对应页面,并传递参数(object),如下图所示:<template> <div> <div class="item" v-for="(item,index) in className" :key="index" @click="nextPage(item)"> <div cl原创 2021-07-20 14:33:30 · 675 阅读 · 0 评论