现实问题
实现思路
Vue3 + TS 实现代码
此样例中的 background 也是通过传入的两个变量计算渐变获得。
组件代码如下:
<template>
<!-- ref绑定 -->
<div ref="card" class="card-container">
</div>
</template>
<style lang="scss" scoped>
.card-container {
width: v-bind(width); // 绑定width
border-radius: 8px;
background: v-bind(background); // 绑定background
}
</style>
<script lang="ts" setup>
import { ref, onMounted, Ref, computed } from 'vue';
const props = defineProps({
// 传入高度
width: {
type: String,
default: '200px'
},
// 背景渐变开始的颜色
beginColor: {
type: String,
default: '#4996FF'
},
// 背景渐变结束的颜色,用于linear-gradient
endColor: {
type: String,
default: '#358CFF'
}
})
// 绑定HTML元素
const card: Ref<null> | Ref<HTMLElement> = ref(null);
// computed绑定传入宽度
const width = computed(() => {
return props.width;
})
// computed 计算背景
const background = computed(() => {
return `linear-gradient(104.37deg,${props.beginColor} 4.7%, ${props.endColor} 100%)`;
})
onMounted(() => {
if(!card.value ) return
// 获取渲染完成的元素宽度
const nowWidth = (card as Ref<HTMLElement>).value.clientWidth;
// 更改元素高度,此处比例 16 : 9
(card as Ref<HTMLElement>).value.style.height = `${nowWidth / 16 * 9}px`;
})
</script>
代码效果
测试代码:
<template>
<div class="width-fit-cards">
<div v-for="(item,index) in 4" :style="{width: `${(index + 1) * 100}px`}" class="width-card" >
<width-fit-card width="100%"/>
</div>
</div>
</template>
<style lang="scss" scoped>
.width-fit-cards {
display: flex;
.width-card + .width-card {
margin-left: 20px;
}
}
</style>
<script lang="ts" setup>
// 引入组件
import widthFitCard from './widthFitCard.vue';
</script>
测试效果
Vue2怎么实现
Vue2通过以下代码绑定CSS样式:
computed: {
getCardStyle() {
return {
width: this.width
}
}
}
<div :style="getCardStyle" ref="card" class="card-container">
</div>
具体可以自行实现