您的当前位置:首页>全部文章>文章详情

【Vue】Antd Pro Vue的使用(九) —— 抽屉a-drawer的操作按钮设置

CrazyPanda发表于:2024-05-10 16:56:59浏览:329次TAG:

在antd pro vue2中,a-drawer默认是没有操作按钮的,只有右上角的关闭'X'号,需要自己配置提交和取消按钮

提交方法对应@submit方法,取消方法对应@close方法(a-model对应的取消方法是@cancel),都是父页面传过来的方法

<a-drawer
    :title="model ? '编辑类型' : '新建类型'"
    :width="720"
    :visible="visible"
    :confirmLoading="loading"
    @submit="() => { $emit('submit') }"
    @close="() => { $emit('close') }"
  >
  <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-button :style="{ marginRight: '8px' }" @click="() => { $emit('close') }">
        取消
      </a-button>
      <a-button type="primary" @click="() => { $emit('submit') }">
        提交
      </a-button>
    </div>
  </a-drawer>

效果如下

无标题.png

猜你喜欢

【Vue】Antd Pro Vue的使用(二)—— 全局配置及登录
1. 默认语言设置&nbsp;Antd Pro Vue安装好之后,默认使用的是英文,我们需要把它设置为中文简体。找到/src/core/bootstrap.js文件,把最后一行 en-US 修改为 zh-CN,然后一定要清除浏览器缓存,修改才能生效修改后修改后的页面2. 请求服务端接口Antd Pro Vue封装好的有请求方法,在/src/api/文件夹,我们把自己的接口写到这里面就可以任意调用。Antd Pro Vue安装好之后,默认使用的是mock数据,我们要使用自己的接口,要把mock去掉
发表于:2024-04-25 浏览:460 TAG:
【VUE】Vue3 实现文件预览 Word Excel pdf 图片 视频等格式 大全!!!!
先上效果图&nbsp;&nbsp;插件安装先说 word 文件是docx-preview插件&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; excel文件是用&nbsp;xlsx 插件&nbsp; &nbsp;&nbsp;介绍后端返回的数据因为在拦截器处 做了对数据的处理 最后你调接口拿到的数据是 一个对象 里面包含:url :&nbsp;blob对象转换的用于访问Blob数据的临时链接。这个链接可以被用于在网页中展示二进制数据,比如显示图像或者播放音视频文件blobs:&amp;
发表于:2023-12-28 浏览:294 TAG:
【Vue】vue怎么转换时间格式
在 Vue.js 中,使用过滤器是一种转换时间格式的便捷方式。以下是如何完成此操作:使用 moment.js 库:安装 moment.js 库:npm install --save moment在 Vue 组件中导入 moment.js:import moment from &#39;moment&#39;使用 moment.js 的 format 方法转换时间格式:const&nbsp;formattedTime&nbsp;=&nbsp;moment(timestamp).format(&amp;#3
发表于:2024-05-19 浏览:277 TAG:
【Vue】Vue 前后端分离部署方案
方案 1:Docker创建两个 Docker 容器,一个用于后端,一个用于前端。在后端容器中运行 API 代码。在前端容器中运行 Vue 应用程序并将其打包为静态文件(如 HTML、CSS 和 JS)。方案 2:Nginx 代理安装 Nginx Web 服务器作为反向代理。将后端 API 路由到 Nginx。Nginx 将前端静态文件提供给客户端。方案 3:Node Express使用 Node Express 作为后端框架,它可以将静态文件与 API 路由一起托管。在 Express 应用程序
发表于:2024-05-19 浏览:248 TAG:
【Vue】Vue中字符串数组和对象常用方法介绍
在Vue中,数组和字符串是我们最常处理的数据类型。Vue提供了响应式系统,可以自动跟踪数组和对象的变化,并响应式地更新DOM。在Vue中,您可以像在任何JavaScript应用程序中一样操作这些数据类型。下面时整理的Vue中字符串 数组 以及对象的常用操作方法。一.数组方法1.增删改: unshift、push、splice、shift、pop、splice、slice&nbsp;1.1.unshift:在数组的头部添加内容//&nbsp;数组.unshift(&quot;添加的值&quot;)
发表于:2024-05-08 浏览:281 TAG:
【Vue】Vue中使用Vuex管理全局状态详解和示例
vue.js是一种流行的前端框架,它提供了很多方便的功能,但当应用变得越来越复杂时,我们很快就会发现向子组件传递大量数据变得非常困难。这就是为什么vuex在vue中变得如此重要的原因。vuex是一个全局状态管理器,使得数据和状态的共享变得更容易。在本文中,我们将深入了解vuex的工作原理并演示如何将其集成到您的vue应用程序中。什么是VuexVuex是一个用于Vue.js应用程序的状态管理模式和库,常用于解决跨层级、多组件、多页面共享状态问题。它将应用程序的状态集中存储到一个单一的store中,
发表于:2024-04-29 浏览:310 TAG:
【Vue】Vue定义全局变量的方法
在Vue项目中我们需要使用许多的变量来维护数据的流向和状态,这些变量可以是本地变量、组件变量、父子组件变量等,但这些变量都是有局限性的。在一些场景中,可能需要在多个组件中共享某个变量,此时全局变量就派上了用场。定义全局变量的方法1. 使用Vue.prototype定义全局变量通过在 vue 的原型上定义属性,可以在所有组件中访问该属性。在main.js定义全局变量// main.jsVue.prototype.baseUrl = &quot;https://www.example.com/api
发表于:2024-04-22 浏览:352 TAG:
【Vue】Vue的生命周期
Vue的生命周期指的是 Vue 实例从创建到销毁的整个过程。这个过程可以分为以下几个阶段:1. 创建前阶段 (beforeCreate):在实例初始化后执行,此时的数据监听和事件绑定机制都未完成,因此无法访问DOM节点。2. 创建后阶段 (created):Vue实例已经创建,数据侦听、计算属性、方法、事件/侦听器的回调函数已配置完毕,但挂载阶段还没开始,仍然无法获取到DOM元素。适合进行异步请求等操作。3. 挂载前阶段 (beforeMount):完成了DOM的初始化,但仍然无法获取到具体的D
发表于:2024-04-22 浏览:293 TAG:
【Vue】前端框架 Vue3框架 使用总结(一) Vue框架的基础使用
目录一、Vue3框架基础1、创建项目2、项目结构3、Vue基础语法4、组件之间通信5、组合式api二、VueRouter的基础使用1、安装2、使用案例3、完整案例步骤4、调优-路由懒加载三、Vuex数据管理1、实现案例&nbsp;2、更改store状态,同步操作3、store中的计算属性4、redux里的异步操作Action5、模块化管理四、网络请求Vue3官方文档:Vue.js - 渐进式 JavaScript 框架 | Vue.js基础部分见官方文档一、Vue3框架基础1、创建项目安装yar
发表于:2023-12-05 浏览:781 TAG:
【Vue】Vue常用框架介绍
现在的应用基本都是前后端分离,在国内,Vue相对来说更受欢迎一些,我们很多后端系统的前端都是Vue来开发的。那么Vue UI框架就显得尤为重要。Vue UI框架提供了一套丰富的用户界面组件及完整的前端UI解决方案,如按钮、表单、导航、布局等,使得开发者可以专注于业务逻辑开发,而不用从零构建这些常用的界面元素,帮助开发者更快速地构建高质量的用户界面。那么,都有哪些开源的UI框架呢?Element UIElement UI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的组件库,提供了丰富的
发表于:2024-04-22 浏览:430 TAG: