vue3 正序倒序小元件
阿新 • • 發佈:2022-04-13
效果如圖:
程式碼如下:
<template> <div class="order-wrap" @click="orderFn"> <span class="text">{{ reverse ? "正序" : "倒序" }}</span> <span class="triangle"> <i class="top" :class="{ topActive: !reverse }"></i> <i class="bottom" :class="{ bottomActive: reverse }"></i> </span> </div> </template>
<script> import { reactive, toRefs } from "vue"; export default { props: {}, emits: ["refresh"], setup(props, { emit }) { const data = reactive({ reverse: false, // 倒序 }); //點選排序 const orderFn = () => { data.reverse= !data.reverse; let num = null; if (data.reverse) { num = 0; } else { num = 1; } emit("refresh", num); }; return { ...toRefs(data), orderFn, //開啟彈窗 }; }, }; </script>
<style lang="scss" scoped> .order-wrap { margin: 0 10px; cursor: pointer; display: inline-block; .text { display: inline-block; font-size: 14px; font-family: PingFang SC; font-weight: 400; color: #3c456c; } .triangle { margin: 0 10px; display: inline-block; position: relative; .top { top: -10px; width: 0; height: 0; position: absolute; display: inline-block; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid #d4d8de; box-sizing: border-box; } .bottom { top: -2px; width: 0; height: 0; position: absolute; display: inline-block; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #d4d8de; box-sizing: border-box; } .topActive { border-bottom: 5px solid #6995ff; } .bottomActive { border-top: 5px solid #6995ff; } } } </style>
使用:
<order @refresh="refresh"></order>
//正序倒序 const refresh = (val) => { data.order = val;//正序還是倒序 data.page = 1;//頁碼重置為1 getDetail();//重新獲取資料 };return { ...toRefs(data), refresh, };