zxo_apple的博客

【代码】手写实现timeline时间线组件。

react MUI5 侧边导航 递归生成

【代码】antd-vue框架a-cascader组件数据渲染及编辑回显。

先看下效果图……(o^^o)1. 可以使用:tree-props="{children: ‘children’, hasChildren: ‘hasChildren’}"直接实现表格的展开，可是这样就无法把icon单独放到一列，会直接放在第一例，就像官网实例一样，局限性比较大2.所以我使用自定义展开项expand，通过配置row-class-name来决定是否展示展开图标template部分： <el-table :data="tableData" :loading="loadi

今天写echarts页面发现，windows系统下图数据量只有两百多都会显示卡顿，而查看echarts官方实例，数据量四千多都正常渲染，就很郁闷经排查，竟然是因为页面里同时渲染了图表和表格，而表格数据和echarts数据是放在接口返回结果里一起整理的，这就造成了图还没有渲染完成，就在等待表格数据渲染，因此会出现页面中看到的卡顿，然后再一次加载完成现象解决方法将图表数据和表格数据分开整理，谁先渲染谁先配置数据，比如我先渲染图表，我就在图标渲染完成后，在调用表格配置的函数判断图表是否渲染完成mount

开发echarts时，经常会要求自定义icon，但是由echarts提供的icon类型比较有限，只有几种icon: ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’比如要实现以下格式的legend首先使用formatter自定义图例名称let legend = { itemGap: 24, itemWidth: 2, itemHeight: 16, top: 0, icon:

先看效果图实现步骤安装echarts， 实例化echartshtml代码 <div id="main" ref="chart" style="width: 100%;height: 400px"></div>vue 的data和mounteddata() { chart: null}, mounted() { this.chart = echarts.init(this.$refs.chart) }进行各项配置1. legend 自定义文字和图例

创建一个画布canvas<canvas id="canvas" width="400px" height="400px">浏览器版本过低</canvas>通过js实现基础绘画功能获取canvas并获取canvas上下文var c = document.getElementById('canvas')var ctx = c.getContext('2d')了解画图实现过程及基本语法ctx.beginPath() // 开始ctx.moveTo(x1, y1) //

/** * 为什么javascript可以在浏览器中被执行 -> js解析引擎 * * node是什么： * 基于Chrome V8引擎的js运行环境 * 内置API： * fs, http, path, js内置对象... * * 浏览器是js的前端运行环境，node是js的后端运行环境 * node中无法调用DOM, BOM, AJAX等api，因为node中没有这些内置api * * node中执行js * 命令： node 要执行的js文件路径 * *

/** * 创建uni-app项目 * HBuilder -> 文件 -> 新建项目 -> uni-ui项目 -> 创建 * * hbuilder中配置微信开发工具 * 1. 工具 -> 设置 -> 运行配置 -> 小程序运行配置 -> 传入小程序在电脑中的安装地址(eg: D:\Software\微信web开发者工具\微信开发者工具.exe) * 2. 打开微信开发工具 -> 设置 -> 安全设置 -> 开启

/** * pages页面组成 * -- .js、.json、.wxml、.wxss * * app.json: 全局配置 * * WXML: 小程序的标签语言，用来构建小程序的UI结构，类似于HTML但是和HTML有所不同 * WXML和HTML区别 * 1.标签名不同 * HTML(div, span, img, a) * WXML(view, text, image, navigator) * 2.属性节点不同 * <a href="">

之前按照vant官网推荐按需引入的方法进行配置，但是一直在报错啊！！！vite.config.js中配置import styleImport from 'vite-plugin-style-import'plugins: [ vue() styleImport({ libs: [ { libraryName: 'vant', esModule: true, resolveStyle: (name) =>

环境准备（安装typescript）npm install -g typescript1. 类型声明// 先声明变量，再赋值let a:numbera = 1// 声明变量的同时并赋值let b:string = 'b'// 声明不符合类型的变量let c:boolean = 1 // 此时c会提示不能将number类型的变量分配给boolean类型// 正确赋值方法let c:boolean = false// 函数参数变量定义 (?表示可以忽略不传)，最后的number

1. 安装相关插件这里是引用npm install --save-dev vite-plugin-spritesmithnpm install del -D // 根据个人需求看是否需要每次删除再进行安装2. 配置vite.config.jsimport Spritesmith from 'vite-plugin-spritesmith'import del from 'del'const resolve = (dir) => path.join(process.cwd(), di

开发背景常用日历组件可能满足不了我们自定义的多种需求（比如样式），因此通常情况下我们可能需要自己手动开发款日历，先上图开发流程1. 根据常用日历样式，我们template部分可以分为三部分（上下月及当前月份展示；周日至周六展示；主体日期展示三部分）1） template部分代码<div class="date"> <div class="header"> <span class="pre_month" @click="onPreMonth"></

啥也不说，先看效果1. 安装npm install @antv/f2 --save2. 在使用图标的页面引入 import F2 from '@antv/f2'3. template中构建要渲染的容器（这里我循环渲染两个图形，通过动态绑定id区别要渲染的图）<div class="common_wrap data_wrap"> <div class="common_item item" v-for="(item, index) in 2" :key="index"&gt

之前使用react + webpack模式开发时，项目结构多了之后，每次本地开发启动项目时，毫不夸张的说，大约都要30s左右，所以决定将webpack改为vite， vite的优势查看vue项目迁移为vite第一步搭建react + vite项目目录结构npm init vite@latest my-react-app -- --template react将原有react项目中package.json所用到的安装包，复制到vite搭建的项目中（下面简称vite），并复制src到vite中复制完

背景react中使用antd上传图片，我们都知道，如果组件中写了action则直接将图片file传到服务器，但是当后端要求我们使用binary文件格式传递时，我们该怎么做呢？首先去除action，使用beforeUpload<Upload maxCount={1} // 限制上传的文件个数 listType="picture-card" // 文件排列展示方式 fileList={fileList} // 上传的文件列表数据 beforeUpload={this.beforeUpload

开发背景react + antd + wangeditor开发流程按装富文本编辑器npm i wangeditor --save页面中初始化编辑器容器componentDidMount() { this.initEditor ()}// 初始化编辑器initEditor = (content) => { const editor = new E('#editor') // jsx中创建id为editor的div容器 editor.config.height = 160 /

背景1. vite是跟随vue3诞生的一个工具，它让我们在开发环境中的效率大大提升，其原因是因为它省去了我们在开发环境中的打包过程（因为我们在实际开发环境中是不需要打包的，但是webpack却会去执行打包，大大降低了开发效率），将ES 模块源码直接传输给浏览器，浏览器使用自带的<script module> 进行解析支持2. 但是vite其实是基于vue3进行开发的，很多时候我们的老项目使用的都是vue2版本的，这个时候想要使用vite应该怎么做呢过程1. 通过vite创建vue项目n

一、背景1. 前端使用vue + vuex + socket.io-clientnpm install socket.io-client --save-dev2. 后端使用node + express + socketio搭建node开发环境npm init -y安装所需依赖npm install express --save-devnpm install socket.io-client --save-dev二、 socket.io相关用法概览1. 发送事件socke

业务场景： 根据接口返回决定 “规定天数内哪些日期” 禁用，其余日期可选择案例：接口返回数据如下，周一、二、三禁用，其余日期可选择data() { return { disableDate = [ {label: '周一', value: 1}, {label: '周二', value: 2}, {label: '周三', value: 3}, ], pickerOptions : {} }}created() { _this.pickerOptions =

1.首先安装需要用到的包npm install px2rem px2rem-loader lib-flexible -S2.编辑build/utils.js 如图位置增加代码如果将remUnit设置为100，相对于750的设计稿那么总宽度就是( 750 / 100 ) = 7.5rem这里根据实际设计稿宽度定3.在main.js中引入包import 'lib-flexible/flexible'4.重启项目，此时可以看到px转化后的rem...

在开发中，如果页面有大量的相同功能及UI，我们可以封装成组件复用，以便能减少开发工作量，并能有效的进行统一维护。举个例子，我页面中有大量这种功能，接下来就进行组件的封装根据截图可知，功能主要分为两大块，搜索模块 + table结果展示模块因此，先创建一个公共组件，主要代码如下，formList是头部搜索部分，根据不同页面需要的搜索项进行设置即可constructor部分constructor() { super() this.state = { formList: [ {

根据官方api可知，树形控件接口需要满足如下格式 treeData = [ { title: '0-0', key: '0-0', children: [ { title: '0-0-0', key: '0-0-0', children: [ { title: '0-0-0-0', key: '0-0-0-0' }, { title: '0-0-0-1', key: '0-0-0

使用html+jquery项目开发，给需要添加动画特效的元素使用addClass添加类名后，使用YUI压缩，压缩后查看网址竟然发现动画特效完全不起作用，最后经过一番探索，发现YUI压缩有个缺点会把animate中的0%丢失，因此使用from和to来完成动画即可解决动画失效问题，例如使用：@keyframes moveFromLeft{ from { transform: translateX(-100%); } to { transform: tr

react中组件之间的数据传递方式使用PubSubJS进行消息的订阅与发布，首先安装相关包cnpm install pubsub-js --save-dev接下来以两个组件为例，看下怎么使用的吧组件A中，订阅消息：组件B中发布消息，这样就能在组件A中的data中得到{name: ‘tom’, age: 18}通过上述方式，就能实现所有组件之间的数据传递了...

一、虚拟DOM中key的作用：1.简单概括：key是虚拟DOM对象的标识，在更新显示时key有很重要的作用2.具体重要作用：当数据发生改变时，react会根据新数据生成新的虚拟DOM，然后react会进行 新虚拟DOM和 旧虚拟DOM的DIFF比较，规则如下：1).旧虚拟DOM中找到与新虚拟DOM相同的key之后会进行内容的比较，若内容变了则生成新的真实DOM，替换掉页面中之前的真实DOM，若没有改变，则继续使用原来页面中的真实DOM2).旧虚拟DOM中没有找到与新虚拟DOM相同的key，根据数据创

项目中安装vant后，在main.js文件引入import ‘vant/lib/index.css’，然后执行 npm run dev此时运行报错 Module build failed: Error: No PostCSS Config found in通过尝试后发现只需要在项目根目录（src平级）下添加postcss.config.js文件，内容如下module.exports = { plugins: { 'autoprefixer': { browsers: 'last

先看效果图一、首先安装下载需要用到的svg相关依赖npm install svg-sprite-loader --save-dev二、针对没有vue.config.js文件的vue项目，直接在webpack.base.conf.js中进行如下两个配置1.找到图片相关配置位置，添加款选出的代码2.在图片配置后添加如下代码三、根据添加的代码我们去src下创建一个icons文件夹，icons下面创建一个svg文件夹，用于存放svg结尾的图片index.js文件夹中添加代码import

先看案例，使用vue+swiper实现，slide不同高度时，动态计算盒子高度，让其下方高度自适应的效果首先搭建vue项目，这里不做过多说明，然后安装swipernpm install swiper --save-dev1. js部分：初始化swiper组件，vue要在mounted生命周期中进行初始化，代码如下：import Swiper from 'swiper'import { TweenMax, Power2 } from 'gsap'初始化时调用resize函数，计算屏幕容器的

1.Vue3.0六大特点性能比Vue2.x快1.2~2倍原因1：diff方法优化：vue2中的虚拟dom是全量的对比（每个节点不论写死的还是动态的都会比较）vue3新增了静态标记（patchflag）与上次虚拟节点对比时，只对比带有patch flag的节点（动态数据所在的节点）；可通过flag信息得知当前节点要对比的具体内容原因2：静态提升vue2无论元素是否参与更新，每次都会重新创建然后再渲染vue3对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可原因3：时间

打印如下表格（含图片）1.在vue项目中，创建一个js文件，引入以下代码var CreatedOKLodop7766=null//====判断是否需要安装CLodop云打印服务器:====export function needCLodop(){ try{ var ua=navigator.userAgent if (ua.match(/Windows\sPhone/i) !=null) return true if (ua.match(/iPhone|iPod/i)

先看下效果吧首先进行公众号的常规开发，引入jssdk，相关配置代码如下引入后可以使用微信内置定位功能，获取用户经纬度重点！引入腾讯地图JS API 点击查看腾讯javascript API在index.html页引入jsapi(key需要自己去腾讯地图官网申请奥，否则鉴权不通过，不能进行接下来的开发)创建一个需要用的地图的组件，设置地图宽高js相关代码如下 // 初始化地图 initMap() { this.mapSetting = { M

一、webpack是什么？webpack是一种前端资源构建工具，一个静态模块打包器二、webpack五个核心概念1. Entrywebpack以哪个文件为入口起点开始打包，分析构建内部依赖图2. Outputwebpack打包后的资源bundles输出到哪里去，以及如何命名3. Loader让webpack能去处理那些非javascript文件（webpack自身只能理解javascript）4. Plugins插件，可以用于执行范围更广的任务，插件范围包括，从打包优化和压缩，一直到重新

一、准备工作安装脚手架: cnpm install -g create-react-app创建项目 create-react-app 项目名二、React元素渲染使用jsx写法，创建元素对象let div = <div>这样创建一个div对象<div>注意：jsx对象，最外层必须只有一个根元素（节点）三、react jsx优点：JSX执行更快，编译为js代码时进行优化类型更安全，编译过程出错就不能继续编译，及时发现错误编写模板更简单快速（不和vu

使用vux的x-input组件开发时，在部分iphone和android机上，遇到了系统键盘弹起时，导致UI上移现象，最终解决，给input框绑定“失焦”事件，设置页面scrollTop为0即可，x-input中是 @on-blur<x-input @on-blur="onBlur"/>// methods中onBlur() { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop

最近在学习wepy框架开发小程序，记录一下学习笔记，有不足的地方，欢迎大家多多指出呀一、准备工作1.全局安装npm install wepy-cli -g2.创建项目wepy new 项目名称3.进入项目目录并安装依赖1. cd 项目名2. npm install #安装依赖二、开始开发1.注册app在src下创建app.wpy文件，注册app使用wepy.app2.注册页面以mine页面为例，使用app.page进行注册页面3.注册组件在页面中使用组件（包括第三方组

首先使用的是websocket进行消息的传递，当我们在pc端请求到二维码图片后，打开微信扫一扫，扫描二维码后，就可以在websocket里接收到扫描消息，然后进行自己的业务逻辑处理，具体代码如下：websocketLink方法是在页面一开始就调用的当用户扫完二维码后，就会进入function函数，user就是获取到到用户信息，需要的话要进行Json.parse(user.body)处理这里有个巨坑的点是，在使用websocket时，前后端通过nginx代理的，有可能就会出现版本不一致的报错，会造

记录一下，今天和后端同时对接二维码显示接口，结果请求后返回给我这样的结果当时就绝望了，这怎么显示啊，然后就开始想办法，哈哈哈1.首先，我们前端自己先设置请求后的响应类型，为blob2.我们将得到的结果进行new Blob()这样可以让js直接操作二进制数据,然后使用URL.createObjectURL在浏览器上预览本地图片this.qrCode就是img标签上的src，赋值后就可以显示啦...