是谁的心儿啊-CSDN博客

原创 antd-vue 树改变前面图标（完全实现自定义图标）

问题我们在用antd-vue树的数据时想要自定义改变数据展开关闭的图标，除了默认的样式，我们在用一些api改变时效果总是不近人意，现在用css可以完全实现自定义图标的改变，根据需求来引用有的可能并不适配仅作参考上代码// 树形引用 <a-tree :treeData="treeData" :showIcon="false" :showLine="true" >样式改变<style>// 关闭时的图标::v-de

2021-11-15 15:04:31 4303 1

原创 vue3的路由(vue-router@4XX)版本的使用

前提：最近学习vue3 对应的路由也随之升级vue2 对应的路由在vue3中使用会出问题，所以学习vue3时对应的路由创建引入也需要进行变化1 安装版本（后续小版本还会更新大家自由安装） "vue": "^3.2.16", "vue-router": "^4.0.12"2：首先创建路由// 引入vue-router的两个api,// createRouter创建路由，createWebHashHistory 采用hash模式， createWebHistory...

2021-11-12 11:25:57 1737

原创前端超链接下载文件和iframe下载文件

超链接下载文件就是用a标签下载文件非常简单下面是封装的一个下载的组件的代码，仅供参考<template> <a ref="link" :href="url" :download="fileName" /></template><script>export default { name: 'HDownload', props: { hrefUrl: { type: String,

2021-09-29 15:58:29 4346 3

原创 vue判断滚动条是否触底（触底增加数据）

html部分<div id="scro" style="height:300px;overflow: auto;" > <a-table style="margin-top:20px;background:#fff" :columns="columns" :dataSource="dataSource" :customRow="customRow" :pagination="false"> </a-table

2021-08-04 11:25:40 2823

原创图片简单的拖拽排序（vue，接近原生）

项目需求做一个图片上传并且能够进行拖拽排序，项目中有引入了高德地图api起初用的是vueDraggable，但是每次点击地图后整个页面的vueDraggable的拖拽功能失效了，无奈自己写了写，大体功能实现了但是没有插件的动画效果那么好html部分 <div class="mylist" :draggable="false" v-for="(item, index)

2021-08-03 16:22:14 580 2

原创 antd-vue 表格拖拽相关（转载的）

<template> <div class="approvalStyle"> <draggle v-model="draggleList" @end="end" @start="start"> <transition-group> <div class="listStyle" v-for="item in draggleList" :key="item.value">{{ item.name }}</.

2021-07-15 16:34:54 934

原创配合后端有个orderNumber的排序

1 引用vueDraggable组件2主要关注orderNum的改变3给后端传值是传改变项的iid和orderNum<template> <div class="approvalStyle"> <draggle v-model="draggleList" @end="end" @start="start"> <transition-group> <div class="listStyle" v-...

2021-07-15 16:31:52 656

原创图片转base64的步骤

2021-07-10 10:51:10 260

原创 antd-design-vue上传组件（upLoad）使用总结

项目需求中总是会有上传图片文件等功能，现在有时间正好做下简单总结一般常用的几个属性就是fileList,customRequest,multiple,showUploadList,before常用事件就是change1、multiple 这个就是在选择文件的时候是否能够多选，设置为true可以多选，不必多说2、showUploadList 这个属性如果设置为 :showUploadList=false的话，就是不展现上传后的列表就是这个列表将不做展...

2021-07-10 10:21:06 16329 2

原创关于moment的常用api

moment数据，时间戳，和常用时间的相互转换1 、moment数据-->时间戳valueOf()方法同Date对象一样，如果获得的momen数据只需要调用valueOf即可举例 let data= item.valueOf()2、moment数据-->正常格式数据用format()举例：let data=moment(item).format('YYYY-MM-DD')3、时间戳-->moment数据直接调用即可举例: letdata=...

2021-07-09 14:30:02 1265 1

原创使用antd-vue 的a-table自定义展开图标并且异步展开（展开图标点开两次才生效的问题解决）

1 a-table自定义展开图标需求是展开图标换成这个样子可以利用a-table的expandIcon属性具体使用如下 <a-table v-if="isRouterAlive" style="margin-top:20px" :columns="columns" :data-source="matterList" :expandIcon="customExpandIcon" ...

2021-06-26 14:37:06 5985 2

原创 vue 组件的深度刷新

遇到的问题？假如一关于一个组件的属性或者数据进行改变了，vue没有进行页面刷新或者重绘，可以用this.$nextTick()完美解决<a-table v-if="isReview"></a-table><script> export default{ data(){ return{ isReview:true } }, methods:{ async reSet{

2021-06-26 13:55:35 382

原创 vue 在工作中的一些的小功能总结

1 把大数三个为一组分开举例 123456=>123,456可以加一个过滤器 filters: { showNumber: (showCount) => { return Number(showCount).toLocaleString() } },

2021-05-31 14:09:40 60

原创 antd-design-vue a-ranger-picker 部分功能的项目总结

antd-vue使用方面小功能总结1 a-range-picker<a-range-picker :disabled-date="disabledDate" v-model="priceRangeDate" @calendarChange="calendarPriceRangeChange" @change="changePriceRangeDate" > <a-icon slot="su

2021-05-31 14:03:22 1426

原创关于 vue2中vue-router的学习总结

关于 vue2中vue-router的学习总结1安装： yarn add vue-router2 页面结构: import Vue from 'vue' import VueRouter from 'vue-router' const routers=new Router({ mode:"hashRouter", routes:[ {path:"/",component:()=>import('./../home'}, { path

2021-04-09 16:11:20 95

原创 vue slot插槽匿名插槽，具名插槽，和作用域插槽

首先需要理解的是插槽的作用就是在调用组件的时候，让两标签之间的内容显示出来，举例来说我们有一个 childe组件引入到父组件中 <Child> </Child>,默认如果在两个标签内加内容，他是不显示的比如<Child><div>是谁的心儿啊</div> </Child> 渲染出来 div里的内容是不会显示的，这时候插槽的作用就显现出来了匿名插槽（默认插槽）声明子组件 Child<template> &

2021-03-29 15:17:11 171

原创 ly-tab的使用

vue 手机端插件 ly-tab这个插件对于手机端编写导航很是方便先看效果使用方法非常的简单第一步 install ly-tab第二步在vue里引入，一般在 mian.js 引入可供全局使用 import LyTab from ''ly-tab" Vue.use(LyTab)第三步在组件中使用 <ly-tab v-model="selectedId" :items="items" :options="options" @change="han

2021-03-19 14:42:50 4034 1

原创 antd 的RangePicker 返回后端的数据如何格式化

antd 的RangePicker 返回后端的数据如何格式化通过FormItem包裹的RangePicker返回后端数据还不是标准的需要的数据是这样的Moment {_isAMomentObject: true, _isUTC: false, _pf: {…}, _locale: Locale, _d: Tue Mar 02 2021 11:47:32 GMT+0800 (中国标准时间), …}要想返回后端需要的格式我们可以引入moment组件然后item= moment(item).forma

2021-03-14 12:24:55 1582

原创如何在ant 的表单Form.Item下获取自定义表单元素的值

如何在ant 的表单Form.Item下获取自定义表单元素的值有时我们会遇到开发需求一个FormITem下有多个表单项的值需要获取，这时候我们就需要自定义表单元素，来获取，举例来说假如我一个Form.Item有多个表单项 <FormItem name="select",label="多个选择"> <Select> <Option label="漩涡鸣人" value="xuanwo"> 漩涡鸣人</Option>

2021-03-08 22:17:20 4603

原创 antdDesign select一些api的理解

关于antd组件Select的api的用法1 defaultValue defaultValue 文档看起来比较简单，但是当你动态赋值的时候会发现defaultValue不起作用，原因就是react渲染机制引起的，那么怎么解决这个问题呢？ 1 我查百度常说的是把 defaultValue 换成 value 但是Select 组件当换成value 属性时再下拉选择，选择内容不在会改变，所以这个方法并不适用 2 对于这个问题可一个Select 设置一个 key值，根据diff算法，key值不同会重

2021-03-04 10:32:46 1166 1

原创 antd Design Form表单的简单理解

关于react+ant的运用配合的学习心得，还是新手各位大佬见谅1 对于普通的开发需求来说（仅仅限于类组件）引入Form关于Form 有以下几种常用属性<Form ></Form>(1) initialValues 这个属性是设置 Form.Item 的初始值，，当然还可以在Form.Item里设置每个表单项的初始值，但是官方推荐的还是在Form 里设置用法来说 initialValues 是一个对象比如你的表单项是这样的<Form initialValue

2021-03-02 23:56:11 1255

原创 2021-03-02

antdDesign 的Form 如何获取FormItem 里为类似于的值只需要在Form.Item里加一个valuePropName的值上代码 <FormItem wrapperCol={{"span":"12"}} name="rememeber" valuePropName="checked"> <Checkbox>记住密码</Checkbox> </FormItem>..

2021-03-02 16:09:34 53

原创如何在create-react-app 不调用eject命令修改webpack配置使其支持less

如何在create-react-app 不调用eject命令修改webpack配置（尤其是想运用less配合antd进行后台开发）举例配置less来说第一点安装这个插件yarn add customize-cra react-app-rewired --save-dev第二点修改packjson的启动命令“start”: “react-app-rewired start”,“build”: “react-app-rewired build”,“eject”: “react-scripts

2021-02-24 22:25:10 468

dashinihao的博客