56 lines
1.8 KiB
Vue
56 lines
1.8 KiB
Vue
<template>
|
|
<div class="content">
|
|
<tiny-button @click="value1 = !value1" :reset-time="0">显示、关闭事件</tiny-button>
|
|
<tiny-button @click="value2 = !value2" :reset-time="0">确认、取消事件</tiny-button>
|
|
<tiny-button @click="value3 = !value3" :reset-time="0">关闭点击事件</tiny-button>
|
|
<tiny-button @click="value4 = !value4" :reset-time="0">缩放事件</tiny-button>
|
|
|
|
<tiny-modal v-model="value1" type="confirm" show-footer @show="handleShow" @hide="handleHide">
|
|
<p>显示、关闭事件</p>
|
|
</tiny-modal>
|
|
<tiny-modal v-model="value2" type="confirm" show-footer @confirm="handleConfirm" @cancel="handleCancel">
|
|
<p>确认、取消事件</p>
|
|
</tiny-modal>
|
|
<tiny-modal v-model="value3" type="confirm" show-footer @close="handleClose">
|
|
<p>关闭点击事件</p>
|
|
</tiny-modal>
|
|
<tiny-modal v-model="value4" type="confirm" show-footer resize @zoom="handleZoom">
|
|
<p>缩放事件</p>
|
|
</tiny-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { Button as TinyButton, Modal as TinyModal } from '@opentiny/vue'
|
|
|
|
const value1 = ref(false)
|
|
const value2 = ref(false)
|
|
const value3 = ref(false)
|
|
const value4 = ref(false)
|
|
|
|
function handleShow() {
|
|
TinyModal.message({ status: 'info', message: 'show 事件触发了' })
|
|
}
|
|
|
|
function handleHide() {
|
|
TinyModal.message({ status: 'info', message: 'hide 事件触发了' })
|
|
}
|
|
|
|
function handleConfirm() {
|
|
TinyModal.message({ status: 'info', message: 'confirm 事件触发了' })
|
|
}
|
|
|
|
function handleCancel() {
|
|
TinyModal.message({ status: 'info', message: 'cancel 事件触发了' })
|
|
}
|
|
|
|
function handleClose() {
|
|
TinyModal.message({ status: 'info', message: 'close 事件触发了' })
|
|
}
|
|
|
|
function handleZoom() {
|
|
TinyModal.message({ status: 'info', message: 'zoom 事件触发了' })
|
|
}
|
|
</script>
|