想你的风吹到了瑞士-CSDN博客

原创 vue---selection下拉级别树选框

npm install --save @riophae/vue-treeselect// import the component import Treeselect from '@riophae/vue-treeselect'// import the styles import '@riophae/vue-treeselect/dist/vue-treeselect.cs...

2020-03-25 23:05:34 588

原创 vue---excel导入导出以及本地模板下载

<template> <div> <el-input style="width:150px" v-model="input" disabled placeholder="文件上传名字"></el-input> <el-upload action="url" :data="{}" :before-uplo...

2019-10-25 14:48:35 1218 5

原创 websocket ---反向代理解决跨域问题

让websocket 可以在本地调试首先在测试环境的配置 webpack.dev.config.js 的 plugins 添加；new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"development"' } }),然后在初始化websocket的时候判断当前环境是开发环境...

2019-08-01 11:02:07 4187

原创 vue---子组件修改父组件的值

【代码】vue---子组件修改父组件的值。

2024-01-31 17:52:20 147 1

原创 vue----子组件调用父组件的方法

点击</button><button @click="childMethod()">点击

2024-01-31 11:22:56 1028

原创 vue----单选多选按钮切换

【代码】vue----单选多选按钮切换。

2024-01-26 17:53:57 158 1

粘性定位可以被认为是相对定位(position: relative)和固定定位(position: fixed)的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。在视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到视口回滚到阈值以下。粘性定位常作用在导航和概览信息(标题，表头，操作栏，底部评论等)上。这样，用户在浏览详细信息时，也能看到信息的概览和做一些操作，给用户带来便捷的使用体验。

2023-11-21 11:27:20 240

原创 js---三元表达式详解

三元表达式是JS中最为常用的快捷判断语句之一。当判断条件成立时，返回结果1，否则返回结果2。这是JS中最为基本的三元表达式形式。以上代码的意思是：当成绩大于90分时，返回字符串'优秀'；当成绩大于等于80分时，返回字符串'良好'；否则返回字符串'不及格'。运行以上代码，输出结果为'良好'。通过以上代码，我们可以看到三元表达式的嵌套应用，其思想类似于if-else语句的嵌套判断。同时，三元表达式也能够完成复杂的条件判断。

2023-11-17 10:47:26 3775

原创变量提升的常见情况总结

把当前上下文中带有var(提升声明)/function(提升声明+定义)进行提升的声明或者定义。变量提升是将变量声明提升到它所在作用域的最开始的部分。window。

2023-10-10 18:33:15 455

原创 js----箭头函数的this指向详解

这篇文章主要给大家介绍了关JS 箭头函数的this指向，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。fun2第一层执行的时候没有打印代码，而是返回了一个函数出来，赋值给f2，并且这里发生了绑定丢失，this指向由原来的obj指向了window(发生了赋值)在字面量中直接定义的箭头函数无法继承该对象的this，而是往外再找一层，就找到了window，因为字面量对象无法形成自己的一层作用域，但是构造函数可以哦。

2023-10-07 17:54:51 186

原创 vue-----给默认回调函数添加自定义参数

【代码】vue-----给默认回调函数添加自定义参数。

2023-09-13 13:29:29 470

原创 TypeScript 非空断言

在上下文中当类型检查器无法断定类型时，一个新的后缀表达式操作符!可以用于断言操作对象是非 null 和非undefined 类型。具体而言，x!将从 x 值域中排除null和undefined。下面我们来介绍一下非空断言操作符的一些使用场景和注意事项。

2023-08-10 16:02:00 1164

原创 vue 3 wacth写法大全

【代码】v3wacth。

2023-08-01 11:03:26 232

原创 vue2 插槽的写法大全

刚做完一个项目，被库里的各种插槽搞的头疼，今天专门总结一下各种写法，不涉及原理。

2023-07-19 11:00:15 361

原创 v2&v3 v-model语法糖

【代码】v2&v3 v-model语法糖。

2023-06-08 16:22:54 97

原创 Treeselect树形组件下拉树组件样式修改

【代码】treeSelect 下拉树组件样式修改。

2023-03-30 17:21:21 790 3

原创 Vue3.2 setup语法糖

起初Vue3.0版本变量和方法都是要return出来才可以使用，很不友好。在Vue3.2版本推出了 `setup` 语法糖之后，属性和方法都不需要 return 出去了，组件也不需要注册就可以直接使用了，下面慢慢来介绍。

2023-03-23 18:12:10 202

原创 el-table合并多个相同列

【代码】el-table合并多个相同列。

2023-02-17 13:20:56 996

原创 vuex----的辅助函数mapState, mapActions, mapMutations用法和混入

关注IP属地: 江苏2022.03.28 00:14:13字数 287阅读 469。

2022-12-17 10:21:40 595

原创观察者模式VS发布订阅模式区别

比如发布者发布了很多消息，但是不想所有的订阅者都接收到，就可以在调度中心做一些处理，类似于权限控制之类的。观察者模式：观察者（Observer）直接订阅（Subscribe）主题（Subject），而当主题被激活的时候，会触发（Fire Event）观察者里的事件。以意图来分辨模式，都是实现了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新，那么他们就是同一种模式；观察者模式由具体目标调度，每个被订阅的目标里面都需要有对观察者的处理，会造成代码的冗余。

2022-12-02 14:09:58 2298

原创 vue----只能输入正整数和两位小数的金额输入

【代码】vue----只能输入正整数和两位小数的金额输入。

2022-11-29 11:24:19 613

原创 js---常用的源码

1.函数柯里化函数柯里化的是一个为多参函数实现递归降解的方式。其实现的核心是:要思考如何缓存每一次传入的参数传入的参数和目标函数的入参做比较这里通过闭包的方式缓存参数，实现如下：使用方式如下：函数柯里化仅仅只是上面求和的这种运用吗？？这个问题，有必要去一下。其实利用函数柯里化这种思想，我们可以更好的实现函数的封装。就比如有监听某一事件那么就会有移除该事件的操作，那么就可以利用柯里化的思想去封装代码了。或者说一个输入 A 有唯一并且对应的输出 B，那么从更大的角度去思想这样

2022-04-19 17:45:27 1516

原创 vue----实现列表拖拽排序的功能

<template> <div class="test_wrapper" @dragover="dragover($event)"> <transition-group class="transition-wrapper" name="sort"> <div v-for="(item) in dataList" :key='item.id' class="sort-item" :draggable="true" ...

2022-04-06 17:59:16 1873 3

原创 vue----动态表单验证

vue+element 动态表单验证公司最近的项目有个添加动态表单的需求，总结一下我在表单验证上遇到的一些坑。如图是功能的需求，这个功能挺好实现的，但是表单验证真是耗费了我一些功夫。vue+element在表单验证上有一些限制，必须依照element示例的格式才能验证通过。附上代码：<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo.

2022-02-17 17:56:39 1856

原创 vscode---格式化设置setting配置以及一键生成vue片段

{ "vetur.format.options.tabSize": 4, "vetur.format.scriptInitialIndent": true, "vetur.format.defaultFormatterOptions": { "prettyhtml": { "printWidth": 140 }, "prettier": { "singleQuote": true, "printWi.

2022-01-07 14:30:07 766

原创 NVM安装使用教程

卸载node控制面板-》程序-》node直接卸载下载nvm地址：Releases · coreybutler/nvm-windows · GitHub推荐1.17版本，不需要环境变量配置安装完直接在目录C:\Users\Administrator\nvm的settings的文件中写入node_mirror: https://npm.taobao.org/mirrors/node/npm_mirror: https://npm.taobao.org/mirrors/np..

2021-11-23 18:13:51 276

原创 cesium---图加载

//矢量就是边框图，影像就是真实的图片效果，地形图就是初中地理书上的那种window.viewer = this.viewer = new Cesium.Viewer("cesium", { //离线或者不是WebMapTileServiceImageryProvider这种的都可以写在这里 imageryProvider: new Cesium.BingMapsImageryProvider({ url: "https://dev.virtualearth.net", key:.

2021-10-28 15:33:13 1349 1

原创 vuex 模块化之后如何调用其他模块的方法和属性

vuex 模块化之后如何调用其他模块的方法和属性vuex的使用场景多处需要更改同一个数据时，需要使用vuex举个例子：购物车商品数量，在商品列表页面添加商品会更改这个值，在详情页增减商品数量会更改这个值，进入购物车删除商品也会更改这个值，通过提交mutation来更改这个值就很简单明了，如果每次都调用获取购物车数量的接口(前提得有),也能实现,但是每一次的HTTP请求,都是对浏览器性能消耗。跨组件共享数据、跨页面共享数据比如loading状态，在很多页面都需要使用vuex 模块.

2021-07-16 16:29:10 2880

原创 cesium 学习笔记

Cesium简介Cesium是一个基于JavaScript的开源框架，可用于在浏览器中绘制3D的地球，并在其上绘制地图（支持多种格式的瓦片服务），该框架不需要任何插件支持，但是浏览器必须支持WebGL。Cesium支持多种数据可视化方式，可以绘制各种几何图形、导入图片，甚至3D模型。同时，Cesium还支持基于时间轴的动态数据展示，例如，我们可以用它绘制卫星运行轨迹。Cesium HelloWorld下面的例子在浏览器中显示一个太空背景、具有地图覆盖的3D地球：index.htmlX

2021-06-30 17:44:20 2052 1

原创 cesium 模型大全glb/glft格式

150来个模型，真实可用，评论下方有联系方式。

2021-05-11 17:07:44 1241 2

原创 css3 --- 实现动画线条运动效果实例集合

CSS3实现动画线条运动效果实例集合（一）laoyuan2016-12-20标签：css3阅读: 5,157在我们日常的开发中，有时候有的图片，布局块需要加一下边框运动效果，对于这些效果，我们可以使用CSS3动画属性animation，再配合css的一些技巧制作出来。下面是收藏的一些效果实例。1、边框流动效果html：<div class="css3-1"> <span>css3效果的内容部分</span> </div...

2021-04-25 10:02:29 3650

原创 js---继承6种方式

js继承的6种方式想要继承，就必须要提供个父类（继承谁，提供继承的属性）　　　　　　一、原型链继承　　　　　　　　重点：让新实例的原型等于父类的实例。　　　　特点：1、实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！）　　　　缺点：1、新实例无法向父类构造函数传参。　　　　　　　2、继承单一。　　　　　　　3、所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！）.

2021-04-08 16:46:32 91

原创 element中仿$confirm 确认框

前端交互中经常使用确认框。在删除、修改等操作时，调用后端接口之前，先跳出弹框显示提示信息，提示用户确认，避免用户误操作。项目中全局引入了Element UI，提供了一套模态对话框组件，用于消息提示、确认消息、提交内容，使用起来也非常简便。（什么是“模态”？可将其理解为：特定条件触发之后产生的）以下来自于element官网文档：如果你完整引入了 Element，它会为Vue.prototype添加如下全局方法：$msgbox,$alert,$confirm和$prompt。因此在Vue ...

2021-01-13 19:31:38 5287

原创连接两个div的直线，拖动时保持连线

连接两个div的直线，拖动时保持连线。效果：连接两个div带箭头的虚线，拖动div时保持线条实时改变位置保持始终连接效果图：1.产品经理提出的需求用带箭头的虚线将两个位置不固定的div连接起来,初听到这个需求一头雾水，传统的div可以做直线，但斜起来不太好做，幸亏之前接触过svg,里面有一个line标签，知道起始中止两个点的位置，就可以将两个点连接起来了。至于箭头,可以这么做先定义箭头： <svg> <defs>

2020-12-26 21:33:33 2327 3

原创 Cesium学习笔记

Cesium学习笔记Cesium是一个基于JavaScript的开源框架，可用于在浏览器中绘制3D的地球，并在其上绘制地图（支持多种格式的瓦片服务），该框架不需要任何插件支持，但是浏览器必须支持WebGL。Cesium支持多种数据可视化方式，可以绘制各种几何图形、导入图片，甚至3D模型。同时，Cesium还支持基于时间轴的动态数据展示，例如，我们可以用它绘制卫星运行轨迹。Cesium HelloWorld下面的例子在浏览器中显示一个太空背景、具有地图覆盖的3D地球： 1 2

2020-12-11 16:33:00 660

原创 vue---iframe的postMessage跨域通信

前端爬坑日记之vue内嵌iframe并跨域通信下面将3天的爬坑最终以问答的方式总结如下：1、Vue组件中如何引入iframe？2、vue如何获取iframe对象以及iframe内的window对象？3、vue如何向iframe内传送信息？4、iframe内如何向外部vue发送信息？1、Vue组件中如何引入iframe？<template> <div class="act-form"> <iframe :src="src"><

2020-09-16 15:02:50 1662

原创 js---数组和树结构相互转换

数组转树结构采取递归和非递归两种方式，树结构转扁平化数组采取深度优先遍历（递归和非递归两种方式）和广度优先遍历实现。let arr =[ {id:2,name:'部门B',parentId:0}, {id:3,name:'部门C',parentId:1}, {id:1,name:'部门A',parentId:2}, {id:4,name:'部门D',parentId:1}, {id:5,name:'部门E',parentId:2}, {id:6,name

2020-09-10 14:40:01 396

原创 webSocket---知识点

WebSocket我们一直使用的http协议只能由客户端发起，服务端无法直接进行推送，这就导致了如果服务端有持续的变化客户端想要获知就比较麻烦。WebSocket协议就是为了解决这个问题应运而生。WebSocket协议，客户端和服务端都可以主动的推送消息，可以是文本也可以是二进制数据。而且没有同源策略的限制，不存在跨域问题。协议的标识符就是ws。像https一样如果加密的话就是wxs...

2020-03-30 10:03:24 253

原创 es6---reduce使用

reduce()方法详解及高级技巧reduce()方法可以搞定的东西，for循环，或者forEach方法有时候也可以搞定，那为啥要用reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的是：通往成功的道路有很多，但是总有一条路是最捷径的，亦或许reduce()逼格更高...1、语法arr.reduce(callback,[initialValue])...

2020-03-11 00:10:31 5165 1

原创 vue---弹窗内的表单验证rules以及validate.js正则表达式

import {validataNumber,validateFixedTwo} from "@/utils/validate"/............js......./export function validataNumber(str){ const reg = /^([1-9]\d{0,9})$/ return resizeBy.test(str)}expo...

2019-11-21 23:21:54 2091