解决 el-dialog 封装内嵌多次调用 遮罩层样式失效,直接全黑 把el-dialog封装成组件,多次调用,多点几次就会出现这种情况,弹窗还在,但是背景黑屏了,看了css,。v-model的样式没有问题,但是似乎opacity .5 没有起到效果,原因不明,有知道的大佬求告知。想了一个其他办法:使用 :modal="false" 不显示遮罩层在el-dialog 上绑定class 设置背景色(伪遮罩层)...
element UI文件上传、下载,限制文件大小、格式 上传文件<el-upload class="upload-demo" action="上传地址" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :data="listData" :on-exceed="handleExceed" :file-list="fileList"> <el-
vue 路由跳转、传参、新窗口打开页面 跳转方式1、this.$router.push 当前页面跳转,新增history记录,点击后退,返回上一级页面①参数直接拼接在后面:this.$router.push('/nextPage?name=name&id=111') // 当前页面跳转接收参数:this.$route.query // 全部参数②路径写在name里面,params传参,这种方式前面不需要加‘/’this.$router.push({ name: 'highcharts', params:
报错 Failed to execute ‘appendChild‘ on ‘Node‘ 一开始整个页面数据刷新后都无法渲染,尝试网上的方法,更改 nuxu.config.js 配置,把plugins路径后的ssr改成了true,可以渲染一部分了,但是子组件部分还是不能渲染出来。最后:用<client-only></client-only>标签将疑似出问题部分重新包裹(不渲染的子组件)终于解决了:...
element UI 级联选择 el-cascader修改绑定数据名称 绑定到props上就可以:// 绑定到props 即可<el-cascader :options="options" :props="{ checkStrictly: true,value:'id',label:'name',children:'typeList'}" :popper-append-to-body="false" clearable popper-class="page-e
echarts 图例翻页+图例自定义样式 设置对应的legend即可:想要更换的图例图片放在data里面: legend: { type: 'scroll', // 可滚动翻页的图例 orient: 'horizontal', //横向 pageIconColor: '#2C86FF', //翻页箭头颜色 pageIconInactiveColor: 'rgba(44,132,251,0.40)', //翻页(即翻页到头时箭头的颜色) pa
echarts 地图增加背景图 新建一个img,背景图路径给src: let img = document.createElement('img') img.src = require('@/assets/img/chongqing.png')在geo的 itemStyle 里面的 areaColor 配置,以及emphasis里面写入: itemStyle: { borderColor: "rgba(63, 218, 255, 0)", // 边界颜色 are
echarts地图自定义点样式,缩放计算 点聚合,自定义图例icon,label文字样式 效果:引入echarts后:阿里云下载json数据:DataV.GeoAtlas地理小工具系列引入数据:import chongqing from '@/assets/js/chongqing.json'同样需要一个放置容器:<template> <div> <div style="width:100%;height:100%" id="mapid"></div> </div></tem.
vue 使用百度地图以及地图样式、绘制 点、点聚合和多边形区域、自定义点样式、聚合样式等 index.html 引入百度地图api:<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的的密钥">引入样式文件:我在官网上下载的样式文件,可以自定义这个样式文件放在public文件夹下面的json文件夹里 <script type="text/javascript" src="json/custom_map_con
vue 使用element UI 表格、下拉翻页 滚动底部加载更多注册全局指令 新建文件:directives.js在main.js中引入:import directives from './directives'Vue.use(directives)编辑directives.js 内容import Vue from 'vue'// 注册下拉框滚动底部指令Vue.directive('loadmore', { bind(el, binding) { // 获取element-ui定义好的scroll盒子 下拉选框滚动底部事件 .
echarts 仪表盘样式 整体效果如下:基础配置: let evaluation = this.$echarts.init(document.getElementById(id)) evaluation.setOption({ grid: { top: '6%', bottom: '18%', left: '3%', width: '96%', containLabel: true .
vue-seamless-scroll无缝滚动实现分页展示数据 解决思路:vueSeamlessScroll 滚动是因为盒子translate在匀速改变,我需要的效果是往上滚动,所以translateY在递减,鼠标移入暂停滚动。那么首先需要动态拿到translateY的值。vueSeamlessScroll 复制了一份我的盒子,实现无缝滚动。那么当我的数据 translateY(每一条高度是45px)为 > 45 就可以请求下一条数据,但是不能直接替换(因为还没有展示完),就用js将插件复制的盒子的innerHTML改成我需要展示的下一条数据即可。当完..
highcharts3D饼图 -设置大小,提示样式 先使用npm安装:npm install highcharts --save引入方式:import HighCharts from 'highcharts'import Highcharts3D from 'highcharts/highcharts-3d';或者:const highcharts= require('highcharts')const Highcharts3D = require('highcharts/highcharts-3d')然后初始化:..