排序组件

来源：互联网发布：网络性能评测指标编辑：程序博客网时间：2024/05/29 09:06

最近在写后台管理系统，会经常使用排序，速写了一个简单的排序组件，

<template>    <div id="sortContainer" @click="sort">        <div class="sort sortUp " :class="{activeUp:active=='sortUp'}"></div>        <div class="sort sortDown" :class="{activeDown:active=='sortDown'}"></div>    </div></template><script>    export default {        props:{            left:{                type:Number,                default:30,            }        },        data() {            return {                active: "",            }        },        methods: {            sort() {                if (this.active == "sortDown" || !this.active) {                    this.active = "sortUp";                    this.$emit("sortup")                } else {                    this.active = "sortDown";                    this.$emit("sortdown")                }            },        },        ready(){            document.getElementById("sortContainer").style.left=this.left+"px"        }    }</script><style>    #sortContainer {        position: relative;        cursor: pointer;        display: inline;        .sort {            position: absolute;            border-width: 5px;            border-style: solid;        }        .sortUp {            border-color: transparent transparent #a0a0a0;            top: 0px;        }        .activeUp {            border-color: transparent transparent blue;        }        .sortDown {            border-color: #a0a0a0 transparent transparent;            top: 13px;        }        .activeDown {            border-color: blue transparent transparent;        }    }</style>

0 0