fred8的博客

vue click.stop解决父元素和子元素，互相影响的点击事件

fred8 — Mon, 20 Feb 2023 10:57:31 +0800

【代码】vue click.stop解决父元素和子元素，互相影响的点击事件。

通过map一次拿出数组中，筛选某个属性一样，所有重复和不重复的对象

fred8 — Thu, 16 Feb 2023 08:59:34 +0800

【代码】通过map一次拿出数组中，筛选某个属性一样，所有重复和不重复的对象。

修改elementUI el-select 下拉框修改样式不生效问题

fred8 — Thu, 05 Jan 2023 11:11:27 +0800

修改elementUI el-select 下拉框修改样式不生效问题

tree自定义图标操作和长度显示

fred8 — Mon, 28 Nov 2022 11:32:04 +0800

tree自定义图标操作和长度显示。

es6 用法总结3（对象）

fred8 — Mon, 24 Oct 2022 11:45:57 +0800

Object.assign()：忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性。Object.keys()：返回对象自身的所有可枚举的属性的键名。JSON.stringify()：只串行化对象自身的可枚举的属性。in循环：只遍历对象自身的和继承的可枚举的属性。

es6 用法总结2（数组）

fred8 — Tue, 11 Oct 2022 10:37:02 +0800

es6 数组用法

es6 用法总结1（字符串，数值，函数）

fred8 — Mon, 26 Sep 2022 17:51:57 +0800

ES6 常用方法总结

使用introJs做功能指引，问题思考

fred8 — Tue, 13 Sep 2022 09:45:43 +0800

使用introJs做功能指引，问题思考

echarts Cannot set properties of undefined (setting ‘dataIndex‘)“

fred8 — Tue, 13 Sep 2022 09:37:26 +0800

使用echarts做关系图谱报错

antd4 用类的方式获取form

fred8 — Mon, 23 May 2022 16:48:02 +0800

官网只给了hook的方法，项目没有用到hook,没有在form里面调用，所以不能用submint的方法代码如下 class ActivationAfter extends Component { formRef = React.createRef(); handleAdd = () => { const row = this.formRef.current.validateFields(); console.log(row) } render() {

可以编辑的table antd

fred8 — Mon, 23 May 2022 11:27:24 +0800

效果图代码 import React, { Component } from "react"; import { Form, Input, Button, Table, Divider, Popconfirm, Tooltip } from 'antd'; import "./targetform.less"; class TargetForm extends Component { state = { targetIp: this.props.targetIp,

react 不通过后端，前端实现文件下载

fred8 — Mon, 16 May 2022 14:38:55 +0800

代码如下 import doc from './API.xlsx' { var elemIf = document.createElement('iframe') elemIf.src = doc elemIf.style.display = 'none' document.bo

antd 可编辑增加的table

fred8 — Fri, 29 Apr 2022 11:50:46 +0800

父亲组件 import TargetForm from './compoent/targetform' // 提交数据 handleTarget = () => { this.child.validateFields((err, values) => { if (!err) { console.log(values); } }); };

antd Tree 实现每个分组只能选一个效果

fred8 — Wed, 27 Apr 2022 15:55:42 +0800

效果图代码 import { Tree } from 'antd'; const { TreeNode } = Tree; const treeData = [ { title: '0-0', key: '0-0', children: [ { title: '0-0-0', key: '0-0-0', }, {

antd TextArea 最后一个字符删除不了

fred8 — Fri, 22 Apr 2022 15:12:48 +0800

问题描述和原因 antd 使用TextArea 最后一个字符删除不了，原因是value和onChange一起使用，删除最后一个字符，不会触发onChange事件

this.handleMaxRestoreUp(event)}
          /
</article>
<article>
<h1>axios 配置 Content-Type: application/x-www-form-urlencoded</h1>
<p>fred8 — Tue, 19 Apr 2022 18:04:23 +0800</p>
import qs from 'qs'
import {  loginWisdom } from "../../../../api/index";

componentDidMount() {
    this.getLoign()
  }
getLoign = () => {
    let param = {
      username: '***',
      client_key: '***',
      password: 123456
    }
    loginWisdom(q.
</article>
<article>
<h1>使用阿里云服务和nginx搭建web网站</h1>
<p>fred8 — Thu, 31 Mar 2022 18:07:05 +0800</p>
购买服务器
建议服务系统购买centos 7.6 64位
可以参考https://blog.youkuaiyun.com/fred8/article/details/118669471?spm=1001.2014.3001.5502

服务器部署Nginx
//1.安装Nginx
yum install yum-utils
yum install nginx
//2.启动nginx
systemctl start nginx
//3.加入开机启动
systemctl enable nginx
//4.查看nginx的状
</article>
<article>
<h1>antd 使用自己的svg图标</h1>
<p>fred8 — Thu, 24 Mar 2022 15:22:57 +0800</p>
单独建一个文件存放图标
文件位置

文件内容
import React from "react"; 
// 我是react项目，上面必须有，否则不生效
export const HeartSvg = () => (
    <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
        <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.
</article>
<article>
<h1>antd design 实现页面详情页顶部的tab切换</h1>
<p>fred8 — Mon, 14 Mar 2022 10:41:35 +0800</p>
实现页面详情页顶部的tab切换

代码展示
import {
    Card,
    Form,
} from "antd";
import React, { Component } from "react";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
class NameSpaceDetail extends Component {
    state = {
        tabActiveKey: "overview"
</article>
<article>
<h1>react npm run build打包项目传参数</h1>
<p>fred8 — Mon, 14 Feb 2022 17:36:17 +0800</p>
问题描述
我们项目使用用k8s集群，前端有登录和管理两个服务组成，管理服务代码是antd pro框架写的。
我们的管理服务的代码几乎不变，但登陆页面会根据客户需求变化。
不同的登陆页面，退出登陆有区别。
考虑管理服务的代码不同项目只是细微差别，单独拉分支，没有必要。我们一般都是脚本部署项目，直接从代码库拉代码。
所以我们可以根据打包参数的不同，判断不同的退出登陆接口。
代码展示
第一步
antd pro 用的是umi, umi 的属性define可以直接配置
在 config.js中修改，我用的是ts位置如
</article>
</main></body></html>