关中刀客在青岛

直接上代码，就几行。

vue3+vant4中表单内嵌picker的默认值设置。

直接上代码，一目了然。

【代码】最简npm发包步骤。

{${

Selector组件中举例了只选一个的情况，在onChange事件中判断如果当前选中为空的时候不让操作即可实现单选。antd-mobile中Form.Item下放入选择组Selector之后，多选是没问题的，也可以不选；按需求将以上两种情况组合后，奇迹发生了：选中的按钮再次点击会被取消。在Form表单的Item中放入选择组，但实现的是单选的交互效果。请根据实际情况自己选择。

如图，Picker按钮上显示的数值是设备的设定温度，可以在点击后通过弹窗选项来修改这个设定温度。同时，设备端或其他手机端也可以修改这个温度，所以这个设定温度是随着设备的实际状态而实时变化的。每次打开弹窗时，选中项和当前显示的应该一致，即设备实际设定温度。

如题，react项目，基于vite创建，在写?有另一个项目却能正常使用。对比两个项目的package.json和vite.config.js，更新了一些依赖，仍未解决。经网查，根目录下新建babel.config.js，内容为。但不知另一项目为何不需要此操作。

一个tab两个按钮A、B，默认选中的A，当点击到B时需要显示B对应的图表。考虑到B的图表在页面加载时已经初始化完成，所以点击B时再调用图表的resize方法。由于tab中的图表是写在子组件里，所以通过useImperativeHandle实现父组件调用子组件方法，React版本,代码如下子组件：问题这样写在本地开发模式中正常运行，但生产环境中父组件首次加载不能拿到子组件的方法，需tab切换到A再次且到B才行。猜想原因，大概在生产环境中，父组件把子组件暴露出来的方法绑定到UI中的点击事件中，而子组

css实现文本超过指定行数显示省略不生效的问题要用css实现文本超过指定行数显示三个点的效果，正常样式写法如下：/*超过2行隐藏，并以三个点结尾*/.limit2line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}但react项目中使用时遇到问题了。一共用了两处，一处起作用，一处不起作用，其中不起作用的元素在控制台中把样式前面的勾打掉

需求一个滑竿，上面的滑标是个盾牌形不规则形状，需要添加投影。滑标可通过点击或拖动而移动位置，看了之前的项目，使用了一张带投影的png透明图片实现。但本次尺寸调整，设计图上取到的尺寸和位置是滑标不带投影的部分，目测不准，设计要给出精确的位置也比较困难，我说可以用css3中的滤镜投影功能（filter: drop-shadow(rgba(x, x, x, 0.2) 2px 0px 6px)）试一下。开发框架是react，UI库antd-mobile，滑竿使用其中组件问题先用设计给的盾牌图片替换滑标。

原文链接：https://www.robinwieruch.de/react-hooks-fetch-data作者简介：https://overreacted.io/zh-hans/my-decade-in-review/如果我们要请求一个接口获得数据，并要遍历到当前页面中渲染出来，可能会这么写import React, { useState, useEffect } from 'react';import axios from 'axios'; function App() { con.

antd-mobile的长列表ListView在react hooks中不更新的问题在react hooks中使用antd-mobile的长列表listView的时候，经常发现有时页面数据交互(如修改某行状态、点赞、评论等)后进行了更新，list和dataSource也更新了，但页面就是不更新；而上滑加载数据时list长度增加，dataSource随之更新，页面就能正常更新。感觉这应该是dataSource没有很好的识别更新条件而为驱动组件刷新，经反复探索，发现需要在dataSource更新的时候将lis

步骤开发环境安装依赖yarn add -D vite-plugin-babel-import修改vite.config.jsimport vitePluginImport from 'vite-plugin-babel-import'……plugins: [ reactRefresh(), vitePluginImport([ { libraryName: 'antd-mobile', libraryDirectory: 'es',

需求逻辑今天到明天预约时间范围是下一分钟开始往后的24小时切换每列数据时，其他列对应的数据要自动切换到合适的范围每次打开预约开关时，预约的数据列表及时更新antd-mobile的PickerView组件有个bug：在onChange事件中切换数据源后，有时可以自动再次触发onChange以获取正确的值，但有时不会。所以这里在每次切换数据源后，根据情况手动获取picker的值以进行修正完成效果如下：组件代码import { useState, useEffect } from 'reac

使用了antd-mobile的Picker造成点击事件多次触发需求页面上一个显示温度的div(<div className="tem">下称 .tem)，点击时弹框，通过弹框修改这个温度的数据。环境使用 react hooks + antd-mobile，弹框使用 Picker 组件实现显示温度的div如下，其中的子组件<TemPicker >封装了Picker组件。当 .tem 被点击时，手动通过触发这个隐藏的 .itemForPicker 的点击事件来实现弹出。……

echarts树图tree制作家谱教程缘起国庆节回老家，看到家族里长辈们整理的家谱并印成了一本书，到我这一代已经是第六代了。我辈分低，从小在村里见了跟我爸年龄差不多的人都是爷爷婆婆的叫，但对于这些族人的族内关系却不清楚——从我记事起就没见过很正式的家谱，据说早先有过，但文革时破四旧遗失了，再也没人整理。这次的家谱书比较清晰的记录了每一家在家族中的关系位置和家庭成员信息，对于宗族关系用表格实现，跨了四页。我翻阅时想到如果在电脑上用图表中的树图把家族关系列出来会非常清楚直观，但直到前几天结课才有时.

需求圆角半径为50%的按钮里面放一个居中的小图标，当呈现激活状态时给按钮涂上底色并左右旋转一下再停止。问题当按钮被激活后在旋转过程中，仔细观察可发现右边的边缘被切掉一小部分(图上是正常的)，旋转结束后立即回复。观察dom结构，按钮的宽高是固定的，而装载按钮的容器宽度是非常宽的。解决最后一前端女同事大胆尝试，将外面容器的宽度(百分比)减去1像素后，问题解决。原因原因不清楚，因为按钮容器宽度在绘制按钮时根据个数平均分的，最多能容纳4个。实际上放了3个按钮的看起来问题不明显，而

用reacthooks 重写项目，在使用useHistory时发现写在其他页面正常跳转，而写在app.js里的不正常，报错hook The prop `history` is marked as required in `Router`, but its value is `undefined`打印了一下果然是undefined，仔细对比其他页面，发现路由是定义在app.js中的，所以其他页面相当于是路由的子组件，环境不一样。经查找，app.js中的正确使用方法是：import { c

需求一个卡片，点击跳转卡片上有个切换开关Switch，点击时需要阻止卡片跳转的动作问题Switch的api里只有onChange事件，参数里没有react或原生事件参数解决方案在Switch外面包一层div，在这个div上使用react事件的阻止方法：onClick={e=>e.stopPropagation()}<div className='r' onClick={e=>e.stopPropagation()}> <Switch che

新起了一个项目，cra脚手架创建的react，但发现热更新非常慢，一次要五六秒。而几周前同样创建过的一个项目，热更新一次就一两秒钟。对比两个项目，把package.json整个替换了重装依赖，问题依然。最后把yarn.lock文件给替换了，问题解决。猜想问题是依赖的小版本升级造成。...

创建新项目，引入原项目的部分代码，发现一个用lottie导入的小图标动画不见了，但这个元素位置大小都对，只是看不见，就像透明度为0了。查看控制台，有报错：lottie.js:6229 Error: <svg> attribute viewBox: Expected number, "0 0 undefined undefi…在源码中查找，位置在lottie.js:6229 行if(this.renderConfig.viewBoxSize) { this.svgEle.

比如，需要在某个点击事件中先判断手机是否联网，若断网则弹出提示并停止运行后面的程序。如果将这个功能提取出来再在点击时调用，发现return并没有阻止上层函数的运行。const checkMobileOnline = () => { if (!navigator.onLine) { Toast.info('网络不可用', 2); return }}有个可以变通的方法是在需要停止的子程序中抛出异常，即可停止代码运行：const check.

更多请移步：https://michel.codes/blogs/mobx6Mobx6之后，写法更简洁，总的来说是不需要再写@observable, @computed, @action等装饰符了,只需在构造函数中引入makeAutoObservable即可。直接上代码对比：MobX6以前import {observable, computed, action, makeObservable} from "mobx"class TodoStore { @observabl.

上家公司时使用过字体图标，优势明显，现推广给当前公司的同事使用，文章记录如下(以react为例)：引入字体图标iconfont可以提高开发效率和项目的可维护性。优点设计不用再切图了，更不需要针对不同场景切出大小、颜色、格式等不同的图片，只需维护一个图标项目库即可。 开发者也不用引用大量图片，也不需要在js中根据不同场景切换不同图片，仅class名就可搞定，修改灵活。尤其在node开发中，节省大量代码，提高可维护性。 字体图标缩放不失真，不会变模糊。 减少网络请求次数，一个css文件可包.

业务需求及要求一共5个页面，页面内有导航栏和返回，其中两个页面的返回有特殊要求，而且物理返回键点击动作要和导航中的返回完全一致。首页——项目一打开在首页，点击某个元素跳转到列表页 列表页——可以点击新增跳到表单编辑页，点击草稿可以跳到草稿箱，点击每个图可以跳到详情页；点返回回到首页。 详情页——点击编辑可以跳到表单编辑页； 表单编辑页——点击保存跳到草稿箱，点击提交跳到列表页； 草稿箱——点击每个图片进入表单编辑页；点返回回到列表页。解决过程网查了一下，花了大半天时间尝试了以下方法

配置步骤环境node: v12.16.1 npm: 6.14.4 "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1"创建react应用npx create-react-app my-app然后可以用npm start直接启动项目。安装antd-mobile$ npm install antd-mobile --save按照如下内容更改入口页面<!DOCTYPE ht

由于界面自动刷新，尤其是开了延时后刷新频繁，会导致picker打开后选中的条目自动回到当前value上，此时需禁止自动更新。 如下，在打开picker时，通过onVisibleChange (列改变回调)设置一个临时的tempPickerVal，界面显示期间一直用这个值，点击确定时调用onChange再设置当前pickerVal。state = { isPickerShow: false, tempPickerVal: ''}onVisibleChange = (pickerVal

API文档：http://ustbhuangyi.github.io/better-scroll/doc/目的解决IOS上滑动事件不能实时触发的问题。步骤1，开始npm安装"better-scroll"最新版，也可以尝试测试版本，如 "^2.0.0-alpha.20",2，导入，初始化import BScroll from "better-scroll";let scroll = new BScroll('.container', { // 1-会非实时（屏幕滑.

在基于-webkit内核的浏览器中，多行文本限制行数，比如超过2行时，第二行结尾用三个点表示，实现如下：h4{ display: -webkit-box; overflow: hidden; -webkit-line-clamp:2; -webkit-box-orient: vertical;}可以看出，后面两行有-webkit 前缀，就是这个属...

移动端通用低版本的问题： 不支持es6中的api方法，如startWith，padStart等等 解决：用babel-polyfill // 安装 npm install --save babel-polyfill// js中引入 import 'babel-polyfill';不支持css原生变量解决：如果有less环境就写成less变量@c_primar...

用的好好的，突然chrome浏览器闪退，再次打开时，inspect页面就刷不出来了，报404。仔细看看标题上报的远程版本号是74.0.3729.186，而我的Chrome版本是最新的78。 卸载Chrome(直接安装低版本不会降级)，下载一个低版本的74.0.3729.169安装，确保版本号早于inspect的远程版本，但尽量比较新。 再次刷新inspect页面，设备列表出来后，底下有3个按钮...