阳光下的雨u-CSDN博客

graphic: [ { //图片 type: "image",//image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group, zlevel: 12, style: { image: require("../img/golden-fill.png"), ...

2022-05-07 15:19:37 999

pdf文件预览 // 预览<iframe :src="pdfUrl" frameborder="0" style="width: 100%; height:900px"></iframe>//window.open('/pdf/web/viewer.html?file=' + path);//path是文件的全路径地址下载pdf.js插件https://mozilla.github.io/pdf.js/PDF.js解压放到项目public目录文件中...

2022-04-19 17:05:28 1393

原创 Vue upload 文件上传 , 预览(打开新窗口预览图片)

上传: 这里以Ant Design of Vue 为例 <a-upload :file-list="fileList" action="#" accept=".png" :custom- request="handleUpload3" :showUploadList="false"> <a-button> <a-icon type="upload"></a-icon> 上传 </a-button> </a-upload&gt

2022-04-19 15:51:49 3894

原创 vue 自定义组件并上传到 npm

定义组件新建一个package文件夹与src同级用来存放各种组件夹package 文件夹中再新建个文件夹存放组件, 可多个, 如:input文件夹是一个输入框组件在input.vue中写入所封装的组件内容,并在本地项目中能使用测试项目能否使用组件// 谁用是引用import Input from "@/components/Input";在input文件夹里的 index.js 中定义组件名称并暴露出去// 导入定义的input组件import Input from "./

2022-01-21 15:19:36 1049

原创 vue 拖拽 vue-drag-it-dude/ vuedraggable / VueDragResize

组件一: vue-drag-it-dude1> 下载插件:npm/cnpm install vue-drag-it-dude --save2>组件引入://局部, 谁用谁引入import DragItDude from 'vue-drag-it-dude';//main.js 全局import VueDragItDude from 'vue-drag-it-dude';Vue.component('vue-drag-it-dude',FooterPage) ...

2021-12-15 17:05:11 1872

原创 element Tree 树形控件增删改查

增删改功能代码html <el-col :span="4"> <div class="trees"> <el-tree :data="treeData" node-key="id" default-expand-all ref="tree"> <span class="custom-tree-node" slot-scope="{ node, data }"> .

2021-11-30 16:16:51 1965 2

原创 react hooks 闭包问题

使用 useRef :创建一个普通的js对象，每次渲染可返回一个可变的同一个ref对象，可拿到新值。可以给 useEffect ()设置依赖重新执行函数拿到新值。问题：值没有发生变化，一直为0。

2021-09-18 17:23:09 697

原创 react Warning: Each child in a list should have a unique key prop

react key报错

2021-08-26 14:58:12 5127

原创 echarts 设置数据颜色渐变 + 自定义label 不同样式

设置颜色渐变给 data 中数据单独设置颜色渐变 data:[{name: "山",value:'60',itemStyle:{}}] itemStyle: { normal: { borderRadius: 4, borderWidth: 2, shadowBlur: 0, // linear 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 glo

2021-08-16 16:48:55 3233

原创 Vue 实现截图功能 (+ video 视屏截图) 并下载

普通截图1.下载 html2canvas 插件npm install html2canvas --save2. 引入import html2canvas from 'html2canvas'3. 使用html 使用 ref 绑定或者 id 绑定 <div class="treeInfo" id="player" ref="canvas"> <button size="mini">截图内容</button> </div>

2021-08-10 16:06:27 2425 1

原创 echarts 多个环形嵌套与 legend 图例图形样式

import * as echarts from 'echarts';var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;option = { // legend: { // data: ['耕地', '建设用地', '林地', '草地', '低效用地'], // top:'10%' // }, // .

2021-07-23 10:36:01 1428 1

原创 echarts 外环内圈效果图、堆叠柱状图

import * as echarts from 'echarts';var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;const startAlpha = 1;const endAlpha = 0;const color = [ {r:55, g: 196, b: 255, }, {r:126, g: 90, b: 187,},

2021-05-14 14:01:50 825

转载路由跳转方式

路由跳转的方式方式一：router-link （声明式）不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> 带参数 <router-link :to="{name:'home',params:{id:1}}"> <!-- params传参数 (类似post) 路由配置pat

2021-04-07 17:10:01 594

原创 element-ui 动态增减表单项

动态添加多个表单项如下图：html: <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" label-position="right" label-width='100px'> <el-row> <el-col :span="6"> <el-form-item v

2021-02-25 17:19:35 1367 1

原创 Vue js/ sreenfull全屏预览+退出监听全屏

全屏显示：一、 js <el-button type="primary" size="mini" @click="showFlow()">全屏</el-button>定义：fullscreen: false//全屏showFlow(){ let element = document.documentElement; if (this.fullscreen) { if (document.exitFullscreen) { document.e

2020-11-25 17:03:26 2704

原创 git配置账户

下载官网地址：https://git-scm.com/download账号设置姓名和邮箱 git config --global user.name "姓名" git config --global user.email "邮箱账号"验证信息 git config --global user.name git config --global user.email查看信息git config --list...

2020-11-04 11:19:54 133

原创 vscode 保存代码格式化

下载插件Beautify，ESLint，Vetur配置打开vscode =》设置=》vetur=》setting.json{ "search.followSymlinks": false, "http.proxyAuthorization": null, // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // "

2020-11-04 11:17:12 416

原创 git提交代码：出现Permission denied (publickey)错误

将代码用git提交到远程仓库Permission denied (publickey).fatal: Could not read from remote repository.原因：SSH keys没有设置或者过期了，SSH keys 可以在没有密码的情况下信任当前工作的计算机创建和添加SSH Keys输入指令：ssh-keygen -t rsa 生成sshKEY，输入指令ssh-keygen -t rsa，生成sshKEY，在本地的./ssh文件夹下面的id_rsa.pub文件里面

2020-10-13 15:25:07 909

原创 vue 获取token，设置请求头，过期响应拦截

获取token // 获取token login () { if (this.form.username == "" || this.form.password == "") { this.$message.warning("账号密码不能为空") } else { let params = { username: this.form.username, password: this.form.pass

2020-09-29 16:30:25 1350

原创 export，export default，import使用

export 导出封装模板方法export function do_encrypt(message) { }，export function encrypt(){}使用iimport { do_encrypt , encrypt} from "../utils/encrypt"; login () {do_encrypt()}export default导出封装模板方法写法一export default { exportMethod: function(data)

2020-09-22 16:02:26 135

原创 Vue 动态改变图片和容器大小

图片就可以随浏览器的变化发生改变<template> <div id="banner">  <el-carousel :height="bannerHeight + 'px'" >  <el-carousel-item v-for="item in img_list" :key="

2020-09-21 17:02:48 1431

原创 element 获取下拉框key和value

获取下拉框key和value写法一：<el-form-item label="所属线路" label-width="120px"> <el-select v-model="form.lineId" placeholder="所属线路" @change="queryTower" clearable> <el-option v-for="(item,index) in allxlist" :key="index" :label="item.lineName"

2020-09-11 09:35:01 6546

原创 js 比较两个对象数据变化

比较两个对象是否相同: let a = { 'name': "zs", "val": "20", 'pop': "ls", "age": "22" } let b = { 'name': "zs", "val": "20", 'pop': "ls", "age": "22", } function isObjEqual(obj1, obj2) { // Object.getOwnPropertyNames 返回对象所有的属性或对象中属性的个数

2020-09-08 10:34:07 3380

原创 js 遍历对象取值

1、Object.entries for (let [key, value] of Object.entries(tdata)) { console.log("name:" + value, 'value:' + key) }2、for for (let key in value) { console.log("name:" + value, 'value:' + key) }

2020-09-04 16:00:13 1144

原创 vue + 图片滑动验证

1、引用自定义组件import img0 from '../assets/img.jpg';import img1 from '../assets/img1.jpg';import img2 from '../assets/img2.jpg';import img3 from '../assets/img3.jpg';import img4 from '../assets/img4.jpg';import img5 from '../assets/img5.jpg';import solide

2020-09-03 15:40:58 1298 1

转载 vue+简单图片滑块验证码

安装npm i slider-verification-code --save引用import SliderVerificationCode from 'slider-verification-code';import 'slider-verification-code/lib/slider-verification-code.css';Vue.use(SliderVerificationCode);使用1、直接使用v-model 进行绑定<SliderVerificationC

2020-09-03 10:52:58 1208

原创 vue +Tree树形控件小结

1、懒加载(与 load 方法结合使用 )：<el-tree :props="defaultProps" :load="loadNode" lazy :highlight-current="true"> </el-tree>//:highlight-current="true" 高亮显示选中的数据data () { return { dataTree: [ { label: '一级 1', children: [{

2020-09-01 17:32:34 956

原创 vue + vue-json-excel插件出excel表格

安装插件cnpm / npm install vue-json-excel -S引用（谁用谁引）import JsonExcel from 'vue-json-excel'; components: { JsonExcel },也可以全局引用import JsonExcel from 'vue-json-excel'Vue.component('downloadExcel', JsonExcel)HTML 使用<JsonExcel class="export-exc

2020-08-24 09:56:59 858

原创 vue脚手架项目搭建2.0 webpack 与 3.0 @vue/cli

1. vue项目搭建是基于node.js安装成功后的。node.js 下载地址： https://nodejs.org/en/为了更好更快速的使用命令下载，可以先装全局 cnpm 亦是淘宝镜像cnpm 可代替 npmnpm install -g cnpm –registry=https://registry.npm.taobao.org2. （2.0 webpack）脚手架1》在命令窗口中全局安装 vue-cli 脚手架cnpm install -g vue-cli 安装

2020-07-21 15:58:23 581

原创 Vue 图片地址转换成base64 +引入jQuery

把图片路径转换成base64一、定义方法 getBase64(img){ function getBase64Image(img,width,height) { var canvas = document.createElement("canvas"); canvas.width = width ? width : img.width; canvas.height = heigh

2020-06-16 14:53:53 2747 1

原创 Vue + element树形控件复选框单选 and 添加 “全部”按钮全选

复选框单选<el-tree check-strictly show-checkbox :data="trreData" @check="checkClick" :props="defaultProps" node-key="id" current-node-key :accordion="true" ref="tree" ></el-tree> // 单选 checkClick (data, checked) { // // 单选 if (

2020-05-25 17:45:57 1838

空空如也

空空如也