nutui/src/demo/navbar.vue

<template>
    <div>
        <nut-demoheader 
        :name="$route.name"
        ></nut-demoheader>
        <!-- DEMO区域 -->
        
        <!-- DEMO代码 -->
    </div>
</template>
<script>
export default {
    data(){
        return{
            direction: 'h',
            boundary: {top: 50, bottom: 20, left: 0, right: 0},
            isSide: false,
            demo1:`<nut-drag direction="h"></nut-drag>`,
            demo2:`<nut-drag :boundary="{top: 20, bottom: 20}"></nut-drag>`,
            demo3:`<nut-drag :isSide="false"></nut-drag>`,
        }
    },
    methods:{
        changeMove(x, e){
            let dom = e.currentTarget;
            let siblings = dom.parentElement.children;
            this.removeClass(siblings);
            dom.classList.add('curr');
            this.direction = x;
        },
        changeBoundary(x, e){
            let dom = e.currentTarget;
            let siblings = dom.parentElement.children;
            this.removeClass(siblings);
            dom.classList.add('curr');
            if (x=='y') {
                this.boundary = {top: 50, bottom: 20, left: 0, right: 0};
            }else{

                this.boundary = {top: 50, bottom: 0, left: 0, right: 0};
            }
            
        },
        changeSide(b, e){
            let dom = e.currentTarget;
            let siblings = dom.parentElement.children;
            this.removeClass(siblings);
            dom.classList.add('curr');
            dom.classList.add('curr');
            this.isSide = b;
        },
        removeClass(siblings){  //去除同级的class
            for ( let i in siblings) {
                if (siblings.hasOwnProperty(i) === true){
                    siblings[i].className = 'button-primary';
                }
            }
        },
    }
}
</script>


<style lang="scss" scoped>
.button-primary{
    display: inline-block;
    height: 38px;
    padding: 0 10px;
    color: #555;
    text-align: center;
    font-size: 12px;
    line-height: 38px;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border-radius: 3px;
    border: 1px solid #bbb;
    cursor: pointer;
    box-sizing: border-box;
    &.curr{
        background-color: #33C3F0;
        border-color: #33C3F0; 
        color: #fff;
    }
}
</style>