![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 70
海龟先生plus
星光不问赶路人
展开
-
实现一个可调节大小的 Switch 开关
手动实现 switch 组件,可调节大小原创 2022-07-18 14:56:24 · 986 阅读 · 0 评论 -
初识 vxe-table (一)
vxe-table 渲染器的使用原创 2022-06-19 14:25:55 · 21837 阅读 · 0 评论 -
记一笔虚拟列表渲染理解
之前也有被问或者听说 如果给你一万条数据,你怎么渲染?,当时觉得为什么会这么问,不是有分页或者上拉加载吗?分页和上拉加载确实能解决这个问题,不过这和虚拟列表是两码事。解释: 不管是分页,还是上拉加载,有一万条数据其实就会渲染一万条dom,dom过多无疑对滚动的流畅性或性能都有一定的影响。区别: 虚拟列表在于,哪怕有一万条数据,列表中只会渲染一部分dom(通常是正常可见的部分dom)。相信看到这里应该就明白不同之处了吧!过程分析:如上图,这是一个正常列表的模型,当我们往上滑动时,dom就会不断加载原创 2022-03-21 22:56:03 · 872 阅读 · 0 评论 -
前端搞一个扭蛋抽奖小动画?
最近新增一个抽奖小模块,就是扭蛋机的形式,产品给了参考网页,奈何不好扒下来用,只得自己动手干了,不多bb,先看效果吧!效果图:动画分析由上面gif可看出,整个动画分为四个部分扭蛋随机(也不算随机吧)在固定盒子内跳动中奖扭蛋下落中奖扭蛋移动到中心,并且逐渐放大中奖扭蛋做出扭开姿势,缓慢打开整个过程分析好了,貌似还不难,那就一步一步来实现实现步骤一,盒子内随机跳动在实现跳动前,先要做的一步是,尽可能把蛋摆放的随机,自然一点,怎么做?当然是定位啦。 我比较懒,于是计算了大概边界位置(我将原创 2021-10-26 11:34:56 · 4494 阅读 · 7 评论 -
vue 实现一个有趣的围绕圆弧动画
前几天在好朋友楼上小黑的介绍下,看到了某个平台的官网,里面有一个人物介绍的模块,里面的动画感觉不错,于是就自己动手写了一个。1.0 原官网示例当然这里去掉了具体信息,原网站是里面圆圈中是人物的头像,旁边是介绍信息,每个人物就沿着圆弧移动到指定位置2.0 我们实现的结果当点击中间开始时,几个小球一次转动到固定角度3.0 简单分析下要让小圆在圆弧上动,我们只需要知道圆心在圆弧上的坐标(x,y)就行了所以当我们知道外圆的半径,小圆的半径,以及角度再利用三角函数就可以计算出 小圆在圆弧上定位的位原创 2021-07-09 14:32:21 · 1692 阅读 · 0 评论 -
vant 组件库中 toast组件 是怎么写的(vue2版本)
经常使用vant组件库,今天也是有空去看了看vant源码,看看能不能薅到点什么骚操作,菜是原罪,于是选择了个人认为的软柿子 Toast 来学习。1、回忆写法我们在使用中经常是 this.$toast({ option }),或者单纯的使用 Toast(xxx),里面可以传递对象,也可以传递单个内容,也可以通过指定的方法(success,fail)等方式来调用2、Toast小细节多次调用只会有一个Toast存在多次调用Toast的层级会递增可以配置forbidClick实现阻止背景穿透…正如原创 2021-05-20 10:42:45 · 2340 阅读 · 0 评论 -
抽奖老虎机
今天突然要做一个竖直滚动老虎机,可以设置中奖位置,以及中奖回调,然后再带点常规的滚动动画,还是有点意思,和之前的转盘抽奖有点类似,有兴趣可以看下。简单分析下UI,ui的话,就简单点,三个列表从下往上滚动,搞个框罩住 css的活,应该简单。动画,老规矩,我们采用之前的方案,动态设置 css,可以搞定。设置中奖位置,我们可以想传递一个数组,类似 [1,2,3] 这样,数组每一项代表停留位置,那我们就可以计算得css应该平移的距离值,至于动画结束后,还是参照以前的,监听动画结束就可以了。先看看效果h原创 2021-04-02 17:36:44 · 623 阅读 · 0 评论 -
vue 简单实现 营销 转盘抽奖
1.0 思路整理转盘抽奖很常见,之前也没写过,现在有空来写写,分析如下:1.1 转盘旋转 ? ----- 可以用 transform 的 rotate 来解决1.2 旋转动画 ? ----- transition 过渡来处理1.3 停留目标位置及中奖提示 ? ------ 通过控制旋转角度控制停留位置,中奖提示,考虑添加回调1.1 开始行动上面的思考,我们知道了大概要实现的步骤,首先我们搞张图片这个圆盘有 10 份,每一份 360/10 = 36deg,假设要停留在第二个---->原创 2021-03-05 11:44:25 · 594 阅读 · 1 评论 -
记录一个 列表上拉淡入动画
1.0今天在看小米11官网介绍时,看到淡入的动画,觉得不错,于是来写写看https://www.mi.com/mi11 官网地址2.0简单分析其实原理很简单,就是添加一个动画.fade-in-bottom { animation: fade-in-bottom 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.1s both;}@keyframes fade-in-bottom { 0% { transform: tra原创 2021-01-04 15:32:42 · 175 阅读 · 1 评论 -
吸顶小计-----有意思的事儿
1、缘由:现在多数移动端网页有些按钮需要吸顶,尤其是落地页,按钮的吸顶有助于得到更多的注册量2、思路:其实大多思路都没得错,多数是 记录吸顶元素距离顶部距离 然后 监听滚动事件,获取当前滚动高度,然后和 记录的距离相比较let viewTop = this.$refs.ele.getBoundingClientRect().toplet scrollHeight = xxxscrollHeight > viewTop ? 吸顶 : 取消吸顶通常记录滚动高度是有兼容的,写的太烦了le原创 2020-12-21 15:25:46 · 109 阅读 · 0 评论 -
前端 滚动到目标元素位置 VUE 版本
1、前言想起之前一次在写一个小程序商城时候,详情页的类似锚点的跳转花了我不少时间,因为刚写,对小程序滚动,滚动距离那套不熟悉加之本身对什么滚动高度,元素距离顶部距离不是很了解,花了挺长时间的,这几天有空,就研究了下。2、先看效果额,tab点击没有加效果,看着不明显,你懂我的意思就行 哈哈,电商里面最常见了3、页面搭建先搞一个 tab,然后下面就是 几个对应的div盒子// 标题 <div class="tab" > <span v-for="item in 4"原创 2020-12-18 13:53:09 · 492 阅读 · 0 评论 -
vue 多页面配置cli4.4(二 打包优化 )
上一篇讲了 怎么配置多页面的开发,接下来就是关于打包的优化模拟情景,两个多页面 A 、BA 页面使用了 iview 组件库B 页面使用了 ant-design-vue 组件库假设未做任何配置,会把这两个组件库都打包到一起,等于说 访问A页面,也会加载到B页面的使用的插件,势必会增加首屏的速度通过配置 config.js文件,我们可以将 引用的组件,在打包时 引入各自的组件,这样可以降低首屏的访问速度,达到按需的目的配置如下(有参考网上其他案例)module.exports = { l原创 2020-10-19 14:02:32 · 824 阅读 · 0 评论 -
vue 多页面配置cli4.4(一 配置)
最近想试试vue多页面的配置,发现好多例子有点不齐,所以这里写一下 多页面配置的 初期搭建(基于 vue2.0 cli 4.4 比较新了)1、第一步搭建项目就不说了,也没什么格外要配置的2、由于是多页面,每个页面有自己的一套 路由,store,app.vue,main.js,所以 以前的 public 下的 index.html 和 独一的 app.vue main.js 文件可以删除了,新建page目录 下面各自创建对应单页面的 路由 store 组件 css 入口 出口 ,配置好 大概类似 小程序的原创 2020-10-17 18:23:40 · 711 阅读 · 2 评论 -
vue callHook 调用生命周期各函数
生命周期中的函数 通过此函数调用 生命周期函数 同时检查 组件上有无监听生命周期的事件_hasHookEvent–初始化事件时,为false 事件解析到 @hook : xxx 为true即 在组件上绑定相关生命周期函数时 会通过 $emit 去触发,可以达到监听子组件生命周期的作用export function callHook (vm: Component, hook: string) { // #7573 disable dep collection when invoking lifecy原创 2020-09-11 15:53:50 · 789 阅读 · 0 评论 -
vue ----构造函数
import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import { lifecycleMixin } from './lifecycle'import { warn } from '../util/index'function Vue (options)原创 2020-09-11 13:50:57 · 1912 阅读 · 0 评论 -
vue.use() -----笔记
vue.use()插件安装源码/* @flow */import { toArray } from '../util/index' ---将参数类数组转为 数组export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function | Object) { const installedPlugins = (this._installedPlugins || (this._installedPlug原创 2020-09-11 10:59:28 · 95 阅读 · 0 评论 -
vue keep-alive 个人理解
keep-alive用于组件缓存,保证我们在页面切换时,缓存部分组件,具体实现如下1、keep-alive 是一个抽象组件export default { name: 'keep-alive', abstract: true,------>标志抽象组件,不会生成标签之类的 props: { include: patternTypes, exclude: patternTypes, max: [String, Number] },可以看到接收三个值 用于缓存原创 2020-09-10 23:31:19 · 143 阅读 · 0 评论 -
vue 自定义指令-----文字提示气泡
实现一个简单的 鼠标滑过出现文字提示。啥也不说 上代码包括了 指令类容更新import Vue from 'vue' Vue.directive('mouse', { // 初始化 bind: function(el, binding, vnode) { }, // 被插入 inserted:function(el, binding, vnode){ mousEnter(el,binding) }, // 更新值 update:function(el,原创 2020-09-02 15:34:29 · 1817 阅读 · 0 评论 -
js 获取 上传视频时长
有时候我们在上传视频时,可能需要获取视频时长,可以有两种方法1.创建video标签,赋值src,然后播放获取时长(可将标签隐藏)2.通过 Audio 对象将 视频文件对象传入,获取时长,代码如下**获取 视频对象** let fileVIdeo = document.getElementById("upload").files[0]**获取时长 是异步的,可将其封装为priomise**//这里的需求是 时长 8-58秒 大小 50M// 判断时长 getVideoTime(fi原创 2020-06-30 12:08:24 · 4299 阅读 · 0 评论 -
简单 节流写法
let throttle_timer = nullexport const throttle = (cb,time = 3000) =>{ if (!throttle_timer) { throttle_timer = setTimeout(()=>{ throttle_timer = null },time) cb() } }原创 2020-04-22 18:20:25 · 543 阅读 · 1 评论 -
在 vue 中使用 typescript(vuex使用, 组件注册,接口定义)
在vue项目中使用typescript,主要是vuex的使用,组件全局注册,接口的定义一 项目搭建-----跳过(需要注意的是,如果不小心选择了语法检测,可在根目录下新建 vue.config.js 文件 里面添加如下)module.exports = { lintOnSave: false }二 组件全局注册(定义的过滤器,指令等),主要介绍 vue.use()方法这...原创 2020-04-19 16:50:20 · 3032 阅读 · 1 评论 -
微信小程序中音频播放
如何在小程序中实现音频播放需要注意几点由于现在官方不再维护 audio 组件 ,所以音频播放尽可能采取 wx.createInnerAudioContext() 接口 ( 若需要在后台播放,则采用 wx.getBackgroundAudioManager() )音频播放,只有在播放时才可以获取到音频长度(参考了多个带音频的小程序 qq音乐,百度网盘等,都是采取自动播放的方式,以获取...原创 2020-03-21 14:18:55 · 6589 阅读 · 6 评论 -
Vue.js报错error: Unexpected console statement (no-console)
这是由于语法检查的问题 关闭console的语法检测就好了在项目的根目录下的 package.json文件中的eslintConfig:{}中的 “rules”: {加入"no-console":“off”}如下...原创 2020-02-01 15:26:14 · 351 阅读 · 0 评论 -
vue Computed property was assigned to but it has no setter
vue 计算属性的 getter和setter的使用使用背景:需要对计算属性的值在 methods的方法中修改,由于计算属性是默认有getter没有setter的,所有需要手动添加一个setterchangeObj为页面绑定的一个对象(注意写法)changeObj为属性----->changeObj:{}里面的为添加的方法------->不能使用箭头函数get----->...原创 2020-01-16 13:10:42 · 3538 阅读 · 0 评论 -
js 得到常见日期格式 一句搞定
直接 new Date().toLocaleDateString().replace(///g,’-’)可以得到这种格式"2019-11-28"new Date().toLocaleDateString()得到的是2019/11/28用replace方法 将所有的/替换为-原创 2019-11-28 00:22:25 · 267 阅读 · 0 评论 -
在uni-app中引入阿里巴巴矢量图标
1.在官网添加喜欢的图标—>加入购物车–>然后下载2.解压(有一大堆)只要 iconfont.css–>放入uni-app的common目录下 当然其他也可以3.打开这个css—>更改里面的@font-face–>改成在线地址 注意加https没改之前线上地址–>复制 加上htttps—>替换之前的最后如下4.改好了地址—>可以在...原创 2019-10-29 16:33:42 · 2354 阅读 · 0 评论 -
vue--简单实现全选和单选
<body> <div id="box"> <table> <thead> <tr> <th><input type="checkbox" style="margin-left:35px" @click="allChoose($event)"> 全选</th> &...原创 2019-08-25 23:49:10 · 2923 阅读 · 0 评论