[HTML+CSS+Vue] 自定义单选按钮效果：点击不同按钮切换(switch)不同选项，同一按钮在2个状态之间切换(toggle)

刚刚搞定一个排序组件：三个按钮对应三个不同的排序方式，单选切换，同时在当前排序方式下，再点击当前按钮切换正序和倒序，小箭头图标示意。
因为radio单选框的默认样式太丑了，bootstrap给的custom也不理想，干脆就从样式到功能全部自定义，感谢vue让一切如此简单~
（这里只写了样式，当然不只是实现样式，还要利用vue实现排序功能啦）

• 效果示例：

• HTML代码：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>

<div id="app">
    <div class="sortBtn">
        
        <button :class="{active: sortOrder == 1}" @click.passive="sortSwitch(1)">按A方式排序 
            
            <span>
                
                <i class="fas fa-caret-left" :class="{rev: !revA}">i>
                <i class="fas fa-caret-right" :class="{rev: revA}">i>
            span>
        button>
        <button :class="{active: sortOrder == 2}" @click.passive="sortSwitch(2)">按B方式排序 <span><i class="fas fa-caret-left" :class="{rev: !revB}">i><i class="fas fa-caret-right" :class="{rev: revB}">i>span>button>
        <button :class="{active: sortOrder == 3}" @click.passive="sortSwitch(3)">按C方式排序 <span><i class="fas fa-caret-left" :class="{rev: !revC}">i><i class="fas fa-caret-right" :class="{rev: revC}">i>span>button>
    div>
div>

• CSS代码：

/* 消除button默认的获得焦点时及激活时的轮廓和阴影 */
button:focus,
button:active:focus,
button.active:focus,
button.focus,
button:active.focus,
button.active.focus {
     
    outline: none;
    box-shadow: none;
}
/* 自定义按钮未选中时的样式 */
.sortBtn button {
     
    margin: .3rem;
    padding-bottom: .1rem;  /* 下面图标产生了.1rem的间距，这里补上好让文字居中 */
    color: #4F94CD;
    text-align: center;
    background-color: transparent;
    border: .1rem solid #4F94CD;
    border-radius: .3rem;
}
/* 箭头图标整体旋转 */
.sortBtn button span {
     
    display: inline-block;  /* 必须将span转化为行内块元素 */
    transform: rotate(90deg);  /* 顺时针旋转90°即可 */
    -ms-transform: rotate(90deg);  /* IE9兼容 */
    -webkit-transform: rotate(90deg);  /* Safari、Chrome兼容 */
}
/* 两个箭头隔开一点 */
.sortBtn button i {
     
    margin-left: .1rem;  /* 旋转后是y轴方向的样子，但设置还是要在初始的x轴方向 */
}
/* 按钮被选中后的样式 */
.sortBtn .active {
     
    color: white;
    background-color: #4F94CD;
    border-color: #4F94CD;
}
/* 未选中的箭头变灰（一定要写在.active后，才能跟随变化） */
.sortBtn .active .rev {
     
    color: #A9A9A9;
}

• JS代码：

// 创建根实例
new Vue({
     
    el: '#app',
    data: {
     
        sortOrder: 1,  // 预设按A方式排序，即默认第一个按钮已选中
        revA: false,  // 预设状态下，A的倒序属性初始值为false
        revB: true,  // 其他的初始值为true，点击动作会使之false
        revC: true,
    },
    methods: {
     
        // 定义切换属性值的方法，关键参数n
        sortSwitch (n) {
     
            this.sortOrder = n;  // this指向当前根实例
            // 将三种排序方式分情况讨论，内部切换正倒序
            if (n == 2) {
     
                var rb = this.revB;
                rb = !rb;
                this.revB = rb;  // 取反再赋值
                this.revA = true;  // 复位其他按钮
                this.revC = true;
            } else if (n == 3) {
     
                var rc = this.revC;
                rc = !rc;
                this.revC = rc;
                this.revA = true;
                this.revB = true;
            } else {
     
                var ra = this.revA;
                ra = !ra;
                this.revA = ra;
                this.revB = true;
                this.revC = true;
            }
        }
    }
})

---

以上。