forked from opentiny/tiny-vue
55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<template>
|
|
<div>
|
|
<tiny-button @click="boxVisibility = true"> 右侧弹窗 </tiny-button>
|
|
<tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息" modal-append-to-body>
|
|
<template #title>
|
|
<div class="header">
|
|
<span class="title">标题区</span>
|
|
<icon-help-circle class="icon"></icon-help-circle>
|
|
</div>
|
|
</template>
|
|
<span>半屏弹窗内容</span>
|
|
<template #footer>
|
|
<tiny-button type="primary" @click="boxVisibility = false"> 确 定 </tiny-button>
|
|
<tiny-button plain @click="boxVisibility = false"> 取消 </tiny-button>
|
|
</template>
|
|
</tiny-dialog-box>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="jsx">
|
|
import { Button, DialogBox } from '@opentiny/vue'
|
|
import { iconHelpCircle } from '@opentiny/vue-icon'
|
|
|
|
export default {
|
|
components: {
|
|
TinyButton: Button,
|
|
TinyDialogBox: DialogBox,
|
|
IconHelpCircle: iconHelpCircle()
|
|
},
|
|
data() {
|
|
return {
|
|
boxVisibility: false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.header .title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
line-height: 1.5;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.header .icon {
|
|
margin-top: 2px;
|
|
font-size: 16px;
|
|
}
|
|
</style>
|