# Feedback 反馈组件
# 一、Message 消息提示
| 属性 | 说明 | 类型 | 默认值 |
|---|
| message | 消息文字 | string、VNode、(() => VNode) | — |
| type | 消息类型 | 'success'、'warning'、'info'、'error' | 'info' |
| duration | 显示时间，单位为毫秒。 设为 0 则不会自动关闭 | number | 3000 |
| show-close | 是否显示关闭按钮 | boolean | false |
| center | 文字是否居中 | boolean | false |
| on-close | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — |
<template>
<div>
<el-button @click="open">消息提示</el-button>
</div>
</template>
<script>
import { ElMessage } from 'element-plus'
export default({
setup() {
const open = () => {
ElMessage('消息提示1');
ElMessage({
message : '消息提示2',
type : 'success',
});
ElMessage({
message : '消息提示3',
type : 'warning',
duration : 0,
showClose : true,
center : true,
onClose : function (){
console.log('关闭消息框');
}
});
}
return {
open
}
}
})
</script>
# 二、Dialog 对话框
# 1、对话框属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| v-model | 是否显示 Dialog | boolean | — | — |
| title | Dialog 的标题， 也可通过具名 slot 传入 | string | — | — |
| width | Dialog 的宽度 | string、number | — | 50% |
| top | Dialog CSS 中的 margin-top 值 | string | — | 15vh |
| modal | 是否需要遮罩层 | boolean | — | true |
| draggable | 为 Dialog 启用可拖拽功能 | boolean | — | false |
| fullscreen | 是否为全屏 Dialog | boolean | — | false |
| center | 是否让 Dialog 的 header 和 footer 部分居中排列 | boolean | — | false |
<template>
<div>
<el-button @click="open">弹框</el-button>
<el-dialog v-model="dialog" title="弹框" width="30%" top="50px" :modal="false" draggable>
<span>这是弹框内容</span>
</el-dialog>
<el-dialog v-model="dialog" title="弹框" fullscreen>
<span>这是弹框内容</span>
</el-dialog>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default({
setup() {
const data = reactive({
dialog : false
});
const open = () => {
data.dialog = true;
}
return {
...toRefs(data),
open
}
}
})
</script>
# 2、对话框插槽
| 插槽名 | 说明 |
|---|
| — | Dialog 的内容 |
| header | 对话框标题的内容；会替换标题部分，但不会移除关闭按钮。 |
| footer | Dialog 按钮操作区的内容 |
<template>
<div>
<el-button @click="dialog = true">添加</el-button>
<el-dialog v-model="dialog" title="添加">
<el-form :model="form" label-width="120px">
<el-form-item label="姓名">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="form.phone" />
</el-form-item>
<el-form-item label="账户">
<el-input v-model="form.account" />
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password" show-password />
</el-form-item>
</el-form>
<template #header="{ close, titleId, titleClass }">
<div>
<h4>自定义头部 {{close}} {{titleId}} {{titleClass}}</h4>
<el-button type="danger" @click="close">
关闭
</el-button>
</div>
</template>
<template #footer>
<span>
<el-button @click="dialog = false">取消</el-button>
<el-button type="primary" @click="dialog = false">确定</el-button>
</span>
</template>
<template #default>
<el-form :model="form" label-width="120px">
<el-form-item label="姓名">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="form.phone" />
</el-form-item>
<el-form-item label="账户">
<el-input v-model="form.account" />
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password" show-password />
</el-form-item>
</el-form>
</template>
</el-dialog>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default({
setup() {
const data = reactive({
dialog : false,
});
const form = reactive({
name : '',
phone : '',
account : '',
password : ''
});
return {
...toRefs(data),
form
}
}
})
</script>
