老规矩,先上效果图。
相同的按钮样式做了单选和多选的功能。功能逻辑没什么好说的,这里重点是样式,主要是用border和background相结合实现的。考虑到项目里面经常用到按钮,所以一开始就想着要封装成组件使用。
按钮组件代码如下:
<template>
<div class="btn-box">
<div
v-for="item in btnData"
:key="item.id"
class="btn-item"
@click="selectPrd(item)"
>
<span class="btn-name" :class="btnClass(item.id)">{{ item.name }}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectId: 1, // 单选按钮id
selectIdList: [], // 多选按钮id组
};
},
props: {
btnData: { // 按钮的名称、ID信息
type: Array,
},
isSingle: { // 按钮是否单选,默认为true
type: Boolean,
},
},
watch: {
btnData: {
immediate: true,
deep: true,
handler(val) {
this.selectId = val[0].id;
},
},
},
computed: {
btnClass() {
return function (val) {
if (this.isSingle) {
return this.selectId == val ? "btn-active" : "";
} else {
return this.selectIdList.indexOf(val) > -1 ? "btn-active" : "";
}
};
},
},
methods: {
// 按钮点击事件
selectPrd(val) {
if (this.isSingle) {
this.selectId = val.id;
this.$emit("changeBtn", this.selectId);
} else {
if (this.selectIdList.indexOf(val.id) > -1) {
this.selectIdList = this.selectIdList.filter(
(item) => item != val.id
);
} else {
this.selectIdList.push(val.id);
}
this.$emit("changeBtn", this.selectIdList);
}
},
},
};
</script>
<style lang="scss" scoped>
.btn-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 4px;
border: 1px solid rgba(24, 144, 255, 0.2);
position: relative;
background: linear-gradient(#1890ff, #1890ff) left top,
linear-gradient(#1890ff, #1890ff) left top,
linear-gradient(#1890ff, #1890ff) right top,
linear-gradient(#1890ff, #1890ff) right top,
linear-gradient(#1890ff, #1890ff) left bottom,
linear-gradient(#1890ff, #1890ff) left bottom,
linear-gradient(#1890ff, #1890ff) right bottom,
linear-gradient(#1890ff, #1890ff) right bottom;
background-repeat: no-repeat;
background-size: 1px 4px, 4px 1px;
}
.btn-item {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-grow: 1;
background: linear-gradient(#1890ff, #1890ff) left top,
linear-gradient(#1890ff, #1890ff) left top,
linear-gradient(#1890ff, #1890ff) right top,
linear-gradient(#1890ff, #1890ff) right top,
linear-gradient(#1890ff, #1890ff) left bottom,
linear-gradient(#1890ff, #1890ff) left bottom,
linear-gradient(#1890ff, #1890ff) right bottom,
linear-gradient(#1890ff, #1890ff) right bottom;
background-repeat: no-repeat;
background-size: 1px 6px, 6px 1px;
}
.btn-item + .btn-item {
margin-left: 4px;
}
.btn-name {
flex-grow: 1;
padding: 5px 0;
font-size: 14px;
line-height: 20px;
color: #fff;
text-align: center;
background: rgba(24, 144, 255, 0.25);
}
.btn-name:hover,
.btn-active {
background: rgba(24, 144, 255, 0.6);
cursor: pointer;
}
</style>
页面调用按钮组件代码:
<template>
<div>
<!-- 单选按钮 -->
<title-button
:btnData="btnData"
:isSingle="true"
@changeBtn="changeSingleBtn"
/>
<!-- 多选按钮 -->
<title-button
:btnData="btnData"
:isSingle="false"
@changeBtn="changeDoubleBtn"
style="margin-top: 10px"
/>
</div>
</template>
<script>
import titleButton from "@/components/common/title-button.vue";
export default {
components: {
titleButton,
},
data() {
return {
btnData: [
{ name: "星期一", id: 1 },
{ name: "星期二", id: 2 },
{ name: "星期三", id: 3 },
{ name: "星期四", id: 4 },
{ name: "星期五", id: 5 },
{ name: "星期六", id: 6 },
{ name: "星期日", id: 7 },
],
};
},
methods: {
// 单选按钮
changeSingleBtn(val) {
console.log(val);
},
// 多选按钮
changeDoubleBtn(val) {
console.log(val);
},
},
};
</script>
以上就是本篇文章的全部内容,如果对你有帮助的话点个赞支持一下。我们下篇文章见ヾ(๑╹◡╹)ノ"~