fs-weapp/dialog

Dialog 弹出框

使用指南

在 app.json 或 index.json 中引入dialog组件

{
  "usingComponents": {
    "fs-dialog": "path/components/dialog/index"
  }
}
1
2
3
4
5

如若需要在js中直接调用，需要js中引入

import Dialog from 'path/components/dialog/dialog'
1

同时需要在wxml中

<fs-dialog id="fs-dialog" bind:close="handleAction"/>
1

代码演示

alert

Dialog({
  type: 'alert',
  title: '提示',
  message: '消息提示'
})
1
2
3
4
5

confirm

Dialog({
   type: 'confirm',
   title: '提示',
   message: '消息确认'
})
1
2
3
4
5

组件的调用方法

 <fs-dialog
  show="{{show1}}"
  type="alert"
  use-slot
  bind:close="handleAction"
  title="提示">
  <slider min="50" max="200" show-value />
</fs-dialog>
1
2
3
4
5
6
7
8

方法

方法名 参数 返回值 说明
Dialog options Promise 展示提示

参数

参数 说明 类型 默认值
type 提示类型，可选值为 alert comfirm String confirm
show 是否显示 Boolean -
title 标题 String 标题
message 内容 String 内容
useSlot 是否使用默认插槽 Boolean -
useSlotFooter 是否使用底部footer插槽 Boolean -
confirmButtonText 确认按钮的文字 String 确认
cancelButtonText 取消按钮的文字 String 取消
showCloseIcon 是否展示关闭按钮 Boolean -
overlay 遮罩层 Boolean true

插槽

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

属性

参数 说明 类型 默认值
type 提示类型，可选值为 alert comfirm String confirm
show 是否显示 Boolean -
title 标题 String 标题
message 内容 String 内容
useSlot 是否使用默认插槽 Boolean -
useSlotFooter 是否使用底部footer插槽 Boolean -
confirmButtonText 确认按钮的文字 String 确认
cancelButtonText 取消按钮的文字 String 取消
showCloseIcon 是否展示关闭按钮 Boolean -
overlay 遮罩层 Boolean true

事件

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

← SwipeCell 滑动单元格 →