2021年09月_viceen

原创 css布局——左边固定右边自适应

css布局——左边固定右边自适应效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc

2021-09-29 10:59:54 105

原创 vue3.0单页面

vue3.0单页面index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-sc

2021-09-29 10:40:35 812

原创 vue3中，ref、reactive、toRef、toRefs的区别

vue3中，ref、reactive、toRef、toRefs的区别相对于Vue2来说，Vue3最大的突破就是 Composition API 。与现有的 Option API 截然不同。他的好处可以总结为两点更集中的逻辑关注点更方便的函数逻辑复用机制1、ref、reactive 可触发页面改变区别ref可用于任何类型的数据创建响应式，reactive只用于创建引用类型数据的响应式。注意ref对引用类型变量创建响应式，其根本是当你给ref传入引用类型，则调用reactive方法为其创建

2021-09-28 16:10:44 2585 2

原创 ES6之反引号(`)标识的作用——字符串插入变量${插值变量名} & 多行字符串 & 标签模板-tag函数

ES6之反引号(`)标识的作用——字符串插入变量${插值变量名} & 多行字符串 & 标签模板-tag函数语法ES6 模板字符串(Template String)是增强版的字符串，用反引号(`)标识，而不是单引号（’）或双引号（“）引号；它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。主要在三方面：字符串插值多行字符串标记模板1、多行文字1.1、如果使用模板字符串表示多行字符串，则所有的空格、缩进和换行都会被保留在输出中。$('#list

2021-09-28 14:35:43 2704

原创 js获取当前域名、Url、相对路径和参数以及指定参数——下载文件-window.location.href

js获取当前域名、Url、相对路径和参数以及指定参数——下载文件-window.location.href1、js获取当前域名有2种方法//方法一var domain = document.domain;//方法二var domain = window.location.host;注意问题由于获取到的当前域名不包括 http://，所以把获取到的域名赋给 a 标签的 href 时，别忘了加上 http://，否则单击链接时导航会出错。2、获取当前Url的4种方法var url = wi

2021-09-28 10:49:26 8517

原创 windons.open()实现文件预览和下载

windons.open()实现文件预览和下载1、本地路径+本地跳转<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button onclick="openFile()">打开模板</button> </body> <scri

2021-09-28 10:48:53 7631

原创文件下载功能

文件下载功能结构 <label>附件:</label><span class='pointer color-1890ff' @click='openFile(attachmentUrl, fileName)'>{{ fileName }}</span >逻辑1-不抽离写法<script lang='ts'>import {downloadFile} from '@/

2021-09-28 10:48:30 137

原创 vue3.0页面模板-watch-事件监听——vue2.0-深度监听 & vue3.0中-只能有一个watch

vue3.0页面模板-watch-事件监听——vue2.0-深度监听 & vue3.0中-只能有一个watchwatch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。vue2.0之深度监听 data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val,

2021-09-28 10:46:35 924

原创 vue中,element UI 时间控件（二）02——Vue中的$event的应用场景

vue中,element UI 时间控件（二）02——Vue中的$event的应用场景vue中点击事件或者是其他的事件可以通过在事件中添加$event进行对标签元素的dom获取或者修改标签指的属性等等。具体用法如下场景1：获取原生DOM事件的事件对象可以通过$event进行对dom元素的获取在DOM事件的回调函数中传入参数$event，可以获取到该事件的事件对象<template><button @click="getData($event)" name="名字哈哈">按

2021-09-28 10:41:56 918

原创 vue中,element UI 时间控件（二）01——Vue中的$event详解

vue中,element UI 时间控件（二）01——Vue中的$event详解$event是指当前触发的是什么事件（鼠标事件，键盘事件等）$event.target则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该dom元素1、$event系列功能下面是例子:<button @click="getData($event)" name="哈哈">按钮</button>由于鼠标点击，所以触发鼠标单击事件，打印出来的是事件，如下图：展开后确实有target属

2021-09-28 10:38:43 1471

原创 vue中,element UI 时间控件（一）——@chang和@blur区别

vue中,element UI 时间控件（一）——@chang和@blur区别官方文档应用-@change =‘getStartTime($event)’结构<el-form-item label='调休时段' prop='selectEndTime'> <el-time-select placeholder="起始时间" v-model="form.selectStartTime"

2021-09-28 10:36:48 1122

原创 vscode中生成vue3.0代码片段

vscode中生成vue3.0代码片段1、首先在vscode编辑器中打开，【文件】–>【首选项】–>【用户片段】–>选择vue.json{ // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snip

2021-09-28 10:26:42 1019

原创 iframe标签的使用（二）02——vue3.0页面结构的应用 & 文件下载功能-直接定义下载方法

iframe标签的使用（二）02——vue3.0页面结构的应用 & 文件下载功能-直接定义下载方法效果-下载结构 <el-button type="primary" @click='openFile(attachmentUrl, fileName)'>下载</el-button> 实例<el-dialog v-model="dialogFormVisible" title="题目" width="660px" > <label>附

2021-09-27 10:44:49 206

原创 iframe标签的使用（二）01——文件下载功能 & 下载方法的抽离 & vue3.0页面结构的应用

iframe标签的使用（二）01——vue3.0页面结构的应用 & 文件下载功能-抽离下载方法-引用方式效果-下载结构 <el-button type="primary" @click='openFile(attachmentUrl, fileName)'>下载</el-button> 实例<label>附件:</label><span class='pointer color-1890ff' @click='openFile(a

2021-09-27 10:44:05 859

原创 iframe标签的使用（一）——pdf预览和图片预览 & scss样式的抽离 & vue3.0页面结构的应用

iframe标签的使用（一）——pdf预览和图片预览 & scss样式的抽离 & vue3.0页面结构的应用效果1-图片预览效果2-图片预览结构<label>附件:</label ><span class="color-666666 color-1890ff hand" @click="openFile(url, fileName)" >{{ fileName }}&lt

2021-09-27 10:42:29 2683

原创清除ElementUI的el-input标签的校验——使用validate方法-区别之resetFields()-移除校验结果并重置字段值 & clearValidate()-移除校验结果

清除ElementUI的el-input标签的校验——使用validate方法-区别之resetFields()-移除校验结果并重置字段值 & clearValidate()-移除校验结果1、在el-form上方写属性 ref=“form”<el-form ref="form" :model="form" :rules="rules" label-width="90px">2、写清空代码，这里的form一定要和ref的值一致this.$nextTick(() =>

2021-09-27 10:40:11 6418

原创【ES6之对象】vue中应用——Object.assign()的使用-复制可枚举属性

【ES6之对象】vue中应用——Object.assign()的使用-复制可枚举属性1、processCode.ts/** * 流程申请状态 */export const CODE_TYPES = { '100001': '请假', '100002': '外出', '100003': '出差', '100004': '补卡', '110001': '转正', '110002': '调动', '110003': '离职', '11000

2021-09-27 10:35:20 297

原创【ES6之对象】Object.assign()的使用——复制可枚举属性

【ES6之对象】Object.assign()的使用——复制可枚举属性Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。实例1const target = { a: 1, b: 2 };const source = { b: 4, c: 5 };const returnedTarget = Object.assign(target, source);console.log(target);// { a: 1, b: 4, c:

2021-09-27 10:34:41 365

原创 js 判断字符串中是否包含某个字符串——indexOf()和RegExp & 数组-includes()

js 判断字符串中是否包含某个字符串——indexOf()和RegExp & 数组-includes()1、String对象的方法方法一: indexOf() (推荐)var str = "1234";console.log(str.indexOf("3") != -1 ); // trueindexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。方法二: search()var str = "1234";

2021-09-27 10:32:09 1355

原创 vue的跳转方式——window.open & router-link标签 & this.$router.push跳转 & this.$router.replace跳转 & this.$route

vue的跳转方式——window.open & router-link标签 & this.KaTeX parse error: Expected 'EOF', got '&' at position 15: router.push跳转 &̲ this.router.replace跳转 & this.$route1、普通跳转（跳转的是路由）const {href} = this.$router.resolve({ name: "newDate",//这里

2021-09-27 10:28:31 5087

原创 vue中使用history.go(-1)和history.back()两种返回上一页的区别

vue中使用history.go(-1)和history.back()两种返回上一页的区别go(-1)：原页面表单中的内容会丢失；history.go(-1)：后退+刷新；history.go(1)：前进；back()：原页面表单中的内容会保留；history.back()：后退history.back(0)：刷新history.back(1)：前进使用路由进行页面前进时，路由会向 history 栈添加一个新的记录，所以，当用户点击$router.back()后退按钮时，则回到之前

2021-09-27 10:25:40 7303

原创 Vue中失去焦点时所触发的事件

Vue中失去焦点时所触发的事件1-html、失去焦点<input type="text" onBlur="txtblur()"><script> function txtblur(event){ //当前元素失去焦点 console.log(123); }</script>2-vue2.0、失去焦点@input 一般用于监听事件，只要输入的值变化了就会触发input<input :type="typ

2021-09-24 19:54:59 40185 1

原创 Vue3.0之使用context和父子组件传值

Vue3.0之使用context和父子组件传值在 Vue3.0 中，setup 中可以有两个参数第一个参数就是 props 第二个参数就是 contextcontext 解释context.parent === this.parentcontext.root===thiscontext.emit===this.parentcontext.root === thiscontext.emit === this.parentcontext.root===thiscontext.emit===this

2021-09-24 19:51:35 2726

原创 Vue3 getters打印结果是Proxy对象，怎么获取其中的值 & json.stringify()与json.parse()的区别和使用

Vue3 getters打印结果是Proxy对象，怎么获取其中的值 & json.stringify()与json.parse()的区别和使用1、Proxy对象的处理现象代码 // 被勾选的show (val) { console.log(val) // 打印结果是一个Proxy对象 console.log(JSON.parse(JSON.stringify(val))) // 序列化后可以取值}序列化后即可取值：JSON.parse(JSON.stringi

2021-09-24 19:50:33 6618

原创 vue3.0页面模板-示例

vue3.0页面模板-示例index.vue<template>  <div v-if="isLook"></div></template><script lang="ts">import { defineComponent, getCurrentInstance, onMounted, reactive, ref, toRefs,

2021-09-24 09:32:26 2925

原创 vue中——封装一个通用的axios请求

axios封装一个通用的请求1、封装文件http.jsimport axios from 'axios'axios.defaults.timeout = 5000//http request 拦截器axios.interceptors.request.use( config => { config.headers = { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',

2021-09-24 09:31:39 152

原创表格多选框的批量操作和单选操作

表格多选框的批量操作和单选操作1、checkbox设置复选框的只读效果不让用户勾选<input type="checkbox" name="name" disabled="disabled" />2、Vue 清除校验vue2版本表单<el-form ref="xxx"></el-form>methodcleanValidate(formName){ // 清除表单校验的提示 if (this.$refs[formName]) {

2021-09-24 09:30:55 622

原创 Vue中使用pdfJs预览PDF、图片

Vue中使用pdfJs预览PDF、图片pdf.js是一个使用HTML5构建的可移植文档格式库。它可以帮助我们在浏览器中构建pdf文档，实现在线查看pdf文件的功能。实现步骤如下：1.下载pdfJs到本地（官网下载地址），放到项目根目录下的静态资源目录static文件夹内，将文件命名为pdfJs。如下图使用iframe打开<iframe id="pdfPlayer" src="URL" frameborder="0" width="100%" height="600px">&l

2021-09-24 09:29:36 1485 2

原创 vue中sass样式的引用和定义全局样式(二)

vue中sass样式的引用和定义全局样式(二)2.4、src/assets/styles/lib/common.scss全局自定义样式（文本颜色、背景颜色、盒模型布局）$nav-header-color-bg: #001529;$nav-header-color: #fff;// 颜色$main-color: #1890ff;$success-color: #52c41a;$error-color: #f5222d;$color-font: #333333;$main-color-li

2021-09-24 09:28:19 1017

原创 vue中sass样式的引用和定义全局样式(一)

vue中sass样式的引用和定义全局样式(一)效果代码<template> <div class="container"> <div class="w-18 color-f5222d color-1890ff-bg height-50 fs-30 weight-700" style="border:3px solid #333">哈哈哈 </div> </div></templ

2021-09-24 09:27:26 1848

原创可视化工具D3.js教程入门（第十四章）—— 中国地图

可视化工具D3.js教程入门（第十四章）—— 中国地图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>中国地图</title> <script src="./d3.min.js"></script></head><body> <svg wi

2021-09-23 14:06:26 1823

原创可视化工具D3.js教程入门（第十三章）—— 树状图

可视化工具D3.js教程入门（第十三章）—— 树状图要用到的知识点，如需详细了解，请戳这里查看中文官方文档d3.hierarchy - 从给定的层次结构数据构造一个根节点并为各个节点指定深度等属性.node.sum - 评估和汇总定量值.d3.tree - 创建一个新的整齐(同深度节点对齐)的树布局.tree - 将指定的层次数据布局为整齐的树布局.tree.size - 设置布局尺寸.tree.separation - 设置两个相邻的节点之间的间距.node.descendants -

2021-09-23 14:05:52 1801 1

原创可视化工具D3.js教程入门（第十二章）—— 力导向图

可视化工具D3.js教程入门（第十二章）—— 力导向图力导向图适合绘制关系型的信息；下面先来说几个关于力导向图的知识点：1、force（力模型）——是一个用以修改节点位置和速度的函数链接1.1、d3.forceSimulation([nodes])创建一个新的力导向图；1.2、simulation.force(name[, force])如果指定了 force 则表示添加指定 name 的 force（力学模型）并返回仿真，如下：var simulation = d3.forceSimu

2021-09-23 14:04:59 3774

原创可视化工具D3.js教程入门（第十一章）—— 饼图

可视化工具D3.js教程入门（第十一章）—— 饼图首先我们先梳理下绘制饼图之前需要掌握的新知识：1、d3.arc——创建一个新的 arc 生成器d3.arc(arguments ) 生成器用来在饼图或圆环图中生成圆形或扇形或环形；arguments 是任意的; 它们只是简单地传递到 arc 生成器的访问器函数的对象。例如，根据默认的设置，传入的对象应该包含以下半径和角度信息:　　arc({ 　　innerRadius: 0, 　　outerRadius: 100,

2021-09-23 09:37:35 2138

原创可视化工具D3.js教程入门（第十章）—— 交互式操作

可视化工具D3.js教程入门（第十章）—— 交互式操作这里所说的交互式操作，就是说的图表的事件监听。on(‘eventName’,funvtion(){ … } )第一个参数是要监听的事件名称第二个参数是要执行的函数，跟jquery类似。在上一张的柱状图基础上，给柱状图增加鼠标移入与移出事件，改变其颜色代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

2021-09-23 09:36:35 508

原创可视化工具D3.js教程入门（第九章）—— 让图表动起来

可视化工具D3.js教程入门（第九章）—— 让图表动起来在为图标增加动画之前，应该了解几个新的 api 如下d3.transition() 开启一个动画过渡。transition.duration() 指定每个元素的持续时间（以毫秒为单位）。transition.delay() 指定每个元素的延迟时间（以毫秒为单位)更详细的api讲解请戳这里！——d3-过渡代码:<!DOCTYPE html><html lang="en"><head>

2021-09-23 09:35:44 672

原创可视化工具D3.js教程入门（第八章）—— 一个简单柱状图

可视化工具D3.js教程入门（第八章）—— 一个简单柱状图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://d3js.org/d3.v5.min.js"></script></head><bod

2021-09-23 09:34:55 357

原创可视化工具D3.js教程入门（第七章）—— 坐标轴

可视化工具D3.js教程入门（第七章）—— 坐标轴继续接着上一章的图表，加上一个x坐标轴<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>scaleLinear</title> <script src="https://d3js.org/d3.v5.min.js"></script><

2021-09-23 09:34:13 316

原创可视化工具D3.js教程入门（第六章）—— 比例尺的使用

可视化工具D3.js教程入门（第六章）—— 比例尺的使用1、比例尺是什么？比例尺能将“一个区间”的数据映射到“另一个区间”。例如[0, 1]对应到[0, 300]，当输入0.5时，输出150。或者将[0, 1, 2]对应到[“red”, “green”, “blue”]，当输入2时，输出blue。上述示例中的[0, 1]和[0, 1, 2]称为定义域，[0, 300]和[“red”, “green”, “blue”]称为值域。定义域和值域之间的映射方法称为对应法则。要理解比例尺，就先需要理解定

2021-09-22 16:29:17 376

原创可视化工具D3.js教程入门（第五章）—— 一个简单的图表

可视化工具D3.js教程入门（第五章）—— 一个简单的图表从这里开始我们就将开始画一个简单的图表了在此之前，最好掌握以下svg的基本知识。一个间的的例子如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://d3js.org/d3.

2021-09-22 16:27:03 298

空空如也

发布文章的题目，从100个字降到30个字了，英文字母多一些就不够用