一个写前端的-CSDN博客

原创 vue3实现父子组件的双向绑定

我们在做日常的业务需求时，必然会涉及到大量的父子组件之间的数据传递，这样就会涉及到使用v-model去往子组件里传数据，达到双向绑定的效果：以下是我整理了两种实现父子组件双向绑定的方法。

2023-12-15 12:11:53 251

原创 vue3 + element-plus + hooks实现完整的带分页的表格组件

很早之前写了一篇《vue + element-ui二次封装Table组件，实现表格内容的完全自定义》的文章，这篇文章仅仅阐述了vue2基于element-ui如何实现一个通用化的表格，而没有写如何更优美的去获取表格数据以及分页。由于项目一直使用react，最近才有项目使用到vue3，那借着这个机会，给大家分享一下实现一个完整的带分页的表格的二次封装。

2023-06-05 17:10:36 1829

原创 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 11253 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 1880

原创发布者 - 订阅者模式实现跨组件通信

概念什么是发布者-订阅者模式？举个通俗易懂的例子：微博，大家都用过，我在微博上关注了某个明星，当这个明星发布了动态时，微博会通知我，我关注的这个明星发布了一条动态。这种模式其实就是发布者-订阅者模式，在发布者-订阅者模式中，发布者和订阅者并不会产生联系，而是通过中间介质来桥接两者。就像我和我关注的这个明星并不会产生联系，而是通过微博这个中间层来将明星发布的动态推送给我。我们也可以称这个中间介质为调度中心或消息代理。用过vue的朋友都知道，在vue2.0中，要实现兄弟组件间的通信，有一种方式是通过Ev

2021-01-14 16:46:19 234

原创 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 648

原创二次封装antd-mobile loading组件 — ActivityIndicator，实现以api的方式调用

前言用过antd-mobile的同学应该都知道，当我们用ActivityIndicator组件，也就是loading组件时，是需要以组件的方式去引用，这就带来一个问题，如果项目中有很多地方需要用到loading，就需要在每一个页面去引用组件，个人觉得这样的方式对于我们开发者来说并不是特别的友好，本人最近在开发H5项目就遇到这样的问题。于是就思考如何能实现以api的形式去调用，就类似于微信小程序中wx.showLoading()的api。实现方式具体代码如下：1、新建loading.tsx文件

2020-08-31 13:59:49 1488

原创 js的事件循环，了解一下？

前言JavaScript从诞生起就是一门单线程的脚本语言，单线程就意味着JavaScript代码在执行的时候，都只会有一个主线程去执行所有的任务。单线程的一个弊端在于，当线程中存在一个耗时非常长的任务时，会容易出现代码阻塞，从而导致页面出现“假死”状态。为了解决这一问题，事件循环机制（Event Loop）就诞生了。一、同步任务和异步任务JavaScript中所有的任务被分为同步任务和异步任务。同步任务：立即执行的任务异步任务：不会立即执行的任务常见的异步任务有setTimeout、

2020-08-01 01:05:20 224

原创 react实现转盘抽奖功能

临近618，公司产品需要做促销活动，产品经理提出新需求，要做一个转盘抽奖的功能。接到这个需求时，我的内心其实是拒绝的，奈何，身不由己。做吧！！！UI效果图如下：接到这个任务时，原本是想找个现有的插件去实现，由于需要同时开发h5和微信小程序两个端，苦苦寻觅，终找不到合适的，罢了罢了，还是自己动手，丰衣足食吧！实现原理：通过css3的 transition 和 transform 两个属性具体实现步骤：1、首先，我们简单定义一个奖品数组，实际开发中是调后台接口获取奖品，以下是为了方便演示cons

2020-06-15 17:42:08 5068 3

原创 vue函数式组件在实际业务场景下的具体应用（高级/简易搜索组件实现）

在上一篇文章中，我大致的讲了vue函数式组件的简单使用，那这篇文章，我将给大家具体讲一讲vue函数式组件在实际业务场景下的具体应用。如上图，做过后台内容管理平台的同学都知道，这个搜索栏是肯定需要的，实现这个功能的方法有很多种，每个人实现的方式肯定也会存在不同的地方，毕竟一千个人有一千个哈姆雷特嘛！既然本文是讲函数式组件的实际应用，那我实现这个功能的方法肯定也是跟函数式组件有关。下面我将细细讲解。1、首先，我们创建renderComponent.js export default {

2020-05-13 15:26:26 1464

原创 vue中的函数式组件

用过react的同学都知道，函数式组件在react中的应用是很流行的，那如何在vue中使用函数式组件呢？什么是函数式组件熟悉react的同学应该都知道，react中的函数式组件其实就是一个接收一些prop的函数，然后返回HTML。vue的函数式组件也是如此。特点无状态：函数式组件本身是没有状态的，也就是没有响应式数据无实例：函数式组件没有实例，也就是没有this上下文写法export default { functional: true, // Props 是可选的 props

2020-05-12 22:09:48 3722

原创 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 2718

原创 vue + element二次封装更灵活的Select组件

vue + element二次封装更灵活，更易维护的Select组件前言select下拉框组件应该是我们在做项目时用的频率比较高的组件之一了，只要涉及到查询，就少不了select下拉框，本文将介绍如何基于vue + element封装一个灵活、易维护的select组件。1、新建select.vue下面是select组件的完整代码，里面的内容我将在下面做详解<template>...

2020-03-21 12:56:52 4680

原创 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 8573 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 3083 6

原创浅谈js中的事件冒泡和事件捕获

浅谈js中的事件冒泡和事件捕获一、事件冒泡定义：事件从事件目标开始，逐级往上冒泡，直到最上级。举个例子来讲：页面中存在多个div嵌套，当在所有的div上都加上点击事件时，点击子级div时会依次向上触发父级的点击事件<div class="div1" onclick="alert('111')"> <div class="div2" onclick="alert(...

2019-11-07 12:03:16 165

原创 vue组件间通信的几种方式

vue组件间的几种通信方式方法一、props/$emit1、父组件向子组件传值父组件中通过v-bind绑定需要给子组件传递的值，子组件中通过props拿到父组件传递的值//App.vue父组件<template> <div id="app"> <Child v-bind:username="username"/>//前者自定义名称便于子组件...

2019-10-16 14:04:04 210

原创 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 984

原创计算数组中个数最多的元素

计算数组中个数最多的元素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 785

qq_16139383的博客