Sun_Gem-CSDN博客

遇到的问题：①、因为表格数据是循环展示的，导致点击后popover一次性出现多个，为保持popover的唯一性，需要给el-popover设置ref属性’popover-’ + scope.row.id 然后搭配el-popover的内置方法 doShow 并且trigger=“manual”。②、弹出框弹出后不消失，el-popover的有内置方法 doClose ，通过引用popover对象然后调用doClose方法。html:<el-popover placement="bottom"

2022-03-22 15:09:56 5675 1

原创 vue项目在ie浏览器中报Symbol未定义（vue兼容ie低版本浏览器）

ie10浏览器解析不了es6的语法，需要我们使用babel（Babel是一种工具链，主要用于将ECMAScript 2015+代码转换为当前和旧版浏览器或环境中的向后兼容版本的JavaScript）。但是Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码.

2022-03-22 10:45:04 1590

原创前端jQuery实现表格列可拖动

实现功能：表格列可拖动改变列宽，拖动时表格中文字不换行，超出部分以…代替①、引入jQuery和colResizable的js文件（colResizable支持表格拖动改变列宽）colResizable下载地址：http://www.bacubacu.com/colresizable/#rangeSlider<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script src = .

2022-03-22 10:34:13 1058

原创 elementui中el-table设置type=“selection“时v-if不生效

问题描述：两个页面中复用一个组件中的表格，但是不同时使用type="selection"属性，于是使用v-if判断显隐，但是没有生效还导致表格每列字段错乱问题。解决方案如下：①、v-if判断显隐②、el-table的key属性是它的唯一标识。通过不同的key来给复用的table不同的标识...

2022-03-22 09:58:12 2608 1

原创前端实现页面初始化时强制刷新页面一次

<body><script> if(!window.name){ window.name = 'test'; window.location.reload(); }</script></body>

2021-12-24 15:36:47 2251 1

原创 vue实现后台返回所有表格数据，前端转换为excel格式文件导出

一、npm下载模块 cnpm install vue-json-excel二、在main.js中全局引入 import JsonExcel from 'vue-json-excel' Vue.component('downloadExcel', JsonExcel)三、所需页面中使用 <download-excel class="export-excel-wrapper" :data="json_data" :fields="json_fields" name="远程诊断报告导出.xl

2021-12-24 15:33:33 749

原创 vue实现导出excel时携带token(封装)

新建一个文件export.js封装方法export.js中：import axios from 'axios'export function expotOut(searchList, pathName, xlsName, url) { // 获取时间，这一步是在下载时文件名带下载日期，例如：用户信息2020-04-27.xls,如无需要可以去掉 let d = new Date() let month = (d.getMonth() + 1) let day = d.

2021-12-24 15:29:10 710

原创 Vue项目打包发布后，使浏览器WebPack中无法查看源码

vue项目打包发布后，可在chrome的Sources—> Page—> webpack中查看到项目源码修改config/index.js中的 build对象productionSourceMap: false即可隐藏源码

2021-12-23 17:39:38 2834

原创 vue项目使用tomcat部署至linux

一、配置vue项目①、在config/prod.env.js文件中写入'use strict'module.exports = { NODE_ENV: '"production"', HOST:'172.18.49.37', //linux系统的ip PORT:1070 //设置自己项目的端口号}②、在config/index.js文件中设置assetsPublicPath: '/jingzhong/' //自定义项目名二、配置linux中tomcat①、linux中找到To

2021-12-23 17:33:16 731

原创前端使用md5加密

一、安装md5包npm install js-md5 -s二、main.js中引入，Vue原型链上添加md5为公用方法import md5 from 'js-md5' //引入Vue.prototype.$md5 = md5;//添加三、使用this.$md5('需要加密的内容')

2021-08-29 16:18:15 691

转载 Vue如何使用iconfont（阿里图标库）

1、在iconfont上任意方式登录2、选择图标管理下，我的项目3、新建一个项目（如果已有项目可忽略）4、创建好之后就可以找自己要用的图标，添加到自己的项目里5、图标添加完毕后，再次回到我的项目里就可以看到自己的图标了6、选择下载至本地，解压之后可以看到这些文件7、把选中的文件（其他的可以不用）放到自己项目所需要的文件夹下8、然后在main.js中全局引入对应的css文件// 阿里图标库import "@/assets/iconfont/iconfont.css";9

2021-08-29 15:57:30 5981

原创 vue实现动态面包屑

动态面包屑需要利用路由对象matched属性，首先我们先来看看官方对 matched 的介绍。matched：返回一个数组，包含当前路由的所有嵌套路径片段的路由记录。可以看到当我们定义好路由结构以后，我们就可以获取到当前页面的路由记录。首先我们封装一个面包屑组件，取名为 Breadcrumb.vue<script>export default { data() { return { breadList: [] // 路由集合 }; }, wat.

2021-08-29 15:47:54 2575

原创 vue2.0与vue3.0改变路由hash或history

一、vue2.0history:const router = new VueRouter({ mode: 'history', routes: [...]})hash:const router = new VueRouter({ mode: 'hash', //或者把这句话注释，默认就是hash routes: [...]})二、vue3.0history: 引入-createWebHistoryimport { createRouter, createWebHist

2021-07-09 09:59:29 564

原创前端模板字符串中绑定点击事件

let info = `<div class='info'> <div class='info_title'> <img id='info_img' src='https://pic.imgdb.cn/item/60caf1e7844ef46bb2e7146a.png' onclick='clearInfoWindow()'> </div></div>`;window.clearInfoWindow = function () {

2021-06-17 16:12:40 2277 2

原创 echarts柱状图x轴文字显示不全

var option = { xAxis: { data: [ ], axisLine: { lineStyle: { color: "#3d5269", }, }, axisLabel: { color: "#fff", fontSize: 12, interval: 0, //横轴信息全部显示 rotate: -30, //-30度角倾斜显

2021-06-07 15:30:22 493

原创 echarts设置显示位置

var option = { grid: { left: "10%", right: "10%", top: "10%", bottom: "10%", },}

2021-06-04 16:19:37 925

原创 echarts选择条件切换时清空数据

myChart.setOption(option, true);只需在使用指定的配置项和数据显示图表后设置为true即可

2021-06-04 16:18:18 705

原创 echarts窗口缩放时自适应

设置完echarts后写入window.addEventListener("resize", function () { myChart.resize();});

2021-06-04 16:15:10 211

原创 echarts地图点、线效果设置图例控制器（visualMap）

var option = { visualMap: { //图例值控制 min: 0, max: 1000, calculable: true, show: true, color: ["#f44336", "#fc9700", "#ffde00", "#3cfc01", "#00eaff"], textStyle: { color: "#fff", }, },}

2021-06-04 16:12:05 1526

原创 echarts地图判断触碰的是点还是线，从而弹窗显示不同内容

var option = { tooltip: { trigger: "item", backgroundColor: "rgba(166, 200, 76, 0.82)", borderColor: "#FFFFCC", showDelay: 0, hideDelay: 0, enterable: true, transitionDuration: 0, extraCssText: "z-index:100", formatter:

2021-06-04 16:09:30 340

原创 echarts以图片格式下载至本地

var option = { // 导出为图片 toolbox: { feature: { saveAsImage: { show: true, }, }, }, }

2021-06-04 16:03:01 641

原创 echarts地图点效果

series[ { symbol: "circle", coordinateSystem: "geo", type: "effectScatter", symbolSize: 3, itemStyle: { normal: { color: "#4ef2f2", }, }, rippleEffect: { period: 4, //动画时间，值越小速度越.

2021-06-04 15:58:52 391

原创 echarts地图飞线、飞点效果

series[ { name: "lines", type: "lines", coordinateSystem: "geo", // 飞点样式 effect: { show: true, period: 6, trailLength: 0, // symbol: planePath, 自定义图片 symbolSize: 5, }, // 飞线样式 itemStyle: { normal: { lineStyle.

2021-06-04 15:56:19 2685 3

原创 vue中引入echarts全国、全球地图

一、安装echartsnpm install echarts -S cnpm install echarts -S或使用淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org二、main.js中全局引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts//中国地图import 'echarts/map/js/china'

2021-06-04 15:30:04 787 1

原创 vscode编辑器创建用户片段实现代码快速录入

vscode编辑器提供了创建用户片段功能，此功能在于提高开发者的编程速度与效率，十分方便，下面就介绍一下如何创建代码片段。一、点击文件 => 首选项 => 用户片段二、红色框为已创建过的用户片段，可以选择更新，黄色框为新增用户片段选项，点击可编辑新增。三、这边以一个for循环片段做示例，快捷命令设置为for,设置好后进入vue组件for就会直接形成body中的代码块。{ "Print to for": { "scope": "javascript,typescrip.

2021-06-04 14:49:09 153 1

原创前端通过点击事件改变点击后标签状态

前端在做点击后改变标签状态的功能时可通过hover和active方法实现，但是此方法不灵活且代码冗余，下面就提供一个绑定动态class实现改变标签状态的方法。此功能多数存在于循环的li标签中绑定点击事件，点击后改变li标签状态。① html代码<ul> <li v-for="(item, index) in menu" :key="index" @click="change_style(index)" :class="{ change_color: menu_color.

2021-05-27 17:34:32 1418

原创 vue中设置锚点，定位到固定位置

<template> <div class="wrap"> <ul> <li><a href="javascript:void(0)" @click="goAuchor('#one')">第一</a></li> <li><a href="javascript:void(0)" @click="goAuchor('#two')">第二</a></li

2021-05-25 09:47:42 1752

转载高德地图api只显示某一行政区域的地图，其他周边地区的都不显示

<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <titl

2021-05-21 17:01:31 3641

转载地图坐标系之间的转换

百度坐标、国测局坐标（火星坐标，GCJ02）、WGS84坐标系、高德坐标系之间的转换coordinate.js 源文件/** * 百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换 *///UMD魔法代码// if the module has no dependencies, the above pattern can be simplified to(function (root, factory) { if (typeof define =.

2021-05-21 16:46:13 307

原创前端js计算两个坐标点之间的距离

// 方法定义 lat,lng function GetDistance( lat1, lng1, lat2, lng2){ var radLat1 = lat1*Math.PI / 180.0; var radLat2 = lat2*Math.PI / 180.0; var a = radLat1 - radLat2; var b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0; var s = 2 * Math

2021-05-21 16:38:56 3153

空空如也

空空如也