码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 父组件向子组件动态传style样式

时间:2020-06-17 12:41:24      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:image   border   put   生效   ase   audio   mamicode   inf   inline   

父组件:

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样式

标签:image   border   put   生效   ase   audio   mamicode   inf   inline   

原文地址:https://www.cnblogs.com/hahahakc/p/13151626.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!