- 博客(31)
- 收藏
- 关注
RSS订阅原创 vue使用element得el-tree树实现全选、反选、默认选择和输出选择的数据
element中el-tree实现全选、反选、取消全选并输出选择的值
2022-08-04 15:57:53
1825
原创 object标签预览PDF文件
前端页面实现预览在线PDF文件1.利用原生标签object<object width="100%" height="100" data="url" type="appcation/pdf">2.在vue-cli项目中中利用object<template> <div> <object width="100%" :height="clientHeight" :data="fileUrl" type="appcation/pdf">
2022-04-15 11:19:09
2020
3
原创 利用Exceljs/file-saver实现纯前端的同一个sheet页实现导出多个表格，拼接
vue版纯前端实现导出（同一个sheet页导出多个表格）- 组合1.安装依赖2.引入依赖3.导出测试4.效果1.安装依赖npm install exceljs --savenpm install file-saver --save2.引入依赖import FileSaver from "file-saver";const ExcelJS = require("exceljs");3.导出测试// 导出测试 onExcels() { let baseData = [ ["
2022-04-15 11:14:51
1974
原创 记录一下往常偶尔经常忘记的问题
日常记录el-date-picker限制时间问题新的改变关于vue-svg-icon的使用方式合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入el-date-picker限制时间问题需求：可选的时间范围不超过30天思路：在picker-
2021-08-25 14:30:07
319
原创 认识DOM、class的封装、获取属性、获取节点
认识DOM文档对象模型（document object model），由W3C提出的标准，是一个使用脚本动态的访问和更新文档的内容、结构以及样式；DOM提供了响应的API（接口） ，可以对文档进行增删改查，以实现js对网页元素JS对网页元素的静态（进行）控制，实现动态网页的功能HTML节点树DOM的原理是将文档装入内容，并以节点的形式解析为一颗节点树HTML 文档就是一种树状的结构化文档节点类型元素节点：指标签 如：p div h1~h6 a b属性节点：指标签上的属性 如：
2021-05-26 16:02:26
782
原创 什么是CSS（层叠样式表）
概念和使用方式1、什么是CSS? 设置文字样式、背景、位置、动画等等。2、如何在HTML中引入？行内样式–直接在标签中添加style属性；如：<p style="color: pink;">段落</p>内联样式–直接将css内容写入我们<style></style>标签之中，<style></style>标签一般放置在<head></head>结束标记之前。如：<head>
2021-05-25 10:14:20
380
原创 对http，ajax和json的理解，手写ajax的封装
HTTP1、HTTP – 超文本传输协议1.1 HTTP三个点：无连接: 限制每次连接至处理一个请求独立的: 客户端以及服务器指定传输的 MIME-type 类型，任何数据类型都可以通过 HTTP 发送 【content-type.pdf里就是mime-type类型】无状态: 指协议对于事物处理没有记忆能力。缺少状态信息，意味着后面数据必须重传【如果后续操作需要前面的信息，就必须重新传递】1.2 请求方式：GET: 相对不安全，数据传递量小【地址传输】，一般用于向服务器请求资源POST
2021-05-25 09:39:56
172
原创 浅谈对this的理解
1、this的理解第一准则： this 永远指向函数 运行时 所在的对象，而不是函数被创建时所在的对象【不包含箭头函数】2、this 的集中指向：window 对象 如： console.log(this);函数中的 this 函数中的this，谁调用函数，函数中的 this 就指向谁，一般指向 window 如： function foo() { console.log(this); } foo();对象中的 this ，一般指向对象 如： var obj = { name: "ja
2021-05-10 15:37:56
2325
原创 echart图的tooltip的使用与修改
formatter（字符串模板） 模板变量有 {a}，{b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等，在 trigger为’axis’的时候，会有多个系列的数据，此时可以通过{a0}，{a1},{a2}这种后面加索引的方式表示系列的索引，不同图表类型下的{a}，{b}，{c}，{d}含义不一样。 其中变量{a}，{b}，{c}，{d}在不同的图表类型下代表数据含义为： 1、折线（区域）图、柱状（条形）图、K线图：{a}（系列名称）,{b}（类目名）,{c}（数值）,{d}（无）
2021-05-10 14:57:01
4501
原创 ECMAScript(ES6)总结
一： let 关键字1、不允许重复声明2、块级作用域3、不存在变量提升4、不影响作用域链应用场景：以后声明用let就对了二： const 关键字1、生命必须赋予初始值2、标识符一般为大写3、不允许重复声明4、值不允许修改5、块级作用域注意：对象属性修改和数组值修改不会引发const报错应用场景：声明对象类型使用const，非对象类型生命用let三： 变量的解构赋值es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，被称为解构赋值如：–数组的解构赋值–const
2021-04-26 17:17:52
167
原创 vue 引入Excel表格插件
一：安装npm install handsontable-pro @handsontable-pro/vuenpm install handsontable @handsontable/vue二：引用(在页面引用)import { HotTable } from ‘@handsontable-pro/vue’import ‘…/…/node_modules/handsontable-pro/dist/handsontable.full.css’import Handsontable from
2021-04-26 10:17:17
869
1
原创 给element中下拉选项框el-select提供拉到底加载下一页数据
给element中下拉选项框el-select提供拉到底加载下一页数据1、新增一个自定义指令directives: { 'el-select-loadmore': { bind(el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dr
2021-03-30 17:09:38
676
1
原创 利用accounting依赖实现vue中金额千分位格式转换和el-table的格式化以及数字千分位格式化金额方法
前提自己要安装一个accounting依赖1、在components文件夹下新建一个index.js的文件，代码内容如下import currencyInputComponent from "./CurrencyInput";const currencyInput = { install:function(Vue){ Vue.component("currency-input",currencyInputComponent) }}export default c
2021-03-30 16:57:17
1545
原创 Js事件的封装
var EventUtil={ addHandler:function(element,type,handler){ //添加事件 if(element.addEventListener){ element.addEventListener(type,handler,false); //使用DOM2级方法添加事件 }else if(element.attachEvent){ //使用IE方法添加事件
2021-01-25 18:12:59
284
原创 JS对AJAX的封装
function Ajax(options) { this.xhr = function() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else { return new ActiveXObject("Microsoft.XMLHTTP"); } }; this.send = function(options) { console.log(options);
2021-01-25 18:11:29
116
原创 兼容所有浏览器的事件封装函数
/**将添加事件的兼容封装到一个函数中*param {Element} dom 添加事件的节点#param {String} type 事件类型 如：‘click’*param {Function} fn 事件触发的函数*/function addEvent(dom,type,fn) {if(document.addEventListener) {dom.addEventListener(type,fn,false)} else if (doc
2021-01-25 18:08:41
144
原创 VUEX使用和理解
1、状态管理集中式存储管理应用的所有组件状态的，并以相应的规则保证状态以一种可预测的方式发生改变。2、 Vuex 的理解vuex 的核心就是 store ，可以理解为一个容器，包含应用的大部分状态，并且该状态只能通过一定的方式进行改变3、 使用安装： npm i --save vuex 【利用创建项目选择的时候选择了，就可以不用安装，因为已经自动安装了】使用：import vuex from ‘vuex’Vue.use(vuex) // 注册vuex 实例化： // 由
2021-01-25 18:07:13
130
原创 在VUE中如何第三方插件生成二维码
意义：生成二维码的意思其实就是将一个URL地址保存在二维码中，扫描二维码的时候就指向地址，打开该URL。步骤如下（可以参照JavaScript的二维码生成 – QRCode.js）1、首先安装包qrcodejs2：npm install --save qrcodejs22、在项目中引入（最好单页面引用）import QRCode from “qrcodejs2”; //二维码<el-col:span=‘4’:offset=‘1’class=“qrcode-box”style=“pa
2021-01-25 18:05:01
223
原创 在vue中将Dom元素转成图片显示并且可以下载图片
第一步：安装npm install html2canvas --save第二步：在需要使用的页面引入import html2canvas from “html2canvas”第三步：构建 //里面放置图片等元素(需要合成到图片里的元素) //如果需要合成按钮操作的话，如果是vue中想要页面出现就获取就要在create中调用 实现：写法—注意这是没有合成按钮操作的，如果需要，可以通过传值这是直接将某页面的缩略图显示在某一个页面的角落toImage() {// co
2020-11-04 11:47:52
1552
原创 vue中对于axios的二次封装
npm i axios vue-axios --saveimport axios from ‘axios’const http = axios.create({baseURL: ‘/api’, // 统一设置请求头地址前缀timeout: 6000 // 请求超时时间})// 请求拦截，同意在请求时带上 tokenhttp.interceptors.request.use(function(config) {// 获取 tokenconst token = sessionStorage.g
2020-11-04 11:35:34
392
原创 简易版js学生管理系统
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
2019-08-22 08:33:18
740
原创 有一个4个长度的数组，每个位置装有0-9之间的随机数字，有10次输入的机会来猜每个位置的上的数是什么， 每次猜完4个数字以后都要给出提示，正确几个 错误几个，
var a = Math.floor(Math.random()*10), b = Math.floor(Math.random()*10), c = Math.floor(Math.random()*10), d = Math.floor(Math.random()*10); var location1 = ...
2019-08-14 10:46:32
1294
原创 猜数字游戏，有一个0-100随机数 玩家有5次输入的机会猜， 每次猜一次，都要将结果告诉玩家是小了，还是大了 如果在5次机会内猜中，输出“聪明”，程序结束
var num = Math.floor(Math.random()*10); var a = parseInt(prompt('请输入0-100之间的整数：')); for(i = 1;i <=5 ;i++) { if(i >= 5) { alert('您的机会用完了，机器的数字是：'+num);...
2019-08-14 10:44:50
12766
3
原创 对于二维数组的操作
var classArr = []; classArr = [['小A','女',21,'大一'],['小B','男',23,'大三'],['小C','男',24,'大四'],['小D','女',21,'大一'],['小E','女',22,'大四'],['小F','男',21,'大一'],['小G','女',22,'大二'],['小H','女',20,'大三'],['小I','女'...
2019-08-14 10:28:22
186
原创 求数组的最小值 arr = [23,3,5,7,243,1,25,48];
/* sort可以带一个函数作为参数，该函数有两个参数a和b,如果想比较数值的大小，则写 return a - b; --按照升序排列数值 return b - a; --按照降序排列数值 */ //方法一 var arr = [23,3,5,7,243,1,25,48]; var min = arr...
2019-08-14 10:17:22
885
翻译 定义一个数组，并给出8个任意的初始数值，求改数组中大于平均值的数的个数，和小于平均值的个数
方法有两种 // 方法一 var arr = []; var sum = 0; var avg = 0; for(var i = 0;i < 8;i++) { var num = Math.floor(Math.random()*12); arr.push(num); sum = sum + num; ...
2019-08-14 10:14:01
3469
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人