2020年08月_妍崽崽@

原创 echarts实现动态的图表

前言： echarts图表实现动态仪表效果效果图：实现代码： let angle = 0;//角度，用来做简单的动画效果的let value = 40;option = { backgroundColor:"#022C2B", title: { text: '{a|'+ value +'}{c|%}'+'\n'+'{b|资料管理}', x: 'center', y: 'center', ...

2020-08-27 15:26:00 4345 9

原创 echarts实现比较炫的仪表盘

前言： echarts图形效果图：实现源码： let value = 40;option = { backgroundColor:"#061740", title: { text: '{a|'+ value +'}{c|%}'+'\n'+'{b|资料管理}', x: 'center', y: 'center', textStyle: { rich:{ ...

2020-08-27 14:58:47 2159 2

为了吸引你们这些小白的注意力，哈哈哈，找了一些比较炫酷的css实现的效果图，看了之后保证你超级好奇css是怎样实现的······代码是这样的<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /...

2020-08-27 14:04:01 210 4

原创 vue跳转外部链接

前言： vue内部跳转是可以通过，router的方法，this.$router.push()和 rout-link 来跳转，这里说下她跳转外部地址的方法：1、window.location.href = url2、window.open('http://www.baidu.com',"_blank"); //打开一个新页面3、手动创建a标签，然后默认点击 var a = document.createElement("a");...

2020-08-25 17:13:29 2758 6

原创 vue路由守卫和白名单的功能

前言：在我们vue路由配置中，因为权限等一系列问题，需要在路由这里配置限制条件 ,比如需要知道他登录那里是不是拿到了token，需要根据他的权限列表来配置前段展示路由等等实例：实现代码：// 导航守卫，渲染动态路由router.beforeEach((to, from, next) => { let token = db.get('USER_TOKEN') let user = db.get('USER') let identity = us...

2020-08-25 14:44:12 2076

原创 url,base64,blob直接的转换

前言：在使用语音时，拿的的是blob文件，这个后端是不能直接识别的，转成了baseurl可以，这里记录下自己寻找的方法1、base64 转 blob // 原理：利用URL.createObjectURL为blob对象创建临时的URL base64ToBlob ({b64data = '', contentType = '', sliceSize = 512} = {}) { return new Promise((resolve, reject) =&gt...

2020-08-25 10:16:52 1306 2

原创 Duplicate keys detected: ‘0‘. This may cause an update error

前言：记录报错原因一个template中有两个一样的v-for，key都是一样的index解决办法：：key前面加字符串 <el-amap-marker v-for="(marker,index) in markers" :position="marker.position" :events="marker.events"...

2020-08-24 21:39:28 100

原创 ctx.injections.tableRoot.$scopedSlots[ctx.props.column.slot] is not a function

前言: 在使用iview的table的时候报错这个原因：使用了iview的<Table>组件，给Table组件的columns中定义了4个含有slot的列，但是实际在<Table>中只使用了其中3个，导致的报错。也就是说，在 Table组件的columns中定义了多少个含有slot的列，那么在<Table>内部必须输出多少个，否则会报错...

2020-08-24 10:55:25 2180 1

原创 cordova的安装与配置

1、安装nodejs(自动包含npm)2、在命令行中通过npm语句npm install -g cordova安装cordova(如果提示网络连接失败，需要设置网络代理，搭理网址：npm config --global set registry http://registry.cnpmjs.org)3、在命令行里通过安装成功的cordova,创建一个混合项目，创建语句：cordova create CordovaDemo com.first.helloworld HelloWorldCor.

2020-08-24 09:19:22 3247

原创 echarts+3d饼图

前言: echarts实现3d饼图效果图：实现源码：var salesData = [{ label: "Basic", color: "#2f7ed8"}, { label: "Plus", color: "#0d233a"}, { label: "Lite", color: "#8bbc21"}, { label: "Elite", color: "#910000"}, { label: ...

2020-08-22 15:40:38 15586 25

原创 echarts+流程图

前言： echarts+流程图效果图：实现源码：var title = [ // 第零层 { label: '0', warn: 5, error: 8, value: 2 }, // 第一层 { label: '1-0', warn: 5, error: 8, value: 5 }, {...

2020-08-22 15:34:44 4104

原创 echarts+科技风环形图

前言： echart环形图效果图：实现代码：let value = 55.33;let title = '超期率';let int = value.toFixed(2).split('.')[0];let float = value.toFixed(2).split('.')[1];option = { backgroundColor: '#051F54', title: { text: '{a|'+ int +'}{b|.'+ ...

2020-08-22 15:30:36 1407 4

原创 echarts实现立体柱图

前言： echarts官网实例中没有立体柱图，这里提供立体柱图代码效果图：实现代码：option = { backgroundColor: '#031245', "textStyle": { "color": "#c0c3cd", "fontSize": 14 }, "toolbox": { "show": false, "feature": { "sav...

2020-08-22 15:22:27 2149

原创 echarts实现进度条带背景

前言： echarts进度条科技风效果图：实习代码： var myData = ['低压居民', '低压非居民', '高压单电源', '高压双电源'] var lineData = [100, 100, 100, 100] var thisYearData = { 1: [11, 38, 23, 39] } var timeLineData = [1] var background = "#0e2147"; //...

2020-08-22 15:15:52 2695 1

原创 js获取7天前，n天前的日期，7天后，n天后的日期，获取当前日期是周几

前言： 1、js获取7天前，n天前的日期，7天后，n天后的日期， 2、获取当前日期是周几js方法：1、获取指定日期，传参数进去，传的是正值，则是今天之后的日期。传的负值则是今天之前的日期2、获取当前的日期是周几源码：addZero(num){//补0 if(parseInt(num) < 10){ num = '0'+num; } return num; }, /** * 获取指定时间的日期 *...

2020-08-22 13:46:39 3766 8

原创由设计稿一键智能生成代码的快捷软件

前言：将psd设计稿放进去自动生成代码的软件效果图：使用步骤：1、官网入口点击进入，点击文件生成代码2、点击psd文件，拖拽你的设计稿进来3、导出你的文件4、就到这个页面了，注意你要是没有登录的话，会提示你先登录的，我这用的是github的账户登录的，先登录，在点击绿色的绑定就可以了5、登录完了，在点击图上的，点击代码，就会出来代码了额，注意js是原生的...

2020-08-21 16:22:25 1485

原创 echarts实现西安地铁图

前言： echarts实现西安地铁图效果图：官网入口实现代码：var data = [ { name: "地铁一号线", tooltip: { formatter: "{b}: 19999<br />" }, symbolSize: 0.1, value: [5, 750], x: 800, ...

2020-08-21 13:44:09 4690 24

原创 echarts自传作品入口

入口：https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=follow

2020-08-20 17:36:16 4862 17

原创兼容pc端和移动端适配

前言： pc端兼容的方式有很多，比如%，比如vw+vh等等，这里说说vw兼容方法，移动端适配方式也有很多，比如%，em,rem,vw,vh等，这里说说vw兼容方法，pc端：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...

2020-08-19 11:16:28 1645 4

原创前段调试样式

前言：前段f12调试样式操作步骤：1、打开f12，点击小箭头，滑动到页面上你需要改样式的目标文件，然后在右边更改样式，当然这里只是f12改动，不会保存的2、然后通过class名，id名，在页面找到你这个元素，把右边的样式拷贝赋值，然后保存本地代码，就可以了...

2020-08-19 11:08:36 274 1

转载前端实现pdf,word，doc等Office文档格式在线预览

在做一些后台管理或者h5页面的时候通常会遇到Office文档格式的在线预览功能。虽然看似简单，里面却隐藏着很大的坑。简单是因为现在有各种插件可以下载实现，坑是因为涉及到一些兼容性和安全性等各种千奇百怪的问题。推荐大家使用更快捷,更全面,更高效的永中云转换（https://api.yozocloud.cn/）进行word,pdf等Office文档格式的在线预览。可以参考一下官网https://api.yozocloud.cn/index.html首先看看它的模式使用方法：...

2020-08-19 11:02:46 1192

原创前段debugger的使用

前言：在前段开发中，能掌握debugger是一个非常使用的技巧，当然，前段的debugger实际也是很简单的，分两种第一种：页面上直接打断点来调试：（js）在页面相关js的文件哪里，左侧直接点你想打断点的某一行，就可以进行断点调试了，第二种：js中使用断点普通js中：在函数里面写, 然后打开f12运行时就会发现进入debugger模式了function abc(){debugger}vue中，在methods的具体方法里面写单词debugger...

2020-08-19 11:00:15 2287 1

原创 vue调用摄像头pc+移动端

前言： vue调用本地摄像头目录:pc部分：pc效果图:实现代码：移动端部分：通过input开启手机前置摄像头， accept='image/*'是开启摄像头capture实现代码：pc部分：pc效果图:实现代码：<template> <div>  <Button type="primary" @click="callCamera...

2020-08-19 10:44:33 5693 12

转载 vue实现录音功能js-audio-recorder

前言：因为业务需要，现在将整理的录音功能资料记录下，使用插件js-audio-recorder实现效果：可得到三种录音数据，pcm,wav,mp3等官方api入口：点我(网不好的童鞋可以看最下面的api截图)官方案例入口：点我官方源码git入口：点我实现步骤：一：安装插件js-audio-recordercnpm ijs-audio-recorder--s二：安装将格式转换为mp3的插件lamejscnpm install lam...

2020-08-07 17:13:26 11701 24

原创 element二级下拉新手总结

首先先从框架拉代码，是这样的<div class="block"> <span class="demonstration">默认 click 触发子菜单</span> <el-cascader v-model="sel_value" :options="options" @change="handleChange"></el-cascader></div>然后在data里面定义初始值.

2020-08-06 17:18:37 782 5

weixin_44727080的博客