当前位置：首页 > news >正文

前端element-ui组件库el-card卡片【hover效果与点击事件(点击无效用@click.native=““)解决】

news 来源：原创 2024/5/20 21:17:40

🚀作者简介

主页：水香木鱼的博客

专栏：后台管理系统

能量：🔋容量已消耗1%，自动充电中…

笺言：用博客记录每一次成长，书写五彩人生。

📒技术聊斋

在这里插入图片描述

（1）展示template

使用el-card时，会导致点击事件失效，用 @click.native=""可解决问题。

    <div class="conter">
      <el-card
        shadow="hover"
        class="shapeHand gradualChangeOne"
        @click.native="getResearch()"
      >
        <svg
          t="1663832401172"
          class="icon svg"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5063"
        >
          <path
            d="M387.9 117.9h229.7v101.9H387.9z"
            fill="#ffffff"
            p-id="5064"
          ></path>
          <path
            d="M624.6 226.7H380.9V110.9h243.7v115.8z m-229.7-14h215.7v-87.9H394.9v87.9z"
            fill="#ffffff"
            p-id="5065"
          ></path>
          <path
            d="M215.3 373.1h-14V161.9h184.6v14H215.3zM804.3 373.1h-14V175.9H621.6v-14h182.7zM804.3 904.9h-603V504h14v386.9h575V504h14z"
            fill="#ffffff"
            p-id="5066"
          ></path>
          <path
            d="M285.3 373.1h-14V199.7h46.1v14h-32.1zM734.3 373.1h-14V213.7h-32.1v-14h46.1zM734.3 842.5h-463V504h14v324.5h435V504h14z"
            fill="#ffffff"
            p-id="5067"
          ></path>
          <path
            d="M502.8 500.8l-62.2-62.2 62.2-62.2 62.2 62.2-62.2 62.2z m-42.4-62.2l42.4 42.4 42.4-42.4-42.4-42.4-42.4 42.4zM809.1 485h-92.8v-92.8h92.8V485z m-78.8-14h64.8v-64.8h-64.8V471z"
            fill="#ffffff"
            p-id="5068"
          ></path>
          <path
            d="M558 431.6h168.8v14H558zM285.7 431.6h168v14h-168z"
            fill="#ffffff"
            p-id="5069"
          ></path>
          <path
            d="M450.2 592.6h-81.8V443.7h14v134.9h67.8zM637.1 592.6H558v-14h65.1V443.7h14zM495.8 623.4h14v102.1h-14z"
            fill="#ffffff"
            p-id="5070"
          ></path>
          <path
            d="M656.1 200.1h14v13.1h-14zM335.8 200.1h14v13.1h-14z"
            fill="#ffffff"
            p-id="5071"
          ></path>
          <path
            d="M354.6 279.4h107.7v14H354.6zM473.8 279.4H651v14H473.8zM543.3 315H651v14H543.3zM354.6 315h177.2v14H354.6zM442.7 144.8h14v41.1h-14zM478.1 144.8h14v41.1h-14zM513.5 144.8h14v41.1h-14zM548.9 144.8h14v41.1h-14z"
            fill="#ffffff"
            p-id="5072"
          ></path>
          <path
            d="M502.79 386.286l52.255 52.255-52.254 52.255-52.255-52.255z"
            fill="#ffffff"
            p-id="5073"
          ></path>
          <path
            d="M502.8 500.8l-62.2-62.2 62.2-62.2 62.2 62.2-62.2 62.2z m-42.4-62.2l42.4 42.4 42.4-42.4-42.4-42.4-42.4 42.4z"
            fill="#ffffff"
            p-id="5074"
          ></path>
          <path
            d="M802.106 399.19v78.8h-78.8v-78.8z"
            fill="#ffffff"
            p-id="5075"
          ></path>
          <path
            d="M809.1 485h-92.8v-92.8h92.8V485z m-78.8-14h64.8v-64.8h-64.8V471z"
            fill="#ffffff"
            p-id="5076"
          ></path>
          <path
            d="M463.4 776.9v-76.8c0-0.6 0.4-1 1-1h76.8c0.6 0 1 0.4 1 1v76.8c0 0.6-0.4 1-1 1h-76.8c-0.6 0-1-0.4-1-1z"
            fill="#ffffff"
            p-id="5077"
          ></path>
          <path
            d="M541.2 784.9h-76.8c-4.4 0-8-3.6-8-8v-76.8c0-4.4 3.6-8 8-8h76.8c4.4 0 8 3.6 8 8v76.8c0 4.4-3.6 8-8 8z m-70.8-14h64.8v-64.8h-64.8v64.8z"
            fill="#ffffff"
            p-id="5078"
          ></path>
          <path
            d="M555.332 551.985v69h-105.2v-69z"
            fill="#ffffff"
            p-id="5079"
          ></path>
          <path
            d="M562.3 627.9H443.2v-83h119.2v83z m-105.1-14h91.2v-55h-91.2v55z"
            fill="#ffffff"
            p-id="5080"
          ></path>
          <path
            d="M245.7 438.6m-45.2 0a45.2 45.2 0 1 0 90.4 0 45.2 45.2 0 1 0-90.4 0Z"
            fill="#ffffff"
            p-id="5081"
          ></path>
          <path
            d="M245.7 490.8c-28.8 0-52.2-23.4-52.2-52.2s23.4-52.2 52.2-52.2 52.2 23.4 52.2 52.2-23.4 52.2-52.2 52.2z m0-90.4c-21.1 0-38.2 17.1-38.2 38.2s17.1 38.2 38.2 38.2 38.2-17.1 38.2-38.2-17.1-38.2-38.2-38.2z"
            fill="#ffffff"
            p-id="5082"
          ></path>
        </svg>
        <p class="stitle">模型推理</p>
        <div class="wire"><i></i></div>
      </el-card>
      <el-card
        shadow="hover"
        class="shapeHand gradualChangeTwo"
        @click.native="getHigh()"
      >
        <svg
          t="1663833369353"
          class="icon svg"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7149"
        >
          <path
            d="M768 682.666667h-85.333333v-128h213.333333v128h-85.333333v128h-42.666667v-128z m85.333333-170.666667h-42.666666V298.666667H170.666667v469.333333h384v42.666667H128V256h725.333333v256z m-298.666666 85.333333v42.666667H170.666667v-42.666667h384z m-384-170.666666h640v42.666666H170.666667v-42.666666z m42.666666-85.333334h42.666667v42.666667H213.333333V341.333333z m85.333334 0h42.666666v42.666667H298.666667V341.333333z m-85.333334 170.666667h42.666667v42.666667H213.333333v-42.666667z m85.333334 0h42.666666v42.666667H298.666667v-42.666667z m-85.333334 170.666667h42.666667v42.666666H213.333333v-42.666666z m85.333334 0h42.666666v42.666666H298.666667v-42.666666z m384 85.333333h42.666666v42.666667h-42.666666v-42.666667z m-85.333334 0h42.666667v42.666667h-42.666667v-42.666667z m128-170.666667v42.666667h128v-42.666667h-128z"
            fill="#ffffff"
            p-id="7150"
          ></path>
        </svg>
        <p class="stitle">云边端协同</p>
        <div class="wire"><i></i></div>
      </el-card>
      <el-card
        shadow="hover"
        class="shapeHand gradualChangeThree"
        @click.native="getResou()"
      >
        <svg
          t="1663833458734"
          class="icon svg"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="9220"
        >
          <path
            d="M314.24 867.84h403.626667v21.333333H314.24zM864.853333 753.066667H165.333333a87.68 87.68 0 0 1-87.68-87.68V201.386667a87.68 87.68 0 0 1 87.68-87.68h699.52a87.68 87.68 0 0 1 87.68 87.68v464a87.68 87.68 0 0 1-87.68 87.68zM165.333333 135.04a66.346667 66.346667 0 0 0-66.346666 66.346667v464a66.346667 66.346667 0 0 0 66.346666 66.346666h699.52a66.346667 66.346667 0 0 0 66.346667-66.346666V201.386667a66.346667 66.346667 0 0 0-66.346667-66.346667z"
            fill="#ffffff"
            p-id="9221"
          ></path>
          <path
            d="M504.32 742.4h21.333333v129.28h-21.333333zM679.253333 612.906667l-83.84-168.746667h-73.386666l-39.04 86.4-73.6-228.693333-126.506667 200.96-58.666667-58.666667H88.32v-21.333333h144.64l46.08 46.08 136.746667-217.173334 70.613333 219.52 21.76-48.426666h100.48l59.946667 120.746666 20.266666-126.72h252.8v21.333334h-234.666666l-27.733334 174.72z"
            fill="#ffffff"
            p-id="9222"
          ></path>
        </svg>
        <p class="stitle">资源监控</p>
        <div class="wire"><i></i></div>
      </el-card>
    </div>

（2）样式less

盒子默认效果

.el-card {
box-shadow: none;
width: 360 / @remvw;
height: 360 / @remvw;
text-align: center;
padding-bottom: 50 / @remvw;
border: none;
}

hover效果【建议：使用 box-shadow 、 border-color、 transition】

.el-card:hover {
box-shadow: 0 1px 6px rgba(255, 255, 255, 0.932);
border-color: #eee;
transition: all 0.2s ease-in-out;
}

.conter {
  width: 1220 / @remvw;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  .el-card {
    box-shadow: none;
    width: 360 / @remvw;
    height: 360 / @remvw;
    text-align: center;
    padding-bottom: 50 / @remvw;
    border: none;
    .svg {
      width: 148 / @remvw;
      height: 130 / @remvw;
      margin: 30 / @remvw 0 40 / @remvw 0;
    }
    .stitle {
      font-size: 30 / @remvw;
      color: #fff;
      z-index: 11;
      margin-bottom: 10 / @remvw;
    }
    .wire {
      display: flex;
      justify-content: center;
      i {
        width: 50 / @remvw;
        height: 4 / @remvw;
        background-color: #fff;
      }
    }
  }
  .el-card:hover {
    box-shadow: 0 1px 6px rgba(255, 255, 255, 0.932);
    border-color: #eee;
    transition: all 0.2s ease-in-out;
  }
}
// 渐变
.gradualChangeOne {
  opacity: 90%;
  background-image: linear-gradient(to bottom right, #0ad1d1, #10607c);
}
.gradualChangeTwo {
  opacity: 85%;
  background-image: linear-gradient(to bottom right, #ffc4b9, #b91f03);
}
.gradualChangeThree {
  opacity: 90%;
  background-image: linear-gradient(to bottom right, #870eff, #4c09be);
}