vue
文章平均质量分 53
codeXml
web developer
展开
-
基于xterm.js + socket.js的Web SSH
xterm.js 作为终端面板,以 socket.js + stompjs 实现消息通信。效果如下:代码:<template> <div> <div ref="terminalContainer"></div> </div></template><script lang="ts">import {Vue, Component, Prop } from "vue-property-dec.原创 2022-03-16 17:18:31 · 2581 阅读 · 4 评论 -
字体大小随容器宽度自适应变化 - vue
需求:固定宽高的容器,内部文字长度不固定,字号大小需要随着文字数量的变化而变化,使得文字始终以一行撑满容器。效果如图:实现思路:拿到文字所在dom的水平宽度 childWidth,并取得其父级dom的水平宽度 parentWidth。这里需要对超出父级容器的部分缩小,所以可以用:parentWidth / childWidth = scalcVal如果文字长度超出父容器,则会得到一个介于0 ~ 1之间的值,这个值可以直接作为缩放比例使用,再结合css3的transform:scale(x.原创 2022-01-07 15:25:26 · 6683 阅读 · 1 评论 -
draggable拖拽组件的使用
背景:左右两个数据栏,左侧为数据源,右侧为组建的目标数据。要实现左侧和右侧可以互相拖拽,但是左侧拖拽到右侧后源数据不变,右侧拖拽到左侧时,无论丢在左侧哪里都回到源数据原来的分组下;并且,左侧和右侧内部都可以上下拖拽调整位置。效果图:如下,左侧有分组,每一组可以直接通过拖拽A(xxx应用)、B(xxx应用)等上下调整组的位置,组内可以上下拖拽调整先后顺序。代码:import Draggable from "vuedraggable";components: { Draggable,.原创 2021-10-21 14:33:41 · 1258 阅读 · 0 评论 -
单页(SPA)首页白屏优化
背景:由于目前线上版本的h5加载一直很慢,于是趁着最近有空就打算优化一下,首先打开network分析影响加载速度的文件有哪些。看原文件大小有接近1.4m,不能忍!!!注意:1、博主这里用的vue-cli2.x版本,webpack为3.6.0版本。2、vendor文件一般放的是长时间不怎么更新的库,比如vue、vuex、vue-router等等。开始搞事情。1、删除多余的第三方库。检查自己package.json文件下dependencies里面有哪些是安装引用了但是没用的。因为里面可能原创 2020-05-21 16:14:14 · 1239 阅读 · 0 评论 -
el-tree 默认选择几个节点,却全选中了
场景:某一级目录下有几个二级目录,当选中二级目录中的某一项并提交到后台后,页面渲染时却选中了整个一级目录,但是数据却是正常的一条二级目录。解决办法:比对该目录下未提交的目录,并将其checked设为false,这种方法能解决二级目录全选中的问题,但是会出现另一个小问题,虽然二级目录选择状态正常了,但是一级目录依然是全选中状态,如下:所以,在比对完当前目录是否在已选列表内后,还需要对未全选的父级做不确定选项的展示处理,el-tree的不确定选项设置办法为部分选:checked = false, .原创 2021-01-14 12:22:31 · 2445 阅读 · 0 评论 -
vue中的防抖实战
业务情景: 当用户搜索时需要根据用户输入的内容实时查询,但是又不想输入每个字都查询或者实时保存用户的输入信息。防抖原理:当持续触发事件时,设置一个间隔时间,当该时间内没有再次触发事件则执行一次函数,如果时间到之前再次触发事件,则重新开始延时。防抖作用1、对服务器来说:可以防止短时间多次请求接口,一定程度上减轻服务器压力。2、对前端页面来说:可以防止页面抖动,减轻浏览器压力,提升性能。特别是监听scroll时,抖动最明显。防抖前后效果防抖前:防抖后:送上代码:<inpu.原创 2020-11-06 17:31:03 · 1252 阅读 · 0 评论 -
vue-cli3.x配置开发、测试及生产三个环境的地址
背景:正常情况下webpack给我们提供了development和production两个环境。一个用于开发,一个用于正式环境,想象是美好的,但是我们有时候不止一个服务器吧,比如更新到正式服之前我们需要先在测试服测试通过,这个时候如果还是两个环境变量那我们打包的时候就需要手动切换地址了呀,所以基于此,再手动增加一个测试环境。下面以vue-cli3.x为例:1、新建vue-cli项目,如下vue create demo_012、目录结构3、在根目录新建三个文件.env / .env.prod.原创 2020-06-02 16:07:40 · 2399 阅读 · 3 评论 -
html2canvas爬坑
背景情况:由于项目需要,需在点击按钮时触发一个弹窗,将弹窗内的东西绘制成图片供用户保存到本地。弹窗内有图片有文字,当弹窗的图片为类似于http://www.test.com/xxx/xxx.jpg的网络路径时会提示跨域错误。1、首先设置useCORS: true,有的人会同时设置allowTaint。其实没有必要,这两个会互相覆盖的,设置一个就成。2、设置跨域域名proxy:'图片域名'’3...原创 2020-03-04 16:04:22 · 569 阅读 · 2 评论 -
vue倒计时(天时分秒)
直接上代码,复制可用。1、html部分<p style="line-height: 1.5rem;" v-html="countTxt"></p>2、script部分import { formateTimeStamp } from '@/util/tools.js'export default { props: { infos: { type: [A...原创 2020-02-24 15:56:52 · 3178 阅读 · 1 评论 -
vue在列表中使用倒计时
应用场景:订单列表中每个待支付订单的有效时长倒计,或者拼团的倒计时,如下1、html仅展示主要部分,这里limit_time 的值为一个具体时长,如:86400秒,可以根据自己的实际情况进行换算。<div v-for="(spellGroup, index) in groups" :key="index"> <p >剩余 {{spellGroup.limit_ti...原创 2020-02-24 15:49:21 · 5359 阅读 · 6 评论 -
vuex详解
一、vuex是什么?官方描述:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。说白了就相当于一个可以放全局变量的仓库,这个仓库可以实现不存在亲戚关系的组件之间的数据共享和数据持久化。它是在redux之上针对vue进行了封装,也就相当于一个redux的升级版,当然,这个升级版只对vue适配的最好,angular里面其实也可以用,但是就没有跟vue配合的时候性能好了。从上面的...原创 2020-01-24 11:05:22 · 115 阅读 · 0 评论 -
vue-cli中使用jquery
vue-cli3.x的目录结构很简单,去掉了2.x中的build目录和config目录,只有一个vue.config.js文件用于项目配置。1、首先引入jquery npm install --save jquery2、添加如下配置到vue.config.jsconst webpack = require('webpack')module.exports = { configu...原创 2019-12-16 11:21:44 · 185 阅读 · 0 评论 -
vue引入自定义组件
1、先import组件位置import Bar from ”@/view/components/bar.vue”2、在components中注册该组件,components:{ Bar}3、在template中以标签的方式插入组件<bar></bar>注意:如果以驼峰命名法,则以标签使用时驼峰需要小写例如: 注册的组件名为TabBar则,使用时应...原创 2018-12-22 13:50:44 · 337 阅读 · 0 评论 -
css实现图片按宽等比例缩放不变形
<div id='evalPage '> <div class='imgbox'> <img class='image__inner' src='http://https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg' /> </div></...原创 2019-07-29 10:04:09 · 6065 阅读 · 2 评论 -
vue使用clipboard.js实现点击复制功能
1、安装引用npm install clipboard --save2、在main.js全局注册import clipboard from 'clipboard'// 注册到vue原型上Vue.prototype.clipboard = clipboard3、在要使用的vue组件中引用如下,我在copy方法中加了一个3s的延时是因为,提示用户复制成功的弹窗默认展示3s,防止用户多...原创 2019-07-25 16:24:19 · 1159 阅读 · 0 评论 -
vue中viewerjs的使用
1、安装依赖npm install v-viewer --save2、全局引入import Vue from 'vue';import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)Viewer.setDefaults({ Options: { 'inline': true, 'but...原创 2019-07-31 15:50:37 · 4419 阅读 · 0 评论 -
vue-video-player视频播放器的使用和配置
1、安装npm install vue-video-player -save2、在main.js中添加import VueVideoPlayer from 'vue-video-player' // 视频播放器import 'video.js/dist/video-js.css'Vue.use(VueVideoPlayer)3、新建一个vueVideoPlayer.vue组件供调...原创 2019-08-05 12:22:55 · 13239 阅读 · 2 评论 -
滚动到一定位置时导航栏置顶-vue
获取距离的id元素和添加样式的元素可以是包含关系也可以是并列关系<div id='testNavBar'> <div :class='{ fixedNavbar: isfixTab }'>这是导航</div></div>或<div id='testNavBar'></div><div :class='{ fi...原创 2019-08-19 14:04:03 · 2655 阅读 · 0 评论 -
vue封装多个filters全局过滤器在一个文件
实现的效果:将所有的全局过滤器方法都放在filter.js文件中,在main.js进行全局注册,在其他vue组件中直接使用。过滤器filters通常用来过滤一些状态为自己想要的形式,比如后台返回status// num等于0, 1, 2// 对应的状态 0:小甲鱼, 1: 带鱼, 2:美人鱼status: num这个时候过滤器就很方便了,如果只在某一个组件有这个状态,那直接在当前组件...原创 2019-09-20 11:06:31 · 835 阅读 · 0 评论 -
vue实现微信分享朋友圈和朋友功能
vue分享到微信朋友圈和微信好友转载 2019-09-23 09:31:00 · 1481 阅读 · 0 评论 -
微信网页静默授权获取用户信息——koa2.x
1、获取code2、通过code获取用户openid3、拿着用户的openid换取用户信息1、构造请求url如下(只能在公众号内打开):https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8888888888888888&redirect_uri=http://mascot.duapp.com/oauth2....原创 2019-06-20 15:12:37 · 2054 阅读 · 0 评论 -
npm安装模块遇到ENOENT: no such file or directory, rename错误
1、删除node-module和package-lock.json文件(主要是package-lock.json)2、npm install原创 2019-06-14 22:06:30 · 2751 阅读 · 0 评论 -
vue跨组件路由传值
设置值this.$router.push({name:”pageDetails”,params:{orderid:orderid},query:{status:100}})获取值this.$route.params.orderidthis.$route.query.status注意:1)需要在路由配置path中预留占位符如:path:”pageDetails/:orderid” ...原创 2018-12-22 14:19:00 · 709 阅读 · 0 评论 -
iview切换tabs标签时页面不刷新
解决办法:方法一:在TabPane上添加:key=”reload”在tabs上绑定@on-change事件,当on-change触发,更新reload为new data()方法二:给tabpane绑定v-if=”isshow”,isshow的初始值设为false,当on-change触发时isshow设为true,使页面重新加载而达到局部刷新的效果...原创 2018-12-22 14:06:59 · 9115 阅读 · 0 评论 -
vue子组件与父组件相互传值
1、子组件给父组件传值 在子组件用$emit自定义一个事件 this.$emit('tableDatas',{ data:12 }) 在父组件接收 <child @tableDatas='getTabDatas'></child> getTabDatas (d){ console.log(d); ...原创 2018-12-22 13:56:23 · 116 阅读 · 0 评论 -
vue中render函数的使用
在mvc的开发模式中,render一般用于操作dom模板:render createElement{‘节点名’,{节点的属性、样式和方法},[这里创建子节点]}例:Vue.component('componentName',{ render:function(createElement,context){ return createElement{'div', //创...原创 2018-12-22 13:47:58 · 373 阅读 · 0 评论 -
vue刷新当前页面
请看这里,我先收藏了转载 2018-12-26 17:15:46 · 252 阅读 · 0 评论 -
vue2.x v-for下点击添加class 样式刷新不消失 实现类似多选的功能
下面代码实现的功能:v-for遍历下的元素,点击哪一个就给哪一个添加changeCollect下的样式,如果已经添加了样式,再点击就取消样式。点击下一个时,点击过的样式不会消失,类似于多选1、template代码<li :class="{changeCollect:isCollect[index]}" @click="changeCollect(index)"></li&...原创 2018-12-26 15:19:53 · 1361 阅读 · 2 评论 -
vue的生命周期
beforeCreate:创建前这个时候的el,data和方法都是不可用的created:创建后这个时候已经可以主要做数据初始化,这个时候的el还没有挂载,但是数据和方法已经可以获取啦beforeMount:载入前从created到beforemount会先询问是否有el,如果有再询问是否有templete,如果有就编译到render函数。如果没有el就不编译,直到遇到vm.$mount...原创 2018-12-19 19:26:40 · 88 阅读 · 0 评论 -
vue结合vue-amap调用高德地图api
1、到高德地图开放平台申请key2、npm安装vue-amap3、在main.js中引入并初始化4、以获取周边信息为例,PlaceSearch的官方文档5、展示结果6、上面方式是根据设定的经纬度获取周边信息,如果想实时获取当前位置可以这样,在data中添加一个plugin注意:created调用getnearinfo时如果不加setTimeout的话会出现类似如下的间歇性报...原创 2018-12-12 13:17:43 · 9622 阅读 · 0 评论 -
通过$router方式进入详情页页面数据不刷新解决办法
在详情页添加一个watch监听路由变化watch:{ '$route' (to,from){ this.$router.go(0); }} 原创 2018-12-24 16:44:22 · 1129 阅读 · 0 评论 -
vue实现按钮倒计时
效果如下,倒计时完了再成为蓝色状态实现代码:<el-button type="primary" :disabled="disable" :class="{ codeGeting:isGeting }" @click="getVerifyCode">{{getCode}}</el-button>export default { name: "demo",...原创 2019-05-31 11:57:11 · 6276 阅读 · 0 评论 -
vue2.x v-for下当点击某一个item时添加class 样式,类似于单选
动态添加class的关键是判断条件,点击某个item时设置isAdd为当前索引,以使得index == isAdd为true,就能成功添加class到我们点击的item上 <p v-for="(sel, index) in selection" :key="index" :class="{ tavActive:index == isAdd}" @click="tabCheck(ind...原创 2019-05-22 19:37:46 · 1651 阅读 · 0 评论 -
vue导航图标为图片时怎么加载激活图片
如果当前路由和导航中的路由一致,则加载激活状态的图片,否则,加载非激活图片<template> <el-footer> <el-row> <el-col :span="6" v-for="(item,index) in paths" :key="index"> <router-link :to="item.path">...原创 2019-05-21 20:52:07 · 393 阅读 · 0 评论 -
vue爬坑——先到a页面浏览后,跳转到b页面,发现b页面的位置自动跳转到a页面浏览的位置
可以通过监听路由变化解决如下:watch:{ '$route':function(to, from){ document.body.scrollTop = 0; document.documentElement.scrollTop = 0; }}原创 2019-05-21 20:16:29 · 2304 阅读 · 2 评论 -
vue缓存页面之keepAlive的使用
要实现的功能是,在列表进入详情页后,返回列表页时,列表页不刷新,但是从其他导航页面进入列表页要刷新。1、第一步:在app.vue使用keepalive <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive...原创 2019-05-10 21:09:04 · 3177 阅读 · 0 评论 -
flex布局——space-between(around)最后一行不能左对齐的解决方案
分为两种情况,分别是三列及三列以上的解决办法1、三列时(图为借鉴的,懒得自己画)要实现为代码如下:<div class="box"> <div class="list" v-for="(item,index) in lists" :key="index">{{item}}</div><div>data(){ return{ ...原创 2019-05-20 22:09:20 · 9249 阅读 · 1 评论 -
纯css实现div水平方向的滑动效果
可以在这个div内左右滑动,效果如下:html结构如下:<div class="coverInfo"> <ul> <li class="itemInCovers"></li> <li class="itemInCovers"></li> <li class="itemInCovers"><...原创 2019-05-19 12:03:13 · 17326 阅读 · 0 评论 -
vue同级组件间传值
1、在main.js同级目录下新建new.js文件import Vue from 'vue'export default new Vue()2、在组件a中传出值先引入new.js文件,再通过$emit传值<template> <div @click="onfocus"></div></template><script>...原创 2019-01-13 18:56:49 · 8764 阅读 · 0 评论 -
vue-router模块化路由配置
直接上代码1、文件结构2、main.js文件3、index.js文件4、routes.js文件5、到这里路由配置基本结束,在浏览器输入对应的路由会出来对应的页面,接下来是将路由与导航绑定,举一例如下:6、绑定后会发现切换导航时,导航栏的样式是不会发生变化的,这个时候检查浏览器的dom结构会发现,当点击某个导航时会被添加一个router-link-active的class7...原创 2018-12-06 18:04:23 · 1250 阅读 · 0 评论