iview樣式做一個排序小控件

<template>
    <span class="ivu-table-sort" @click="changeSort">
        <i class="ivu-icon ivu-icon-md-arrow-dropup" :class="{'checked':sortType=='asc'}"></i>
        <i class="ivu-icon ivu-icon-md-arrow-dropdown" :class="{'checked':sortType=='desc'}"></i>
    </span>
</template>
<script>
export default {
    name:"sort",
    data(){
        return {
            sortType:null,
        }},
    props:{
        value:{type:String,default:null}
    },
    methods:{
        changeSort(){
            var s=this.sortType;
            switch (s){
                case 'asc':
                    s='desc';
                    break;
                case 'desc':
                    s=null;
                    break;
                case null:
                    s='asc';
            }
            this.sortType = s;
            this.$emit('changeSort', s);
            this.$emit('input',s);
            console.log(this.sortType);
        }
    },
    watch:{
        value(nval,oval){
            this.sortType = nval;
        }
    }
};
</script>
<style lang="less" scoped>
.checked{
    color:black;
}
</style>

使用

import sort from "../../components/sort";
export default {
  components: {sort}
}

<sort v-model="sortTypeMod" @changeSort="changeSortFunc"/>

效果：