自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(68)
  • 资源 (6)
  • 收藏
  • 关注

转载 前端面试题总结(vue)

vue的优点1、vue是个轻量级的框架,是一个构建数据的视图集合,大小只有几十Kb2、vue是组件化开发,适合多人开发3、vue中的双向数据绑定更方便操作表单数据4、因为vue是MVVM的框架,视图,数据,结构分离使数据的更改更为简单5、vuex可以管理所有组件用到的数据,不需要借助之前props在组件间传值6、官方文档通俗易懂,易于理解和学习;vue父子组件之间传递数据1、父组件向子组件传递数据通过props,例子如下<template> <div> .

2020-07-21 15:04:40 9670

原创 js非布尔值的取反运算

! undefined // true! null // true! 0 // true! NaN // true! "" // true! 11 // false! 'string' // false! [] // false! {} // false

2021-03-08 09:25:03 103

原创 es6解构赋值的实际应用

接受剩余参数var [a,b,...c] = [1,2,3,4,5,6,7];console.log(a);console.log(b);console.log(c); //[3,4,5,6,7]…运算符也可以作用于对象,通常用于一个情况:创建obj的副本,仅仅改变obj的某一(些)个属性。(常用于echart图表参数动态渲染)this.chart.series={ ...this.objTemp, name: data.modelName, .

2021-01-20 11:28:47 23

原创 vue条件语句v-if中条件较多时优雅写法

普通写法v-if=" type==1 || type==2 || type==3 "优雅写法v-if=" [1,2,3].includes(type) "

2021-01-13 15:41:46 1454

原创 vue插槽

概念插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签使用场景直接填充内容在子组件中放一个占位符<template> <div> <span>操作</span> <slot></slot>

2021-01-12 10:33:08 25

原创 echart图表组合自定义设置tooltip的formatter

tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' ...

2020-12-10 17:01:14 114

原创 判断数组和对象的方法

判断是否为数组Array.isArray() a instanceof Array判断是否为对象            var arr = ['aa','bb','cc'];     var obj = {     a: 'aa', .

2020-09-18 10:35:13 49

转载 js数组的常用api

操作数组的方法join()将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符var arr = ["a", "b", "c"]; console.log(arr.join()); // a, b, c console.log(arr.join("-")); // a-b-cpush()和pop()push():可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。pop():数组末尾移除最后一项,减少数组的 length 值

2020-08-06 16:37:30 59

原创 vue自定义过滤器以及全局定义过滤器的方法

自定义过滤器html部分 <div class="item-inner"> <div class="item-title">支付方式:</div> <div>{{item.paymentMethod | paymentMethod}}</div> </div>js部分var vm=new Vue({ el:"#app", data:{ msg:'' }, .

2020-07-24 15:25:20 162

原创 echarts折线图标识最大值

series: [ { name: "总需量", symbolSize: 5, data: demandArr, type: "line", // smooth:true, showSymbol: false, markPoint: v...

2020-07-08 11:19:48 2362

原创 vue项目实现echarts图表最大化显示功能

由于echart工具栏没有提供最大化功能,只好使用elementUI的el-dialog自己写一个类似的功能,效果如下貌似这个放大效果作用不大(-_-||)下面放代码吧结构部分 <div class="picItem boxShardow"> <div class="header"> <span>功率曲线</span> <i class="el-icon-rank" @cli

2020-06-19 16:10:31 648 2

原创 vue-element-admin项目实现excel表格导出

安装依赖npm install xlsx file-saver -Snpm install script-loader -S -D在需要导出excel的页面执行以下方法 <el-button v-if="visible" :loading="downloadLoading" style='float:right;margin:7px 10px 0 0 ' size="mini" type="info" icon="el-icon-document" @click='exportEx..

2020-06-17 10:33:59 1593

原创 适应不同尺寸比例屏幕的css样式

div{ height: calc(100vh - 100px); }设置div的高度为当前窗口高度-100px

2020-06-12 14:22:39 337

原创 实现elementUI的el-date-picker自动弹开

点击左边时间控件选择后自动弹出右边时间控件 <el-date-picker size="mini" v-model="monthBg" type="month" :picker-options="pickerOptions0" placeholder="选择开始月份" @change = 'chooseBg'> </el-date-picker> &.

2020-06-03 14:57:09 1803

原创 echart图表实现动态改变纵坐标的最小值(解决y轴波动太小问题)

yAxis: { name: "KM", type: "value", min: function(value){ return value.min; } }在yAxis属性中加入以下代码 min: function(value){ return value.min; }...

2020-05-20 15:44:57 1605

原创 vue项目实现定时刷新和关闭刷新功能

<div class="refleshBtn"> <el-button type="primary" plain size="mini" @click="recovery">恢复刷新</el-button> <el-button type="primary" size="mini" @click="stopReflash">停止刷新</el-button> </div&g...

2020-05-19 16:40:47 483

原创 elementUI中的el-calendar自定义使用时给切换月份按钮绑定事件

因项目需要需要显示以月历的形式显示状态(如下图所示),但官方文档中找不到日历组件的内置方法,这里用获取类名的方式给切换月份的按钮添加点击事件具体代码实现如下mounted(){ this.$nextTick(() => { // 点击前一个月 let prevBtn = document.queryS...

2020-04-24 10:09:32 6509 8

原创 js实现时间的加减运算

let date1 = new Date('2020-04-01 17:29:30') let dateTemp = date1.setHours(date1.getHours() + 5 ) //增加5个小时 let dateTemp = date1.setDate(date1.getDate() + 7 ) //增加7天 let dateTemp = date1.setMonth...

2020-04-01 17:39:28 882

原创 vue项目中iframe子页面调用父页面的方法

父页面的结构 <el-tab-pane label="派单流程" name="3"> <iframe ref='3' width="100%" height="480px" :src=dispatchUrl></iframe> </el-tab-pane>父页面中的方法methods: { ...

2020-03-31 10:41:55 3760

原创 elementUI的日期范围组件的编辑回显问题

elementUI的DatePicker选择日期范围时提交参数我们只需要将绑定的数组拆开即可,但在编辑时如果只是简单地将后台返回的开始日期和结束日期赋值给数组,页面上不会正常地显示日期范围,这时候就需要用到Vue的setter或$set方法赋值 vm.ruleForm.treatmentDate[0] = data.treatStartDate vm...

2020-03-26 11:24:10 1776

原创 如何在elementUI中message组件提示消失后执行函数

根据elementUI官网组件介绍message组件有个onClose方法,具体使用如下: vm.$message({ message: '新增成功', type: 'success', ...

2020-03-23 17:44:26 1406

原创 基于layUI的select标签在回显的时候显示为空

解决方法:在请求成功的方法里加上以下代码 layui.use(['form'], function () { var $ = layui.$, form = layui.form; ...

2020-03-16 18:01:42 250

原创 基于layUI的Distpicker省市区联动失效的解决方法

使用distpicker实现省市区联动的时候发现点击选择省级后市级没反应,html代码如下 <div class="layui-form-item"> <label class="layui-form-label">籍贯:</label> <div data-toggle="distpicker" id="distpicker"...

2020-03-06 17:20:52 412

原创 解决Chrome调试移动端项目时鼠标光标消失的问题

打开核芯显卡控制面板2.逐步找到量化范围设置项:显示器 —— 一般设置 —— 量化范围3.将量化范围设置成全范围即可

2020-03-05 10:34:02 882

原创 给el-input等组件绑定点击事件

想要给elementUI的某个组件绑定一个原生事件。可以使用 v-on 的修饰符 .native<el-input v-on:click.native="showRO" v-model="relationOrder" placeholder="请选择关联订单" ></el-input> // 弹出关联订单弹框 showRO(){ ...

2020-03-03 10:52:50 2560

原创 实现elementUI的tabs标签页切换时每个标签页下的iframe自动重载

首先给t每个tabs标签页下的iframe绑定ref,ref的值与el-tab-pane的name属性的值一致通过tab-click方法取到当前选中标签页的iframe,然后执行刷新 <el-tabs v-model="activeName" @tab-click="handleClick" v-else> <el-tab-pane label=...

2020-01-05 19:25:45 2380

原创 解决qrcode动态生成二维码时多次点击生成多个二维码的问题

getEwm(url){ document.getElementById("qrcode").innerHTML = ""; var qrcode = new QRCode(this.$refs.qrCodeUrl, { text: url, width: 200, height: 200, colorDark: '#000000', ...

2019-12-16 16:23:59 3371

原创 常用的遮罩层样式

/* 遮罩层样式 */ .mask{ position:fixed; left:0; top:0; opacity:.5; width:100%; height:100%; background:#000; z-index:...

2019-12-16 16:11:05 125

原创 elementUI的DateTimePicker组件日期时间格式改成yyyy-MM-dd hh:mm:ss

如果只是copy官网上的demo的话选择时间后打印出来的时间格式如下2019-12-15T05:28:29.000Z想要改成yyyy-MM-dd hh:mm:ss格式需要加上value-format属性,具体代码如下 <el-form-item label="支付时间" prop="payTime"> <el-date-picker va...

2019-12-15 13:33:51 1168

原创 elementUI中的表格实现表头与内容文字居中

因为elementUI的table组件没有对应的参数可以设置表头内容文字居中,所以只能通过修改样式的方式实现,代码如下.el-table td, .el-table th { text-align: center; } ...

2019-12-04 10:55:35 4576 1

原创 elementUI的表格内容进行数据转换

一般我们前后端联调的时候后台返回的数据都是数字,比如1代表上线,0代表下线。这时候就不能直接使用该字段而需要做转换,需要formatter属性,该属性用于格式化指定列的值,接受一个Function,会传入两个参数:row和column,可以根据自己的需求进行处理。<el-table-column prop="createdate" label="创建时间"&gt...

2019-11-14 10:37:12 1352

原创 element-UI的el-table添加序号时所有分页的序号都是从1开始的解决方法

<el-table-column type="index" label="序号" width="50"> <template scope="scope"> <span>{{offset * limit + scope.$index + 1}}</span> ...

2019-11-13 10:06:56 1716

原创 解决html+vue方式开发时页面加载时闪过{{页面标签}}等现象

<el-form-item :label=`选项${index+1}_描述` prop="idec"> <span v-cloak>{{item.describes}}</span> </el-form-item> <el-form-item :label=`选项${ind...

2019-11-12 10:43:54 390

原创 elementUI的el-select选择器同时返回选中项的value和label值

<el-select v-model="ruleForm.category" @change="selectedCag" placeholder="请选择项目类别"> <el-option v-for="item in ClaOptions" :key="item.value" :labe...

2019-11-08 09:42:03 7005

原创 [Vue warn]: Injection “elForm” not found报错解决方法

该错误大部分是因为elementUI与vue版本不匹配,个人解决方法是引入的时候都是用线上引入的方法,确保版本不冲突 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- <script src="../../js/vue.js"&gt...

2019-11-05 15:20:08 2951

原创 layUI日期时间控件闪退bug的解决方法

出现原因:页面高度不够解决方法:laydate文件中的默认配置中trigger: ‘focus’ //呼出控件方式由focus改成click //服务时间 layui.use(['form', 'laydate'], function () { console.log(new Date().getTime()) var form = layui.form, layer = la...

2019-10-18 17:14:34 1381

原创 后台管理系统导出Excel表格的方法

//导出Excel公共方法 function excelExport(colums,queryParams,objectName,baseUrl,sysUrl,body,title){ if(colums==null){ return; } var tableParam=new Object(); tableParam.colums=colums; tablePar...

2019-10-12 15:11:25 1481

原创 使用layUI时form表单中的select标签无法正常渲染option(option从后台返回)

// 获取推荐分类列表 function getRecomList(){ $.ajax({ type: 'get', url: '请求接口’, contentType: "application/json; charset=utf-8", ...

2019-10-09 16:27:44 552

原创 vue计算属性的简单使用

<div id="app"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <p>全名:{{fullName}}</p> <p>全名:{{fullName}}&...

2019-09-30 16:26:33 94

原创 watch监听器的简单使用

<div id="app"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <p>全名:{{fullName}}</p> </div> <...

2019-09-30 16:18:44 311

salesPerformance.zip

salesPerformance.zip

2021-04-16

channel.zip

channel.zip

2021-04-16

前端面试题总结(vue).md

2020年前端开发面试总结,包含但不仅限于vue,js,webpack等中高级前端面试中经常被问到的问题,

2020-09-22

chartAdmin.zip

有关echart图表封装的后台管理项目

2021-01-05

element-ui.zip

通过本地引入的方法引入elementUI所需要的css,js以及字体文件,注意下载下来的字体文件不能更换文件夹,使用的时候仅需要在html文件中引入对应的css文件和js文件即可,elementUI使用的是最新的2.13.0版本

2019-11-29

jq常用属性以及标签的使用

jq学习资源,包括jq介绍,jq的css操作,DOM对象与jQuery对象的互换

2018-12-06

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除