Confirm 确认框

使用指南

在 page.json 中引入组件

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

视频演示

代码演示

  1. <w-pane title="Confirm" desc="确认框" />
  3. <w-pane desc="Default" />
  4. <w-button type="info" bind:onClick="handleClick1" >Confirm</w-button>
  6. <w-pane desc="ButtonColor" />
  7. <w-button type="info" bind:onClick="handleClick2" >Confirm2</w-button>
  9. <w-pane desc="ButtonText" />
  10. <w-button type="info" bind:onClick="handleClick3" >Confirm3</w-button>
  12. <w-pane desc="ShowCancel = False" />
  13. <w-button type="info" bind:onClick="handleClick4" >Confirm3</w-button>
  16. <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. },

css

API

Attribute 属性

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

Event 事件

事件名 说明 参数

Slot 插槽

名称 说明

Class 自定义类名

| 类名 | 说明 | | ————— | —————— |