分类：VUE

2020
11-04

Vue绑定用户接口实现代码示例

微博绑定用户接口oauth/urls.py中添加路由urlpatterns=[path('weibo/binduser/',views.OauthWeiboBindUser.as_view()),#/oauth/weibo/callback/]oauth/views.py中添加试图函数classOauthWeiboBindUser(APIView):permission_classes=(AllowAny,)defpost(self,request):#绑定用户,1.已注册用户,2.未注册用户#1.1获取用户名,密码,weibo_uidusername=request.data.get('username')pa... 继续阅读 >

2020
11-04

vue项目打包后请求地址错误/打包后跨域操作

vue项目npmrundev时跨域请求正常，但是打包后请求地址就错误（请求地址不存在），请求不到数据。在vue项目中常用的是proxyTable代理跨域，这个用起来比较方便，但是当项目打包后就遇到这个问题了。解决办法如下：打开config文件夹下的index.js文件，添加以下代码pathRewrite:{'^api':'https://*****.com'//填写需要跨域的地址}2.配置开发环境地址，就是config文件夹下的dev.env.js文件，添加以下代码：'usestrict'constmer... 继续阅读 >

2020
11-03

vue vant中picker组件的使用

1、引入import{Picker}from'vant'2、使用components:{vanPicker:Picker,}3、渲染<van-pickershow-toolbar:columns="columns"value-key="text"/>4、将值push到columns//注意的点vant默认的是text，如果你需要修改需要value-key="你要定义的名字"，否则不会渲染this.columns=[{siteState:1,text:"装机开业"},{siteState:2,text:"装机停业"},{siteState:3,text:"未装机开业"},{... 继续阅读 >

2020
11-03

Vue+Vant 图片上传加显示的案例

前端开发想省时间就是要找框架呀！找框架！vant中上传图片组件：https://youzan.github.io/vant/#/zh-CN/uploader上传图片的组件uploader：<van-uploader:after-read="onRead"accept="image/*"multiple><imgclass="head-img"src="/static/images/addpic.png"ref="goodsImg"/></van-uploader>method中methods:{//选择图片后执行onRead(file){console.log(file);//将原图片显示为选择的图片this... 继续阅读 >

2020
11-03

vue缓存之keep-alive的理解和应用详解

官方解释：<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和<transition>相似，<keep-alive>是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在组件的父组件链中。当组件在<keep-alive>内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应执行。主要用于保留组件状态或避免重新渲染。keep-alive是Vue的内置组件，在组件切换过程中将状态保留在内存中，等再次访... 继续阅读 >

2020
11-03

详解vue-router的导航钩子(导航守卫)

在做vue项目的时候，要求用户在页面访问前先登录，或在离开页面前发出提醒。vue官方提供的路由管理器vue-router提供的导航钩子，通过跳转或取消的方式守卫导航。以下总结了路由钩子函数的使用方法和一些使用场景。一、全局守卫router.beforeEach路由改变前的钩子constrouter=newVueRouter({...})router.beforeEach((to,from,next)=>{......})其中：to：将要访问的路径from：代表从哪个路径跳转来的next：是一... 继续阅读 >

2020
11-03

vue+elementUI中表格高亮或字体颜色改变操作

重点的代码：:row-style="setRowStyle"这个属性就是在table标签绑定的:row-style="setRowStyle"//这个方法直接加到methods里就好了，页面会自动调用的setRowStyle(row){if(row.row.isPart==true){return'color:blue;'}},具体代码：hmtl<el-tablewidth="100%":data="gridData"borderfithighlight-current-row:header-cell-style="{background:'#199ED8'}":row-style="setRowStyle"><el-table-columnlab... 继续阅读 >

2020
11-03

vue element-ui中table合计指定列求和实例

注意点：1.<el-table>中加:summary-method="getSummaries"2.<el-table-column>中要加prop//房间号的合计去掉getSummaries(param){const{columns,data}=paramconstsums=[]columns.forEach((column,index)=>{if(index===0){sums[index]='总计'}elseif(index===5||index===6){constvalues=data.map(item=>Number(item[column.property]))if(!values.every(value=>i... 继续阅读 >

2020
11-03

vue 动态添加class,三个以上的条件做判断方式

如果status为1，样式为redRoom如果status为2，样式为greenRoom1如果status为其他，样式为greenRoom2:class="{'redRoom':Number(items.status)===1,'greenRoom1':Number(items.status)===2,greenRoom2:Number(items.status)>2}"补充知识：vue根据变量值来判断显示class我就废话不多说了，大家还是直接看代码吧~<div:class="['bottom-btn',{'face-btn':type=='face'}]"></div>以上这篇vue动态添加class,三个以上的... 继续阅读 >

2020
11-03

vue 公共列表选择组件,引用Vant-UI的样式方式

此组件用于公共选择组件。引用VantUI作为样式特性：1、支持动态、静态数据源。2、支持分页加载。3、支持模糊搜索。4、支持单选、多选。组件源码：<template><divclass="gn-PubSelect"><van-action-sheetv-model="inShow"><divclass="gn-PubSelect-main":style="{'height':mainHeight}"><van-searchclass="gn-search"placeholder="请输入搜索关键词"v-model="condition"show-action><van-buttonslot="act... 继续阅读 >

2020
11-03

vue实现列表拖拽排序的功能

在日常开发中，特别是管理端，经常会遇到要实现拖拽排序的效果；这里提供一种简单的实现方案。此例子基于vuecli3首先，我们先了解一下js原生拖动事件:在拖动目标上触发事件 (源元素):ondragstart -用户开始拖动元素时触发ondrag-元素正在拖动时触发ondragend-用户完成元素拖动后触发释放目标时触发的事件:ondragenter -当被鼠标拖动的对象进入其容器范围内时触发此事件ondrago... 继续阅读 >

2020
11-03

用vue写一个日历

之前在上家公司做过一个公司人员考勤的东西，里面需要用到日历，当时自己用vue随便写了一个，比较简单，删掉了其他功能的代码，只留下日历，直接看代码<template><divclass="lookForMonth_wrapper"><divclass="lookForMonth_top"><divclass="selectDate"><div>{{year}}年{{month}}月</div><divclass="upDownSelect"><divclass="upDownSelect_item"@click="dateUp"></div><divclass="upDownS... 继续阅读 >

2020
11-03

在vue中使用vant TreeSelect分类选择组件操作

中文文档：TreeSelect分类选择效果展示：//先在你需要的页面中引入，第一个是弹出层,第二个是选择的import{Popup}from"vant";import{TreeSelect}from"vant";代码部分：<van-popupv-model="policeShow"position="top":overlay="true"><van-tree-select:items="items":active-id.sync="items.activeId":main-active-index.sync="items.activeId"@click-nav="onNavClick"><templateslot="content"... 继续阅读 >

2020
11-03

vue+iview使用树形控件的具体使用

vue+iview使用树形控件1.开发环境vue+iview2.电脑系统windows10专业版3.在使用vue+iview开发的过程中,我们经常会使用iview的树形控件,在这里我就简单的做一个分享,希望对你有所帮助!4.在template中添加如下代码:<Scrollstyle="width:100%"height="760"><Tree@on-select-change="chentreelick":data="treedata"expand-node></Tree></Scroll>5.在return中添加如下代码:treedata:[{title:"parent1",... 继续阅读 >

2020
11-01

Vue中使用Echarts仪表盘展示实时数据的实现

在vue中echarts仪表盘实时数据彩笔一枚，简单记录一下。业务场景：通过websocket实时推送数据，将数据渲染到仪表盘中。第一步：基于准备好的dom，初始化echarts仪表盘实例。第二步：我是通过父子组件传值把数据接收过来，在data中定义upPressure参数，并将接收来的devicePressure参数赋值给它，便于后面将值传入到echarts中父组件中<divclass="chart"shadow="always"><objEcharts:devicePressure="pressure"></objEcharts>... 继续阅读 >

2020
11-01

ant design vue 表格table 默认勾选几项的操作

为什么我同样的功能要用react、vue都写一遍？啊我真是不是闲的蛋疼啊(～o～)~zZ在antdesignvue中，表格的第一列是联动的选择框截一张官方文档图，图示最后一排就是禁用状态点击checkbox会触发onChange,从而得到selectedRowKeys,selectedRowKeys就是选中的key数组。onChange:(selectedRowKeys,selectedRows)=>{console.log(`selectedRowKeys:${selectedRowKeys}`,'selectedRows:',selectedRows);},默认... 继续阅读 >