点击旋转箭头样式
实现效果：
html界面，主要通过isdown来控制箭头是上还是下
<el-popoverplacement="bottom"trigger="click":visible-arrow="false"v-model="isdown"popper-class="user-popover"><divslot="reference"class="user-content"><el-imageclass="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>