vw-alert
更新时间：
控件定义：弹窗组件，此组件为应用内主动触发的信息、操作确认弹窗（注意：此组件不包含应用外的系统通知提醒弹窗）
属性
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| title | <string> |
- | 否 | 标题 |
| content | <string> |
- | 是 | 正文 |
| des | <string> |
- | 否 | 副文本/辅助信息 |
| buttons | <Array> |
- | 是 | 按钮 |
buttons Array 类型
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| eventType | <string> |
- | 是 | 按钮点击事件类型。支持自定义事件名，例如 confirm:确定，cancel:忽略 |
| type | <string> |
- | 是 | 按钮类型。plain,primary,success,warning,danger |
| value | <string> |
- | 否 | 按钮文本 |
vw-alert组件示例
基础用法
<template>
<div class="doc-page justify-center">
<vw-alert
title="标题"
content="这是正文这是正文这是正文这是正文"
des="这是副文本副文本这是"
buttons="{{buttonArray}}"
onconfirm="onConfirm"
oncancel="onCancel"
></vw-alert>
</div>
</template>
<script>
export default {
data: {
buttonArray: [
{
eventType: 'confirm',
type: 'primary',
value: '确定'
},
{
eventType: 'cancel',
type: 'primary',
value: '忽略'
}
]
},
onConfirm(data) {
console.log(data)
},
onCancel(data) {
console.log(data)
}
}
</script>
<style lang="less">
.doc-page {
display: flex;
flex-direction: column;
align-items: center;
}
.justify-center {
justify-content: center;
}
</style>
复制代码
