在vue中封装一个头像的组件

2021-04-24 22:29:12 阅读：229 来源： 互联网

标签：http% vue 封装 3A% 头像 Avatar 2F% 组件 com

需求分析：
1.根据图片路径，展示不同的图片
2.图片大小
在这里插入图片描述
封装组件—》Avatar

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

<script>
export default {
  props: {
    url: {//图片路径
      type: String,
      require: true,
    },
    size: {//图片大小
      type: Number,
    },
  },
};
</script>

<style scoped>
.avatar-img {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
</style>

需要使用Avatar组件的组件页面：-----》App

<template>
  <div id="app">
    <h1>头像展示</h1>
    <!-- 使用组件 -->
    <Avatar :url="avatarImg1" :size="100" />
    <Avatar :url="avatarImg2" :size="200" />
  </div>
</template>

<script>
// 1.引用组件
import Avatar from "./components/Avatar";
export default {
  name: "app",
  data() {
    return {
      avatarImg1:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi2.w.yun.hjfile.cn%2Fdoc%2F201412%2F73c85ef4aca048a3a1b71a88a62a8f2a.jpg&refer=http%3A%2F%2Fi2.w.yun.hjfile.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621859790&t=4bb24af5001f2ed9893959f7315d0625",
      avatarImg2:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201805%2F18%2F20180518171244_kbbkw.thumb.700_0.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621859938&t=7dc32678304952c2adede2865091ba18",
    };
  },
  components: {
    //2.局部注册组件
    Avatar,
  },
};
</script>

标签：http%,vue,封装,3A%,头像,Avatar,2F%,组件,com
来源： https://blog.csdn.net/Kiruthika/article/details/116108493

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

在vue中封装一个头像的组件