uniapp 项目开发时,经常会遇到选择性别的情况,于是单独封装成了一个组件,可以进行复用。
使用
<sex :active.sync="sex"></sex>
组件代码
<template>
<div class="tabs">
<div class="tab" :class="{active:active==item.id}" @click="getSex(item.id)" v-for="(item,index) in list"
:key="index">
<image v-if="active==item.id" src="../../static/icon_selected.png"></image>
<image v-else src="../../static/icon_select.png"></image>
<span>{{ item.name }}</span>
</div>
</div>
</template>
<script>
export default {
name: "tabs",
data() {
return {
list: [{
name: '男',
id: 1,
}, {
name: '女',
id: 0,
}]
}
},
props: {
active: {
type: Number,
default () {
return 0;
}
},
},
methods: {
getSex(e) {
this.$emit('update:active', e)
},
}
}
</script>
<style lang="scss" scoped>
.tabs {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.tab {
margin-left: 60rpx;
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
text {
font-size: 28px;
font-family: PingFang;
font-weight: 500;
color: #666666;
}
image {
width: 32rpx;
height: 32rpx;
margin-right: 15rpx;
}
}
.tab.active {
color: rgba(0, 121, 255, 1);
}
}
</style>