简书链接:vue实现类似安卓的这种样式的效果自定义radiogroup样式组件
文章字数：283,阅读全文大约需要1分钟
安卓的
image.png

vue的

image.png

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

1
2
3
4
5
6
7
8
9
10
11
.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;
}

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

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

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

完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<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';

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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中

1
2
3
4
<myradiogroup       :options="radioOptions" 
   v-model="selectedOption"
   @input="handleInput">

控制默认选中第一个

1
2
3
4
5
6
7
8
9
10
11
12
export default {
		  components: {
		    myradiogroup, 
		 },
		data() {
			return { 
				radioOptions: [
		      { value: 0, label: '清单' },
		      { value: 1, label: '明细' },
		    ],
				mp: '',
				selectTab: 1,

使用

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



监听和变更selectTab 

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