![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Ant Design Vue
文章平均质量分 72
DOM曼珠沙华
学如逆水行舟,不进则退
展开
-
Vue实现图片预览(放大缩小拖拽)纯手写
这张图是显示的图片放大的一个预览情况,这里是参考预览操作实现的一个背景为黑色的部分,上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大,代码是基于Ant Design Vue框架的基础上因为我实际数据是后台返回的数据,图片数据均为动态,所以使用的是 :src,这里的file是需要查看这个图片的路径<img:src="file"alt=""@click="handlePhotoShow(file)"/>这里可以在data内定义这个file,方便自己测试,..原创 2021-05-11 11:59:37 · 3532 阅读 · 2 评论 -
Ant Design Vue下载本地文件(其他框架也适用)
这个是需要将会使用到的 不改变的东西下载下来给用户看,比如某个模板文件,只有文件格式类的东西因为vue打包后的文件路径与现在不一致,所以需要把文件存放在public文件夹内,才能保证打包后路径不会改变看代码:<a :href="url.downloadUrl" download="1test.xlsx" style="color: #FFFFFF;">文件下载</a>这里使用a标签直接下载,downloadUrl 是文件的路径,download内存放文件名...原创 2020-09-15 09:38:37 · 4109 阅读 · 0 评论 -
Ant Design Vue日期选择器DatePicker 的 a-range-picker的时间格式及设置日期
简单的日期选择器范围选择日期选择先看效果:这个是初始化时间时展示的样子,每次展示的是当前月份1号到目前日期。实现部分:这一段实现的效果是初始化时设置当前月份一号到目前的日期,然后在重置时删除选择器内的内容,并可以选择修改等<template> <a-card :bordered="false"> <div class="table-page-search-wrapper"> <a-form layout="inl原创 2020-09-14 14:33:53 · 13260 阅读 · 2 评论 -
Ant Design Vue模态框modal去除确认或添加按钮
1.去除确认按钮<template> <a-modal :title="title" :width="950" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" cancelText="关闭"> <template slot="footer"> <a原创 2020-09-14 10:44:26 · 34258 阅读 · 8 评论 -
Ant Design Vue日期选择器DatePicker设置日期格式、获取并设置数据
导入在使用日期选择器前需要先引入momnet:import moment from "moment";import "moment/locale/zh-cn"在引入后使用选择器:<a-date-picker format="YYYY-MM-DD HH:mm:ss" v-decorator="['time',{rules: [{ required: true, message: '请输入时间!' }]}]" :showTime="{ initialValue:原创 2020-08-25 14:36:14 · 33170 阅读 · 9 评论 -
Ant Design Vue给a-form表单赋值及获取表单数据
下面是form表单内的文本输入框,使用了v-decorate进行数据绑定:<a-input placeholder="请输入名称" v-decorator="['name', { rules: [{ required: true, message: '请输入名称!' }] }]"></a-input>原创 2020-08-24 17:24:41 · 36101 阅读 · 10 评论 -
Ant Design Vue实现a-table表格单元格合并(列/行合并)
列合并这里先写一个最简单的列合并实现:这个合并的效果图只截了表格的一部分,左边是需要展示的数据。数据是后台返回的,但是最后的合计数据需要计算并合并展示。实现代码如下:表格数据:<a-table bordered :columns="columns" :data-source="data" :pagination="false" :loading="loading" rowKey="id"></a-table>这里的data为后台返回数据,合并的话需要重点原创 2020-08-24 13:42:21 · 24393 阅读 · 0 评论