- 博客(25)
- 收藏
- 关注
RSS订阅
原创 vue 组件拖拽和缩放，支持在容器为transform:scale和zoom情况下的正常显示
vue 组件拖拽和缩放，支持在容器为transform:scale和zoom情况下的正常显示
2022-07-14 18:48:37
795
1
原创 使用leaflet仿原神提瓦特大地图制作日记
参考页面：原神-观测枢-提瓦特大地图技术栈：vue，vue2-leaflet代码效果目标是还原提瓦特大地图！虽然当前进度只有0.01%… T^T代码：<template> <div> <l-map ref="map" style="width: 100%; height: 600px;" :zoom="zoom" :center="center" @click="sele..
2021-03-01 23:44:32
3440
7
原创 记一次用canvas做出腾讯云首页banner流光效果的经历
组里一个中台项目，参考阿里云腾讯云那种，组长看了腾讯云首页觉得它的banner有流光效果（或者叫飞线）非常之高大上，让我也给整一个。可能是我之前硬着头皮从无到有做了一个数据大屏的缘故，组长对我有着盲目的期待，作为一个小小的前端实习生，我——叹气。以下正文：首先，f12观察banner，发现一个图片地址。输入地址得到一张图片：我原本以为整个banner都是用canvas画的...
2020-07-17 15:26:15
6332
18
原创 前端局部导出PDF(非图片，可编辑)功能，iframe无感预览，部署在qiankun微前端主应用里也适用√
前端局部导出PDF(非图片，可编辑)功能，iframe无感预览，部署在qiankun主应用里也适用√1、使用windows.print()2、待导出部分放在隐藏的iframe里面，达到无感预览的交互体验3、需要考虑部署在qiankun主应用中样式丢失的问题有【导出pdf】按钮的页面<template> <div> <iframe id="frame" :src="getPath" ref="iframe"
2021-09-16 19:12:52
5289
原创 列表懒加载和图片懒加载
element-ui自带的图片懒加载指令和列表懒加载指令element-ui 图片懒加载element-ui 列表懒加载原理和原生js：图片懒加载如何用原生js实现图片懒加载（lazyLoad）图片懒加载插件vue-lazyload源码解析原理和原生js：列表懒加载无限滚动插件vue-infinite-scroll源码解析...
2021-04-20 22:14:25
370
原创 python爬虫实践&可视化gui（wxPython）
前置ide：vscodepython：3.9.6 64bitgui：wxPython+wxFormBuilder咳，爬小说的一个demo，学习用。主要遇到的困难&踩坑&过程如下环境的配置（在指令和安装路径上都有所区别）mac自带python2.7，python，pip用brew安装的是python3，pip3技术栈的选择最开始（半年前）是用python写的，然后运行的时候要开vscode，挺麻烦，现在想打包成app或者在线的一个网址，找了一下web内嵌python脚
2021-04-18 19:39:20
1217
1
原创 html5拖放(drag)
demo效果：查看在线demo完整代码（vue版）：ps：原生js的话将@drag="drag"改为οndrag="drag(event)"就可以啦<template> <div> <div class="container"> <div class="left"> left <div class="drag" draggable="true" @drag="drag" />
2021-04-15 23:16:54
109
原创 three.js初体验：模拟一个小树杈的生长
代码效果：完整代码：<template> <div> <button @click="run" class="btn">run</button> <div class="container" ref="container" /> </div></template><script>import * as THREE from 'three'export default {
2021-04-13 03:05:53
1447
1
原创 vue里的transtion
一个无聊的开屏广告页。收获一点点，大概了解下vue里封装的transtion怎么用。完整代码<template> <transition name="slide-right"> <div v-if="showAdv" class="adv"> <div class="adv-btn" @click="closeTimer"> JUMP {{ countDown }} </div
2021-04-01 22:43:14
251
原创 webapp的菜单栏动效实现，vue+gsap
菜单栏的动效实现，仿美团app效果。用的是gsap明天的目标：学做Animated svg动效长这样↓↓↓注意点是白色的外圈会比黄色的图标部分移动的更高一点。完整代码如下<template> <div class="circle-box"> <div ref="circleBorder" class="circle-border" /> <div class="circle-conver" /> <div.
2021-04-01 22:15:58
361
原创 自己封装的风格化的开关卡片组件
效果图：代码：<template> <div class="card" :class="isOpen?type:'off'"> <el-row style="position:relative"> <i :class="icon" style="font-size: 40px;font-weight: 100" /> <div style="position: absolute;top: 0;right: 0;p
2021-01-08 16:47:59
153
原创 自定义快捷按钮的DateTimePicker 日期时间选择器（elementUI）
自定义快捷按钮的DateTimePicker 日期时间选择器（elementUI）【自用，待改进】效果图：点击快捷按钮，日期时间选择器中的时间范围会随之变化传参：昨天时：近7天近30天近1年代码：<template> <div> <el-radio-group v-model="fastData" size="small"...
2020-01-16 11:20:54
3330
原创 【ElementUI+Vue】树形组件tree保存父子节点，展示父子节点
导航菜单的增删改查页面中，原本是只保存子节点，展示的时候tree树形组件会自动选中子节点的父节点，如下图（仅）保存tree树形组件勾选节点时使用的代码是this.$refs.tree.getCheckedKeys()该方法在element官方API中的描述如下：————————————————————————————————————展示tree树形控件勾选节点也就是子节点（及其父...
2019-11-14 18:06:27
3841
3
原创 css3数字滚动特效简单实现
放在大屏里面的数字滚动特效的简单实现，思路参考：https://blog.csdn.net/nidunlove/article/details/78257549结合业务需求和自己的思考拿vue写了一遍，有些地方实现逻辑不一样，代码也简洁很多效果图：附上代码：<template> <div class="box" :key="key"> <div...
2019-04-29 19:12:03
10549
9
原创 css3渐隐效果
阿里云首页banner效果：我的实现代码：<template> <div style="position: relative;height: 500px"> <img style="height:100%;position: absolute" src="https://img.alicdn.com/tfs/TB1JoiEMVYqK...
2019-04-16 15:07:29
4546
原创 vue2.0+Element-ui应用【Tree树形控件】
自己的treeDemo:&amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;treeDemo&amp;quot; style=&amp;quot;height: 300px&amp;quot;&amp;amp;gt; &amp;amp;lt;el-scrollbar styl
2018-12-06 19:46:11
1005
原创 vue2.0+Element-ui应用【Form表单 整数验证】
element官方文档上数字类型验证有小Bug-2018.12.05http://element-cn.eleme.io/#/zh-CN/component/form自己的解决方案：&amp;amp;amp;amp;amp;lt;el-form-item label=&amp;amp;amp;amp;quot;整数A&amp;amp;amp;amp;quot; prop=&amp;amp;amp;amp;quot;intA&am
2018-12-06 19:02:20
1896
原创 vue2.0+Element-ui应用【Table表格 不同的数据匹配不同的Tag标签】
vue2.0+Element-ui学习2018.11.29关键词：el-table，el-tag1、el-table中根据某一字段的value显示不同类型的el-tag（适合只有两个value的字段）【三元表达式】&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;el-table-column prop=&amp;amp;amp;amp;amp;amp;amp;amp;quot;colorName&amp;amp;amp;
2018-11-29 20:50:34
3159
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人