- 博客(16)
- 收藏
- 关注
RSS订阅原创 基于vue项目实现简单的拖拽功能
知识点：draggable：允许元素进行拖拽@drop：当元素放下到drop元素触发@dragstart：开始拖元素触发prevent：拦截默认事件dataTransfer：dataTransfer 对象允许我们在开始拖动元素时设置数据，并在将元素放在拖放区中时访问相同的数据。我们应该知道一些关于 dataTransfer 的属性和方法（如果要了解更多，请查看dataTransfer API 文档）。dropEffect：当前的拖放操作（例如，移动，复制）effectAllowed：指定拖
2021-12-24 16:26:35
2349
原创 Vue3 + ts + element plus表单验证问题
element plus官方文档中对于表单验证是跟vue2差不多的this.$refs[formName].validate((valid) => { if (valid) { alert('submit!') } else { console.log('error submit!!') return false } })但是在vue3 + ts 的项目里面你会发现this.
2021-12-23 16:11:10
2144
转载 利用css变量去实现渐变的跟随鼠标
效果展示原理：1、CSSStyleDeclaration.setProperty()CSSStyleDeclaration.setProperty()提供了可以直接修改CSS属性值的能力。当然也支持修改CSS中的变量。:root { --color: red; } div { color: var(--color); } <div>div</div>此时的字体颜色是红色执行document.b
2021-12-10 15:40:55
635
原创 vue-canvas-nest
vue-canvas-nest是一个基于canvas绘制的网页背景效果的插件是一款用来生成以下背景特效的工具具体用法先在vue项目当中引入依赖npm i vue-canvas-nest然后在需要用到的页面引入组件import vueCanvasNest from 'vue-canvas-nest'export default { components: { vueCanvasNest },}vue-canvas-nest有两个属性，一个是config用于配置背景特效的
2021-12-03 15:55:54
1345
原创 初探Vue3
vue3与vue2.x的差异vue2.x中的所有数据都是定义在data中的、方法是定义在methods中、计算属性都存在computd里、监听数据都放在watch里面。这样就会导致了一个逻辑链他会分布在不同的区块，随着复杂度上升，就会出现这样一张图， 每个颜色的方块表示一个功能：vue3则推出了Composition API去解决上面的问题，Composition API 可以将零散分布的逻辑组合在一起来维护让你不用在data、methods、computed 以及 mounted 中反复的跳转如
2021-11-26 16:03:06
2075
原创 浏览器缓存
什么是缓存呢？当我们第一次访问网站的时候，比如 jz.ca163.net，电脑会把网站上的图片和数据下载到电脑上，当我们再次访问该网站的时候，网站就会从电脑中直接加载出来，这就是缓存。缓存的优缺点：优点：缓存减少了冗余的数据传输，节省了你的网络费用。缓存缓解了网络瓶颈的问题。不需要更多的带宽就能够更快地加载页面。缓存降低了对原始服务器的要求。服务器可以更快地响应，避免过载的出现。缓存降低了距离时延，因为从较远的地方加载页面会更慢一些。缺点：缓存中的数据可能与服务器的数据不一致；消耗内存；
2021-11-19 16:03:12
1768
原创 backface-visibility 翻转特效
目前这个属性支持两个值，兼容性并不是很好1、backface-visibility：visible默认值，背面朝向用户时可见2、backface-visibility：hidden背面朝向用户时不可见。下面是各浏览器的兼容性卡片翻转特效的实现过程一、创建一个容器<div class="card"> </div>因为是翻转卡片，所以为了保证正面反面可以重叠，我们需要把正反面放在同一个容器内并为父容器设置position: relative;.card {
2021-11-19 15:08:01
2130
原创 es11、12新增特性
es11 & es12—es11—链式判断运算符：?.如果读取对象内部的某个属性，往往需要判断一下该对象是否存在，比如获取list.info.base.userName的值// 错误写法，当多层结构中某一层级值为null或undefined时，会报错const userName = list.info.base.userName;// 正常情况下的处理方法const userName = ( list && list.info &&
2021-11-12 15:46:31
473
原创 Vue获取数据后不渲染
在Vue对数组重新赋值的时候，视图层没有随着数据的变化而更新渲染这种时候可以往数组里面添加一个对象然后删除let arr = [{test:'1'},{test:2}]arr = [[{test:'1'},{test:2},{test:3}]arr.push({})app.pop()...
2020-04-24 11:57:30
1272
原创 一行代码获取当前时间
let date = new Date(+new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')// console.log('当前时间', date)
2019-12-26 11:50:43
438
原创 Vue 前端利用 xlsx 和 file-saver 导出Excel
引入xlsx 跟 file-savernpm install --save xlsx file-saver然后直接在组件里面引入两个插件import XLSX from 'xlsx';import FileSaver from 'file-saver';这两个好像在mian.js引入并没有作用只能在组件里面引入随便弄个按钮 <div><el-bu...
2019-10-09 14:24:01
1607
原创 Element-UI Table表取消全选
在table表上添加上ref属性，属性绑定的字段就是控制table表复选框选中的变量随便弄个按钮随便弄个方法用$refs来获取table表绑定的数据multipleTable为ref绑定的数据clearSelection()为ElementUI Table自带清空选择方法...
2019-10-09 11:52:25
3001
转载 flex布局
flex布局（弹性布局）display: flex //将一个容器指定为flex布局display:inline-flex //指定一个行内元素为flex布局！要注意的是使用了flex布局后float、clear、vertical-align会失效一、flex有六个属性可以设置1、flex-direction //决定X轴的方向2、flex-wrap //决定是否...
2019-03-18 11:22:55
197
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人