u
This commit is contained in:
oneao committed
1 parent
b547c12390
commit
c280cbf961
18 files changed
+524
-213
No files matched your search
@@ -1,145 +1,111 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { useMessage } from '@ao/ao-design'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const placements = [
|
||||
'top',
|
||||
'top-start',
|
||||
'top-end',
|
||||
'right',
|
||||
'right-start',
|
||||
'right-end',
|
||||
'bottom',
|
||||
'bottom-start',
|
||||
'bottom-end',
|
||||
'left',
|
||||
'left-start',
|
||||
'left-end',
|
||||
] as const
|
||||
const message = useMessage()
|
||||
|
||||
return { placements }
|
||||
},
|
||||
})
|
||||
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,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
style="height: 300px; overflow: auto; border: 1px solid #ccc; padding: 20px;"
|
||||
>
|
||||
<div style="height: 600px; position: relative;">
|
||||
<APopup
|
||||
trigger="click" placement="top" auto-fit-popup-min-width content="你好"
|
||||
>
|
||||
<AButton status="primary" style="margin-top: 44px;">
|
||||
测试
|
||||
</AButton>
|
||||
</APopup>
|
||||
<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>
|
||||
<div class="demo-circle">
|
||||
<h3>12方向Popup示例</h3>
|
||||
<div class="circle-container">
|
||||
<div
|
||||
v-for="placement in placements"
|
||||
:key="placement"
|
||||
class="circle-item"
|
||||
:class="placement"
|
||||
|
||||
<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"
|
||||
>
|
||||
<APopup trigger="click" :placement="placement" content="1234567891">
|
||||
<button>{{ placement }}</button>
|
||||
</APopup>
|
||||
</div>
|
||||
Show No Close
|
||||
</AButton>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<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('error')">
|
||||
error
|
||||
</AButton>
|
||||
<AButton status="primary" @click="showMessageType('loading')">
|
||||
loading
|
||||
</AButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.demo-circle {
|
||||
padding: 40px;
|
||||
.demo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.circle-container {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: 1px dashed #ccc;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 每个方向的按钮位置 */
|
||||
.circle-item {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* 上 */
|
||||
.circle-item.top {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.circle-item.top-start {
|
||||
top: 0;
|
||||
left: 25%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.circle-item.top-end {
|
||||
top: 0;
|
||||
left: 75%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* 右 */
|
||||
.circle-item.right {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.circle-item.right-start {
|
||||
top: 25%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.circle-item.right-end {
|
||||
top: 75%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* 下 */
|
||||
.circle-item.bottom {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.circle-item.bottom-start {
|
||||
bottom: 0;
|
||||
left: 25%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.circle-item.bottom-end {
|
||||
bottom: 0;
|
||||
left: 75%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* 左 */
|
||||
.circle-item.left {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.circle-item.left-start {
|
||||
top: 25%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.circle-item.left-end {
|
||||
top: 75%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user