石金豆-CSDN博客

原创 vue表格实现前端分页

前端分页的基本思想就是，后端接口全部返回list数据信息，由前端根据页数和每页条数截取数组，达到分页的目的；//1.table的data截取:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"//2.total的值是后端返回的list的长度:total="tableData.length"demo:（根据自己的需求改吧改吧就行）<template> <div>

2021-09-15 16:04:51 1783 5

原创前端base64转file

很多时候上传图片需要前端把base64转换为file文件流，以formdata的格式传给后端。这里提供转换方法，亲测有效。 base64toFile (dataBase64, filename = 'file') { let arr = dataBase64.split(',') let mime = arr[0].match(/:(.*?);/)[1] //设置file文件流的type名称 let suffix = mime.split('/')[1]

2021-09-10 13:59:24 1934

原创 vue项目全屏插件vue-screen

分享一个vue项目中的全屏插件，先上插件地址：https://mirari.cc/2017/08/14/%E5%85%A8%E5%B1%8F%E5%88%87%E6%8D%A2%E7%BB%84%E4%BB%B6vue-fullscreen/具体使用方法：1.安装依赖：npm install vue-fullscreen --save2.全局引入并使用：（main.js里面）import fullscreen from 'vue-fullscreen'Vue.use(fullscre

2021-02-20 10:23:21 1216

原创 vue中使用图片放大预览插件v-viewer

vue的图片放大预览功能插件官网：https://github.com/mirari/v-viewer展示效果：vue中使用方法：1.安装插件依赖：npm install v-viewer --save2.全局引入：import Vue from 'vue';import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)Viewer.setDefaults({ Options: {

2021-02-19 15:35:47 2202 2

原创 h5移动端判断浏览器类型

获取浏览器信息，处理浏览器信息。通俗易懂，直接上代码：function customBrowserVersion(){ var u = navigator.userAgent; return { trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('AppleWebKi

2021-01-19 17:46:14 1823

原创移动端h5页面打开高德地图或者百度地图实现导航

需求场景：用户会收到一条短信，短信带着链接，点击链接跳转h5页面，h5页面实现跳转地图并实现导航。方法：1.a标签直接打开地图，地图在浏览器支持跳转。高德：<a href="https://uri.amap.com/marker?position=经度,纬度&name=所在的位置名称">高德地图</a>百度：<a href="http://api.map.baidu.com/marker?location=纬度,经度&title=所在位置名

2021-01-14 15:58:37 10849 2

原创 Tip分享：js判断当前时间是否在一个时间段内；

判断当前时间14:40是否在12:00和18:00这个时间段内，在的话返回true，不在返回false。可用于状态判断！直接上代码。。。 time_range(beginTime, endTime) { var strb = beginTime.split(":"); if (strb.length != 2) { return false; } var stre = endTime.s

2020-11-30 14:44:11 246

原创 vue项目中axios拦截器的使用

废话不说，直接上代码，拿走直接使用，需要什么再根据需要添加什么就行。（应该不用解释，代码里都有注释）// 引入axiosimport axios from 'axios'import { Message } from 'element-ui'import md5 from 'js-md5';/** * （暂时加入'x-org-id':123,'x-project-id':123,'x-tenant-id':123,） */export const getAdminInfo = () =

2020-10-30 10:57:32 520

原创 Tip分享：vue实现md5加密大写；解析地址栏参数；

一.vue实现md5加密大写自定义utils文件夹下的index.js文件 npm install --save js-md5 安装md5，然后main.js引入importmd5from'js-md5';Vue.prototype.$md5=md5; js文件导出方法 import md5 from 'js-md5';//md5加密大写字符串export function getMD5Screct (sign) { let screct = md5(sign) ...

2020-10-30 10:51:19 1123

原创 vue输入框字数限制，动态显示字数

vue实时限制字数输入：<divclass="rejectedPoPMain"><divclass="rejectedPoPMainCenter"><divclass="instructionsLeft">说明:</div><divclass="instructionsRight"><el-input...

2020-08-28 11:48:45 3118

原创记录几个github开源vue+element项目半成品

一款基于 ElementUI 二次开发的后台开源项目：https://github.com/PanJiaChen/vue-element-admin 基于 Vue + Element UI 的后台管理系统解决方案：https://github.com/lin-xin/vue-manage-system 基于 Vue2.0 + vuex + ElementUI 后台管理系统：https://github.com/wdlhao/vue2-element-touzi-admin...

2020-08-27 14:17:05 1635

原创 debounce防抖函数的使用（js和vue）

debounch防抖函数主要应用场景，解决按钮快速点击，多次请求的问题和input输入框多次请求的问题。接下来直接介绍在js和vue项目中的使用方式。lodash工具库地址：https://lodash.com/docs#debounce三个参数： _.debounce(func, [wait=0], [options={}]) options有如下三个可选参数配置：leading：指定在延迟开始前是否执行func（默认为false）。 maxWait：设置func...

2020-08-24 17:44:57 3655 4

原创 js获取url参数解析成对象

直接上代码，粘贴即可使用<script>leturl="http://witmax.cn/index.php?key0=0&key1=1&key2=2";lethongdou=url.indexOf("?");//检索letstr=url.slice(hongdou+1);//选取letarr=str.split("&");//分割letr...

2020-08-14 14:54:25 356

原创移动端图片预览功能（放大和左右滑动）

1.分享一个好用的h5移动端图片预览插件，直接上代码：在你的项目中引入imageReview.js文件，如下：var reviewHtml='<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">'+ '<div class="pswp__bg"></div>'+ '<div class="pswp__scroll-wrap">'+ '<di

2020-07-03 17:31:10 1953

原创前端js实现模糊搜索功能

现实需求中，我们经常会遇到input框输入之后搜索匹配的内容，对于数据结构不经常改变的，前端实现，减少请求接口，适当减少服务器压力。分享一个一段代码实现（很简单）let keyword = "内容"; //需要搜索的关键字let originalArr = [{"name":"内容","age":"18"},{"name":"内容2","age":"18"},{"name":"内容3","age":"18"}] //原始数组let teacherList = this.originalArr.

2020-06-18 17:44:58 2518

原创 vue+element以base64的方式上传文件

最近在做一个element的upload以base64的方式实现文件上传，就需要前端处理上传文件的file文件流。接下来记录处理过程，仅供参考！1.使用element的upload组件，选择你需要的组件就行  <div class="uploadPhotoBox"> <el-upload style="height:126px;width:9

2020-05-18 15:11:26 2547 1

原创 css小tip分享之:empty

如果你对于项目的复杂判断空值操作dom的繁琐头疼，不妨试试这个css小属性，轻松解放js逻辑判断。：empty<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...

2020-04-01 14:39:18 175

原创 H5与原生互相调用，WebViewJavaScriptBridge使用

为了提高开发效率，开发人员往往会使用原生app里面嵌套前端h5页面的快速开发方式，这就要涉及到h5和原生的相互调用，互相传递数据，接下来就实践项目中的交互方式做一个简单的记录分享，废话不多说，直接上正文：先贴上判断访问终端的代码，直接拿去使用：//判断访问终端function browserVersion(){ var u = navigator.userAgent; ...

2020-03-10 10:40:34 10009 2

原创 vue项目导出表格的两种方法

常用需求场景，我们做后台管理系统的时候经常需要导出对应的表格，来实现客户的需求，接下来就从vue项目中介绍两种导出excal表格的方式。话不多说，直接上代码：1.原始html写的table表格的导出：<table v-for="(workerDays,index) in rawHtml.groupClockRecords" :key="(workerDays,index)" bo...

2020-01-06 17:24:36 9303 6

原创 vue格式化input输入框的数字，4位一分隔

在做vue项目中，肯定会遇到过这样的场景，input输入框的手机号或者银行卡号的输入希望四位一分隔，方便查看和纠错，接下来直接上代码解决此类问题。template（别忘记data里面绑定account）：<el-input type="text" v-model="account" ref="cardInput" placeholder="请输入银行账号" @input="form...

2020-01-02 16:13:44 8080 2

原创 js获取日期段的所有日期

方法一Date.prototype.format = function() { var s = ''; var mouth = (this.getMonth() + 1)>=10?(this.getMonth() + 1):('0'+(this.getMonth() + 1)); var day = this.getDate()>=10?this.g...

2019-11-25 21:00:16 613

原创前端Table用JS导出Excel数字自动变成科学计数法问题

前端导出的表格，类似于这种样式的解决办法分析出原因，使用JS将Table数据导出到Excel中，如果td中书纯数字的话，在Excel格式就是number类型，所以，想长数字会变成科学计数法。于是乎就在网上百度找对应的解决办法，在转换导入到Excel前给给类型变成字符串String类型。百度上是这样的，在td中加一个样式 style=‘mso-number-format:"@"’,如这样的...

2019-11-25 19:12:04 3687 3

转载 js/jq获取元素节点大全

$(function(){ //遍历获取的input元素对象数组，绑定click事件 var len = $("input[type='file']").length; for(var i = 0; i < len; i++){ $("input[type='file']").eq(i).click(function(){ ...

2019-08-20 15:58:47 1917

原创 flex布局属性详解

flex-grow、flex-shrink、flex-basis三个属性的作用：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。(注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex))小编这里先教一下大家如何快速记住这三个属性：首先是flex-basis，basis英文意思是<主要成分&...

2019-07-31 14:33:20 712

转载前端表单提交方式大全

1.获取input数据封装成json格式提交。<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www...

2019-07-17 15:46:39 2571

原创 h5不同手机屏幕rem布局自适应js代码

2019-06-28 13:03:46 698

原创 js，jq前端常见的时间处理方式

1.常用的时间获取方式详解var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获取当前日(1-31)myDate.getD...

2019-04-23 16:03:19 516

转载 meta标签含义详细解释！

下面介绍一些有关标记的例子及解释。一、meta 标签分两大部分：HTTP 标题信息（http-equiv）和页面描述信息（name）。1、http-equiv 属性的 Content-Type 值（显示字符集的设定）说明：设定页面使用的字符集，用以说明主页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示 page 内容。用法： 1 <...

2019-03-13 14:51:39 3761

转载响应式布局，媒体查询media总结大全。

　　一说到响应式设计，肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容，实际上CSS2已经存在了，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。本文将详细介绍媒体查询的内容媒介类型　　在CSS2中，媒体查询只使用于<style>和<link>标签中，以media属性存在　　media属性用于为不同的媒介类型规定不同的样式scre...

2019-03-11 15:11:37 2993

原创 css各种图形源码收集

预知图形效果，自己动手试试，如何？？？#square { width: 100px; height: 100px; background: red;}#rectangle { width: 200px; height: 100px; background: red;}#circle { width: 100px; height: 100px; ...

2019-01-23 15:44:20 165

原创 h5唤醒app，安卓和ios

Android使用iframe唤起，ios采用window.location.href唤起更合适一点。 1.ios系统：在wap中唤起app其实应用最最广泛的并不是Universal Link，而是直接Schema跳转 window.location.href = "taobao://fulushuka.tmall.com/shop/view_shop.htm?spm=a230r...

2018-12-28 15:07:39 1881

原创 css改变placeholder样式

placeholder默认样式已经渐渐不能满足开发者的需求，接下来推荐给大家自定义placeholder的样式的方法。方式1：因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。::-webkit-input-placeholder { /* WebKit browsers */ color: #999; f...

2018-12-27 15:46:44 4363

原创纯html+css实现向上向下向左向右，空心实心箭头。

前端开发中会使用到各种各样的箭头，有时候不断替换图片实在麻烦，掌握这些css小技巧，轻松实现各种箭头。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>实心箭头上下左右都有哦</title></head>&

2018-12-26 18:25:41 16428 1

原创自定义单选按钮radio的样式

如果直接对单选按钮设置样式，那么这个伪类并不实用，因为没有多少样式能够对单选按钮起作用。不过，倒是可以基于单选按钮的勾选状态借助组合选择符来给其他元素设置样式。很多时候，无论是为了表单元素统一，还是为了用户体验良好，我们都会选择 label 元素和 input[type="radio"] 一起使用。当<label>元素与单选按钮关联之后，也可以起到触发开关的作用。思路：1....

2018-12-25 15:37:34 15106

原创 npm 安装 --save -dev 和 --save 区别

一、模式运行webpack命令时，一定要指定模式。webpack --mode developmentwebpack --mode production二、--save -dev--save：将保存配置信息到pacjage.json。默认为dependencies节点中。--dev：将保存配置信息devDependencies节点中。因此：--save：将保存配置信...

2018-12-21 15:15:45 127

原创正则表达式详解及常用的使用方法详解

一.正则表达式详解一、什么是正则表达式？1.定义：正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。构造正则表达式的方法和创建数学表达式的方法一样。也就是用多种元字符与运算符可以将小的表达式结合在一起来创建更大的表达式。正则表达式的组件可以是单个的字符、字符集合、字...

2018-10-10 10:51:02 16153 2

原创 background-size，100%，content和cover的区别详解

background-size中，100%和cover都是用于将图片扩大或者缩放来适应整个容器。1、参数： background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）； background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）； background-size ：100px 100px; //...

2018-09-17 15:37:25 3127

原创 font-family字体中英文对照

微软雅黑： Microsoft YaHei宋体：SimSun黑体：SimHei仿宋： FangSong楷体： KaiTi隶书：LiSu幼圆：YouYuan华文细黑：STXihei华文楷体：STKaiti华文宋体：STSong华文中宋：STZhongsong华文仿宋：STFangsong方正舒体：FZShuTi方正姚体：FZYaoti华文彩云...

2018-08-15 16:00:54 2097

转载自适应PC端网页制作使用REM

做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080使用了几种办法1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常2.长,宽,LEFT,TOP,RIGHT,BOTTOM都采用了REM...

2018-08-01 16:05:23 1591

原创 h5视频倍速播放功能

playbackRate属性是个可读写的控制音视频播放速率的属性。语法如下：// 视频获取速率var videoSpeed = video.playbackRate;// 视频设置播放速率，如正常速度播放video.playbackRate = 1.0;// 获取音频播放速率var audioSpeed = audio.playbackRate;// 音频设置播放速率，如正常...

2018-07-20 18:26:46 11540 1

空空如也

空空如也