Confirm 确认框

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2. "w-confirm": "wuss-weapp/w-confirm/index",
  3. }

视频演示

代码演示

  1. <w-pane title="Confirm" desc="确认框" />
  2. <w-pane desc="Default" />
  3. <w-button type="info" bind:onClick="handleClick1" >Confirm</w-button>
  4. <w-pane desc="ButtonColor" />
  5. <w-button type="info" bind:onClick="handleClick2" >Confirm2</w-button>
  6. <w-pane desc="ButtonText" />
  7. <w-button type="info" bind:onClick="handleClick3" >Confirm3</w-button>
  8. <w-pane desc="ShowCancel = False" />
  9. <w-button type="info" bind:onClick="handleClick4" >Confirm3</w-button>
  10. <w-confirm id="wuss-confirm" />
  1. import { Confirm } from '../../dist/index';
  2. handleClick1() {
  3. Confirm({
  4. title: '警告',
  5. content: '你确定要删除吗?',
  6. confirm: () => { console.log('confirm') },
  7. cancel: () => { console.log('cancel') },
  8. })
  9. },
  10. handleClick2() {
  11. Confirm({
  12. title: '你变了',
  13. content: '你变绿了',
  14. cancelTextColor: '#55b2f0',
  15. confirmTextColor: 'green',
  16. })
  17. },
  18. handleClick3() {
  19. Confirm({
  20. title: '提示',
  21. content: '你爱我吗?',
  22. cancelText: '忘了爱',
  23. confirmText: '爱',
  24. cancelTextColor: '#999',
  25. confirmTextColor: 'red',
  26. confirm: () => { console.log('confirm') },
  27. cancel: () => { console.log('cancel') },
  28. })
  29. },
  30. handleClick4() {
  31. Confirm({
  32. title: '提示',
  33. showCancel: false,
  34. content: '你只能点确定',
  35. })
  36. },

API

Attribute 属性

属性说明类型默认值
title标题string-
content内容string-
cancelText取消按钮文本string取消
confirmText确定按钮文本string确定
cancelTextColor取消按钮文本颜色string#333333
confirmTextColor确定按钮文本颜色string#ff9900
showCancel是否展示取消按钮booleantrue
confirm确定按钮回调function-
cancel取消按钮回调function-

Event 事件

事件名说明参数

Slot 插槽

名称说明

Class 自定义类名

类名说明