daily-share
daily-share copied to clipboard
yaogengzhu
个人博客记录、内容在issues
### 背景： 在实际的开发过程中，我们可能像自组件共享一些props.， 但是传递过深的话，需要多次写props ,子组件接受！ 写起来非常麻烦！ 如果使用以下方式，过程就变得简单起来。 ```tsx import React, { useContext, useReducer } from 'react' const Son = () => { const { name, price ,stock } = useContext(MyContext)...
### 慎用es6中的flat()方法， 有兼容问题 > 最近在使用数组展开中，使用到了flat() 的方法 ， 出现了兼容问题，部分浏览器不支持该方法。最好还是使用 reduce 去展开数组，将二维平铺一维
### 文字 + 图片对齐 > 对于这个需求，我之前采取的措施都是 display 布局。突然flex布局对某些效果有限制了，我哭了。。 - 发现了其实原生css 有这个操作 > 图片元素 ```css vertical-align:sub; // 属性有很多实在对齐，自己选用 ```
## 关闭微信浏览器下拉“网页由xxx提供，QQ浏览器内核" > 需求背景： 在vue项目中，我们提供一个下载页面。多个页面，使用到了 `vue-plain-slider`。但是在微信端和微信浏览器的下拉事件产生了冲突，这时我们不得不关闭这个事件 - 解决代码 ```css html,body,#app,.wx-pages{ padding: 0; margin: 0; height: 100%; overflow: hidden; -webkit-overflow-scrolling: touch; } ``` - 在项目的public/index.html 文件中加入事件 ```js document.body.addEventListener('touchmove', function(e) { e.preventDefault();...
### 解决一些滚动穿透！你要知道的`touch-action: none;` > 在开发小程序时，弹框下的内容一起滚动，影响一些体验，发现css 一个属性可以很好的解决这个问题。 - 在弹框的最外层盒子上添加一个css属性 ```css .order-track_box { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); touch-action: none; } ```
## css 处理文字两边自适应（iOS 兼容） ```css @mixin justify_and_ios($top: 0) { position: relative; top: $top; display: inline-block; height: 100%; width: 100%; text-align: justify; vertical-align: top; &::after { display: inline-block; width: 100%; content:...
### 项目之前移动端可能用到pc 库，引入多个库的方式 ```js const path = require("path"); const { addWebpackAlias, fixBabelImports, addLessLoader } = require("customize-cra"); const rewireCssModules = require("react-app-rewire-css-modules"); const theme = require('./package.json').theme process.env.GENERATE_SOURCEMAP = "false" module.exports = function...
### 对upload-重新封装实现input上传图片 ```js import React, { ClassAttributes } from 'react' import { Upload } from 'antd' import { getQiniuUploadToken } from '@/api/common_api' import { openMessage, MessageType } from '@/utils/system' import...
### react项目中实现条形码 > 使用jsBarcode实现一个条形码  [参考地址](https://www.cnblogs.com/dreambin/p/10570873.html)
## clip-path 切割图形 > 需求是切图一个不规则的图形，方案原本采用伪元素处理，更好的方案处理是使用css: clip-path处理。  - 以下采用的css-in-jss ```css mermberBg: { position: 'absolute', minWidth: '52px', height: '20px', right: 0, top: 0, '-webkit-clip-path': 'polygon(0 0, 100% 0, 78% 100%, 0...