点击旋转箭头样式

最新推荐文章于 2024-07-14 11:16:56 发布

aleluye

最新推荐文章于 2024-07-14 11:16:56 发布

阅读量210

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/aleluye/article/details/139849934

版权

实现效果：

html界面，主要通过isdown来控制箭头是上还是下

 <el-popover
      placement="bottom"
      trigger="click"
      :visible-arrow="false"
      v-model="isdown"
      popper-class="user-popover"
    >
      <div
        slot="reference"
        class="user-content"
      >
       
        <el-image
          class="user-content-icon "
          :class="[isdown?'down':'expand ']"
          style="width: 14px; height: 14px;"
          :src="require('@/assets/images/icon-down.png')"
        />
      </div>

      <ul class="user-list">
        <li>
         退出登录
        </li>
      </ul>
    </el-popover>
<script>
import { ref } from 'vue'
const isdown=ref(false)
 return {
     isdown
    }
 
</script>

scss

<style scoped lang="scss">
.user {
 
  .down {
    transition: all 0.3s;
    transform: rotate(180deg);
    transform-origin: center;
  }

  .expand {
    transition: all 0.3s;
    transform: translate(0, 2px) rotate(0deg);
    transform-origin: center;
  }
}
</style>