按钮 Popconfirm

点击元素,弹出气泡式的确认框

基本使用

气泡确认框的基本用法

自定义按钮

自定义按钮的文字。通过 okText 设置确认按钮文案,cancelText 设置取消按钮文案

关闭前拦截

取消,确认拦截器。传入属性 onBeforeCancel 拦截取消行为。onBeforeOk 拦截确认行为。拦截函数可直接返回boolean或者promise。返回值false为拦截,不emit事件。反之则校验通过,执行emit事件

弹出位置

支持 12 个不同的方位。分别为:上左(tl)、上(top)、上右(tr)、下左(bl)、下(bottom)、下右(br)、左上(lt)、左(left)、左下(lb)、右上(rt)、右(right)、右下(rb)。

确认框类型

通过 type 属性可以设置确认框类型,type 可选值 primary、success、warning、strong、danger

插槽

通过 content 插槽自定义渲染内容

双向绑定

可以使用v-model实现双向绑定

API

Attributes

属性名描述类型默认值
content气泡确认框的内容string`-
v-model双向绑定。不设置会用内部默认状态booleanfalse
width气泡确认框大小string | number200
disabled是否禁用booleanfalse
type气泡确认框的类型primary | success | warning | strong | danger | danger
position气泡确认框弹出位置top | tl | tr | bottom | bl | br | left | lt | lb | right | rt | rbtl
okText确认按钮文案string确认
cancelText删除按钮文案string取消
onBeforeOk点击确认按钮前拦截() => boolean | Promise<boolean>-
onBeforeCancel点击取消按钮前拦截() => boolean | Promise<boolean>-
popupClass弹框添加自定义类名string-

Events

事件名描述函数类型
ok点击确认按钮触发(e:Event) => void
cancel点击取消按钮触发(e:Event) => void
change当绑定值变化时触发的事件(val:boolean) => void

Slots

name描述scoped
content气泡确认框的内容-

最后更新时间: