vue
关注
分享
扫一扫
Yetian_2000
这个作者很懒，什么都没留下…
展开
-
监听路由“$route“
原创 2021-11-02 15:57:10 · 375 阅读 · 0 评论 -
keep-alive(某一个页面我从部分路径过来，需要缓存，但从另一部分路径过来，不能缓存页面，需要刷新)（下篇）
keep-alive(某一个页面我从部分路径过来，需要缓存，但从另一部分路径过来，不能缓存页面，需要刷新)（下篇）这个问题，我在西部利得的项目种遇到：在trade-buy-form页面因为有三个步骤：a.签署合同 b.视频双录 c.购买下单。场景1：在第三个步骤“购买下单”中如果，在这个页面我中途跳转到开通汇款页面，从开通汇款返回trade-buy-form页面需要保持之前的页面显示，即缓存页面，不能刷新页面。场景2：从产品详情页，点击申购按钮，跳转到trade-buy-form页面需要刷新页面，这原创 2021-10-25 17:10:10 · 373 阅读 · 0 评论 -
关闭小程序，跳回到h5。你们是通过url跳转返回到h5吗？
不是跳回 你打开小程序会覆盖你的h5 你关闭以后正常来说是不会对你的h5有影响原创 2021-10-12 17:36:18 · 615 阅读 · 0 评论 -
微信小程序开放能力web-view使用之h5页面与小程序页面交互传值？
111111原创 2021-10-12 16:09:01 · 389 阅读 · 0 评论 -
在vue项目中checkbox，写点击事件不能选中或者取消选中。（原因分析）
1.checkbox，写点击事件不能选中或者取消选中：1.因为investorStateList是个数组，不是一个简单数据类型，vue不能监听到变化，并且改变视图，所以需要使用强制更新视图 .2.或者checked绑定简单的数据类型也可以。...原创 2021-10-09 10:11:50 · 6587 阅读 · 1 评论 -
关于vuex中store存储数据，页面刷新，数据丢失问题
由于页面store中数据在页面刷新时会存在页面数据丢失的问题，所以建议不要再这里面存储用户公共数据，如果一定要存，可以在初始化定义state数据时从浏览器缓存中取，避免这个问题。一般建议数据存储在浏览器缓存中。...原创 2021-08-25 10:55:47 · 708 阅读 · 0 评论 -
接口封装需要考虑的问题。
import axios from 'axios'// import qs from 'qs'import store from '@/store'import router from '@/router'import { Message } from 'element-ui'import config from '@/static/config.json'// isSTip:操作成功的提示// isFTip:操作失败的提示// isDownload:是否下载文件 // 1.疑问：为什么原创 2021-08-25 10:06:19 · 215 阅读 · 0 评论 -
接口封装需要考虑的问题
接口封装API接口1.请求的config参数配置2.请求拦截器，（主要配置信息：1.特殊字符转码，2.token追加在请求头的headers.Authorization 3.后台接收什么类型的数据结构，确定是否要用qs.stringfly）3.或者是响应拦截器的配置（也可以不写，直接在axios.then ().catch() 里面配置）（主要做的事情：针对后台返回不同的格式文件进行统一处理，比如blob, html格式文件，arraybuffer）...原创 2021-07-22 11:26:28 · 210 阅读 · 0 评论 -
echarts在vue 3.0中踩得的坑
1.在曲线折线图和柱状图，tooltip设置属性为axios不生效。（最后找到原因是创建的echarts对象中的mychart不能设置成响应式对象，也就是不能用ref）2.在空间最初为display：none时尽管容器是有宽高的，但绘制出来的canvas是很小（解决办法：延迟echarts的绘制）...原创 2021-06-16 09:39:56 · 487 阅读 · 0 评论 -
antd 2.0 的版本table的前面复选框 disabled不生效？ table的点击行与点击复选框：2中操作选择row，导致的selectrowkey不一样？
今天开发遇到2个坑：1.antd 2.0 的版本table的前面复选框 disabled不生效？踩坑原因：选用的antd版本不对，antd 2.0版本不需要propsgetCheckboxProps: (record: any) => ({ disabled: record.name === 'Disabled User', // Column configuration not to be checked name: record.name, }),而antd 1.7 是这样原创 2021-05-14 15:35:42 · 1375 阅读 · 0 评论 -
vue 3.0中ref与reactive的相似与区别，与使用要点（上篇）
vue一共提供了两种数据响应式监听：ref , reactive1.ref 函数传入一个值作为参数，返回一个基于该值的响应式Ref对象，该对象中的值一旦被改变和访问，都会被跟踪到，通过修改 count.value 的值，可以触发模板的重新渲染，显示最新的值。2.其实，除了 ref 函数，Vue3.0中还提供了另外一个可以创建响应式对象的函数，那就是 reactive 函数。下面就来说说为什么要提供两种API？解答：一：使用场景的不同有的人可能喜欢这种写法const a = 1const原创 2021-03-17 11:20:23 · 717 阅读 · 0 评论 -
vue中$emit与$on与.native的理解与使用
父组件<Parent @update="updatepage" :datab="pagedata"></Parent>data(){ return { pagedata=[{name:"丽丽",age:"12"}] }}，methods:{ updatepage(){ console.log(1111) }}子组件<Child> <div @click="clickbutton"></div></Child原创 2021-03-08 11:49:14 · 466 阅读 · 0 评论 -
vue 2.4版本中 $lisener
$lisener怎么理解vue中$listeners属性？首先，$listeners是什么？假设有父组件Parent和子组件Child// Parent<template> ... <child v-on:event-one="methodOne" v-on:event-two="methodTwo" /> ...</template>那么你在使用Child时，传入的所有v-on事件都可以在$listeners对象中找到。// Childc原创 2021-03-05 17:24:23 · 254 阅读 · 0 评论 -
vue中的.native修饰符
使用场景：如果你想在某个组件的根元素（比如<Aomp @click=’‘sbfun()’>）上绑定事件，直接使用 @click=’‘function’ 是不生效的，我们可以添加.native修饰符 @click.native=’‘function’’.native是什么？.native - 监听组件根元素的原生事件。主要是给自定义的组件添加原生事件。官网的解释：你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。...原创 2021-03-05 14:44:20 · 266 阅读 · 0 评论 -
slot理解
作用域插槽：1.最后，就是我们的作用域插槽。这个稍微难理解一点。官方叫它作用域插槽，实际上，对比前面两种插槽，我们可以叫它带数据的插槽。什么意思呢，就是前面两种，都是在组件的模板里面写2.正因为作用域插槽绑定了一套数据，父组件可以拿来用于是，情况就变成了这样：样式父组件说了算，但内容可以显示子组件插槽绑定的。普通插槽：1.但是插槽显示的位置却由子组件自身决定，槽写在组件模板的什么位置，父组件传过来的模板将来就显示在什么位置。2.插槽最后显示不显示是看父组件有没有在孩子下面写模板3.父组件中写模板，原创 2021-03-05 13:46:03 · 333 阅读 · 0 评论 -
vue 里 this.$parent 作用
1.子组件和组件的通信this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }！2.子组件和同级别子组件的通信<parentc> <childA></childA> <childB ref="childB"></childB></parentc>问：假设childA组件中定义了data1数据，我怎么把data1赋值传递给组件B的data2呢？原创 2021-01-20 14:24:17 · 7105 阅读 · 0 评论 -
vue-i18n的国际化缩减版示例（真实有效）
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue-i18n国际化缩减版</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script src="https://unpkg.com/vue-i18n/dist/vue-i原创 2021-01-05 15:05:59 · 242 阅读 · 0 评论 -
vue-i18n使用文档
文档地址：https://www.bookstack.cn/read/vue-i18n-8.x/spilt.2.4e9cded0cfe86bd2.md#mergeLocaleMessage(%20locale,%20message%20)原创 2021-01-04 19:58:42 · 3102 阅读 · 0 评论 -
promise.all的用法讲解。
promise.all()该方法用于将多个Promise实例，包装成一个新的Promise实例。var p = Promise.all([p1,p2,p3]);（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。...原创 2020-12-31 15:55:31 · 77415 阅读 · 3 评论 -
本文注意2点：1. URL的derevokeObjectURL方法 2 .如何给后台下载的文件重命名 ，3.blob对象的使用
URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。使用场景示例：下面代码是一个文件下载的功能，做了一个请求，服务器返回文件对象。但没有和以前的文件下载一样：以前文件下载只要给个下载地址，我们使用1. 标签加href=“下载的url”点击就可以，2.或者使用window.open(“下载的ur原创 2020-12-30 17:24:43 · 986 阅读 · 0 评论 -
vue中的自定义指令directive的使用
111111原创 2020-12-28 16:42:09 · 138 阅读 · 0 评论 -
vue中普通组件的v-model使用（例如树组件）
111111111原创 2020-12-28 16:40:42 · 190 阅读 · 0 评论 -
...mapAction()的使用
1.首先这个方法是写在methods里面2…mapAction()这个方法返回store中action里面的对象，可以理解为展开运算符3.在使用时 …mapActions(‘template’, [ ‘createStaffItem’, ]),传入参数代表什么意思：template是引入的是哪个store（可能定义了很多个store文件），createStaffItem表示action中的“createStaffItem”对象 方法 我映射到本组件的方法名叫“createStaffItem”。4.原创 2020-11-06 15:58:52 · 3283 阅读 · 0 评论 -
window.requestAnimationFrame 与window.onresize的区别
1. window.requestAnimationFrame语法：window.requestAnimationFrame( callback )window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。（在前端开发的 web页面嵌入C++开发的视频客户端，针对移动浏览器窗口计算客户端位置会用到）需要注意的是：1.电脑屏幕是1原创 2020-11-06 11:17:32 · 323 阅读 · 0 评论 -
vue中created与mounted对象的区别
唯一的区别是：created阶段，拿不到dom节点。原创 2020-11-02 14:27:43 · 182 阅读 · 0 评论 -
ckplayer插件的使用遇到的坑：监听视频播放end事件。
我在这个项目中是使用的是mp4格式的播放文件<div class="video-wrap"> <div class="video" id="live-video"> </div></div>methods: { getLiveDetail(val) { let _this = this //重点1： 假设后台给我的是一个数组形式的视频播放路径 let pathArra = ["https://10.35.原创 2020-11-02 14:23:52 · 1489 阅读 · 0 评论 -
antd-design-vue中日期选择器date-picker的使用总结注意点
需要注意点： v-model 与 default-value 绑定值与默认值都必须是moment对象。否则控制台会报错html部分<div class="query-date left marginright"> <span class="textboxstyle">开始时间：</span> <a-date-picker v-model="startValue" :disabled-date="disabledStartDate"原创 2020-11-02 13:56:02 · 4029 阅读 · 0 评论 -
ztree点击节点会有一个底色变白的效果（如何阻止这个变白效果）
方法：设置回调ztreeBeforeOnClick，并return false setting: { check: { enable:true, chkStyle: "checkbox", chkboxType: {"Y":"ps","N":"ps"}, }, data: { simpleData: { enable: true, pI原创 2020-10-23 17:00:02 · 574 阅读 · 0 评论 -
ztree能构建树的数据（亲测可用）：
能构建树的数据（亲测可用）：<div class="search-input marginb"> <Input-search v-model.trim="searchValue" @on-search="searchTreeNode" placeholder="搜索..."></Input-search> <div class="ztree" id="tree"> </div> </div> set原创 2020-10-23 13:43:46 · 157 阅读 · 0 评论 -
在rtsp播放视频：前端web页面嵌入C++（开发的客户端）------前端与客户端交互是使用websocket技术来实现双向通信。
阮一峰的websockt日志：http://www.ruanyifeng.com/blog/2017/05/websocket.html?utm_source=tuicool&utm_medium=referral主要使用技术点：var ws = new WebSocket("wss://echo.websocket.org");ws.onopen = function(evt) { console.log("Connection open ..."); ws.send("He原创 2020-10-20 17:20:12 · 386 阅读 · 0 评论 -
rtsp播放视频，点击打点信息列表（视频直接跳转到打点位置）
// 点击目录索引（渲染的列表上绑定点击事件）, // 这个item主要携带的参数是timePoint ，需要传递给客户端，调取视频 skipTime(item) { this.seekVideo({ seekSecond: item.timePoint }) },// function 跳转打标位置 seekVideo(param) { var player = this.player player && player.DPSDK_.原创 2020-10-20 14:38:59 · 422 阅读 · 0 评论 -
rtsp播放视频：前端web页面嵌入C++（开发的客户端）----下篇
最后一步就是：执行player && player.DPSDK_OpenVideos(videoParams)方法，播放视频：关键在于提供一下videoParams里面相关的参数。（可能需要通过接口获得）var videoParams = { 'mode': 2, // 模式，int，1-预览（直播）,2-回放（点播） 'url': url, // 带token的rtspurl，string 'playSeed': timeNum原创 2020-10-20 11:33:43 · 402 阅读 · 0 评论 -
rtsp播放视频：前端web页面嵌入C++（开发的客户端）----上篇
这种方式播放视频的优点：实时性好。技术难点在于：前端和C++客户端的交互。主要使用的插件，与技术：DPSDK_VideoPlayer这个插件，需要下载这个js，这个js，客户端提供了一系列的方法供我们前端调用。如下：视频播放的流程：player.DPSDK_Init（）=====》player.DPSDK_Login（）=======》player.DPSDK_SetCallBack(cb)=====》展示位置 player.DPSDK_ShowModule(jsonParam) 与播放视频原创 2020-10-20 11:16:43 · 1261 阅读 · 1 评论 -
vue中style与class使用数组与对象的形式
style使用对象形式 :style="{visibility : item.showStatus?'visible':'hidden'}class使用对象形式<div @click="tabCardOrTableFn('card')" class="icon-box" :class="{'focus-type':cardOrTable === 1}"> <icon-svg type="svgIcon_pic"></icon-svg><原创 2020-10-19 10:44:15 · 655 阅读 · 0 评论 -
webpack知识点笔记
第一：webpack的工作步骤如下：1.从入口文件开始递归地建立一个依赖关系图。2.把所有文件都转化成模块函数。3.根据依赖关系，按照配置文件把模块函数分组打包成若干个bundle。4.通过script标签把打包的bundle注入到html中，通过manifest文件来管理bundle文件的运行和加载。(疑问：bundle文件的运行和加载为什么需要管理？)打包的规则为：一个入口文件对应一个bundle。该bundle包括入口文件模块和其依赖的模块。按需加载的模块或需单独加载的模块则分开打包成其他的原创 2020-10-16 15:15:06 · 238 阅读 · 0 评论 -
关于v-if=“show(val)“中能否写方法的思考
在vue中v-if=“show(‘基础信息’)” ；method中：show(index){ return this.menus.includes(index);},v-if中可以使用函数表达式，但是问题在于这个函数show（‘基础信息’）什么时候触发的问题，在模版编译并不会触发执行函数。2.如果在created也不能触发。3.在beforecreated这个没试过，能不能触发。（注意模版的编译是在created之后进行的）就上面这个问题v-if不建议使用函数执行返回布尔值，应该原创 2020-10-16 15:12:25 · 3372 阅读 · 0 评论 -
vue中通过ref获取元素宽高度的--数值
getheight(){ let obj = this.$refs.school let h = window.getComputedStyle(obj).height; //通过这个方法，获取宽高 return parseInt(h.substring(0,h.length-2)) //截取字符串，并将数字字符串，转成number类型 },原创 2020-10-16 09:23:36 · 6023 阅读 · 0 评论 -
proxytable在代理https时，需要注意的问题
下面是代理的内容,代理了两个系统，两个接口。//关键在设置这个值为false，不需要安全证书 proxyTable: { '/erims': { target: 'https://10.35.183.204/erims', changeOrigin: true, secure:false,//关键在设置这个值为false pathRewrite: { '^/erims': '' } }原创 2020-10-15 11:24:45 · 1276 阅读 · 0 评论 -
Vue国际化（vue-i18n）
参考地址https://www.jianshu.com/p/df2550c6f1be一、安装三种方式：1、script引入<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>2、npm安装 npm install vue-i18n3、yar原创 2020-10-13 20:00:40 · 175 阅读 · 0 评论 -
ivew组件＜Date-picker＞（使用遇到的坑）-----1
我在一个客户端嵌的web页面中遇到过这个问题：只使用了@on-change，删掉了 v-model=“query.beginTime”，导致日期在选日期时才能被赋值，遗漏了日期默认的显示日期。因为在点击查询按钮时，日期格式可能是ZT的时间格式，所以在提交时统一处理时间格式，而不需要在@on-change时去处理（因为在@on-change处理会遗漏不触发change事件时的默认的显示日期）<Date-picker tabindex="-1" type="datetime" .原创 2020-10-13 15:39:12 · 359 阅读 · 0 评论