2020年05月_深圳最菜的前端

原创基于vue使用canvas的小demo

今天接到一个需求，在vue+element管理后台中新增一个保存canvas图片的需求，所以先写了一个小demo// html中<div class="contain"> <canvas id="myCanvas" width="500" height="500" ref="myCanvas"></canvas> </div>// js中drowCanvas () { let myCanvas = this.$refs.myCanvas

2020-05-28 14:19:26 3142

原创 vue + echarts数据实时更新

今天在管理后台新增一个图表，用了echarts，记录一下根据数据实时更新安装npm install echarts --save然后在main.js中配置一下import echarts from 'echarts'Vue.prototype.$echarts = echarts可以了，接下来就是在你需要用的页面写了// html 宽高还是尽量固定吧，不然会出现一些奇奇怪怪的问题<div id="previewChart" :style="{width: '600px', hei

2020-05-22 17:43:13 5045

原创带你从0到1了解webpack（二）

上一节都简单的搞了一下webpack，让你知道这个玩意到底干啥的但是在正式的开发中，一般都会有更复杂的配置，比如指定打包的输入路径和输出路径在webpack 4.x的版本中默认打包的入口是在src下的`index.js`文件默认的打包的出口是在dist下的`main.js`文件打开项目，在webpack.config.js中，配置下面的代码const path = require('path')module.exports = { entry: path.join(__dirname, '

2020-05-21 21:30:15 207

原创带你从0到1了解webpack（一）

一，先搞明白，要学的webpack，到底是什么玩意1，webpack是一个流行的前端项目构建工具（打包工具）可以解决当前web开发中面临的困境2，webpack提供了友好的模块化支持，以及代码压缩混淆，处理JS兼容问题，性能优化等强大的功能，从而让程序员吧工作的重心放到功能的实现上，提高开发效率和项目可维护性说白了就是帮我们把一些乱七八糟的文件，整理好的一个工具二，怎么玩直接上一个例子，实现一个表格隔行变色，让你知道为啥要用webpack新建一个空白的目录，运行npm init -y 初始化

2020-05-20 22:27:04 174

原创循环遍历时for...in和for...of的区别

遍历数组的区别遍历数组var和let类型的比较这里使用let声明变量,不要使用var,存在变量提升问题var a = [ 1, 2, 3 ]for (var i = 0 ; i < 3 ; i ++ ) { setTimeout(function(){ console.log(i) },0)}// 3 3 3var a = [ 1, 2, 3 ]for (let i = 0 ; i < 3 ; i ++ ) { setTimeout(function(){ con

2020-05-20 18:25:24 253

原创动态修改vue页面title

一，只需要在获取数据的时候，给其进行赋值就可以了// 获取数据getDetail(page, pageSize).then(resp => { if (resp.errCode == 0) { docment.title = resp.data.data.textTitle // 赋值页面数据 }else { this.$message.error(resp.msg) }})二，自己手动写// 在路由中routes: [ { name: 'home' path:

2020-05-20 10:28:10 725

原创在vue中刷新当前页面

在vue管理后台中，对列表进行编辑，删除，新增，都需要更改数据，对列表进行刷新，vue本质就是数据驱动，所以，方法很多一，调用获取列表的接口方法，即可刷新当前列表getListInfo () { // 获取列表数据}// 删除delate () { // 业务逻辑 this.getLinstInfo() // 调用接口刷新数据}...

2020-05-20 10:14:03 604

原创 element 清空el-option和清空el-cascader

在vue管理后台页面，增删查改算是常见的需求了，为了偷懒，很多人都会只写一个弹窗，在这个弹窗里面完成新增和修改操作，所以，点击提交的时候清空下拉框数据，就成了必要案例：// html<el-option v-for="item in stores" :key="item.id" :label="item.name" :value="item.id" style="height:68px" > <div>{{ ite

2020-05-18 18:41:08 8711 9

原创 dayjs()使用方法

dayjs是一个轻量的处理时间和日期的 JavaScript 库官方地址中文使用文档dayjs的安装npm install dayjs --saveimport dayjs from 'dayjs'<script src="https://unpkg.com/dayjs"></script>相关API直接运行dayjs()可以拿到包含当前日期和时间的对象dayjs() //返回当前时间 Tue, 28 May 2019 05:57:34 GMT可以解析传入

2020-05-15 15:17:01 9364

原创 element select选择框修改样式

今天遇到一个需求，需要修改select 下拉菜单的需求，以前改ui框架的样式也不少了，还是轻车熟路，简单粗暴，上来就/deep/深度选择器，保存刷新，发现，并没有修改到，尴尬了，看看css，懵了，select选择器下拉框并没有在body里面，而是和script是平级关系？哈？看看官方给出了两个属性 popper-class（Select 下拉框的类名） popper-append-to-body（是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false）这下就简单多

2020-05-14 15:07:00 5897

原创小程序canvas绘制图片

使用小程序canvas绘制图片，绘制头像的时候，获取到的是http格式的，可以直接使用但是如果当前图片是其他地方返回的，那么格式就是https的，这个时候canvas是识别不到的，需要做一下转换let headPic = await wx.getImageInfo(src);//src为获取到的图片地址//转译以后就可以进行调用了...

2020-05-13 15:46:58 213

原创 js解析URL params为对象

let url = 'https://www.maomin.club/?user=maomin&nn=1111';function GetUrlParam(url){　　let arrObj = url.split("?");　　let params = Object.create(null)　　if (arrObj.length > 1){　　　　arrObj = arrObj[1].split("&");　　　　arrObj.forEach(item=>{　　　

2020-05-13 15:42:28 1298

原创 css title小技巧

经常遇到的一个需求，鼠标悬浮不同的文字，显示不同的提示信息1，css有一个hover，但是只限制单个，动态去给定值的话，就不太合适了// css title hover{ // }2，用jq的方法$("#xxx").mouseover(function () { console.log('xxx')}) // 这样子去绑定// 但是假如dom是通过遍历动态去添加的，上面那个方法就不行了，得重新写一下$("#xxx").on("mouseover" , "#xxx" , functi

2020-05-13 15:38:44 2365

原创 reduce高级应用

计算数组中元素出现的次数let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; let nameNum = names.reduce((pre,cur)=>{ if(cur in pre){ pre[cur]++ }else{ pre[cur] = 1 } return pre},{})console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce:

2020-05-13 15:03:31 160

原创 element多图上传和回显

管理后台列表页，经常遇到一个需求就是多图的上传以及回显，直接来看列子// html代码<el-upload ref="cleanUpload" class="upload-demo" :action="uploadAPIUri" accept="image/jpeg, image/gif, image/png" :headers="uploadHttpHeader" :limit="9" :multiple="true" :on-exceed="ex

2020-05-12 15:39:16 1358

原创 vue点击下载

点击按钮下载<span class='down' @click='handelDown'> <i class='img'></i></span>handelDown() { window.open(this.$api._api + `/system/dowmloadDict`)}换成a标签下载<span class='down' > <a :href='downloadUrl'></a>

2020-05-09 09:47:32 794 1

原创 element 表格显示图片

先上需求，后台会返回1-9张不等的图片，需要显示在列表页面，一张的时候，就显示大图，超过一张就按照九宫格显示，大概长这样不多BB，直接上代码// html<el-table-column prop="commentUrl" label="评论图片" width="195"> <template slot-scope="scope"> <div ...

2020-05-08 16:37:29 3514 2

原创 el-image的fit属性

写element管理后台，避免不了的，就是在表格中显示图片从官网看出，el-image有六个属性 ‘fill’, ‘contain’, ‘cover’, ‘none’, ‘scale-down’，具体每个属性是什么样子的，我就不阐述了，对el-image设置属性，只需要在标签加上当前属性就可以了// html中<el-image :src="scope.row.headURL" :fi...

2020-05-08 15:32:28 17364 2

原创 deep选择器

最近写vue element 管理后台安利到一个小技巧使用UI框架，好处就是可以帮助你快速构建一个项目，但是也有很多不方便的地方，修改样式便是其中之一// 这样.el-table--enable-row-transition{ .el-table__body-wrapper{ .el-table__body{ background: c...

2020-05-07 22:26:54 261

原创 element select选择器的小东西

需要实现一个点击选择编辑的效果，如图所示点击修改的时候，显示一个下拉框，可以进行修改，修改完成以后点击保存// html<div class="six" >性别： <span v-if="isChangeSex == false">{{this.userSix ? this.userSix : '暂无数据'}}</span> <el-...

2020-05-07 10:00:26 279

深圳最菜前端