98 lines
1.6 KiB
Vue
98 lines
1.6 KiB
Vue
<template>
|
|
<view @tap="showall" :style="{maxHeight:more?'':height + 'px'}" class="_divmore">
|
|
<slot></slot>
|
|
<view v-if="!more" class="_mark" :style="{background:maskbg?'linear-gradient(0deg, '+maskbg+', transparent)':''}">
|
|
<view class="itm" v-if="arrow">»</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
._divmore {
|
|
overflow: hidden;
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
._mark {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
z-index: 1;
|
|
height: 3em;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
|
|
._mark>.itm {
|
|
font-size: 2em;
|
|
color: var(--txt1);
|
|
animation: _slideDown 3s ease-in infinite;
|
|
}
|
|
|
|
@keyframes _slideDown {
|
|
0% {
|
|
transform: rotate(75deg) translateX(-1em);
|
|
opacity: 0;
|
|
}
|
|
|
|
12% {
|
|
transform: rotate(90deg) translateX(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
95% {
|
|
transform: rotate(90deg) translateX(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(110deg) translateX(0.5em);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
emits: ['change'],
|
|
props: {
|
|
height: {
|
|
type: [String, Number],
|
|
default: 100
|
|
},
|
|
maskbg: {
|
|
type: String,
|
|
default: 'var(--bg1)'
|
|
},
|
|
arrow: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
more: false,
|
|
};
|
|
},
|
|
watch: {},
|
|
computed: {},
|
|
mounted() {
|
|
setTimeout(async () => {
|
|
var rect = await this.getrect('._divmore');
|
|
if (rect.height < this.height)
|
|
this.more = true;
|
|
}, 300);
|
|
},
|
|
methods: {
|
|
showall() {
|
|
this.more = true;
|
|
this.$emit('change', true);
|
|
}
|
|
}
|
|
}
|
|
</script> |