在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部 代码如下: <a-select v-model="queryParam.status"> <a-select-option :value="0">全部</a-select-option> <a-select-option :value="2">正常</a-select-o…

写在前面 时间真快,转眼又是新的一年.随着前后端技术的不断更新迭代,尤其是前端,在目前前后端分离开发模式这样的一个大环境下,交互性.兼容性等传统的开发模式已经显得有些吃力.之前一直用的是react,随着后面钩子的加入更让人爱不释手,但是整个团队需要更新技术,这里选择了更容易上手的Vue(这里的容易上手并没有歧义,指的是更容易适应),也相信Vue3.0发布后会更好,毕竟没有大公司的限制.选择Vue后很纠结,看了几个框架基本都缺少很多组件.需要自己造轮子.后面决定使用Ant Design Vue(P…

开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜欢可以先跳过. 缺点 灵活性肯定是没有了,封装的还是有些过度,灵活度大大降低,没有使用slot,想加点啥目前是不可能的,等以后需要了再说,毕竟这个项目才刚刚开始. (为啥缺点只有一条?那不那啥吗,基于ant design vue封装的,他们都那么强大了,还能有啥缺点?封装后除了失去灵活性还能差啥?)…

使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软件及框架版本 vue 2.6.11 ant-design-vue 1.7.1 moment.js(日期转换依赖) 设计思路 使用组件库的a-calendar标签可以实现一个日历的基本框架 每日模块实现交易日.非交易日的区分显示 以及过期和当日的日期灰色显示,且不能切换交易状态 将来的日期可以点击使用…

一.集成Ant Design Vue npm install ant-design-vue@2.0.0-rc.3 --save 兼容性 Ant Design Vue 2.x 支持所有的现代浏览器. 如果需要支持 IE9+,你可以使用 Ant Design Vue 1.x & Vue 2.x. 对于 IE 系列浏览器,需要提供 es5-shim 和 es6-shim 等 Polyfills 的支持. 二.组件的使用 官网地址: https://2x.antdv.com/docs/vue/getti…

Ant Design框架中不同的组件访问不同的models中的数据 本文记录了我在使用该框架的时候踩过的坑,方便以后查阅. 一.models绑定 在某个组件(控件或是页面),要想从某个models中获取数据,则必须在@connect中进行绑定,不管这个models是在同包下还是别的包下.因为每个models的namespace具有唯一性,所以可以任意绑定: @connect(({ activity, stadiumList, loading }) => ({ activity, stadiumL…

Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant Design官方文档 先来看需求是怎样的,以及实现的效果 需求:管理某个场馆中的活动,可以对这个场馆进行加入活动和移出活动. 如图,初始进入到这个页面后,韵苑体育馆中有两个活动:活动1.活动5,其余活动在右边的框中(不属于该场馆).选中右边框中的活动,可以进行移入操作.选中左边的活动,可以进行移出活…

安装 Ant Design Vue 时报错: npm install ant-design-vue --save ant-design-vue @ latest(sha1-qsf / gCIFcRYxyGmOKgx7TmHf1z4 =)的npm WARN tarball tarball数据似乎已损坏. 再尝试一次. 问题分析:当前最新版本为 1.7.2 (2020-11-06),可能是安装链接失效,尝试安装低一级的版本. 原本以为是当前用的npm下载链接是国内镜像taobao的原因,改为npm后…

layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue开发.在开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导入,这时就需要修改一下它的源码.在看过它的源码后,发现需要修改的地方只有两处, 源码中已经暴露了一个全局变量layer,故只需在脚本末尾处添加 export default layer; 这表示将这个全…

layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导入,这时就需要修改一下它的源码.在看过它的源码后,发现需要修改的地方只有两处, 源码中已经暴露了一个全局变量layer,故只需在脚本末尾处添加 export default layer; 这表示将这个全局变量导出. 然后在文件中找到下面的代码注释掉,这段代码是为layer添加样式的,但使用的路径不对…