饺子先生

饺子先生 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

临渊羡鱼,不如退而结网。

个人动态

饺子先生 赞了问题 · 9月30日

解决es6改变数组对象key对应的值

let arr = [
    {
        a:'13',
        b:'b1',
        d:'d1'
    },
    {
        a:'13',
        c:'c1'
    }
]

怎么把数组对象中所有key为a的值除以100,变成如下

let arr = [
    {
        a:'0.13',
        b:'b1',
        d:'d1'
    },
    {
        a:'0.13',
        c:'c1'
    }
]

关注 2 回答 1

饺子先生 发布了文章 · 9月16日

分享一个css小技巧,实现给正方形的四个角设置小方块的方法

image
项目的UI设计中有这样的样式,一开始用的背景图,简单粗暴,后来在其他地方出了问题,因为是背景图的原因,这个框框被拉长了后小方块的宽度也变宽了,然后想用纯css实现,百度居然没查到类似的东东,后来在umi的交流群里有个牛人给我指点了下 css backgrund: linear-gradient渐变属性可以实现,因为它可以设置渐变从哪开始,这就可以让我们实现4个顶点的位置定位咯,上代码:
html

<div className={`fw-titleBar ${className}`} style={style}>
     <div className="fw-titleBar-content">
         {children}
     </div>
</div>

css

.fw-titleBar {
     width: 100%;
     display: inline-block;
     position: relative;
     background: linear-gradient(to left,#00BDFF,#00BDFF) no-repeat left top,
     linear-gradient(to left,#00BDFF,#00BDFF) no-repeat right top,
     linear-gradient(to left,#00BDFF,#00BDFF) no-repeat left bottom,
     linear-gradient(to left,#00BDFF,#00BDFF) no-repeat right bottom;
     background-size:8px 8px,8px 8px,8px 8px,8px 8px;
     padding: 8px 0;
     &::before{
         content: '';
         width: calc(100% - 30px);
         height: calc(100% - 30px);
         background-color: #00BDFF4D;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         z-index: -1;
     }
     .fw-titleBar-content{
         width: 100%;
         height: 100%;
         display: inline-flex;
         position: relative;
         justify-content: space-between;
         align-items: center;
         border-top: 1px solid #00BDFF4D;
         border-bottom: 1px solid #00BDFF4D;
         padding: 10px 25px;
     }
}

当然你也可以在
linear-gradient(to left,#00BDFF,#00BDFF) no-repeat left top 30px
像这样来设置位置

查看原文

赞 0 收藏 0 评论 0

饺子先生 赞了回答 · 9月16日

解决WebSocket实际项目使用的问题

  1. 你的6个接口是来自一个服务器吗?如果来自不同的服务器肯定要6个websocket
  2. 如果你是同一个服务器,设置一个类型来区分这6个接口数据即可。

关注 5 回答 5

饺子先生 赞了回答 · 9月15日

解决WebSocket实际项目使用的问题

不用,订阅6个主题就行;

image.png

下面这个是连接成功后订阅主题,会传数据;主题由后台提供

image.png

因为我多出用到 所以就封装起来了;可以网上找找,很多;参考根据自己业务;

关注 5 回答 5

饺子先生 赞了回答 · 9月15日

解决WebSocket实际项目使用的问题

公用一个socket通信来交互数据

关注 5 回答 5

饺子先生 提出了问题 · 9月15日

解决WebSocket实际项目使用的问题

公司项目需要做前后端数据实时展示,在首页处有6个接口的数据是需实时展示的,那我是需要每个接口都建立一个WebSocket连接吗,还是怎么弄,我很迷茫,我也不知道怎么描述

关注 5 回答 5

饺子先生 赞了回答 · 9月14日

解决怎么把一个react组件封装成像antd中message.info('123'),这种函数调用的组件?

谈不上黑魔法,你看看antd的实现就清楚了,其实就是api的理解 和 使用问题。

给你个例子

import React from 'react'
import ReactDOM from 'react-dom'
import OriginViewer from 'react-viewer'

class Viewer {

  static show({ images }: { images: Array<{ src: string; alt?: string }> }) {

    const div = document.createElement('div')

    document.body.appendChild(div)

    const destroy = () => {

      ReactDOM.unmountComponentAtNode(div)

    }

    ReactDOM.render(<OriginViewer visible onClose={destroy} images={images} />, div)

    return destroy

  }

}

export default Viewer

调用:

import React from 'react'
import { Viewer } from '@/components'

function Example() {

  return (
    <div>
      <button
        onClick={() => {
          Viewer.show({ images: [{ src: '/admin_avatar.png' }] })
        }}
      >
        show
      </button>
    </div>
  )
}

export default Example

这个仅仅作为思路提供给你(我都没试过),里面肯定还有其他需要调整的地方。千万不要盲目拿来直上

关注 3 回答 2

饺子先生 提出了问题 · 9月14日

解决怎么把一个react组件封装成像antd中message.info('123'),这种函数调用的组件?

我在使用react-viewer,但是每次都要在render中写<render />这个标签,因为项目中使用的地方很多,标签上绑定的参数变量也需要在state中定义,这其实挺麻烦的,我想把这个react-viewer组件封装成类似antd中message那种函数调用的组件,希望能弄成这样的:

import MyViewer from './MyViewer/index';
preview = (images) => {
    MyViewer(images);
}

关注 3 回答 2

饺子先生 提出了问题 · 9月11日

Viewerjs在react项目中的使用

直接上代码:

import Viewer from 'viewerjs';

previewImg = () => {
     const viewer = new Viewer(document.getElementById('imglist'),{
        url: 'data-original'
     });
}

<ul className="img-list" id="imglist">
    {
         list.map(({src}, index) => (
             <li>
                 <img
                     data-original={src}
                     key={index}
                     onClick={this.previewImg}
                     data-original={src}
                 />
             </li>
         ))
    }
</ul>

这样操作,查看大图时没有弹出这个插件,但是在页面底部出现了一些东东,检查元素看起来就是预览大图时弹框的结构 但是定位有问题 也没看到有大图的img标签什么的
男到react中不能使用Viewerjs只能用基于这个封装的react-viewer?

关注 1 回答 0

饺子先生 发布了文章 · 8月24日

js实现连续点击多次效果。(例如安卓系统连续点击5次版本号启用开发者选项的效果)

**项目中有一个连续点击5次启用一个按钮的需求,心想这样的东西网上应该有不少实现
然后开始百度,结果找了不少链接,到那时最终都是一个样的(好似你转我然后我再转他),开始复制粘贴,发现用不了。。。最后看了下代码,发现还有定时器,仔细想想这东西完全不需要用定时器。
最后无奈自己写一个吧,顺便把代码贴出来,或许能帮到其他人。**

lastTime: number = 0;
count: number = 0;
maxCount: number = 5;
interval: number = 500;

const date = new Date()
if (date.getTime() - lastTime > interval) {
    this.lastTime = 0;
}
if (count === 0) {
  count++;
  lastTime = date.getTime();
  return
};
const currentInterval = date.getTime() - lastTime;
if (currentInterval < interval) {
  if (count > maxCount - 1) {
    console.log(`是第五次了`);
    this.count = 0;
    this.lastTime = 0;
    return
  };
  console.log(`还差${maxCount-count}下`);
  this.count++;
  this.lastTime = date.getTime();
  return
};
this.count = 0;
this.lastTime = 0
查看原文

赞 0 收藏 0 评论 0

认证与成就

  • 获得 3 次点赞
  • 获得 18 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 17 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-10-17
个人主页被 309 人浏览