Alert 弹出框

弹出提示

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2. "w-alert":"wuss-weapp/w-alert/index",
  3. "w-button":"wuss-weapp/w-button/index",
  4. "w-pane":"wuss-weapp/w-pane/index"
  5. }

视频演示

代码演示

  1. <w-pane title="Alert" desc="弹出框" />
  2. <w-pane desc="Default" />
  3. <w-button bind:onClick="handleClick" type="info">Default</w-button>
  4. <w-pane desc="ButtonColor" />
  5. <w-button bind:onClick="handleClick2" type="info">ButtonColor</w-button>
  6. <w-pane desc="MoreText" />
  7. <w-button bind:onClick="handleClick3" type="info">MoreText</w-button>
  8. <w-alert id="wuss-alert" />
  1. import { Alert } from '../../dist/index';
  2. handleClick() {
  3. Alert({
  4. title: '提示',
  5. content: 'wuss weapp is good',
  6. confirm: () => {
  7. console.log('ok');
  8. },
  9. });
  10. },
  11. handleClick2() {
  12. Alert({
  13. title: 'ButtonColor',
  14. content: '按钮字体颜色是#28a2f3',
  15. buttonColor: '#28a2f3',
  16. });
  17. },
  18. handleClick3() {
  19. Alert({
  20. title: 'MoreText',
  21. content:
  22. '更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字更多文字',
  23. });
  24. },

API

Attribute 属性

属性 说明 类型 默认值
title 标题 string -
content 内容 string -
maskClose 点击遮罩层是否可关闭 boolean false
buttonColor 按钮颜色 string #ff9900
confirm 确定按钮回调 function -

Class 自定义类名

类名 说明
wuss-class 根节点样式类