![](https://img-blog.csdnimg.cn/20200930090500913.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
项目总结
文章平均质量分 65
项目实战挖坑人。
前端发现
致力于分享前端技术文章,让前端变得容易!
展开
-
vue+element使用sortable拖拽实现行排序
大家好,我是小佑@小佐https://blog.csdn.net/Smell_rookie,是一名页面仔工程师,我会不定时在CSDN更新我的博客,有兴趣的可以点个关注来逛逛我的主页。需求:有时我们想要做成这么一个效果——对ele的表格实现行排序,可以拖动!借助sortable我们可以完成上述需求。安装sortablejsnpm install sortable.js --save 或 yarn add sortable引入并使用 在需要使用拖拽的.vue页面引入sortablejs 也可原创 2021-04-01 16:47:09 · 715 阅读 · 4 评论 -
将后台数据转化为符合el-tree组件的结构
相信进来这的朋友一定跟我当时的心情是一样的,后台给到的数据看似能用但是又不符合我们要使用el-tree组件的数据结构,为此需要前端处理后台返回的数据,先来看看我们需要的数据结构长什么样:elementUI的el-tree组件的格式,elementUI传送门。就是这种需要子级结构的数据,当一级 1下还有数据(即children不为空)需要点击一级 1展开它的子级数据,当子级数据还有下级的时候同...原创 2020-03-22 13:08:49 · 3083 阅读 · 0 评论 -
微信小程序直传腾讯云COS并对图片持久化文字水印案例
微信小程序直传腾讯云COS并对图片持久化文字水印案例原创 2022-10-11 14:54:49 · 1682 阅读 · 4 评论 -
微信小程序实现海报功能经历
前言大家好,我是《前端发现》。发现前端,发现技术,让前端变得更加容易。实现海报?你想到的应该是html2canvas吧,但,这里是小程序,好像并不通用。只能用canvas一笔一划去描述了吗?答案肯定是不对的,今天介绍一个Painter插件,它可以帮助你快速完成小程序上的海报功能。前期准备去github下载插件需要的文件。下载地址:[https://github.com/Kujiale-Mobile/Painter]。下载好找到文件里面的components/painter,复制整个painter文件原创 2022-04-11 15:49:11 · 2617 阅读 · 3 评论 -
element的el-table列标题添加自定义图标
大家好,我是小佑@小佐https://blog.csdn.net/Smell_rookie,是一名页面仔工程师,我会不定时在CSDN更新我的博客,有兴趣的可以点个关注来逛逛我的主页。需求:开发中我们会遇到在el-table的列标题那添加操作图标,如下图:实现:其实el-table有提供一个render-header方法,但是没有提供具体的案例,今天遇到了就做个小总结。<el-table-column label="操作" fixed="right" width="100" :render-原创 2021-04-06 14:32:16 · 4730 阅读 · 2 评论 -
基于ElementUI的el-upload组件二次封装
大家好,我是小佑@小佐 https://blog.csdn.net/Smell_rookie,是一名页面仔工程师,我会不定时在CSDN更新我的博客,有兴趣的可以点个关注来逛逛我的主页。前言:开发工作中我们都会遇到图片上传的问题,虽说ElementUI已有提供图片上传的组件,但我们用到图片上传的地方肯定不止一处的,并且框架自带的组件并不能完全满足我们的需求,为此我对原有组件做了二次封装,做到一次封装,到处使用!直接上代码:组件:**uploadImg.vue**<template>原创 2021-01-26 10:09:01 · 1787 阅读 · 3 评论 -
h5购物车功能实现里程碑祭奠1024
前言:本文实现购物车的思路是:获取后端的商品列表——前端本地缓存添加的商品数据——从缓存中获取数据渲染到购物车页面——从缓存中获取数据并提交订单。所以主要是购物车数据的存和取以及清除。商品选择页面分析:考虑到商品列表会多处使用,并且增加、减少商品数量的操作都是一样的,所以将右侧的列表做成组件。/*shopListRight.vue*/<template> <div class="shopListRight"> <div class="view-box"&g原创 2020-10-24 00:36:34 · 1224 阅读 · 37 评论 -
vue中导出报表并兼容客户端的方式
涉及到管理后台系统都免不了需要导出报表的功能。纵然网上资源千千万,但我这种是可以兼容客户端的方法(亲测之前的方法在客户端会有bug),经过不断优化在客户端也得到很好的效果。我这里的需求是:点击导出调起后端的api,返回下载文件的url,前端根据url地址创建下载的iframe。下面看使用:comm.jsexport default { // Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象。 install: funct原创 2020-08-10 09:12:39 · 427 阅读 · 2 评论 -
element中table组件根据属性合并行数据
最近写项目的时候,有个需求是这样的:购买项目的时候勾选了两个以上的员工(这里假设张三和李四两个员工),那么在统计业绩或者提成的时候,张三和李四就需要均分该项目的业绩和提成金额,显示的时候需要将张三和李四统计在一起,方便修改其中一个员工的业绩的时候另外一个也跟着变。设计图如下:从设计图可见修改mb006员工的销售业绩或提成金额的时候是需要变动同个项目下其他员工(gt_test和mb005)的销售业绩或提成总额的。并且这里是根据项目名称(轮胎修补与打蜡2223)来合并员工数据的。而后台返回的数据是这样的:原创 2020-05-12 17:24:19 · 3321 阅读 · 2 评论 -
vue-devtools调试工具导入浏览器简单教程
相信用过vue开发的前端大佬们都用过vue-devtools调试工具,它可以帮你快速锁定数据流在哪一个步骤发生错误。下面介绍如何导入并使用。第一步首先下载好一个官方devtools的文件。文件地址 不过官方的devtools文件下载下来是需要下载依赖并编译的,需要很多的操作,伸手党可以直接花几积分下载我处理好的文件,直接安装文件地址直接导入就可以使用了。第二步下载好文件之后打开浏览器点...原创 2020-05-07 10:43:27 · 1340 阅读 · 1 评论 -
小程序实现索引栏遇到的坑
最近在做小程序项目的时候遇到了索引栏功能的东西,该项目是选择车型的需求。先看效果图:实现上面的功能大概有自定义弹框、点击索引字母跳转到对应的位置、搜索关键字高亮等。下面一个个来实现。特别说明:刚开始看到这种索引栏组件,就想到了使用vant的indexBar组件,但是后面使用popup组件indexBar共用的时候,点击索引字母是失效的,原因是因为popup的弹出层需要定位导致跳转对应的字...原创 2020-10-10 12:33:32 · 2227 阅读 · 1 评论 -
element的日期选择器el-date-picker分开的日期约束
elementUI自带了很多的日期选择组件,但是总有一些需求是无法满足我们这些开发者的。我遇到的需求是活动时间是不能够写在一块的,像这种:为此我只能用两个组件去拼凑成“开始时间“和”结束时间"分开选择,但是结束时间和开始时间的选择是有一定的约束限制的。比如:不能够选择过去的时间、结束时间需要大于开始时间。经过多次的尝试,我选择了两个el-date-picker组件完成需求并且做到时间选择的限制...原创 2019-10-08 20:36:05 · 2524 阅读 · 0 评论 -
前端请求接口的几种方式总结
作为一名前端工程师,请求后台接口获取数据是必然的,也是要求前端人员需要掌握的必备技能。但你一段时间只用一种请求方法,突然让你换成其他方式不一定能够立马实现的来,为此总结了一下前端请求API的方法,方便今后查阅。一、vue-resource优点:体积小、支持主流的浏览器、支持Promise API和URI Templates、支持拦截器。安装 $ yarn add vue-resour...原创 2019-08-24 15:46:57 · 18356 阅读 · 2 评论 -
VScode保存时自动根据eslint格式化代码
最近做项目时使用vs-code编辑器,项目中也使用了eslint,但很多时候不小心写到不规范的代码就会冒红,虽然不影响运行,但有代码洁癖的我是不允许这样的代码存在的,为了代码的规范性,加入了eslint格式校验,并且配置了自动化符合eslint格式的设置。安装eslint和vetur插件配置settingjs.json文件路径:文件 -> 首选项 -> 找到settingjs...原创 2019-08-17 16:54:10 · 577 阅读 · 0 评论 -
时间戳转换为其他时间格式的封装
最近做vue相关的项目,用到了后台返回的时间,因为后台返回的时间都是时间戳格式,加上项目中多次用到了时间的不同格式的显示,为此自行封装了关于时间戳转换时间格式的方法,可能有待优化,但对于新手都是可以理解的,不足之处还望各位大佬指正。言归正传,封装方法考虑的就是参数的问题,根据参数执行方法,直接上代码,不懂的可以看注释。<script> /* *@param {时间戳...原创 2019-08-03 14:33:08 · 474 阅读 · 0 评论 -
小程序--广州旅游推荐
这两天做了一个微信小程序,讲学的知识运用到项目中去,该小程序主要是为广州周边旅游的用户提供一种便利的目的,线该小程序已经上线,望各位指正!项目描述: 本项目是为了方便微信用户人群在不用下载旅游APP的情况下快速查看广州周边旅游的相关景点、酒店、美食和游玩路线等信息.技术要领:1、本项目的数据都是通过接口请求渲染到页面上,并使用template模板加快项目的开发和代码的复用.2、各数据模块...原创 2018-10-24 19:36:41 · 1143 阅读 · 1 评论 -
工作项目总结心得
总结一下最近做的静态页面布局项目,做个总结方便今后查阅项目的疑难点,做到项目的后期技术提升工作.以下是我在做这个项目中的体会和技术感想.还望大牛手下留情!技术总结:一、盒子居中 /*父盒子内填充,用padding与子盒子隔开*/ /*.father { width: 200px; ...原创 2018-08-15 19:02:42 · 4870 阅读 · 0 评论