FS-UI v0.1.33

Dialog 弹出框

Dialog 组件支持函数调用和组件调用两种形式

代码演示

alert

// 消息提示单行
this.$dialog({
  title: '提示',
  message: '单行提示'
}).then(() => {
  console.log('我确定了')
})

// 消息提示多行
this.$dialog({
  title: '提示',
  showCloseIcon: true, // 此属性可以显示关闭图标
  message: '说明当前状态、提示用户解决方案，最好不要超过两行。'
}).then(() => {
  console.log('我确定了')
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

confirm

// 确认
this.$dialog({
  type: 'confirm',
  message: '说明当前状态、提示用户解决方案，最好不要超过两行。'
}).then(() => {
  console.log('我确定了')
}).catch(() => {
  console.log('我取消了')
})

// 确认-单行
this.$dialog({
  type: 'confirm',
  confirmButtonText: '保存',
  cancelButtonText: '不保存',
  title: '提示',
  message: '消息提示'
}).then(() => {
  console.log('我确定了')
}).catch(() => {
  console.log('我取消了')
})

//确认-多行
this.$dialog({
  type: 'confirm',
  title: '提示',
  message: '说明当前状态、提示用户解决方案，最好不要超过两行。'
}).then(() => {
  console.log('我确定了')
}).catch(() => {
  console.log('我取消了')
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

回调函数

你也可以使用回调函数处理结果，如果使用了callback则无法再同时使用then和catch

this.$dialog({
  title: '提示',
  message: '单行提示'
  callback: res => console.log(res) // res取值：confirm、cancel、close
})
1
2
3
4
5

组件调用

如果需要在弹窗实现更加复杂的交互，可以通过组件的形式来调用

<!-- 消息确认 -->
<fs-dialog v-model="show">
  <fs-input v-model="username" label="用户名" placeholder="请输入用户名">
    <span class="fs-input-prefix" slot="prefix">
      <i class="red">*</i>
    </span>
  </fs-input>
  <fs-input v-model="password" type="password"></fs-input>
</fs-dialog>

<!-- 图片前缀 -->
<fs-dialog v-model="show2" title="标题单行" type="alert" message="说明当前状态、提示用户解决方案，最好不要超过两行。">
  <div slot="prefix" class="dialog-prefix">
    <span class="dialog-close" @click="show2=false"><fs-icon name="error"/></span>
    <img src="https://dummyimage.com/600x400/000/fff" alt="" width="60%">
  </div>
</fs-dialog>

<!-- 自定义footer -->
<fs-dialog v-model="show3" align="left" showCloseIcon title="自定义footer" message="描述文字的字数尽量控制在三行
内，并且单行最右侧尽量不要是
标点符号。。">
  <div slot="footer" class="dialog-customer-footer">
    <a @click.stop="show3=false">取消</a>
    <a @click.stop="show3=false">确定</a>
  </div>
</fs-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

函数参数

参数 说明 类型 默认值
type 提示类型，可选值为 alert comfirm String alert
title 标题 String -
message 内容 String -
showCloseIcon 是否显示关闭icon Boolean false
confirmButtonText 确认按钮的文字 String 确认
cancelButtonText 取消按钮的文字 String 取消
overlay 遮罩层 Boolean true
align 标题和内容的对齐 String 'center'
className 弹出框类名 String -

组件插槽

插槽名 说明
默认插槽 默认slot, 自定义弹窗内容
footer 自定义footer
prefix 在标题之前添加内容

组件属性

参数 说明 类型 默认值
v-model 是否显示弹窗 Boolean -
title 标题 String -
message 内容 String -
callback 底部按钮点击后都会触发执行,使用后无法再用then和catch Function -
showCloseIcon 是否显示关闭icon Boolean -
confirmButtonText 确认按钮的文字 String 确认
cancelButtonText 确认按钮的文字 String 取消
overlay 遮罩层 Boolean true
align 标题和内容的对齐 String 'center'
className 弹出框类名 String -

组件事件

事件 说明
confirm 点击按钮确认时触发
cancel 点击取消按钮时触发
close 关闭icon时触发

← Loading 加载 →