vue实现类似安卓的这种样式的效果自定义radiogroup样式

安卓的

image.png

vue的

image.png

vue咋实现呢，
首先设置只有第一个和最后一个才能有圆角

.custom-radio-button:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.custom-radio-button:last-child {
  margin-right: 0;
    border-left-width: 0; 
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

然后边框线不能每一个都设置，设置除了第一个，后面的左边都不需要左边框

.custom-radio-button:not(:first-child) {
  border-left-width: 0 !important;
}

ok,样式原理实现了，接下来用vue写排斥

完整代码如下：

<template>
  <div class="custom-radio-group horizontal">
    <div 
      v-for="(option, index) in options" 
      :key="index"
      class="custom-radio-button"
      @click="handleChange(option.value)"
      :class="{ 'is-checked': selectedValue === option.value }"
    >
      {{ option.label }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: { type: Array, required: true },
    defaultValue: { type: String },
  },
  data() {
    return {
      selectedValue: this.defaultValue ||  (this.options.length>0?this.options[0].value:null),
    };
  },
  methods: {
    handleChange(value) {
      this.selectedValue = value;
      this.$emit('input', value);
    },
    mounted() {
      if (this.defaultValue) {
        this.selectedValue = this.defaultValue;
      }
    },
  },
};
</script>

<style scoped>
.custom-radio-group.horizontal {
  display: flex;
}

.custom-radio-button {
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 0px;
  color: #333;
  border: 1px solid grey;
  transition: all 0.3s;
}

.custom-radio-button:not(:first-child) {
  border-left-width: 0 !important;
}

.custom-radio-button:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.custom-radio-button:last-child {
  margin-right: 0;
    border-left-width: 0; 
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.custom-radio-button.is-checked {
background-color: rgba(255, 0, 0,.08);
  color: #ff0000;
  border-color: #ff0000;
}
</style>

使用办法:
import myradiogroup from '@/components/myradiogroup';

<script lang="ts">
        import myradiogroup from '@/components/myradiogroup';


    export default {
          components: {
            myradiogroup, 
         }, data() {
            return {  radioOptions: [
              { value: 'option1', label: '选项一' },
              { value: 'option2', label: '选项二' },
              { value: 'option3', label: '选项三' },
            ]
          }
}

template中

<myradiogroup       :options="radioOptions" 
   v-model="selectedOption"
   @input="handleInput">
        

控制默认选中第一个

export default {
          components: {
            myradiogroup, 
         },
        data() {
            return { 
                radioOptions: [
              { value: 0, label: '清单' },
              { value: 1, label: '明细' },
            ],
                mp: '',
                selectTab: 1,

使用

<myradiogroup  style="float:right;margin-right:5px;margin-bottom:5px;"  :options="radioOptions" 
   v-model="selectTab" :defaultValue='selectTab'
   @input="onBottomTabClick"/>

监听和变更selectTab

    onBottomTabClick(value) {
              this.selectTab = value;
              alert("value:"+value)
            },