cnbugs/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-06-11 12:49:30 +08:00
Code Issues Activity

v1.0.0-beta 源码正式开源

Browse Source
This commit is contained in:
小莫唐尼
2022-12-06 15:08:29 +08:00
commit 636ae7b169
461 changed files with 116817 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tm-vuetify/components/tm-skeleton/tm-skeleton.vue
+94
View File
@@ -0,0 +1,94 @@
<template>
<view class="tm-skeleton fulled">
<view v-if="model=='card'">
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class=" tm-skeleton-card"></view>
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class="tm-skeleton-item my-24"></view>
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class="tm-skeleton-item my-24" style="width: 60%;"></view>
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class="tm-skeleton-item my-24" style="width: 30%;"></view>
</view>
<view v-if="model=='cardActions'">
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class=" tm-skeleton-card"></view>
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class="tm-skeleton-item my-24"></view>
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class="tm-skeleton-item " ></view>
<view class="flex-between">
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class="tm-skeleton-item my-24" style="width: 40%;"></view>
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class="tm-skeleton-item my-24" style="width: 15%;"></view>
</view>
</view>
<view v-if="model=='list'">
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class="tm-skeleton-item my-24" style="width: 60%;"></view>
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class="tm-skeleton-item my-24" ></view>
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class="tm-skeleton-item my-24" ></view>
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class="tm-skeleton-item my-24" style="width: 30%;"></view>
</view>
<view v-if="model=='listAvatr'" class="flex-top-start">
<view style="width: 100rpx;height: 100rpx;" :class="[$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class="rounded flex-shrink mr-32"></view>
<view class="fulled">
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class="tm-skeleton-item mb-24" style="width: 60%;"></view>
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class="tm-skeleton-item my-24" ></view>
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class="tm-skeleton-item my-24" ></view>
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class="tm-skeleton-item my-24" style="width: 30%;"></view>
</view>
</view>
<view v-if="model=='grid'" class="flex-top-start flex-wrap">
<view v-for="(item,index) in 16" :key="index" style="width: 25%;">
<view :class="[`round-${round}`,$tm.vx.state().tmVuetify.black ? 'black bk' : '',color]" class="tm-skeleton-item ma-12" style="height: 80rpx;"></view>
</view>
</view>
</view>
</template>
<script>
/**
* 骨架加载器
* @property {String} model = [card|cardActions|list|listAvatr|grid] 默认card类型
* @property {Number} round = [] 默认6，圆角
* @property {String} color = [] 默认grey-lighten-3，背景色
*/
export default {
name:"tm-skeleton",
props:{
model:{
type:String,
default:'card',//card,cardActions,list,listAvatr,listAvatr,grid
},
round:{
type:Number|String,
default:6
},
color:{
type:String,
default:'grey-lighten-3'
}
},
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
.tm-skeleton{
animation: ssy 1s ease infinite;
.tm-skeleton-card{
height: 300rpx;
}
.tm-skeleton-item{
height: 40rpx;
}
}
@keyframes ssy{
0%{
opacity: 0.4;
}
50%{
opacity: 1;
}
100%{
opacity: 0.4;
}
}
</style>