Vue Antdv a-date-picker 手动关闭弹框(自定义Footer)

简介: Vue Antdv a-date-picker 手动关闭弹框(自定义Footer)

Antdva-date-picker 自定义 footer 之后点击按钮 手动关闭 时间弹窗,默认是不支持的,而且通过官方给出的 open 属性也无法做到,因此需要下面的操作:

```
<template>
  <a-range-picker ref="range-picker">
    <template slot="renderExtraFooter">
      <div @click="touchHide">手动关闭</div>
    </template>
  </a-range-picker>
</template>
<script>
export default {
  methods: {
    touchHide () {
      this.$refs['range-picker'].$refs.picker.sOpen = false
    }
  }
}
</script>
```
相关文章
|
21小时前
|
JavaScript 索引
vue 在什么情况下在数据发生改变的时候不会触发视图更新
vue 在什么情况下在数据发生改变的时候不会触发视图更新
10 2
|
1天前
|
JavaScript
vue实现递归组件
vue实现递归组件
|
1天前
|
JavaScript 开发者 UED
Vue入门到关门之第三方框架elementui
ElementUI是一个基于Vue.js的组件库,包含丰富的UI组件如按钮、表格,强调易用性、响应式设计和可自定义主题。适用于快速构建现代化Web应用。官网:[Element.eleme.cn](https://element.eleme.cn/#/zh-CN)。安装使用时,需在项目中导入ElementUI和其样式文件。
|
1天前
|
JavaScript 前端开发 API
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
9 2
|
1天前
|
缓存 JavaScript UED
vue中keep-alive的用法和含义
Vue.js 的 `&lt;keep-alive&gt;` 组件用于缓存不活动的组件实例,避免销毁并优化性能。当组件切换时,状态得以保持。用法是将其作为包裹组件,包含需缓存的组件。例如,在切换 `ComponentA` 和 `ComponentB` 时,利用 `&lt;keep-alive&gt;` 可以在状态间切换而不会丢失信息。此外,结合 `&lt;router-view&gt;` 可缓存路由组件,`include` 和 `exclude` 属性则能指定缓存特定组件,提升应用性能和用户体验。
|
1天前
|
Web App开发 缓存 JavaScript
优化Vue首页加载速度的实用方法
优化Vue首页加载速度的实用方法
8 1
|
7天前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
|
7天前
|
JavaScript
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
|
7天前
|
JavaScript 前端开发
vue组件化开发流程梳理,拿来即用
vue组件化开发流程梳理,拿来即用
|
7天前
|
移动开发 JavaScript 前端开发
Vue Router的介绍与引入
Vue Router的介绍与引入