排序组件

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

<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>