Vue 父组件向子组件动态传style样式
Posted hahahakc
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 父组件向子组件动态传style样式相关的知识,希望对你有一定的参考价值。
父组件:
DOM部分
<el-table-column prop="img" :label="label" width="180">
<template slot-scope="scope">
<div class="img-wrap">
<img v-lazy="scope.row.album.picUrl" />
<PlayIcon :style="out-style" :inner-size="size"></PlayIcon>
</div>
</template>
</el-table-column>
script部分:
import PlayIcon from ‘@/base/playIcon‘; //引入子组件 export default { props: [‘data‘], components: { PlayIcon }, data() { return { label: ‘‘, tableData: [], outStyle: { width: ‘24px‘, height: ‘24px‘ }, innerSize: { fontSize: ‘14px‘ } }; }, computed: {} };
子组件:
<template>
<div
class="player-icon"
:style="{
width: outStyle.width,
height: outStyle.height,
lineHeight: outStyle.height
}"
>
<span
class="iconfont icon-yousanjiao"
:style="{ fontSize: innerSize.fontSize }"
></span>
</div>
</template>
<script>
export default {
// 这种方式生效了
props: [‘outStyle‘, ‘innerSize‘],
// 这种方式没生效,不知道为什么
// props: {
// outStyle: {
// type: Object,
// default: () => {
// return {
// width: ‘24px‘,
// height: ‘24px‘
// };
// }
// },
// innerSize: {
// type: Object,
// default: () => {
// return {
// fontSize: ‘14px‘
// };
// }
// }
// },
created() {},
data() {
return {};
}
};
</script>
<style lang="scss">
.player-icon {
@include abs-center();
@include round(2.142857rem);
border-radius: 50%;
background-color: rgba($color: #fff, $alpha: 0.5);
text-align: center;
line-height: 24px;
span {
// display: inline-block;
// margin: auto;
// font-size: 1.428571rem;
color: $theme-color;
}
}
</style>
以上是关于Vue 父组件向子组件动态传style样式的主要内容,如果未能解决你的问题,请参考以下文章