search

arco-design / arco-design-vue

A Vue.js 3 UI Library based on Arco Design
https://arco.design/vue
MIT License
2.65k stars 514 forks source link

对话框Modal在使用函数调用时设置closable=true不显示取消按钮 #2001

Open suinxinliulang opened 1 year ago

suinxinliulang commented 1 year ago

Basic Info

What is expected?

希望closable=true时，可以正常显示取消按钮

Steps to reproduce

  1. 使用const modal = getCurrentInstance()?.appContext.config.globalProperties.$modal;导入Modal
  2. 然后进行如下配置 
    modal?.warning({
title: '退出登录',
content: '确认退出登录吗？',
width: 150,
closable: true,
cancelText: '取消',
onOk: () => {},
});
  3. 此时页面上的Modal只有确认按钮没有取消按钮 image
yinkaihui commented 1 year ago

试试 hideCancel: false

suinxinliulang commented 1 year ago

试试 hideCancel: false

谢谢，这个可以，但是closable=true之后貌似左上角的X按钮也是没有出来的呢

yinkaihui commented 1 year ago

试试 hideCancel: false

谢谢，这个可以，但是closable=true之后貌似左上角的X按钮也是没有出来的呢

这个是两种不同的 UI 形式，默认通过静态函数创建的 modal 是 simple 模式，用在消息提醒或者二次确认这种场景，没有 close 按钮。 close icon 在 simple =false的时候才会显示

zhuziyi1989 commented 3 months ago

试试 hideCancel: false

文档中写的个hideCancel默认是false，所以应该不写这个配置，就会显示取消按钮，但实际上不写就不显示哦，或许默认是 true