vue学习笔记
zuo-yiran
这个作者很懒,什么都没留下…
展开
-
vue2实现字节流byte[]数组的图片预览
vue2实现字节流byte[]数组的图片预览。原创 2024-04-25 15:26:03 · 701 阅读 · 0 评论 -
图片预览插件vue-photo-preview的使用
vue图片预览插件vue-photo-preview的使用原创 2023-08-11 15:06:08 · 844 阅读 · 0 评论 -
vant List组件实现上拉加载中 首次进行load事件执行两次的问题
list组件上拉加载第一次加载去执行load事件时,该事件执行两次的问题解决原创 2023-07-06 15:22:21 · 2507 阅读 · 0 评论 -
vue 使用qrcodejs2生成二维码
注:使用qrcodejs2生成二维码原创 2023-04-20 10:28:32 · 1223 阅读 · 0 评论 -
vue computed内计算属性方法传参及使用
项目中有需求对某些字段进行处理,vue中computed内计算属性无法直接传参进行使用,想要对字段进行动态过滤。html:<div class="order-card" v-for="item in xcDataList" :key="item.orderId"> <div class="info-date"> <div class="date-left">05月13日 周五</div> <div class="date-right">原创 2023-02-06 17:15:46 · 1245 阅读 · 0 评论 -
vue升级报错:[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead
vue升级报错:[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead原创 2022-12-19 09:50:28 · 1813 阅读 · 0 评论 -
vue el-select搜索功能--区分输入内容后得到的是否是下拉框选择数据
区分elementui使用select组件,进行输入后得到的值是输入的值还是通过下拉框选取的值原创 2022-11-22 18:02:44 · 2177 阅读 · 0 评论 -
vue npm install报错:post install error, please remove node_modules before retry!
报错:× Install fail! RunScriptError: post install error, please remove node_modules before retry!原创 2022-10-24 17:31:42 · 11737 阅读 · 3 评论 -
解决vue 跳转相同路由携带不同参数,页面不渲染问题
解决跳转页面携带不同参数跳转相同路由,页面不会重新渲染的问题原创 2022-09-15 09:59:44 · 3135 阅读 · 0 评论 -
vue 平铺日历选择组件封装(支持选择时间点或时间段)
项目中遇到进行日期选择的需求,一般都是使用在原创 2022-08-15 14:27:12 · 1486 阅读 · 0 评论 -
vue项目中Des的加密解密
vue项目中的des加解密的具体使用原创 2022-07-13 16:07:43 · 1618 阅读 · 0 评论 -
vue 运行项目浏览器页面显示“该网页无法正常运作”
项目运行成功并自动弹出但是页面上显示:确定问题:检查build/webpack.dev.conf.js文件中是否存在下面代码:disableHostCheck: true,https: true,如果有的话,确定一下是否用的https进行的访问,如果用https进行访问进行信任后,出现以下页面:则需要把鼠标在空白处点击,输入:thisisunsafe相当于告诉谷歌这个是不安全的即可正常打开页面进行访问。......原创 2022-06-18 11:28:46 · 3498 阅读 · 1 评论 -
引入vuex报错:“export ‘reactive‘ was not found in ‘vue‘
用vue-cli进行新建项目时没有同步安装vuex,是后续另外用命令加上的,引入后报如下错误提示在vue中未找到这些,比较原来的项目(也是使用的vue2,里面的vuex是3.X的版本,猜测是否是因为版本的问题,尝试后重新安装3.X版本的vuex进行测试,可以运行),发现是版本问题;先删除已经安装的vuex,运行命令:npm uninstall vuex安装指定版本的vuex:npm install vuex@3.X可以选择安装3.4.0版本的...原创 2022-04-01 16:45:16 · 2396 阅读 · 0 评论 -
vue解决报错问题:Module build failed: TypeError: this.getOptions is not a function
vue项目执行报错原创 2022-03-09 11:15:20 · 1988 阅读 · 0 评论 -
使用vue-awesome-swiper实现轮播图异形卡片化两侧切换显示一半的遮挡效果
vue 可以直接使用插件效果如图:主要设置如下:<swiper class="service-advantage" ref="carouselSwiper" :options="swiperOptions"> <swiper-slide v-for="(item,index) in serviceAdvantageData" :key="`item${index}`"> <div class="card-area"> 第{{index}}张swiper原创 2022-01-14 11:01:42 · 4575 阅读 · 0 评论 -
elementUI中NavMenu点击二级导航el-submenu无效
项目中需要用到elementUI的NavMenu 导航菜单,需求是除了要进行下拉选中的操作外需要点击二级菜单时要触发绑定的点击事件,但是直接加@click是没有效果的,这时候可以直接用修饰符实现:@click.native使用js的原生点击事件即可...原创 2021-12-02 09:41:18 · 2988 阅读 · 0 评论 -
解决elementUI el-form resetFields()方法重置表单无效
问题:表单操作中resetFields()方法在编辑后再次新增失效。在开发过程中新增和编辑功能往往使用一个el-form,在新增完成时,执行 resetFields()方法(即:this.$refs[formName].resetFields();),这样再次打开页面时,不会保留原来的数据,但是先给form赋值执行编辑操作,完成时执行resetFields()方法,再次打开进行新增时,会发现数据依然存在,感觉像是resetFields()方法没有起作用。原因:el-form提供的resetField原创 2021-10-24 23:55:54 · 6558 阅读 · 3 评论 -
mint-ui 页面中多个mt-picker动态获取值在初始化自动执行change事件导致的问题及解决方法
场景:在项目过程中遇到一个页面有多个弹出框需要用到mt-picker,且mt-picker的选项都是动态从接口获取到的。问题:具体如下图所示:在页面初始化时需要调用两个接口分别获取同意选项一和不同意选项的可选数据,给mt-picker绑定@change事件,在页面一进来选择快的话是会出现下图所示:选中项和展示出的不是同一值的情况。原因:在页面初始化的时候@change事件会自动执行,如果在@change内赋值的话,会导致其实没有进行选择时,已经有默认值存在,就可能会出现上图所示情况。解决方案:不原创 2021-09-03 14:54:06 · 1378 阅读 · 0 评论 -
elementUI el-form动态控制表单验证
要实现如下操作:根据选择的验证方式的值动态控制表单中的校验方式,即默认对手机号进行校验,选择验证方式为手机号,则对手机号进行必填校验且验证手机号的格式是否正确;选择验证方式为邮箱,则对邮箱进行必填校验且邮箱格式是否正确重点:动态控制rules关键代码::rules="this.isCheckPhone?rules.mobile : [{required: false}]"完整代码代码如下html:<el-form :model="ruleForm" :rules="rules" r原创 2021-07-28 17:17:55 · 2790 阅读 · 0 评论 -
vue 路由多种传参方式的区别
页面间跳转的传参方式主要分为params和query两种:params:第一种:在路由管理的页面,通过在path里面事先命名要传的参数:export default new Router({ routes: [ path: "/HelloWorld/:id", name: "HelloWorld", component: HelloWorld }, { path:原创 2021-06-08 15:27:53 · 1594 阅读 · 0 评论 -
css样式实现:带边框的平行四边形
效果:html:<ul class="tab-right"> <li @click="tabAll('factory',index)" class="tab-li" v-for="(item,index) in factoryList" :key="index"> <div :class="{checked:factoryIndex==index}" class="tab-in">{{item.name}}</div> &原创 2021-05-31 08:51:13 · 1261 阅读 · 0 评论 -
element-ui中的el-tab-pane实现显示隐藏的方法
直接用v-show是不起作用的,经过查找是说v-show起作用的本质是display:none,而因为td的display: table-cell;权限高于display:none,所以v-show失效,那么要实现显示隐藏的控制可以进行使用如下的方式:方式一:最简单有效的用v-if取代v-show实现。方式二:在el-tabs标签上添加ref,通过js进行控制,具体实现如下:例子:<el-tabs v-model="activeName" @tab-click="handleClick"原创 2021-02-18 10:29:58 · 27763 阅读 · 5 评论 -
element UI el-select 绑定值为对象时设置默认值
适用场景描述:在项目中实现编辑功能时,如页面存在下拉框且下拉框的数据在点击相应的select时进行调用( 在编辑时可能需要修改部分数据,而且存在部分下拉数据并不是必选项,如果直接获取所有的下拉数据,可能会造成浪费 ),需要在下拉框内显示已有的值作为默认值,如图所示(以官网给的数据为例):绑定值为字符串:如果只是需要数据的单个值,例如:value时,直接把值绑定给value就可以。代码:页面代码:<el-select v-model="value" placeholder="请选择" @cha原创 2021-01-12 15:14:44 · 10104 阅读 · 2 评论 -
Vue自定义组件选择区间段日期-基于mintui封装的日历组件
实现入下图所示需求:组件的具体代码:<template> <div class="calendar"> <div class="calendar-box"> <div class="title-area"> <div class="title-div">日期选择</div> <i @click="cancelDate" class="iconfont icon-guanbi title-clos原创 2020-11-19 16:38:39 · 1264 阅读 · 0 评论 -
vuex中action的使用场景及具体使用说明
使用场景说明:项目中未读数字提醒功能实现。首页部分是模块列表,点击不同的模块可以进入子模块,子模块列表的未读数数据和首页使用同一接口(该接口返回所有有未读数据的模块的未读数字)使用说明:以上场景适合使用vuex中的action属性,在不同的模块中直接调用action中的方法即可。实现:store.jsimport Vue from 'vue'import Vuex from 'vuex'import axios from 'axios'Vue.use(Vuex)const state原创 2020-10-13 10:13:37 · 8542 阅读 · 0 评论 -
H5移动端适配屏幕(ios和android)
全面屏手机把整个webview(包括状态栏)给H5的话,不对状态栏进行控制往往会有以下如图问题出现,这样头部的返回按钮置于页面的安全区外,无法进行操作。有问题的想要的效果:具体的实现:针对ios的刘海屏问题的解决:一、设置网页在可视窗口的布局方式(重点是添加:viewport-fit=cover)<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, m原创 2020-09-08 14:45:21 · 8328 阅读 · 3 评论 -
vue 不能进行热更新问题的解决
在vue项目中,之前热更新还是好的,突然发现在macos上失败,修改代码需要npm run dev进行重启才能更新,非常影响开发效率,但是不是所有的页面都是这样。然后发现一个大坑,文件名称与实际路径文件夹名称大小写有误。但是可以运行。解决办法:检查文件夹名称是否正确,确保引入文件夹名称与路径的文件夹名称大小写保持一致。经过查找,网上还列举了一些别的可能引起热更新失效的解决办法:1.添加ru...原创 2020-06-19 10:30:56 · 7427 阅读 · 1 评论 -
vue中使用百度地图的两种实现方法
方法一:直接引用js。1.在index.html中引入<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>2.添加配置在webpack.base.conf.js文件中添加如下配置:externals:{ 'BMap':'...原创 2020-05-01 00:23:10 · 6404 阅读 · 0 评论 -
js默认当前日期为开始时间时进行天数计算出错的原因分析及解决方法(vue使用mintui内的时间组件)
例如实现下面的计算:计算天数时间差:(new Date(离店时间) - new Date(入店时间))/(1000 * 60 * 60 * 24)说明:默认初始值为new Date()的当前时间,选择离店时间后,进行天数的计算。例如当前时间是2019年12月31日,那住店时间是2019年的12月31日,离店时间是2020年的1月2日,正常的天数是2天,但是按照选中日期的时间差(new Da...原创 2020-01-22 10:57:10 · 758 阅读 · 0 评论 -
vue中实现点击按钮使input显示的同时获取焦点
需求说明:点击搜索按钮出现input框,并自动使input框聚焦。如图所示:实现方式1:利用vue的refhtml代码如下:<input ref="inputVal" class="searchInp" type="text" v-model="searchVal" placeholder="搜索标题或内容..." /><div v-show="原创 2018-10-24 09:57:47 · 26584 阅读 · 10 评论 -
vue项目解决android版本过低引起兼容问题(例如华为荣耀6)
问题描述:在项目中发现在华为荣耀6手机上,出现页面白屏,抓包后显示接口调用并没有执行,查找后认为是android版本过低(升级测试android4.4.2已是华为荣耀6的最新系统)。华为荣耀6:android版本4.4.2接口请求是用axios + promise方式进行请求的封装。查找后发现是说axios不兼容造成的,但是axios又是基于es6中promise用于浏览器和node.js...原创 2018-09-18 17:20:08 · 12526 阅读 · 3 评论 -
vue实现页面点击按钮请求接口后,把接口数据保存到vuex中,并在组件内渲染和操作
项目中要求实现在页面A中请求接口,点击确定键把接口中返回的数据保存到vuex中并渲染到组件内,要求可以对组件内渲染的数据要可以进行操作。 如果在页面上直接用:&amp;amp;lt;mycheckTip @hidden=&amp;quot;cancelCheck&amp;quot; @ensure=&amp;quot;sureCheck&amp;quot; :isshow=&amp;quot;myche原创 2018-07-09 17:40:31 · 44219 阅读 · 2 评论 -
vue实现前进刷新,后退不刷新
项目中遇到可以有多个入口进入一个页面a,在a页面要调不通的接口进行判断所带过来的信息,可在mounted里面进行判断,此页面还有二级页面可以选择数据,那么就要求从二级页面退回页面a时,不走mounted里面的方法重新调取数据,不然会覆盖掉二级页面带回来的数据,所以就需要进入页面a时进行数据刷新,但是退回到页面a时,则不刷新该数据。说明:例子为从页面2进入页面3时,调用接口,并把数据存到vuex...原创 2018-07-02 10:15:42 · 10234 阅读 · 0 评论 -
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
在新建好的项目中,一般执行npm run build就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换,步骤如下: 文件结构如下图: 1)在config文件内新建test.env.js文件:'use strict'module.exports = { NODE_ENV: '&amp;quot;testing...原创 2018-06-26 11:28:08 · 11149 阅读 · 20 评论 -
在ios中,input唤出软键盘中‘换行’转‘搜索’、‘前往’,及直接唤醒数字键盘的实现(vue)
&amp;lt;input type=&quot;text&quot; /&amp;gt;或&amp;lt;form&amp;gt; &amp;lt;input type=&quot;text&quot; placeholder=&quot;输入&quot;&amp;gt; &am原创 2018-06-07 17:58:14 · 14352 阅读 · 10 评论 -
vue 动态生成input进行操作——简单实现添加删除联系人功能
实现类似的如图功能: 代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>修改实现添加联系人操作</title> <script src="https原创 2018-05-10 11:04:23 · 9719 阅读 · 6 评论 -
vue页面带参跳转(用requirejs进行模块化)
最近开始用vue,对其简单地运用记录一下。 首先项目结构如下所示: 要实现的是从发送短信模块带参数跳到下个页面 首先: 在有跳转得页面的跳转按钮用标签包住:<router-link></router-link>加上 :to=”{path:’xzjsr’,query: {id:postdata.dept_id}}”代码如下:<router-link class="xzjsr" :to="{p原创 2017-06-07 20:24:06 · 7604 阅读 · 0 评论 -
用mintui的loadmore模板实现上拉加载和下拉刷新时自动触发上拉加载事件(数据展示部分会出现一部分遮盖)的解决
如下图所示:展示的第一条数据被遮盖。通过检查是因为本身的这个模板位置上移了,通过调整高度加上padding或者margin都是不可行的(在初始化进入页面时显示正常,但是在进行tab切换时则会出现多加的padding或者margin值)解决办法:加上在loadmore标签中加上 :auto-fill=“false”,禁止loadmore 自动检测并撑满其容器即可完全展示。<mt-loa...原创 2018-11-29 10:11:15 · 2493 阅读 · 2 评论 -
使用mintui中的轮播图Swipe组件时在启动项目中能正常启动但是会报警告
用到mintui框架中的swipe轮播组件,启动项目时能正常显示但是会报下面的警告(看不到启动的地址,但是输入对了地址后则可以正常打开运行项目):解决办法:根据提示修改:在标签内加上:key=XXX.id作为为每个项提供的唯一密钥属性,键的理想值将是每个项的唯一ID,作为唯一的标识。举例代码为:<mt-swipe> <mt-swipe-item v-for="it...原创 2018-12-17 19:54:23 · 487 阅读 · 0 评论 -
vue解决mintui中使用MessageBox弹窗,不进行任何操作(不点击确定或取消键)时跨页面显示的问题
在vue项目中用到MessageBox弹窗,不点击取消或者确定键,虽然在页面上不能进行改变路由的操作,但是在手机(运用android手机上的物理返回键)上进行页面的回退时,就会发现弹窗并没有消失,如果给弹窗的确定或者取消键绑定了改变路由回退什么的操作,有可能会出现问题(我的项目是嵌套在原生壳子内,如返回到上一页,并且弹窗的确定键也是路由的go(-1)的操作会直接退回到原生页面,这样就会报错)。具...原创 2019-02-02 14:36:17 · 6906 阅读 · 3 评论