- 博客(19)
- 收藏
- 关注
原创 vue3实现父子组件的双向绑定
我们在做日常的业务需求时,必然会涉及到大量的父子组件之间的数据传递,这样就会涉及到使用v-model去往子组件里传数据,达到双向绑定的效果:以下是我整理了两种实现父子组件双向绑定的方法。
2023-12-15 12:11:53
569
原创 vue3 + element-plus + hooks实现完整的带分页的表格组件
很早之前写了一篇《vue + element-ui二次封装Table组件,实现表格内容的完全自定义》的文章,这篇文章仅仅阐述了vue2基于element-ui如何实现一个通用化的表格,而没有写如何更优美的去获取表格数据以及分页。由于项目一直使用react,最近才有项目使用到vue3,那借着这个机会,给大家分享一下实现一个完整的带分页的表格的二次封装。
2023-06-05 17:10:36
2580
原创 vue3.0下如何使用mapState,mapGetters和mapActions
vue3.0下如何使用mapState,mapGetters和mapActions1、新建useMapper.js2、新建useState.js3、新建useGetters.js4、新建useActions.js5、页面中使用vue2.0中使用mapState及mapActions的方式// 使用mapStatecomputed: { ...mapState({ //... }) }methods: { ...mapActions(['fnA', 'fnB'])}vue3.
2021-08-26 17:39:56
12987
10
原创 九宫格抽奖代码实现
转盘抽奖demo核心代码class Lottery { constructor(domId) { this.prizeIndexArr = [0, 1, 2, 5, 8, 7, 6, 3] // 顺时针转动对应的奖品序号 this.maxStep = this.prizeIndexArr.length * 5 // 最大滚动的格子数 this.currentIndex = -1 // 当前滚动到的格子的index this.ste
2021-02-03 15:41:29
1980
原创 发布者 - 订阅者模式实现跨组件通信
概念什么是发布者-订阅者模式?举个通俗易懂的例子:微博,大家都用过,我在微博上关注了某个明星,当这个明星发布了动态时,微博会通知我,我关注的这个明星发布了一条动态。这种模式其实就是发布者-订阅者模式,在发布者-订阅者模式中,发布者和订阅者并不会产生联系,而是通过中间介质来桥接两者。就像我和我关注的这个明星并不会产生联系,而是通过微博这个中间层来将明星发布的动态推送给我。我们也可以称这个中间介质为调度中心或消息代理。用过vue的朋友都知道,在vue2.0中,要实现兄弟组件间的通信,有一种方式是通过Ev
2021-01-14 16:46:19
247
原创 javascript队列的实际应用场景案例
概念队列是JavaScript中的一种数据结构,遵循先进先出(FIFO / First In First Out)的规则。队列可以理解为食堂排队取餐的场景,先排队的取到餐后先去吃饭。实现class Queue { constructor(items) { this.items = items || [] } // 入列 enqueue = ele => { this.items.push(ele) } // 出列
2020-10-27 17:37:57
698
原创 二次封装antd-mobile loading组件 — ActivityIndicator,实现以api的方式调用
前言用过antd-mobile的同学应该都知道,当我们用ActivityIndicator组件,也就是loading组件时,是需要以组件的方式去引用,这就带来一个问题,如果项目中有很多地方需要用到loading,就需要在每一个页面去引用组件,个人觉得这样的方式对于我们开发者来说并不是特别的友好,本人最近在开发H5项目就遇到这样的问题。于是就思考如何能实现以api的形式去调用,就类似于微信小程序中wx.showLoading()的api。实现方式具体代码如下:1、新建loading.tsx文件
2020-08-31 13:59:49
1578
原创 js的事件循环,了解一下?
前言JavaScript从诞生起就是一门单线程的脚本语言,单线程就意味着JavaScript代码在执行的时候,都只会有一个主线程去执行所有的任务。单线程的一个弊端在于,当线程中存在一个耗时非常长的任务时,会容易出现代码阻塞,从而导致页面出现“假死”状态。为了解决这一问题,事件循环机制(Event Loop)就诞生了。一、同步任务和异步任务JavaScript中所有的任务被分为同步任务和异步任务。同步任务:立即执行的任务异步任务:不会立即执行的任务常见的异步任务有setTimeout、
2020-08-01 01:05:20
237
原创 react实现转盘抽奖功能
临近618,公司产品需要做促销活动,产品经理提出新需求,要做一个转盘抽奖的功能。接到这个需求时,我的内心其实是拒绝的,奈何,身不由己。做吧!!!UI效果图如下:接到这个任务时,原本是想找个现有的插件去实现,由于需要同时开发h5和微信小程序两个端,苦苦寻觅,终找不到合适的,罢了罢了,还是自己动手,丰衣足食吧!实现原理: 通过css3的 transition 和 transform 两个属性具体实现步骤:1、首先,我们简单定义一个奖品数组,实际开发中是调后台接口获取奖品,以下是为了方便演示cons
2020-06-15 17:42:08
5224
3
原创 vue函数式组件在实际业务场景下的具体应用(高级/简易搜索组件实现)
在上一篇文章中,我大致的讲了vue函数式组件的简单使用,那这篇文章,我将给大家具体讲一讲vue函数式组件在实际业务场景下的具体应用。如上图,做过后台内容管理平台的同学都知道,这个搜索栏是肯定需要的,实现这个功能的方法有很多种,每个人实现的方式肯定也会存在不同的地方,毕竟一千个人有一千个哈姆雷特嘛!既然本文是讲函数式组件的实际应用,那我实现这个功能的方法肯定也是跟函数式组件有关。下面我将细细讲解。1、首先,我们创建renderComponent.js export default {
2020-05-13 15:26:26
1497
原创 vue中的函数式组件
用过react的同学都知道,函数式组件在react中的应用是很流行的,那如何在vue中使用函数式组件呢?什么是函数式组件熟悉react的同学应该都知道,react中的函数式组件其实就是一个接收一些prop的函数,然后返回HTML。vue的函数式组件也是如此。特点无状态:函数式组件本身是没有状态的,也就是没有响应式数据无实例:函数式组件没有实例,也就是没有this上下文写法export default { functional: true, // Props 是可选的 props
2020-05-12 22:09:48
3763
原创 js中reduce()的用法
一、语法const arr = ['Jack','Petter','Mark']arr.reduce((prev,current,index,arr)=>{},initValue)prev:上一次回调的调用值,默认是initValue,如果不传initValue,则默认是数组的第一项current:当前正在处理的数组项index:当前正在处理的数组项的索引arr:原数组ini...
2020-04-22 16:50:18
2775
原创 vue + element二次封装更灵活的Select组件
vue + element二次封装更灵活,更易维护的Select组件前言select下拉框组件应该是我们在做项目时用的频率比较高的组件之一了,只要涉及到查询,就少不了select下拉框,本文将介绍如何基于vue + element封装一个灵活、易维护的select组件。1、新建select.vue下面是select组件的完整代码,里面的内容我将在下面做详解<template>...
2020-03-21 12:56:52
4830
原创 vue + element-ui二次封装Table组件,实现表格内容的完全自定义
vue + element-ui二次封装Table组件,实现表格内容的完全自定义前言我们在用vue + element-ui写后台管理系统项目时,table组件应该是用的频率非常高的组件之一,但是我们不希望每次都使用element-ui的表格代码,秉着代码可读性和可复用性的原则,我们需要对element的table组件进行二次封装。1、新建table.vue页面<template&g...
2020-03-20 17:10:01
9423
1
原创 微信小程序中使用mobx
微信小程序中使用mobx最近在做微信小程序的项目,由于在react项目中使用mobx作为状态管理工具,所有也想在小程序项目中使用mobx为项目做数据驱动。下面的内容将介绍如何在微信小程序项目中使用mobx。一、引入mobx1、clone或者下载代码包到本地https://github.com/ck1642705415/mobx-weapp.2、将 mobx.js 和 observer.j...
2020-03-20 12:37:06
3117
6
原创 浅谈js中的事件冒泡和事件捕获
浅谈js中的事件冒泡和事件捕获一、事件冒泡定义:事件从事件目标开始,逐级往上冒泡,直到最上级。举个例子来讲:页面中存在多个div嵌套,当在所有的div上都加上点击事件时,点击子级div时会依次向上触发父级的点击事件<div class="div1" onclick="alert('111')"> <div class="div2" onclick="alert(...
2019-11-07 12:03:16
176
原创 vue组件间通信的几种方式
vue组件间的几种通信方式方法一、props/$emit1、父组件向子组件传值父组件中通过v-bind绑定需要给子组件传递的值,子组件中通过props拿到父组件传递的值//App.vue父组件<template> <div id="app"> <Child v-bind:username="username"/>//前者自定义名称便于子组件...
2019-10-16 14:04:04
229
原创 react hooks + canvas实现动态圆环效果
import React, { useRef, useEffect } from 'react';export default (props) => { const { canvasWidth = 160, canvasHeight = 160 } = props const canvasRef = useRef(null) useEffect(() => {...
2019-10-15 09:48:55
1083
原创 计算数组中个数最多的元素
计算数组中个数最多的元素let arr = ['1', '1', 2, 2, 2, 'a', 'a', 2, 4, 1, 'a', 3, 'a', 2, 'ad']// 对数组每一项转json字符串,以便比较Object和Arraylet stringifyArr = arr.map(item => { return JSON.stringify(item)})let ne...
2019-10-11 11:54:35
823
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人