- 配合之前的公共组件一次注入
- 组件封装
<template>
<!-- 决定组件的宽高 -->
<div class="xtx-skeleton shan" :style="{ width: width + 'px', height: height + 'px' }">
<!-- 决定组件的背景色 -->
<div class="block" :style="{ backgroundColor: bg}"></div>
</div>
</template>
<script>
export default {
// 全局的注入必写名称
name: 'XtxSkeleton',
props: {
// 宽度定制
width: {
type: Number,
default: 100
},
// 高度定制
height: {
type: Number,
default: 60
},
// 背景颜色定制
bg: {
type: String,
default: '#ccc'
}
}
}
</script>
<style scoped lang="less">
.xtx-skeleton {
display: inline-block;
position: relative;
overflow: hidden;
vertical-align: middle;
.block {
width: 100%;
height: 100%;
border-radius: 2px;
}
}
.shan {
&::after {
content: "";
position: absolute;
animation: shan 1.5s ease 0s infinite;
top: 0;
width: 50%;
height: 100%;
background: linear-gradient(
to left,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-45deg);
}
}
@keyframes shan {
0% {
left: -100%;
}
100% {
left: 120%;
}
}
</style>
3.组件使用 (使用组件封装的名称即可)
<XtxSkeleton
:width="50"
:height="20"
bg="rgba(31, 160, 255,0.2)"
style="margin-right: 5px"
/>