136 lines
2.6 KiB
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>
|