- 博客(25)
- 收藏
- 关注
原创 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关注的人