唐抉的个人博客

唐抉的个人博客

CSS3动画详解
基本概念 css中有两种形式实现动画效果:过渡动画transition和自定义动画animation。其中,animation动画可以循环多次执行,而过渡动画transition只执行一遍。 transition 若通过用户的交互直接改变css样式,呈现的形式是立即转变。若希望这个变化是有过渡效果的,便需要使用到过渡动画transition。使用transition的例子如下: 123456789101112131415161718192021222324252627282930313233343536<template> <div> <bu...
Lottie动效设计指南:(一)Bodymovin插件的安装及初步使用
Lottie是什么 Lottie是Airbnb开源的一个动画渲染库,同时支持Android、iOS、React Native平台。Lottie支持渲染播放AE动画。通过AE插件bodymovie导出json文件作为动画数据。Airbnb的开发者打造了一个社区LottieFiles · GitHub来与设计师、开发者进行交流。 Lottie应用场景与原理 loading动画 动态图标 加载动画 动态banner Lottie支持的AE属性 Lottie虽然能够满足多种场景的需要,但并非支持所有的AE效果。因此在设计动效时,需要考虑该效果是否被Lottie支持。否则会...
可视化大屏设计入门指南
前言 数据可视化就是把一些相对复杂、抽象的、看不懂的数据通过可视化的方式,运用图形化的手段清晰有效地将数据信息进行解读和传达,帮助发现其中的规律和特征,挖掘数据背后价值的过程。 随着行业的发展,可视化大屏大致有以下类别: 行业可视化(如交通、医疗、金融、军警部队、农业、工厂、化工等) 智能终端系统类(如定制化终端产品) 演示demo(如数据演示、展览展示、数据看板) 可视化分析系统(如交通预警平台、天气监控平台等) 随着可视化需求的增多,各大厂商也逐渐整合可视化资源来实现低代码平台,国内比较知名的可视化厂商有:光启元(Ray design)、Data V、优诺科技(...
在Vue中使用el-editor编辑器
前言 实际项目中,多处使用到富文本编辑器,每次都配置会比较麻烦,故将要用到的功能封装到一起,需要时可直接调用,故发布了el-editor编辑器。 富文本编辑器v1.0.1 介绍 编辑器基于vue-quill-editor和element封装,目前版本仅支持vue2 与其他编辑器相比,本编辑器支持秀米编辑器、135编辑器样式的粘贴复制 注意,当前编辑器仅提供前端代码,编辑器默认不转存秀米图表,若需要开启这一功能,需要向handlePic参数传真值true,然后编写一个后端接口来实现秀米图片的转存,接口名默认为editor/get_xiumi_pic,可通过参数picUR...
Vue 将组件打包并发布到npm仓库
在项目中遇到需要反复使用的代码时,通常会将其封装起来以待下一次的调用。若想要在不同项目里也能使用这些代码时,比较难在众多代码中找到需要的代码。而将组件打包并发布到npm库中,只需要记住相应的包名,便可从npm下载直接安装使用。 全局注册组件 在完成对应组件editor.vue的封装后,在组件存放目录下(这里默认为components)新建一个index.js文件用于将封装好的组件注册为全局组件,内容如下: 123456789101112131415161718192021import editor from './editor.vue'const compo...
js文件调用vue内的方法并传值
在js文件中编写功能函数时,常常要调用vue文件内的方法并传值,下面记录js传值的方法: 首先在vue页面的mounted模块将要调用的方法注册到window对象上,并引入对应的js文件后: 123456789mounted(){ window.exampleFunction=this.exampleFunction},method:{ exampleFunction(data){ console.log('收到方法调用') console.log(data,'data&#x...
python异步多线程下载文件
在实际项目中,难免会有短时间下载文件的需要。正常的批量下载文件要等前一个文件下载完成后才进行下一个文件的下载工作,下载速度较慢。而通过异步来下载可以实现多个文件同时下载的多线程操作。下面为异步下载文件的实现方法: 首先需要通过pip install aiohttp下载aiohttp模块。 引入相关模块如下: 123456789import requestsimport aiohttpimport asyncioimport osimport uuidimport configfrom services import dbcfrom utils.response_helper i...
Vue axios接口异步请求数据并同步返回
在实际项目开发中,经常要使用axios来请求数据。 axios可以通过async/await来实现同步请求。 其中async用来修饰方法,其声明的方法为异步请求的方法,await只能在异步方法中使用,用于等待指定方法执行完成;await修饰的方法执行完成后,才会执行后续的代码。 axios的.then模块前把this赋值给一个变量并在.then中代替this来使用,可以防止this指针发生变化导致引用全局变量无效的问题,如: ``json getData() { var _this=this axios.get(h...
Vue 监听兄弟组件数据变化并实时更新数据
在实际项目开发中,有时会遇到组件B需要监听兄弟组件A的数据是否有改动,并根据兄弟组件A的改动来更新自身数据或执行一定操作的需求。下面将介绍实现这一过程的方法: 在Vue项目的main.js中 添加下面语句: 1Vue.prototype.$eventBus = new Vue() 在兄弟组件A中所要监听的事件中添加如下自定义事件的代码this.$eventBus.$emit('SyncData')。如需要监听addDataA事件的变化,则组件A中script模块的代码如下所示: 123456789101112 methods: { addDataA() {...
Vue 水印自适应窗口方法
通过使用Vue的生命周期钩子函数和window对象的resize事件来实现水印根据窗口大小适配的功能: 在Vue文件的script模块中 引入水印组件: 1import watermark from '@zsit/watermark'; 在script模块的export default里,通过钩子函数mounted监听窗口大小的变化,并在销毁组件前移除事件监听器: 123456mounted(){ window.addEventListener('resize',this.handleResize)},befo...
avatar
唐抉
黑夜不会太久,定有天亮之时

站点信息

本站总字数: 195.3k
载入天数...
本站总访问量:
本站访客数: