vue3 正序倒序小组件 |
您所在的位置：网站首页 › 日期倒序怎么排成正序 › vue3 正序倒序小组件 |
vue3 正序倒序小组件
|
效果如图：
代码如下： {{ reverse ? "正序" : "倒序" }} 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, //打开弹窗 }; }, }; .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; } } }使用： //正序倒序 const refresh = (val) => { data.order = val;//正序还是倒序 data.page = 1;//页码重置为1 getDetail();//重新获取数据 }; return { ...toRefs(data), refresh, };
|
【本文地址】
今日新闻 |
推荐新闻 |