vue状态卡片组件

最新推荐文章于 2024-09-04 11:47:08 发布

原创最新推荐文章于 2024-09-04 11:47:08 发布 · 496 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

21 篇文章

订阅专栏

该代码段展示了一个Vue组件，用于创建带有不同状态（如等待、完成、拒绝等）和可配置图标的卡片。组件接受文本、类型、宽度、高度和悬停提示文本作为属性，并根据状态和类型应用相应的颜色和图标。在挂载后，它会调整图标的位置和大小以适应卡片。

在这里插入图片描述

<template>
  <div v-if="popoverText">
    <el-popover
      placement="right"
      trigger="hover"
      popper-class="popper-style"
      :content="popoverText">
      <div slot="reference" :id="'statusCard'+random" class="status-card" :style="{'width':width,'height':height,'borderColor':statusType,'color':statusType}">
        <span>{{ text }}</span>
        <img :id="'icon'+this.random"  v-if="statusIcon" :src="statusIcon">
      </div>
    </el-popover>
  </div>
  <div v-else>
    <div slot="reference" :id="'statusCard'+random" class="status-card" :style="{'width':width,'height':height,'borderColor':statusType,'color':statusType}">
      <span>{{ text }}</span>
      <img :id="'icon'+this.random" v-if="statusIcon" :src="statusIcon">
    </div>
  </div>
</template>

<script>
import doing_icon from '@/assets/img/doing.png'
import finished_icon from '@/assets/img/finished.png'
import waiting_icon from '@/assets/img/waiting.png'
import reject_icon from '@/assets/img/rejected.png'
const iconConfig = {
  'waiting':waiting_icon,
  'finished':finished_icon,
  'reject':reject_icon,
  'doing':doing_icon
}
const typeConfig = {
  'success':'#35B500',
  'info':'#1A315B',
  'danger':'#F4503B',
  'warning':'#E6A23C',
  'primary':'#409EFF'
}
export default {
  name:'su-status-card',
  data(){
    return {
      random:parseInt(Math.random()*1000)
    }
  },
  props:{
    icon:{
      type:String,
      default:''
    },
    type:{
      type:String,
      default:'info'
    },
    text:{
      type:String,
      default:''
    },
    width:{
      type:String,
      default:'100%'
    },
    height:{
      type:String,
      default:'100%'
    },
    popoverText:{
      type:String,
      default:''
    }
  },
  computed:{
    statusIcon(){
      return iconConfig[this.icon]
    },
    statusType(){
      return typeConfig[this.type]
    }
  },
  mounted(){
    this.setIconStyle()
    console.log('执行',this.text);
  },
  methods:{
    setIconStyle(){
      this.$nextTick(()=>{
        const $card = document.getElementById('statusCard'+this.random)
        const cardHeight = $card.offsetHeight
        const height = cardHeight*0.65
        if (this.statusIcon) {
          const $icon = document.getElementById('icon'+this.random)
          $icon.style.height = height + 'px'
          $icon.style.top = -(height/2) + 'px'
          $icon.style.right = -(height/2) + 'px'
          $card.style.margin = `${height/2}px 0`
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.status-card{
  border: 1px solid ;
  position: relative;
  img{
    position: absolute;
    top: 0;
    right: 0;
  }
}
.test{
  background-color: red;
}
</style>