vue根据状态和类型返回对应的图片图标封装

vue yekong
/**
* @Author: 858834013@qq.com
* @Name: icons
* @Date: 2022-02-19
* @Desc: 根据状态以及类型返回对应的图标
*/
<template>
  <div class="icons">
    <!--    电话图标-->
    <div class="phone" v-if="type=='phone'">
      <img v-if="!isOnline" src="../../../assets/three/icon_phone.png" alt="">
      <img v-else src="../../../assets/three/icon_phone_active.png" alt="">
    </div>
    <!--    idcard-->
    <div class="idcard" v-else>
      <img v-if="!isOnline" src="../../../assets/three/icon_idcard.png" alt="">
      <img v-else src="../../../assets/three/icon_idcard_active.png" alt="">
    </div>
  </div>
</template>

<script>

export default {
  name: "icons",
  components: {},
  props: {
    // 是否在线
    isOnline: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 类型
    type: {
      type: String,
      default() {
        return 'phone'
      }
    },
  },
  data() {
    return {}
  },
  watch: {},
  mounted() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.icons {
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
}
</style>

喜欢