tiny-vue_version0/examples/sites/demos/mobile/app/exception/mobileexception.vue

136 lines
2.6 KiB
Vue

<template>
<div class="tiny-mobile-exception-demo">
<div v-if="!gits">
<div class="page__hd">
<h1 class="page__title">ExceptionTip</h1>
<p class="page__desc">异常提示</p>
</div>
<tiny-button
@click="
() => {
gits = !gits
types = 'noperm'
}
"
type="primary"
size="large"
style="margin-bottom: 20px"
>无权限</tiny-button
>
<tiny-button
@click="
() => {
gits = !gits
types = 'nodata'
}
"
size="large"
style="margin-bottom: 20px"
>无数据</tiny-button
>
<tiny-button
@click="
() => {
gits = !gits
types = 'build'
}
"
type="primary"
size="large"
style="margin-bottom: 20px"
>模块建设中</tiny-button
>
<tiny-button
@click="
() => {
gits = !gits
types = 'busy'
}
"
size="large"
style="margin-bottom: 20px"
>系统繁忙</tiny-button
>
<tiny-button
@click="
() => {
gits = !gits
types = 'weaknet'
}
"
type="primary"
size="large"
style="margin-bottom: 20px"
>网络中断</tiny-button
>
<tiny-button
@click="
() => {
gits = !gits
types = 'pcview'
}
"
size="large"
style="margin-bottom: 20px"
>提醒用户PC查看文件</tiny-button
>
<tiny-button
@click="
() => {
gits = !gits
types = 'nodata'
}
"
type="primary"
size="large"
>404页面</tiny-button
>
</div>
<tiny-exception :type="types" v-if="gits">
<template #content>
<div>content插槽</div>
</template>
<template #footer>
<div>
<tiny-button @click.stop="gits = !gits" plain size="large">返回</tiny-button>
</div>
</template>
</tiny-exception>
</div>
</template>
<script lang="jsx">
import { Exception, Button } from '@opentiny/vue'
export default {
components: {
TinyButton: Button,
TinyException: Exception
},
data() {
return {
gits: false,
types: ''
}
}
}
</script>
<style>
.page__hd {
padding: 40px;
}
.page__title {
font-weight: 400;
font-size: 21px;
text-align: left;
}
.page__desc {
margin-top: 5px;
color: #888;
font-size: 14px;
text-align: left;
}
</style>