- 博客(74)
- 收藏
- 关注
RSS订阅原创 Vue中静态资源或css文件没有加载出来的说明
问题说明场景1：在Vue.js文件中，你想引入一个css样式文件，你发现引入的路径对的，却始终无法在页面上加载出来。场景2：你想用一张图片资源放到页面上，但是，尽管你的路径完全写对，但是却死活加载不出来。原因在Vue中，config目录下的index.js里面说明了index.html需要引用的静态资源路径。 // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), ..
2020-11-19 11:02:20
1995
1
原创 JSON.parse和JSON.stringify
问题提出在学习和工作中经常碰到一些这样的问题。明明已经从接口上拿到数据，用解构的方法去拿数据时却拿不到，出现undefined。这种问题是因为获取到的数据是JSON的格式，用解构的方法并不能获取到数据。比如res.aabb这种获取数据的方法只能基于JavaScript对象的形式来获取。JSON.parse把JSON格式的数据转化为JavaScript对象的形式。JSON.stringify功能恰恰相反。能把JavaScript对象转化为JSON的格式。JSON.parse(JSON.str.
2020-11-19 11:01:52
232
原创 echarch.js的基本使用
安装npm install echarts --save在main.js里import echarts from 'echarts'引入这个包。Vue.prototype.$echarts = echarts 往原型链上加上echarts这样就可以在组件中使用了。在Vue中开始一个例子<template> <div ref="projectMap" style="width: 100%;height:100%;"></div></temp..
2020-11-19 11:01:30
468
原创 如何在Vue+echarts开始画一个中国地图
第一步：先npm install echarts --save 在项目中下载好包。第二部：require("../../ndee_modules/map/js/china")在node_modules中引入中国地图。设置option属性（中国地图的各项属性）定义一个方法获取DOM并setOption就行了。var myChart = that.$echarts.init(that.$refs.map);myChart.setOption(that.option);...
2020-11-19 11:01:09
165
原创 v-for警告解决方法
<el-row v-for="item in servCostInfos"> //这样会警告<el-row v-for="(item,index) in servCostInfos" :key="index"> //这样就不会
2020-11-19 11:00:47
227
原创 vue-awesome-swiper滚动插件
安装npm install vue-awesome-swiper --saveimport "swiper/dist/css/swiper.css";import { swiper, swiperSlide } from "vue-awesome-swiper";//局部引入<swiper :options="swiperOption"> <swiper-slide> slide1 </swiper-slide> <swiper-slid..
2020-11-19 11:00:26
309
原创 Echarts.js常见参数设置
常见APIechartsecharts.init(dom,theme)。创建一个ECharts实例，返回echartsinstance，不能在单个容器上初始化多个ECharts实例。dom是实例容器，一般是一个具有宽高的div元素。必须要设置宽高。theme应用的主题。可以是一个主题的配置对象，也可以使用已经通过 使用已经通过 echarts.registerTheme 注册的主题名称。注册的主题名称。echarts.connect(group:string|Array)多
2020-11-19 10:59:58
3745
原创 常见的Date方法
var date=new Date('2016-01-10');var time=date.getTime()//返回该date对象对应的毫秒数，与valueOf返回的结果相同date.setTime(1);//以毫秒数设置日期，这常常会改变整个日期对象var year=date.getFullYear();//取得四位数的年份，如2016而非16date.setFullYear(2012);//设置年份，传入的参数必须是四位数字var month=date.getMonth();//返回该dat
2020-11-18 11:29:31
141
原创 Echarts定时刷新页面功能
问题提出背景：echarts的图层必须要定时刷新，一分钟或者5分钟向接口重新获取数据。data() { return { timer: null }},created() { this.timer = setInterval(()=>{ this.getUserCover() //一分钟调用接口一次 },60000)}destroyed() { clearInterval(this.timer) // 可以判断如果定时器还在运行就关闭 或者直接关闭}.
2020-11-18 11:29:13
1180
原创 Echarts的响应式布局
echarts中的响应式布局。单个图层var myChart = this.$echarts.init(this.$refs.depActive)//获取到dommyChart.setOption(this.depActive_option)//渲染dom // 窗口自适应window.onresize = function() { myChart.resize();}//但是这种方法只能对一个图层有用，如果同时对多个图层设置的话，只对最后一个图层有用。考虑到在Vue中，通常会把多..
2020-11-18 11:28:53
1063
原创 ref
ref在Vue中是用来给元素或是子组件注册引用信息到父组件或是Vue实例上，注册后的引用信息都会呈现在父组件Vue实例的$.refs上，这时，我们就可以通过 $.refs获取到引用的 DOM对象或是子组件信息。在使用 JS/Jquery 获取页面的DOM 元素时，我们一般是根据 id、class、标签、属性等其它标识来获取到页面上的 DOM元素。嗯，可以说，我们很难抛弃Jquery的一个重大原因，就是当我们需要获取到页面上的 DOM元素时，使用Jquery的 API相比于原生的 JS 代码，简单到极致。
2020-11-18 11:27:56
123
原创 后台管理系统的布局小解
<template> <div> <!-- 头部 --> <el-row class="vheader"> <el-col :span="24"> <vheader></vheader> </el-col> </el-row> <!-- 侧边及内容区 --> <el-row class="vbody
2020-11-18 11:27:34
216
原创 vuex的简单应用
一般vuex的应用npm install vuex --save 安装。在src下新建store或者vuex文件夹，在下面新建index.js文件。index.js文件中 import Vue from 'vue'; import Vuex from 'vuex' 并且 Vue.use(Vuex)const state = { //存放数据 name: 'xxx', num: 2}const mutations = { //存放一些方法，对state的操作。..
2020-11-18 11:27:09
74
原创 省市县联动插件 V - Distpicker
步骤一： npm install v-distpicker --save步骤二： 在main.js中全局使用。import VDistpicker from 'v-distpicker'Vue.component('v-distpicker', VDistpicker)步骤三：在组件中使用(推荐)import VDistpicker from 'v-distpicker'export default { components: { VDistpicker }}步骤四：使用&l
2020-11-18 11:26:52
220
原创 表格导出功能
第一版（只能导出本页面的表格，并不能导出分页的表格）npm install --save xlsx file-saver //安装插件//在需要的组件引入import FileSaver from "file-saver";import XLSX from "xlsx";exportExcel() { // 设置当前日期 let time = new Date(); let year = time.getFullYear(); let mon.
2020-11-18 11:26:19
115
原创 从接口获取到数据之后想要对数据进行操作，却失效的情况
比如获取到新数据，想对新数据进行操作。却发现操作的还是老数据。getData() { aaa().then(res => { console.log(res) //对res进行操作 this.table = res }) this.table.indexOf('杭州') //却发现对this.table操作的还是老数据 //但是，打印出来的是新数据。}原因在于，数据获取是异步操作，JavaScript会优先执行同步操作，对于异步操作会后于执行。所以解决方法是
2020-11-18 11:25:50
323
原创 Vue无法识别数组变动
Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。换句话说，vue对象内部不会设置访问器(观察者)，你要改变他让它触发视图更新，可以手动调用this.$set()`data () { return { student: { name: '' }, teach:["李磊"] .
2020-10-30 10:48:50
248
原创 超出则隐藏
//一行超出隐藏.name-wrapper { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; // 溢出不换行,兼容IE，IE不能两行超出隐藏，只能一行}//多行超出隐藏overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
2020-10-30 10:48:33
119
原创 表格分页
第一种情况：一次只展示一个页面的数据，下一页的数据需要发送数据向后台获取。<el-table> 表格</el-table><el-pagination @size-change="handleSizeChange" //改变一页/X条数据的点击事件 @current-change="handleCurrentChange" //第几页按钮 :current-page.sync="curPage" //当前是第几页 .
2020-10-30 10:48:15
235
原创 表尾合计
<el-table:summary-method="getSummaries"show-summary>//表格</el-table>getSummaries(param) { const { columns, data } = param; //解构params,抽出columns,data const sums = []; columns.forEach((column, index) => { if (in
2020-10-30 10:47:53
121
原创 利用模板字面量来动态写URL
let queryparams = `?type=${this.type}&page=${changeCurPage( this.curPage )}&pageSize=${this.pagesize}&queryVO=${encodeURIComponent( JSON.stringify(this.queryparam) )}`;getReq(URL.REPORT_SECURITY_REINFORCE + querypa
2020-10-30 10:46:27
78
原创 当get请求带参带的是对象怎么传
前端get请求有时候会带参给后端用来返回我们需要的值。这个参一般是字符串或者是number类型。但是如果是对象类型，前端应该怎么做？//这种传参是不对的，后端无法识别出来。http://localhost:8080/servlet/user?param={"accID":"milo","field":"nick_name,email"}//应该对路径进行转义，变成下面这种格式。queryVO为对象。http://nb-hz20130305.hikvision.com:81/dpm-report
2020-10-30 10:46:03
14741
3
原创 在表格中，很多行的状态都绑定在一个变量中，点击一个会修改全部的状态
比如一个表格的所有行都有一个显示详情的弹窗，这个弹窗与否与绑定一个变量，但是点击其中一行的话，改变状态，所有行都打开弹窗了。思路：这个变量改成数组，点击第一行，就修改数组[0]的值，第二个就修改数组[1]的值。data() { return { delayOpenB: [] }}//执行方法showDelayB(index, row) { this.delayOpenB[index] = true; }...
2020-10-30 10:45:05
117
原创 记一次项目优化
Webpack方面减少代码包大小，提高安全性。在config/index.js文件内，修改productionSourceMap: false。表示打包后不要map文件，map文件的作用是如果运行错误会出现报错信息，而改成false，可以对报错信息屏蔽。开启gzip压缩。在config/index.js文件内，设置productionGzip: true, productionGzipExtensions: ['js', 'css','svg']。 gzip(GNU- ZIP)是一种压缩技术..
2020-10-30 10:44:40
120
原创 获取数组当中最大的数
使用 Math中的 max/min方法let arr = [22,13,6,55,30]; console.log(Math.min(...arr)); // 6console.log(Math.max(...arr)); // 55sort排序let arr = [12,56,25,5,82,51,22];arr.sort(function (a, b) { return a-b;}); // [5,12,22,25,51,56]let min = arr[0]; .
2020-10-30 10:44:19
196
原创 Vue路由的懒加载
旧写法import Vue from 'vue' //引入Vueimport Router from 'vue-router' //引入vue-routerimport 组件名 from '组件路径'...Vue.use(Router) //Vue全局使用Routerexport default new router({ routers: [ { path:'', name:'', co..
2020-10-30 10:43:53
105
原创 Object.keys()
返回一个由一个给定对象的自身可枚举属性组成的数组。主要作用于以下2个：对象。Object.keys(对象) 返回的是对象的属性名。var obj = {a:"1111",b:"2222",c:"33333"}Object.keys(obj)结果：["a","b","c"]字符串。返回的的index，索引。var obj = "abc123"Object.keys(obj)结果：[0,1,2,3,4,5]经典例子： var obj = { a: "1111",
2020-10-16 13:26:13
95
原创 判断是否有空格
问题提出：留言板输入框不能输入空格和空。//点击事件addMessage() { var regu = "^[ ]+$" var re = new RegExp(regu) if (this.input === "" || re.test(this.input) == true) { return false //有则return掉 this.input = "" //并清空输入框 } }// 判断 this.
2020-10-16 13:25:47
769
原创 前端实现页内搜索
这里要讲清楚，搜索的是什么？页内搜索并不是ctrl+ f 这种搜索，它搜索的范围肯定是从后端拿到数据渲染在前端的数据，比如表格，列表等等。这里以表格为例，要实现填入关键字，然后筛选出对应的表格，展示在页面上。<el-input placeholder="搜索" v-model="value"> <el-button slot="append" type="primary" icon="h-icon-search" @click="doSearch(value)"></
2020-10-16 13:24:37
624
原创 将中国标准时间格式转换为yy-mm-dd的格式
var s = new Date(1262275200000); //s获取到的是中国标准时间格式var startTime = s.getFullYear() + "-" + (s.getMonth() + 1) + "-" + s.getDate() + " " + s.getHours() + ":" + s.getMinutes() + ":" + s.getSec
2020-10-16 13:23:55
1828
原创 遍历并切割字符串
res[0].timeline.forEach(item =>{ var arr = item.time.split("-") that.option.xAxis[0].data.push(arr[1]) })解析：forEach遍历res[0].timeline数组。[{time:12-2,index:0}....] item替代数组的每一项。 item.time代表着每一项的time属性。 item.time.split("-")代
2020-10-16 13:23:37
383
原创 JavaScript识别浏览器种类
//放在App.vue中，可以一打开就检测<el-alert type="error" center :closable="true" v-show="!browser().hasOwnProperty('chrome')"> <span slot="title" simple> 检测到当前浏览器非chrome内核浏览器，为了您的使用体验和程序运行速度，请使用chrome内核进行操作！ <a href="http://softdo
2020-10-16 13:22:38
233
原创 数组与字符串相互转换
数组转字符串//用toString方法[1,2,3].toString(); //"1,2,3"['1','2','3'].toString(); //"1,2,3"//用join()方法[1,2,3].join(); //"1,2,3"[1,2,3].join('-'); //"1-2-3"//多维数组亦转化为字符串[1,2,[3,4],[5,6,7,[8,9]]].toString(); //"1,2,3,4,5,6,7,8,9"[1,2,[3,4],[5,6,7,[8,9]].
2020-10-16 13:22:09
59
转载 sort()方法的妙用
按照字母顺序排序//注意，未带参数的sort()只能排序英文字符串['bbd','ba','zsdd','a'].sort(); //["a", "ba", "bbd", "zsdd"]升序排列['12','1211','323','50','1'].sort((a,b)=> {return a-b}) //["1", "12", "50", "323", "1211"]降序排列['12','1211','323','50','1'].sort((a,b)=> {re.
2020-10-16 13:21:45
101
原创 Math.random()的用法
Math.random()原本作用Math.random(); //返回介于 0（包含） ~ 1（不包含） 之间的一个随机数 0.843870140263191取随机整数Math.floor(Math.random() * 10 + 1)：数组随机打乱[1,2,3,4,5,6].sort(() => Math.random() - 0.5);...
2020-10-16 13:20:30
356
原创 跳转到页内指定位置
利用<a>标签的锚点<h3 name="top">唐诗300首</h3><a href="#top">顶部</a>//点击顶部可以跳转到唐诗300首利用location.href<p id="ddd">底部</p><button onclick="gobuttom()">底部</button>function goButtom() { location.hr.
2020-10-16 13:19:57
83
原创 JavaScript中如何计算时间差
思路：假如有timeA 和 timeB。我要得到他们的时间差。把timeA 转化为时间戳的格式。把timeB转化为时间戳的格式。时间戳好像是1979-01-01开始计算，单位是毫秒。然后两个时间的时间戳相减，得到两者之间的绝对数字。在将这个数字转化为 天/小时/分钟/秒。得到时间差。//例let e = params.row.trueDate //获取到时间let b = params.row.date //获取到时间let start = new Date(b
2020-10-15 08:46:39
629
原创 ZERRO 组件库(Angular.js)开发流程
项目启动与安装1. ng new 项目名字2. cd 项目名字3. ng add ng-zorro-antd在组件中如何具体使用？1. angular不同于vue,vue直接在main中直接导入。而angular需要在app.module.ts中配置。2. 如果你想用button按钮组件。 - 需要在app.modules.ts中直接导入。 import { NzButtonModule } from 'ng-zorro-antd/button'; - 再写入数组。 imports..
2020-10-15 08:37:18
169
原创 管道
管道用来对字符串，货币金额，日期和其他显示数据进行转换和格式化。管道是一些简单的函数，可以在模板表达式中用来接受输入值并返回一个转换后的值。# 常用的内置管道1. DatePipe：根据本地环境中的规则格式化日期值。2. UpperCasePipe：把文本全部转换成大写。3. LowerCasePipe ：把文本全部转换成小写。4. CurrencyPipe ：把数字转换成货币字符串，根据本地环境中的规则进行格式化。5. DecimalPipe：把数字转换成带小数点的字符串，根据本地环境中的.
2020-10-15 08:32:52
81
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人