a_靖的博客

第一步，创建样式文件，在页面目录下根据自己习惯创建一个less文件，用来写样式类第二部，引用该文件import './details.less';下面我们在js 中绑定 class；1.传递一个字符串作为className属性：<span className="menu navigation-menu">Menu</span>2.动...

代码解析： 可以选择性的看editCard 事件的传参，尝试过几种传参的方式，会有莫名其妙的bug，这种方式可行。代码import { Card, Icon, Button } from 'antd';import React, { Component } from 'react';import { connect } from 'dva';import router fr...

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。搭建 Ant Design Pro 的前期准备：你的本地环境需要安装 cnpm、node。注：代码块中的 $ 代表： $后面是在命令行输入的命令，举例$ npm start解：实际上是应该打开命令行输入npm start下面开始安装部署 Ant Design P...

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。路由里面的参数作用介绍：{ path: "/a_nowdayserver/nowdayserver", //随便取名，显示在访问路径url中，如果是子路由，需要和父路径匹配 icon: "file", //菜单栏显示的图标 name: "你好", //菜单栏显示的标题 comp...

this.openKeys 改成你要固定展开的一级菜单目录 ['/msdebookh5']

ant vue 自定义首页菜单实现

v-decorator 和 v-model 的使用示例代码

需求：点击重置按钮，初始化下拉菜单选中的值。实现效果图：上代码<a-form layout="inline" @keyup.enter.native="searchQuery" :form="form"> <a-row :gutter="24"> <a-col :xl="4" :lg="7" :md="8" :sm="24"> <a-form-item label="期数"> <a-s

示例效果：设置 a-table 中 columns 的指定单元格属性，通过插槽实现文本超出指定宽度自动换行 { title: '描述', align: "center", scopedSlots: { customRender: 'description' } },html <span slot.

组件代码： <a-upload v-model:file-list="fileListcl_noticeUrl" :action="clAction" :data="upFileData" :multiple="false" :max-count="1" class="upload-list-inline" list-type="picture-card" @change="uploadFilecl2" :before-upload="be

示例代码：<template> <a-card :bordered="false"> <!-- 查询区域 --> <div class="table-page-search-wrapper"> <a-form layout="inline" @keyup.enter.native="searchQuery"> <a-row :gutter="24"> <a

效果图：CSS动画效果无限循环放大缩小<image class="anima" mode="widthFix" @click="nav" src="@/static/1_btn.png"></image> .anima { animation-name: likes; // 动画名称 animation-direction: alternate; // 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 animat

封装网络请求 ：reqAxios.jsimport Axios from 'axios';import qs from 'qs';import { router } from 'umi';import { message } from 'antd';Axios.defaults.withCredentials = true// const httpUrl = 'https://tworktelecommanage.weein.cn/work_telecom_manage'cons.

models代码：import { getCList} from "@/services/api";import { MessageTip } from '@/utils/tools.js'import { router } from 'umi';const customerModel = { namespace: 'customerModel', state: { channelList: [], // 渠道列表 }, reducers: {

得在 less 里面使用:global 修改，不能是css文件.:global 修改是全局生效的，所以建议修改之前要加上calssName="样式名"; 不是className={style.样式名} ，是直接写“”。然后在调试工具找到你要修改的样式的属性名，如图:来个单选框的样式修改代码，效果图： <Form.Item> <Radio.Group className="modal_Radio" defaultValu..

useState 是设置state的值，他有两个属性，departmentModal,setDepartmentModal代码示例：import React from 'react';import { useState } from 'react';const Customer = ({ dispatch,orderList}) => { const [departmentModal, setDepartmentModal] = useState(false); var...

效果图：场景：从菜单栏进入子页面，但是子页面默认不在路由显示，完成操作后需要返回上级页面。所以要在菜单栏中加返回的功能。实现代码：import React from 'react';import { Button, Card, Icon } from 'antd';import { PageHeaderWrapper } from '@ant-design/pro-layou...

PageHeaderWrapper返回上一页实现代码：<PageHeaderWrapper title={false} content={ <a onClick={() => router.goBack()}> <Icon type="left" /> ...

用很简单的源码实现包含下列 antd 表单相关知识：1.表单必填校验，规则校验2.Upload 上传图片，获取上传图片的状态，如上传成功，上传失败，上传进度条，删除上传的文件3.获取 Input 组件用户输入的值，设置默认值4.提交表单不刷新页面5.把上传的图片显示在页面页面效果图：提交前提交后：包括校验失败的场景t_form.jsx 代码：...

示例代码import { notification } from 'antd'; notification.error({ description: '您的网络发生异常，无法连接服务器', message: '网络异常', });...

Dva是什么？基于redux和redux-saga的数据流方案，只有6个api。数据流走向数据流向图解析：StateState 表示 Model 的状态数据，通常表现为一个 javascript 对象（当然它可以是任何值），每一个 Model 会有一个命名空间，它的 state 都是唯一的。dispatch 函数用于触发 action 的函数，先...

实现antd上传图片，Upload 组件可以上传多张图片，多张图片上传成功的效果图：每次上传onChange 回调函数都会执行一次并且里面接收一个JSON对象，其中 file 对象是本次上传的图片信息，status 值为 done 就表示这一次上传成功了，fileList 中是一个数组，里面是组件所有上传的信息列表，每次上传的信息都会记录在里面。未上传时的效果图：上传成功...

Ant Design Pro 是一个企业级中后台前端/设计解决方案。目录：一：开发前的准备二：创建页面三：创建组件并引用四：封装网络请求和网络请求走向五：登录流程以及路由权限设置六：父组件和子组件相互传值和接收七：for 循环渲染组件Ant Design Pro 全家桶技术栈：1.antd 基于 Ant Design 设计体系的 Rea...

登录流程：1.ant 框架最外层套了SecurityLayout 布局SecurityLayout 中判断用户是否登录，做自动跳转路由处理。里面的currentUser 和currentUser.userid 很关键，是判断登录状态的值.2.currentUser 是通过src/models/user 中fetchCurrent 绑定type saveCurren...

本博客代码是 React 父组件和子组件相互传值的 demo；实现封装一个折线图，折线图选择下拉框，获取下拉框点击的值并且传给父组件根据下拉框筛选的条件更新视图；效果图如下：父组件代码：代码解析：父组件 Parent 引用子组件 Sub ,传递了 list 组件给子组件，并且接收子组件传递给父组件的 storeId ;import React, { Component } fro...

父组件传值代码： render() { return ( <div> {this.state.list?(<GeomLine list={this.state.list}/>):null} </div> ); }子组件接收代码：class GeomLine extends Compon...

代码实现功能：根据state 中的值判断子组件显示或隐藏，因为 setState 不是及时生效的，所以不做显示隐藏判断会报错。 render() { // 客户经理循环组件 function CommentSpan(props){ const numbers = props.managers; if(!numbers) return; ...

实现效果：点击表格中某一行，或者点击表格中某一行的一个字段，获取当前行的 item 下标数据，并用 Link 标签传参，下一个页面接收的实现。如果使用router 跳转路由传参，需要导入import router from 'umi/router';如果用 Link 跳转路由传参，需要导入 import Link from 'umi/link';1.点击整行得到当前数据的实现代码：...

通常你需要在一个组件中渲染列表。或者循环遍历渲染相同的多个组件，下面看看怎么实现：先来个有 If 判断的字组件循环渲染： render() { // 聊天列表组件 function MsgList(props){ const list = props.list; const listItems = list.map((item,id...

umi/link通过声明的方式做路由跳转。例子：import Link from 'umi/link';export default () => { <div> /* 普通使用 */ <Link to="/list">Go to list page</Link> /* 带参数 */ <Link ...

Input 组件的 onChange 事件绑定语法 render() { this.shop_change = e => { const { value } = e.target; console.log('shop_change',value) }; return ( <Input placeholder="" onChange={thi...

index.jsx代码解析：在组件初次渲染时调用 model 中 命名空间为 a_models 的 getData 网络请求，传了一个patload 参数和 callback 回调函数过去，然后通过 this.setState ()更新视图的 state。import { Form, Tabs,Affix, Button,Input,Table } from 'antd';i...

封装网络请求，在service中新建接口，在model调用service，在视图绑定model并且得到网络请求的回调函数，获取网络请求的数据渲染到页面。网络请求数据走向；1.在utils/request.js 封装网络请求；/** * request 网络请求工具 * 更详细的 api 文档: https://github.com/umijs/umi-request */...

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。第一个原因：可能是没安装镜像，解决方法：$ npm install -g cnpm --registry=https://registry.npm.taobao.org第二个原因：报错日志：http fetch GET 304 https://registry.npmjs.org...

QQ技术交流群173683866 526474645 欢迎加入交流讨论，打广告的一律飞机票1. 打开项目cmd , 打开方式 - 进入项目的文件目录,在目录中输入 cmd2.在命令行输入命令 git config --global credential.helper store3.在命令行输入命令 git pull意思是创建一个logo文件保存你的账号密码，这样以后就...

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。在 Ant Design Pro 中，一个完整的前端 UI 交互到服务端处理流程是这样的：UI 组件交互操作；调用 model 的 effect；调用统一管理的 service 请求函数；使用封装的 request.js 发送请求；获取服务端返回；然后调用 reducer 改...

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。淌了一下午坑，都是辛酸泪总结：首先要知道， 它不能直接使用charts ，需要安装bizcharts 插件，然后导入bizcharts 中的charts；点击跳转到 bizcharts 官方文档，建议看完整个流程再跳转首先，安装bizcharts$ npm instal...

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。E:\weii_objct\invoice-manage-web-view>npm start> ant-design-pro@2.1.0 start E:\weii_objct\invoice-manage-web-view> cross-env APP_TYPE=site...

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。自己创建的组件：代码import { Table, Divider, Tag } from 'antd';import React, { Component } from 'react';export default class My_Table extends Component { ...

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。先来一个按钮组件使用的对比，官方文档的(不能直接用)和实际能用的。官网demo:import { Table, Divider, Tag } from 'antd';const columns = [{ title: 'Name', dataIndex: 'name', k...