Vue练习1：组件开发1（头像组件）

博丽七七2024-02-20 20:08

样式预览

注释代码

javascript 复制代码

<template>
  <div 
    class="img-box"
    :style="{                //动态style必须为对象
        width: size + 'rem',
        height: size + 'rem'
    }">
    <img
        class="avatar-img"
        :src="url"    //动态url
    />
  </div>
</template>

<script>
export default {
    props:{    //外部传参
        url:{
            type: String,   //属性必须为字符串
            required: true, //属性必传
        },
        size:{
            type: Number,
        }
    }
}
</script>

<style lang="less" scoped>    //lang="less"    使用less /scoped->局部style
    .img-box{
        display: block;
        border-radius: 50%;
        overflow: hidden;
        img{
            width: 100%; height: 100%;
        }
    }
</style>

可运行代码

javascript 复制代码

<template>
  <div 
    class="img-box"
    :style="{
        width: size + 'rem',
        height: size + 'rem'
    }">
    <img
        class="avatar-img"
        :src="url"
    />
  </div>
</template>

<script>
export default {
    props:{
        url:{
            type: String,   //属性必须为字符串
            required: true, //属性必传
        },
        size:{
            type: Number,
        }
    }
}
</script>

<style lang="less" scoped>
    .img-box{
        display: block;
        border-radius: 50%;
        overflow: hidden;
        img{
            width: 100%; height: 100%;
        }
    }
</style>

引用

javascript 复制代码

import Avatar from "./components/Avatar.vue";
export default {
  components: {
    Avatar,  
  }
}