forked from opentiny/tiny-vue
54 lines
1.7 KiB
Vue
54 lines
1.7 KiB
Vue
<template>
|
|
<div class="content">
|
|
<tiny-button @click="baseClick1" :reset-time="0">单按钮无标题</tiny-button>
|
|
<tiny-button @click="baseClick2" :reset-time="0">单按钮有标题</tiny-button>
|
|
<tiny-button @click="baseClick3" :reset-time="0">单按钮有标题多行</tiny-button>
|
|
<tiny-button @click="baseClick4" :reset-time="0">双按钮有标题</tiny-button>
|
|
<tiny-button @click="baseClick5" :reset-time="0">双按钮无标题</tiny-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="jsx">
|
|
import { Button, Modal, Notify } from '@opentiny/vue'
|
|
|
|
export default {
|
|
components: {
|
|
TinyButton: Button
|
|
},
|
|
methods: {
|
|
baseClick1() {
|
|
Modal.alert({ message: '单行居中对齐，多行居左对齐', showHeader: false, tiny_mode: 'mobile' })
|
|
},
|
|
baseClick2() {
|
|
Modal.alert({ message: '单行居中对齐，多行居左对齐', title: '标题', tiny_mode: 'mobile' })
|
|
},
|
|
baseClick3() {
|
|
Modal.alert({
|
|
message:
|
|
'单行居中对齐，多行居左对齐,单行居中对齐，多行居左对齐单行居中对齐，多行居左对齐单行居中对齐，多行居左对齐',
|
|
title: '标题',
|
|
tiny_mode: 'mobile'
|
|
})
|
|
},
|
|
baseClick4() {
|
|
Modal.confirm({ message: '您确定要删除吗？', tiny_mode: 'mobile' }).then((res) => {
|
|
Notify({
|
|
type: 'info',
|
|
title: '触发回调事件',
|
|
message: `点击${res}按钮`
|
|
})
|
|
})
|
|
},
|
|
baseClick5() {
|
|
Modal.confirm({ message: '您确定要删除吗？', showHeader: false, tiny_mode: 'mobile' }).then((res) => {
|
|
Notify({
|
|
type: 'info',
|
|
title: '触发回调事件',
|
|
message: `点击${res}按钮`
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|