Vue
Bright2017
学,然后知不足!
展开
-
Vue——解决Eslint导致的console报错问题
【代码】Vue——解决Eslint导致的console报错问题。转载 2023-01-29 22:20:47 · 763 阅读 · 0 评论 -
iView表格自定义展开、render函数的使用
之前一直习惯使用templete、render渲染函数使用很少、这次算是简单的认识下、代码写的不好大佬们不要见怪!iView版本3.0、因为展开的样式不太符合预期、只能自定义。原创 2022-11-18 17:41:37 · 1157 阅读 · 0 评论 -
vue页面滚动加载、页面懒加载
需求:页面有一堆图表、需要滚动到图表时、再加载出来这个图表、思路:没找到合适的插件、只能自己手撸一个、直接放到混入里就行、主要就是判断元素距离底部的距离和可视区域内容的高度进行对比即可原创 2022-11-10 11:48:07 · 1514 阅读 · 0 评论 -
vue中插槽在组件中的应用
场景:暂无数据组件中使用插槽接收、暂无数据这个组件在图表组件中应用、由最外层图表组件自定义插槽内容、最终传入暂无数据组件中。最外层图表组件使用:ComPie是图表组件 <ComPie :series="chart3.series"> <template slot="icon"> <div>自定义</div> <原创 2022-03-14 11:43:05 · 1339 阅读 · 0 评论 -
vue移动端项目返回上次浏览位置
效果描述:列表查询页、每页10条数据、滚动至底部加载更多数据、点击进入详情。再次返回列表查询页不希望从第一页重新查找、而是直接滚动到上次浏览的位置。实现思路:点击列表进入详情页时、记录当前点击的位置、将参数传入详情页、返回列表页时将参数再传递回来。列表页初次加载时判断是否存在上次记录的位置参数、存在表示有历史记录、直接请求数据、找到位置、然后调用 scrollIntoView() 方法滚动到指定位置。举例:我上一次点击了第180条数据、记录索引108、每页10条数据、所以当时记录的页码pag原创 2022-03-14 09:55:38 · 2736 阅读 · 0 评论 -
推荐一个好用的无缝滚动组件vue-seamless-scroll
可用于图片轮播、文字无缝滚动。官网地址:https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default1、安装npm install vue-seamless-scroll --save2、用法<template> <vue-seamless-scroll :data="listData" class="se原创 2022-01-27 16:37:27 · 299 阅读 · 0 评论 -
vue项目中使用百度地图、推荐vue-baidu-map
开发文档:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation效果图<template> <div class="mapCent"> <baidu-map class="map" :center="center" :zoom="zoom"> <bm-driving start="天安门" end="百度大厦" @searchcomplete="handleS..原创 2022-01-09 12:15:55 · 1103 阅读 · 0 评论 -
echarts圆角环形图
效果图:Demo演示地址:https://www.makeapie.com/editor.html?c=xptea0dZY5完整代码:<template> <div> <polycyclicChart :series="polycyclicSeries"></polycyclicChart> </div></template>import polycyclicChart ..原创 2021-12-10 14:43:05 · 1117 阅读 · 2 评论 -
echart仪表盘进度条
先上效果图和链接演示Dome:https://www.makeapie.com/editor.html?c=xM-u9DKgR8<div class="dashboard"> <gaugeChart :data="dashValue"></gaugeChart> <div class="gaugeNum"> <div> <div>0</div> <div.原创 2021-12-07 09:35:49 · 1539 阅读 · 0 评论 -
快速强制删除vue项目中的node_modules包
安装:npm install rimraf -g删除命令rimraf node_modules转载地址:https://www.cnblogs.com/shihx/p/13158055.html转载 2021-12-07 09:20:23 · 634 阅读 · 0 评论 -
echart绑定的点击事件多次请求问题
echart绑定的点击事件多次请求问题原创 2021-12-03 10:00:00 · 310 阅读 · 0 评论 -
vue图表之折柱图(柱状图和折线图),包含点击事件
效果图柱状图和折线图,主要是以柱状图为底,在柱状图的基础上加入了折线图可自定义的参数:series:数据的数量 type 图表的类型 bar柱状图 line折线 数据有几个,界面展示几个xAxis:X轴数据unit:顶部单位barWidth:柱子的宽度colorLine:柱子和折线的颜色backLine:Y轴背景线条颜色dataZoomNum:大于这个数量,横向滚动条出现legendBottom:legend距离底部的位置完整代码...原创 2021-11-05 18:21:24 · 2316 阅读 · 0 评论 -
vue项目中Echarts两个图表之间连接两条线
效果图 完整代码在最下面基本效果是,左侧默认显示最大占比的区域,旋转到右侧,同时两条线的起点是左侧扇形区域上下两点,两条线的终点是右侧扇形的上下两点。实现思路,两条线是div定位实现的,这里利用了css的属性transform-origin 设置基准点两条线都是设置右侧为基准点,同时设置了旋转transform: rotate(0deg);最终只需要更改偏移角度,就可以实现线条的移动。这里需要注意因为线条是根据左侧扇形区域的占比大小不同而移动,所以线条的宽度...原创 2021-08-05 15:35:26 · 5149 阅读 · 6 评论 -
vue中Echarts地图组件+城市json文件
效果图完整代码<template> <div id="app"> <div class="chart_content"> <tab1 ref="tab1"></tab1> </div> </div></template><script> import tab1 from './components/chart/tab1.vue' export defaul.原创 2021-08-03 16:15:13 · 779 阅读 · 0 评论 -
Echarts扇形图点击切换角度+右侧阴影区域和角度对齐
最终效果图 完整代码在最下面主要效果实现是中间阴影区域,随着左侧扇形图当前选中区域的角度变化随之变化。这里简单说下思路,主要是计算扇形区域两点之间的高度,因为右侧的地区高度是固定的,就是秦皇岛,张家界那一列高度,中间阴影部分的实现,是定位了一个长方形,上下有两个直角三角形,背景是白色,为了画出最终的两个三角形,所以要计算两个三角形的高。因为这里牵扯到定位,所以左侧的扇形图和长方形都是固定宽高,扇形图是固定宽高,所以半径也可以直接拿到,这里计算时需要用到两个公式,sinA(...原创 2021-08-02 17:22:47 · 633 阅读 · 0 评论 -
echarts图表legend整齐排列
效果图完整代码<template> <div id="app"> <div class="chart_content"> <chartEight :legendAll="legendAll" :xAxis="four_xAxis_data" :series="seven_series_data"></chartEight> </div> </div>&l.原创 2021-07-30 16:59:21 · 1751 阅读 · 0 评论 -
Vue项目中折线图圆滑显示,X轴加滚动条dataZoom
效果图这里需要注意的是,我的项目中Echarts版本是4.6。5.0的版本这里X轴滚动条样式会有所不同"echarts": "^4.6.0",完整代码<template> <div id="app"> <div class="chart_content"> <div>折线图--圆滑--X轴加滚动条</div> <chartSeven :legendone="four_legend_data_one" .原创 2021-07-29 17:23:29 · 1010 阅读 · 0 评论 -
Vue中Echarts扇形图legend实现文字百分比整齐排列
效果图主要实现两个功能,左侧文字后增加百分比,环形图中间,默认显示文字及百分比,鼠标滑过切换。完整代码<template> <div id="app"> <div class="chart_content"> <div>环形图</div> <chartThree :data="chart_two_data" :legend="legendData" @loadedChar原创 2021-07-29 15:29:29 · 2338 阅读 · 0 评论 -
iView-Table合并,防止串行
串行的效果合并后的效果<template> <Table :columns="columns14" :data="data5" border :span-method="handleSpan" class="tableclass"></Table></template><script> export default { name: "tableone"..原创 2021-07-12 17:26:11 · 361 阅读 · 0 评论 -
Vue中echarts扇形图默认高亮并显示提示框
效果图代码<template> <div class="chart" v-resize="resizeCharts" ref="barChart"></div></template><script> import * as echarts from "echarts"; export default { name: "barChart", props: { data: {原创 2021-07-12 15:50:18 · 888 阅读 · 0 评论 -
vue-countup-v2(npm)数字滚动插件
vue-countup-v2:https://github.com/xlsdg/vue-countup-v2安装npm install --save countup.js vue-countup-v2<ICountUp :start="0" :endVal="value" :delay="delay" :options="countUpOption" />data() { return { countUpOption: { useEasing: tr.原创 2021-07-09 13:40:30 · 1395 阅读 · 0 评论 -
Vue中封装的echarts组件
先上效果图最近做的项目中图表用到很多,所以简单记录下,目录结构很简单这里的resize.js是大佬写的一个监听窗口缩放的的事件,index.js是全局注册的v-resize 自定义指令,在每个组件中都使用到了。resize.js// 按钮权限判断指令const resize = { inserted: (el, binding, vNode) => { // 指令的绑定值,是一个function函数 .原创 2021-07-09 09:50:43 · 1116 阅读 · 1 评论 -
vue promise封装axios
requseimport Axios from 'axios'// 创建一个axios对象const instance = Axios.create({ baseURL: ' https://xxx.xxx.com', timeout: 5000})// 请求拦截// 所有的网络请求先走这个方法 网络请求发起之前 instance.interceptors.request.use( function(config) { // config.headers.tok...原创 2021-06-19 15:39:04 · 207 阅读 · 0 评论 -
element ui Cascader联级选择器 获取label的值
主要用到官网的方法:getCheckedNodes<div class="address_management_two_two flex"> <span class="demonstration name_wid_left">省市区:</span> <el-cascader v-model="value" :options="options" ref="cascaderAddr" :props="{value:'v',label:'n',chi..原创 2021-05-27 13:31:08 · 205 阅读 · 0 评论 -
html引入element ui 后,element-icons.woff 和 element-icons.ttf文件找不到
html文件引入element ui后,报错 element.js:1 GET file:///D:/llz/test-8-17/css/fonts/element-icons.woff net::ERR_FILE_NOT_FOUND element-icons.woff 和 element-icons.ttf文件找不到只要在对应文件夹里引入这两个文件即可:点击下载引入:转载地址:https://blog.csdn.net/bigbigpigsobig/article/details/转载 2021-05-26 09:29:47 · 2471 阅读 · 0 评论 -
axios请求中添加token,Authorization中添加token
axios({ method: 'get', url: url, responseType: 'blob', headers: { 'Authorization': 'Bearer ' + getToken() } }).then(res => { console.log(res) })转载地址:https://blog.csdn.net/weixin_44994731/article/details/104472894转载 2021-05-26 09:26:11 · 1370 阅读 · 0 评论 -
vue项目中原生input上传图片
<input type="file" class="upload" @change="addImg" ref="inputer" accept="image/png,image/jpeg,image/gif,image/jpg" />addImg(e){ console.log(e) let file = e.target.files[0]; console.log(file) this.uploadImg(file)},//上传图片uploadImg(img) { v...转载 2021-05-26 09:23:36 · 327 阅读 · 0 评论 -
elementUI table多选 设置默认勾选
<el-table ref="multipleTableClinicRoom" :data="tableData" stripe border v-loading="tableLoading" highlight-current-row @row-click="handleCurrentChange" :cell-class-name="getCellIndex" class="clinic-area-table-are...转载 2021-05-26 09:21:43 · 1447 阅读 · 0 评论 -
vue绑定数据,渲染页面时会出现变量闪烁
在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如<div class="#app"> <p>{{value.name}}</p></div>在加载的时候会看到{{value.name}}原因:由于JavaScript去操作DOM,都会等待DOM加载完成(DOM ready)。对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template,所以对于Chrome这类快速的浏转载 2021-05-24 17:58:20 · 475 阅读 · 0 评论 -
vue.js 模拟input滑块验证效果
<div class="range_type_class"> <div class="range_type_class_txt">向右拖动滑块填充拼图</div> <input type="range" max="86" value="{{slider_value}}" v-model="slider_value" @input="slider_change" /> <div class="range_type_class_one" :st...原创 2021-05-22 17:40:20 · 481 阅读 · 2 评论 -
vue 配合mintUi实现省市区三级联动
最终效果这里有个问题需要提示下,MintUi的版本问题,我用的https://unpkg.com/mint-ui@2.2.13/lib/index.js 2.2.13版本滚动时有问题,而且重复打印,于是切换了版本,最后发现 2.2.9版本滚动正常,但是不知道为什么,页面其他picker受到了影响,所以最终只有地址这个界面使用了2.2.9版本,其他界面依旧使用2.2.13版本!文档地址:http://mint-ui.github.io/docs/#/zh-cn2/picker&l...原创 2021-05-08 16:55:16 · 223 阅读 · 0 评论 -
vue动画 右侧滑出层
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="flexible" content="initial-dpr=2" /...原创 2021-04-25 10:35:55 · 923 阅读 · 0 评论 -
vue项目使用electron打包桌面应用程序 exe
客户需求,要求vue做一个桌面应用,很久没碰vue了,这里简单记录下。我是用Hbulider X 创建的vue项目,electron打包vue项目为桌面应用。目录结构:打包之前需要简单创建几个vue界面,同时安装axios和router,让页面可以正常跑起来。main.jsimport Vue from 'vue';import App from './App.vue';import VueRouter from 'vue-router';import axios fro原创 2021-03-19 11:58:13 · 933 阅读 · 0 评论 -
Vue购物车练习
演示地址:http://www.bright2017.top/VueDemo/dome1-ShoppingCart/《Vue.js实战》中的练习示例,自己又写了一遍,纯属自己复习时查看。原创 2018-05-28 13:57:24 · 396 阅读 · 0 评论 -
vue 循环数据进行操作改变对象得值,但是视图没有发生变化
如果是数组this.form = Object.assign([], this.form)如果是对象this.form = Object.assign({}, this.form)Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。语法链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assi..转载 2020-09-25 13:11:39 · 378 阅读 · 0 评论 -
vue项目中使用v-if判断数组长度时,length报错?
<a href="#picture" v-if="shopListData.attrs.length >0 " class="mui-navigate-right">选择 <span >{{ product_attr }}</span></a><a v-else >选择 <span >{{ shopListData...转载 2019-12-11 16:57:40 · 1975 阅读 · 0 评论 -
uni-app css动态绑定
现在有个需求,需要每3个模块的颜色是一致的,1,2,3是黄色,紫色,蓝色,4,5,6是黄色,紫色,蓝色,以此类推。<view v-for="(item,index) in integral_data" :key="item.id"> <view :class="['integral_top',{ 'integral_top_ones': (index+1...原创 2019-12-04 11:48:30 · 5125 阅读 · 0 评论 -
vue报错之Duplicate keys detected: '0'. This may cause an update error.
错误原因:我们在使用v-for的时候,都要必须加上一个唯一的key值,但是这里写了两个for循环,尽管都加上了key值,然而又将key的值写成一样的了。所以就导致了警告。出错的地方:写了两个for循环,绑定的key相同。解决办法:可以将其中一个的key修改一下即可。<div class="info" v-for="(item, index) in itemLis...转载 2019-11-23 10:03:54 · 1961 阅读 · 0 评论 -
vue模板语法绑定 url 传递参数
<navigator v-for="(item,index) in fruits" :url="'/pages/welfareInfo/welfareInfo?id='+item.id" hover-class="navigator-hover"> {{item}}</navigator>最近写uni-app传递参数总是报错,还是纪录一下吧...原创 2019-11-21 16:23:59 · 980 阅读 · 0 评论 -
vue class变量加载不同class
vue语法中绑定Class时,用到对象语法<div :class="['hide',{'show':item.staues=='0'}]"> 待付款</div><div :class="['hide',{'show':item.staues=='1'}]"> 已付款</div><div :class="['hide',{'sh...原创 2019-11-01 14:54:09 · 732 阅读 · 0 评论