随笔分类 -  Ant Design Vue

摘要:先了解一下滚动事件触发的条件 视图或者一个元素在滚动时,会触发元素的 scroll 事件。 备注: 在 iOS UIWebViews 中,滚动进行时不会触发 scroll 事件;只有当滚动结束后事件才会被触发。 只要某一个元素在滚动,就可以注册滚动事件。 ps:滚动事件不一定要注册的 window 阅读全文
posted @ 2023-02-26 19:04 南风晚来晚相识 阅读(1543) 评论(0) 推荐(0) 编辑
摘要:Vite 按需引入 Ant Design Vue 3.0 第一步下载: npm i unplugin-vue-components -D 需要注意的是:Vite你可以用 unplugin-vue-components 来进行按需加载。 但是此插件无法处理非组件模块,如 message,这种组件需要手 阅读全文
posted @ 2022-08-29 21:01 南风晚来晚相识 阅读(1943) 评论(0) 推荐(0) 编辑
摘要:#### seacrch 表单完成的功能 ``` 1.根据配置json配置项自动生成表单 ok 2.是响应式的排版 ok 3.点击搜索按钮会向上抛出值 ok 4.点击重置按钮会自动清空数据,不需要父组件额外的处理 ok 5.调整按钮靠右,使用flex的填充属性 ok 6.给下拉框绑定了事件 ok 7 阅读全文
posted @ 2022-06-25 14:25 南风晚来晚相识 阅读(209) 评论(0) 推荐(0) 编辑
摘要:栅格系统的设计理念 建议横向排列的盒子数量最多四个,最少一个。 因此我们的span一般设置为3或者4 小屏幕的话就另当别论了 栅格系统的简单介绍 1.通过row在水平方向建立一组column(简写 col) 你的内容应当放置于col内,并且只有col可以作为row的直接元素。 这个非常重要 <a-r 阅读全文
posted @ 2022-06-25 14:19 南风晚来晚相识 阅读(2673) 评论(0) 推荐(0) 编辑
摘要:Select 选择器进行搜索 <template> <div> <a-form-item label="分类:"> <a-select placeholder="请选择" style="width: 320px" v-model:value="formState.sortValue" :showSe 阅读全文
posted @ 2021-11-14 19:38 南风晚来晚相识 阅读(3922) 评论(0) 推荐(0) 编辑
摘要:InputNumber 有值但是验证却不能够通过 今天遇见这样一个问题,InputNumber 输入框中有值 但是却却提示验证不能够通过 后来经过分析,怀疑是数据类型不正确, 后面经过验证,果然是数据类型不正确 正确做法 <template> <div> <a-form ref="formRef" 阅读全文
posted @ 2021-10-11 21:28 南风晚来晚相识 阅读(2430) 评论(0) 推荐(0) 编辑
摘要:表单验证遇见的坑 01 如果你受控数据是这样写的话 const formState= reactive({ youForm:{ youNaNe:'', useSlectValue: '001', date1: undefined, delivery: false, type: [], }, }); 阅读全文
posted @ 2021-09-18 23:28 南风晚来晚相识 阅读(1505) 评论(0) 推荐(0) 编辑
摘要:<template> <div class="clearfix"> {{ fileList }} <a-upload list-type="picture-card" v-model:file-list="fileList" @preview="handlePreview" @change="han 阅读全文
posted @ 2021-09-03 18:20 南风晚来晚相识 阅读(1903) 评论(0) 推荐(0) 编辑
摘要:<a-drawer :title="myTitle" placement="right" :visible="visible" @close="onClose" width="720" :bodyStyle="{ marginBottom: '30px' }" > </a-drawer> :body 阅读全文
posted @ 2021-08-28 17:30 南风晚来晚相识 阅读(3897) 评论(0) 推荐(0) 编辑
摘要:单文件上传 <a-upload name="file" :beforeUpload="beforeUpload" :multiple="false" accept=".xls,.xlsx" :showUploadList="nofalse" class="select-file" :customRe 阅读全文
posted @ 2021-08-27 12:42 南风晚来晚相识 阅读(692) 评论(0) 推荐(0) 编辑
摘要:<template> <a-tree-select v-model:value="value" style="width: 320px" :tree-data="treeData" allow-clear @select="selectHnader" search-placeholder="Plea 阅读全文
posted @ 2021-08-11 22:55 南风晚来晚相识 阅读(3634) 评论(0) 推荐(0) 编辑
摘要:表单验证详解 <template> <!-- 第一个坑 :model="formState.youForm" 一定要写成这样 不要写成:model="formState" :labelCol="{ style: 'width: 100px' }" 控制labe显示宽度 useSlectValue 是 阅读全文
posted @ 2021-08-11 22:49 南风晚来晚相识 阅读(5773) 评论(0) 推荐(0) 编辑
摘要:<template> <a-table :columns="columns" :data-source="data" :row-selection="rowSelection" /> </template> <script lang="ts"> import { defineComponent } 阅读全文
posted @ 2021-08-09 21:12 南风晚来晚相识 阅读(2172) 评论(0) 推荐(0) 编辑
摘要:下载 ui库 yarn add ant-design-vue 默认是全局引入,打包后体积很大, 非常影响首屏加载速度, 按需加载 下载按需加载的插件;推荐使用cnpm cnpm install babel-plugin-import --save-dev 下载在开发环境中 在项目的根目录下创建 ba 阅读全文
posted @ 2021-07-29 12:18 南风晚来晚相识 阅读(9033) 评论(0) 推荐(0) 编辑
摘要:<template> <div> <a-pagination show-quick-jumper v-model:current="current1" :total="500" @change="onChange" /> </div> </template> <script lang="ts"> i 阅读全文
posted @ 2021-07-23 15:31 南风晚来晚相识 阅读(1126) 评论(0) 推荐(0) 编辑
摘要:Ant Design Vue中Table对齐方式显示省略号 <template> <!-- bordered 表示表格中的边框 pagination="false"不要分页 --> <a-table :data-source="dataSource" :columns="columns" :pagi 阅读全文
posted @ 2021-07-23 15:03 南风晚来晚相识 阅读(815) 评论(0) 推荐(0) 编辑
摘要:1.创建子组件 <template> <a-drawer :title="drawerInfo.customTitle" :placement="placement" :closable="drawerInfo.showCloseIcon" :visible="drawerInfo.visible" 阅读全文
posted @ 2021-07-20 12:34 南风晚来晚相识 阅读(2938) 评论(0) 推荐(1) 编辑

点击右上角即可分享
微信分享提示