120 lines
2.6 KiB
Vue
120 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { useMessage } from '@ao/ao-design'
|
|
|
|
const message = useMessage()
|
|
|
|
function showMessage(placement: any) {
|
|
message.success({
|
|
message: `这里是 ${placement} 提示`,
|
|
placement,
|
|
})
|
|
}
|
|
function closeOne() {
|
|
const handle = message.success({
|
|
message: '测试',
|
|
duration: 0,
|
|
showClose: true,
|
|
})
|
|
}
|
|
|
|
function showMessageType(type: any) {
|
|
message.success({
|
|
message: `这里是 ${type} 提示`,
|
|
type,
|
|
duration: 0,
|
|
theme: 'light',
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo">
|
|
<div class="row">
|
|
<AButton status="primary" @click="showMessage('top-start')">
|
|
Top Start
|
|
</AButton>
|
|
<AButton status="primary" @click="showMessage('top')">
|
|
Top
|
|
</AButton>
|
|
<AButton status="primary" @click="showMessage('top-end')">
|
|
Top End
|
|
</AButton>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<AButton status="primary" @click="showMessage('left')">
|
|
Left
|
|
</AButton>
|
|
<AButton status="primary" @click="showMessage('center')">
|
|
Center
|
|
</AButton>
|
|
<AButton status="primary" @click="showMessage('right')">
|
|
Right
|
|
</AButton>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<AButton status="primary" @click="showMessage('bottom-start')">
|
|
Bottom Start
|
|
</AButton>
|
|
<AButton status="primary" @click="showMessage('bottom')">
|
|
Bottom
|
|
</AButton>
|
|
<AButton status="primary" @click="showMessage('bottom-end')">
|
|
Bottom End
|
|
</AButton>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<AButton status="primary" @click="message.closeAll">
|
|
Close All
|
|
</AButton>
|
|
|
|
<AButton
|
|
status="primary" @click="closeOne"
|
|
>
|
|
Show No Close
|
|
</AButton>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<AButton status="primary" @click="showMessageType('default')">
|
|
default
|
|
</AButton>
|
|
<AButton status="primary" @click="showMessageType('info')">
|
|
info
|
|
</AButton>
|
|
<AButton status="primary" @click="showMessageType('success')">
|
|
success
|
|
</AButton>
|
|
<AButton status="primary" @click="showMessageType('warning')">
|
|
warning
|
|
</AButton>
|
|
<AButton status="primary" @click="showMessageType('danger')">
|
|
error
|
|
</AButton>
|
|
<AButton status="primary" @click="showMessageType('loading')">
|
|
loading
|
|
</AButton>
|
|
<AButton status="primary" @click="showMessageType('question')">
|
|
question
|
|
</AButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.demo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
</style>
|