刚刚搞定一个排序组件:三个按钮对应三个不同的排序方式,单选切换,同时在当前排序方式下,再点击当前按钮切换正序和倒序,小箭头图标示意。
因为radio单选框的默认样式太丑了,bootstrap给的custom也不理想,干脆就从样式到功能全部自定义,感谢vue让一切如此简单~
(这里只写了样式,当然不只是实现样式,还要利用vue实现排序功能啦)
• 效果示例:
• HTML代码:
<!-- 此例中小箭头图标的使用引入fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<div id="app">
<div class="sortBtn">
<!-- v-bind动态绑定.active样式,v-on绑定click事件,传入对应的参数,点击则应用.active样式到该按钮 -->
<button :class="{active: sortOrder == 1}" @click.passive="sortSwitch(1)">按A方式排序
<!-- 分离的上下箭头方便控制,但内联元素上下布局比较麻烦,所以我用两个左右箭头图标包裹在span中用CSS旋转,效果一样 -->
<span>
<!-- v-bind动态绑定.rev样式,跟随.active应用,利用!取反达到切换效果,每个按钮的倒序属性需要单独设置 -->
<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;
}
}
}
})
以上。