云中客的博客

以最简单的input组件为例，父组件：<template> <div> <MInput v-model="fNumber" @input="changeFNumber"/> </div></template><script setup>import { ref } from "vue";import MInput from './input.vue'const fNumber = ref('23424'

可以直接将一个组件当成一个参数去传递，通过props.components可以使用这个组件。import React, { useEffect } from 'react';import './staffList.scss';function Title2() { return ( <div>111</div> )}function Title(props) { useEffect(() => { console.log(...

首先，在columns需要排序的那一项中加上sorter:true，因为sorter会触发Table的onChange方法，因此onChange中可以调用获取数据的接口 sorterFun = (pagination,filters,sorter) => { let sortType = sorter.order // 排序类型，正序/倒叙/不排序 if (sortType) { this.getDataList(sortType === 'ascend' ? '.

首先，使用npm或yarn安装http-proxy-middleware$ npm install http-proxy-middleware --save$ # 或$ yarn add http-proxy-middleware然后，在src文件夹下新建一个setupProxy.js，引用http-proxy-middleware后即可配置代理const proxy = require('http-proxy-middleware');module.exports = f...

通过params传参 /*路由配置页面*/<Route path="/addPage/:id" component={addPage} />/*跳转前的页面，点击后跳转的方法*/goAddPage() { let id = 111 this.props.router.push({ pathname: `/addPage/${id}` })} 在跳转后的页面中可以通过this.props.router.params得...

在使用ant-design的Tree时，由于每一层的数据较大，不能一次性把数据全部拉取出来，使用了Tree中的loadData后最大的难题就是把每一层的children数据放到树节点中了。我们数据结构大概是这样的list = [ { id:1, children: null, parent: true }]list2 = [ { id: 1-1, children: null, ...

安装了react和ant-design后，改变modal的visible的属性，会报“Cannot read property 'getParent'of undefined”的错。苦寻答案良久，在ant-design的gitHub的issue里找到了一位同学分享的答案：ant里的rc-util是5.0.1版本的，在rc-util升到5.0.4就可以修复这个bug。...

最近的项目中需要一个类似于element但又有多种定制化功能的弹出框，但element给的弹出框只支持点击或者鼠标悬浮唤醒，而项目中需要的是右击，或者嵌套操作，所以就自己写了一个，成果如下图。我按照个人完成的整个思路去介绍。步骤一：首先找到点击的这个dom,然后通过计算这个dom的宽高等属性将这个弹窗定位，如何点击后获取这个dom的尺寸和定位呢？这里我是这样写的&lt...

es6数组增加了forEach,map,filter,find,every,some,reduce等方法，它们都是使用了迭代器函数。一、forEach 遍历循环数组的方法，简化了以前的for( var i = 0; i< arr.length; i++) 操作var colors = ["red","blue","green"];// ES5遍历数组方...

众所周知，vue提供了很多套组件间传值的方法，父子组件直接用props和$emit就好，大型项目则用vuex，但有一种更适合在小项目中使用的非父子组件传值方法，即bus总线机制。它的用法的实现原理是前端面试中常考的。在第一次换工作的时候，几乎所有面试官都问了有关vue组件传值的几种方法，所以掌握这个知识点是很重要的。 这种方法的原理是通过一个空的Vue实例作为中央事件总线...

最近公司需要做个小程序项目参加创新大赛（祖传开头，最近公司xxx），那就抽空花了2个工时撸出了一个简单的小应用，写的过程中发现小程序和正常的前端项目还是有不少区别的。其中花费时间最多的是研究怎么在小程序中使用iconfont。 这里我记录下摸索的过程： 1.和正常的前端代码一样，在入口的html文件（我使用的是mpvue，如果使用小程序原生标签应该也是类似的...

从吐槽开始，最近连续接了两个代码质量让自己吐血的项目，出自两个不同的靓妹之手（我没有性别歧视的意思，相反我非常喜欢靓妹）。A妹写的代码，我改了一个月的bug还没有改完，从一开始他们写了一半，然后就长期闲置了该项目。然后有一天，产品突然推了这个项目的进行，就交由我去拯救了。我拿到手，发现所有的分页、所有的缺省页、所有的表单验证、所有的loading、所有的筛选都没有，测试提的bug大多就用了...

在手机端选用了qrcodejs用来生成二维码，但有个问题让人头疼了。我们都知道在qrcodejs中设置宽度和高度的方法有两个，一个就是在canvas标签中：<canvas height="200" wight="200"></canvas>另一种就是在使用QRCode.toCanvas方法时import QRCode from 'qrcode'...

最近用react做了一个手机端，可以说了解了很多以前没有接触的东西，其中在项目中实现滑动分页让我印象颇为深刻。首先，我们要知道这个功能需要用到哪些准备知识。一、预备阶段 我的想法很简单，就是计算每次加载的最后一条距离项目footer垂直方向上的距离，从而知道什么时候需要将当前页面+1并且向后端发送请求，将重新获得的数据加到上一次获取数据的后面。首先，我们要知道在Reac...

最近在公司负责的项目从Vue转到了React，于是这一个月沉迷React无法自拔....好吧，这不是不写博客的理由，感觉两个月不写整个人都不好了呢。那今天就说说我了解的React提升性能的细节点吧，并且这篇博客会在之后不断更新完善。一、用Fragment代替div 众所周知，在react的render函数中返回一个组件时，如果有多个JSX标签，则需要用一个父标签包裹住...

    项目中遇到个问题，就是后端给我一个如下的二维数组：即一个17项的数组，每一项是一个长度为5的数组，我暂时定义为17*5的数组，而我需要转换为5*17的数组，即5项，每一项是一个长度为17的数组。我使用的是将数组遍历两次（性能可能会不好，但暂时只会使用这种）。我先假定17*5的数组为a，目标数组5*17为b，那我先遍历循环b,构造出每一项都为空数组的b，再把a使用forEach方法，...

    装了N次的nvm-windows，然而昨天还是进了各种坑里，捯饬了很久有点尴尬...安装过程    GitHub：https://github.com/coreybutler/nvm-windows/releases    我选择的是nvm-noinstall.zip，下载下来解压到自己创建的C:\dev\nvm目录，以管理员身份运行install会出来一个settings文本...

       依旧是公司里那个Vue+Element UI的项目。今天遇到了一个新的问题：表单中某个选择器的值不同，控制着下面表单内容是否显示。放图：        大概就是这个样子。由后台返回的“发放方式”的数值，控制下面几个input框是否显示。这个实现比较简单，只需要把下面几个框用一个&lt;dev&gt;包裹起来，加上一个v-show=""的判断条件即可，但它们的表单验证让...

最近用的Vue+Element UI时，有些地方需要用到省市区三联选择器，网上安装并尝试了多种类似的插件，但都因为无法正常实现或是没有眼缘而弃用了。最后选择的是V-Distpicker这种，配置和使用起来还算是比较简单的，下面就分享一下其用法和需要注意的点（需要踩过的坑）。1.使用方法 安装和文档，请查看官网https://distpicker.pigjian.com/...

    在最近的新项目中，用的是vue+Element的经典组合，Element自带的存储用的是轻量级的js cookie插件：js-cookie。在浏览器中F12检查元素，之后点击Application，即可看到Local Storage、Session Storage、Cookie，可以看出，前二者的存储是由key和value(键值对)组成，而Cookie则包含名称、值、到期时间、所属域名、生...

      操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串的结果即可。由于字符串拼接麻烦易错，因此Vue中表达式结果的类型除了字符串之外，还可以是对象或数组。绑定HTML Class （v-bind:style) 1.对象语法我们可以传给 v-bind:class 一个对象，以动态地切换...

最近产品添加了上传文件的功能，我也是刚开始做有关上传的东西，所以这两天收获蛮多，在博客中记录一下心得。一. 基础用法 饿了么在官网把基础用法的API 和示例写的很清楚，这里为节约有效资源的时间，不再赘述，只做补充。 首先，不要被这句“只能传咘啦咘啦”的给骗了，我刚开始就是被这句话迷惑，去找了其他插件，结果由于文档不详细，又换了回来。其实从某种方面来说，文件上传时没有...

     之前做的项目中使用了element的选择器，然而由于选项太多不好找就更换为带输入建议的输入框但我们接口要求并非是传入公司名称，而是传入这个注册公司的id，后端传入的数据结构经过转换后大致是这样的：companyList = [ { company_id: 1, comopany_name: '腾讯' }, { company_id: 2, comopany_...

    因为很多页面需要用到&lt;keep-alive&gt;，我就用其将承载页面的父组件包裹了，但这也带来了一些问题。比如新写的页面中，进入下个页面还在调用上个页面的数据（以前没有遇到过，不清楚是是什么原因），即已经切换路由却无法自己destory掉，打日志发现确实没有跑destoryed这个生命周期函数。    如何解决：在需要删除的组件中的deactivated生命周期函数中手动调用t...

最近公司让我面试了一个前端时，我问了“遍历对象的方法”，结果她给了我一个曾经没有用过的方法，果然面试也是一种学习，故在此记录总结。一. 遍历对象的方法1.使用for ... in语句 for..in语句是一种迭代语句，可以用来枚举对象的属性，也可以用来循环数组。但这里是有个坑的，会把原型上的方法名也遍历出来Object.prototype.method=f...

    最简单的按大小排序，需要添加prop,不然无法使用&lt;el-table-column label="人次" align="center" sortable prop="times" width="100px"&gt;