- 博客(25)
- 收藏
- 关注
RSS订阅原创 ant-design-vue时间控件初始值赋值及日期可选范围设置实现
ant-design-vue框架中时间控件dataPicker默认初始值为当天，有两种书写方式1、created钩子中初始值赋值，注意：只有在created钩子中赋初始值才能实现，created () { this.form.getFieldDecorator('discloseDate', { initialValue: moment(new Date()) }) },2、直接在DOM中赋初始值：<a-form-item label="披露日期"> &
2021-08-23 11:03:36
3404
原创 Redux-thunk和Redux-saga中间件用法
Redux-thunk是Redux最常用的插件Redux-thunk插件应用场景：比如在Dispatch一个Action之后，到达reducer之前，进行一些额外的操作，就需要用到middleware（中间件）。在实际工作中你可以使用中间件来进行日志记录、创建崩溃报告，调用异步接口或者路由。 这个中间件可以使用是Redux-thunk来进行增强，它就是对Redux中dispatch的加强。1、安装redux-thunknpm install --save redux-thunk2、配置re
2021-07-30 17:55:06
231
原创 react-redux实现TodoList小案例
React-Redux是一个React生态中常用组件，它可以简化Redux流程。（需要注意的是概念：React、Redux、React-redux是三个不同的东西）1、安装react-redux依赖npm install --save react-redux2、<Provider>提供器<Provider>是一个提供器，只要使用了这个组件，组件里边的其它所有组件都可以使用store了，这也是React-redux的核心组件了3、connect连接器如何简
2021-07-26 10:07:41
388
原创 vuex actions异步修改状态
actions类似于mutations，不同在于：Action提交的是mutation，而不是直接变更状态；Action可以包含任意异步操作，Action函数接受一个与store实例具有相同方法和属性的 context对象，因此你可以调用context.commit提交一个mutation，或者通过context.state 和context.getters来获取state和getters。Action 通过store.dispatch方法触发：store.dispatch('increment')
2021-07-23 09:54:41
960
1
原创 redux 工作中小技巧-改写TodoList
写Redux Action的时候，我们写了很多Action的派发，产生了很多Action Types，如果需要Action的地方我们就自己命名一个Type,会出现两个基本问题：（1）这些Types如果不统一管理，不利于大型项目的复用，设置会产生冗余代码。（2）因为Action里的Type，一定要和Reducer里的type一一对应在，所以这部分代码或字母写错后，浏览器里并没有明确的报错，这给调试带来了极大的困难。技巧一：把Action Type单独拆分出一个文件。在src/store文件夹下
2021-07-21 11:08:45
60
原创 react redux基础与应用
Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用（SPA）开发日趋复杂，JavaScript需要管理比任何时候都要多的state（状态），Redux就是降低管理难度的。（Redux支持React，Angular、jQuery甚至纯JavaScript）...
2021-07-19 10:51:12
185
2
原创 vuex getters计算过滤操作
vuex的Getters特性（store的计算属性，多组件复用）getters可以对state进行计算操作，它就是store的计算属性 虽然在组件内也可以做计算属性，但是getters可以在多组件之间复用 如果一个状态只在一个组件内使用，是可以不用gettersgetters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑，相当于对数据的一个过滤和加工。可以把它看作store.js的计算属性。getters基本用法比如我们现在要对store.js文件中的count进行一个计.
2021-07-16 11:13:03
362
原创 vuex state访问状态对象
vuex是一个专门为vue.js设计的集中式状态管理架构状态：在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。vuex有5种属性，分别是：state、getters、mutations、actions、modulesvuex的state特性（数据源）（1）Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data（2）state里面存放的数据是响应式的，Vue组件...
2021-07-13 09:05:34
338
原创 vuex mutations修改状态
vuex的Mutation特性（改变store中状态的唯一方法、执行同步操作）改变store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。$store.commit( )Vuex提供了commit方法来修改状态<template> <di..
2021-07-12 13:58:20
432
原创 vue-router编程式导航
编程式导航，就是在业务逻辑代码中实现导航。this.$router.go(-1) 和 this.$router.go(1)这两个编程式导航的意思是后退和前进，功能跟我们浏览器上的后退和前进按钮一样，这在业务逻辑中经常用到。（1）router.go(-1)代表着后退，我们可以让我们的导航进行后退，并且我们的地址栏也是有所变化的。（2）router.go(1)代表着前进，用法和后退一样（3）router.push('/xxx')这个编程式导航的作用就是跳转到指定路径页面<temp
2021-07-12 09:30:59
118
原创 vue-router路由中的钩子
路由配置文件中的钩子函数 （beforeEnter）可以直接在路由配置文件（/src/router/index.js）中写钩子函数。但是在路由文件中只能写一个beforeEnter,就是在进入此路由配置时。{ path:'/params/:newsId(\\d+)/:newsTitle', component:Params, beforeEnter:(to,from,next)=>{ console.log('我进入了params模板');
2021-07-12 09:19:22
294
原创 vue-router详解-配置子路由（2）
子路由的情况一般用在一个页面有它的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式。下面举一个简单的例子：在Hi页面的下面新建两个子页面，分别是 “Hi页面1” 和 “Hi页面2”，来实现子路由。在app.vue页面新增导航页面：Hi页面1、Hi页面2 <p>导航： <router-link to="/">首页</router-link> | <router-link to="/hi">Hi页面</rou
2021-07-09 16:00:34
788
原创 vue-router详解-基础使用（1）
路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。vue项目中无法直接用<a></a>标签编写链接，因为用Vue做的都是单页应用，就相当于只有一个主的index.html页面，所以你写的<a></a>标签是不起作用的，必须使用vue-router来进行管理。通过vue-cli脚手架创建vue项目之后，创建的时候可以选择安装vue-router插件
2021-07-09 13:34:47
125
原创 vue slot插槽基本使用（1）
slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。slot的使用需要两步：1、在HTML的组件中用slot属性传递值。2、在组件模板中用标签接收值。slot例子代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script type="text/javascript" src
2021-07-09 10:24:45
157
原创 vue Mixins混入选项操作
Mixins一般有两种用途：1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。Mixins的基本用法：我们现在有个数字点击递增的程序，假设已经完成了，这时我们希望每次数据变化时都能够在控制台打印出提示：“数据发生变化”。<!DOCTYPE html><html lang="en"><head> <meta cha
2021-07-08 14:42:30
214
原创 vue extends扩展选项用法
extends通过外部增加对象的形式，对构造器进行扩展。和mixins比较类似，用法如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script type="text/javascript" src="./assets/js/vue.min.js"></script> <meta http-equiv="X-UA-.
2021-07-08 14:27:25
252
原创 antd Select组件下拉框选项选中之后，设置allowClear，清除不生效
antd Select组件下拉框选项选中之后，设置allowClear属性之后，清除不生效，需要手动去清除，发现是Select下拉框同时设置了value和allowClear属性，之前有问题的代码如下export function FiccAutoComplete(props) { const [options, setOptions] = useState([]); // 略微消除抖动 const onSearch = useRef( util.debounce(async s
2021-06-23 09:12:41
7817
原创 事件循环机制
1、定义先执行主任务，把异步任务放入循环队列当中，等待主任务执行完，再执行队列中的异步任务。异步任务先执行微观任务，再执行宏观任务。一直这样循环，反复执行，就是事件循环机制。...
2021-06-21 14:56:21
346
原创 antd Modal的getContainer设置为false，会导致Modal里面Select下拉框会随鼠标移动与下拉框分离
antd Modal中getContainer={false}设置之后，会导致Modal里面Select下拉框会随鼠标移动与下拉框分离ru
2021-06-16 09:59:06
5710
原创 一个页面有两个Tab栏，tab中protable设置固定列及滚动条，横向移动滚动条会导致表头和表身错位问题。
antd Table/ proTable组件columns设置固定列fixed之后，横向移动滚动条会导致表头和表身错位问题
2021-06-02 09:42:54
2252
1
原创 Table嵌套子表格展示数据无法及时更新
Table嵌套子表格，在Table父表格操作列点击添加附件，通过可扩展expandable={{ expandedRowRender }}方法，展示添加成功的附件：之前问题：添加附件成功之后，子表格展示数据无法及时更新，子表格Table里面的dataSource数据是正确的原因：子表格Table中数据没有一个唯一对应的字段，需要对数据进行处理，加上一个唯一标识的属性：...
2021-06-01 15:05:45
1255
原创 vue： v-model实现反选、全选、全不选小案例
最近学习vue，基于v-model用法，做了一个反选、全选、全不选对的小案例vue.js文件是直接从vue官网下载下来，放在了assets文件夹下面，可以直接引用使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script type="text/javascript" src="./assets/js/vue.js"></scrip
2021-05-21 17:32:08
815
原创 resetFields()重置表单至初始值方法不生效
问题描述：antd + rc-form中使用resetFields()重置表单至初始值方法不生效？问题分析：查找好多资料，后来发现是form表单没有关联起来form表单没有关联起来，可以在组件定义的时候，通过下面代码将form表单关联起来//form表单关联const [form] = Form.useForm();....// 返回React中Form组件 return ( <Form form={form}> ......
2021-05-19 17:01:45
2040
原创 rc-form中getFieldDecorator()和getFieldError()如何获取form的值以及校验提示
通过rc-form创建表单，如何使用getFieldDecorator()和getFieldError()获取表单对应的值以及提示的校验信息显示问题1、引入rc-form中的元素import React, { useRef } from "react";import { createForm, formShape } from 'rc-form';import { Select, Form } from "antd";import { Dispatch } from "dva";impor
2021-05-19 16:46:14
1780
原创 Git 命令：改文件名，大小写改不成功问题解决
如果需要将index.js文件修改为Index.js，在一次没有修改成功的条件下，第二次只改文件的大小写，需要通过git add . 和 git status 命令1、index.js文件修改为aindex.js，然后使用git add . 将其贮存。2、接着将文件修改为Index.js，再次使用git add . 将其贮存。3、可以通过 git status看到文件名的变化。中间的aindex.js只是用来桥接的，并不会产生真正的提交记录，只有最后的那个会产生一条rename记录。.
2021-05-19 16:25:42
1097
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人