七、封装一个element-ui风格的radio组件

前置知识点：

1. radio的基本使用

参数支持：

7.1radio组件的基本框架和样式

框架、基本样式以及选中样式：

<template>
  <label class="one-radio is-checke">
    <span class="one-radio_input">
      <span class="one-radio_inner">span>
      <input
      type="radio"
      class="one-radio_original"
      >
    span>
    <span class="one-radio_label">我是labelspan>
  label>
template>
<script>
export default {
  name: 'oneRadio',
  props: {}
  },
  watch: {},
  data () {
    return {}
  },
  methods: {}
}
script>
<style lang="scss" scoped>
  .one-radio{
    color: #606266;
    font-weight: 500;
    line-height: 1;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    outline: none;
    font-size: 14px;
    margin-right: 30px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    .one-radio_input{
      white-space: nowrap;
      cursor: pointer;
      outline: none;
      display: inline-block;
      line-height: 1;
      position: relative;
      vertical-align: middle;
      .one-radio_inner{
        border: 1px solid #dcdfe6;
        border-radius: 100%;
        width: 14px;
        height: 14px;
        background-color: #fff;
        position: relative;
        cursor: pointer;
        display: inline-block;
        box-sizing: border-box;
        &:after{
          width: 4px;
          height: 4px;
          border-radius: 100%;
          background-color: #fff;
          content: "";
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%) scale(0);
          transition: transform .15s ease-in;
        }
      }
      .one-radio_original{
        opacity: 0;
        outline: none;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0px;
        right: 0;
        bottom: 0;
        margin: 0;
      }
    }
    .one-radio_label{
      font-size: 14px;
      padding-left: 10px;;
    }
  }
  // 选中的样式
  .one-radio.is-checked{
    .one-radio_input{
      .one-radio_inner{
        border-color: #409eff;
        background-color: #409eff;
        &:after{
          transform: translate(-50%,-50%) scale(1);
        }
      }
    }
    .one-radio_label{
      color:#409eff;
    }
  }
style>
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

7.2radio组件的数据双向绑定

实现radio组件的数据双向绑定，除了要绑定数据本身外，还要控制radio组件的样式。

实现radio组件数据的绑定，需要父组件传递的label值和value值，其中value值使用v-model语法糖来绑定。

 <one-radio v-model="gender" label="0">男one-radio>
 <one-radio v-model="gender" label="1">女one-radio>
1
2

子组件接收数据后，要对数据进行处理。

当radio组件被点击时，绑定的数据应该变为该组件的label值。我们将组件中的input标签的value绑定为传入的label值，并且声明一个计算属性model双向绑定到input组件上，model我们需要通过get方法获取值；并且通过set方法将值回调给父组件。

同时，当我们在点击radio组件时，我们应该让被选中的组件添加选中样式，我们通过label和value的比较来判断，如果相同则显示选中样式。

<template>
  <label class="one-radio" :class="{'is-checked': label == value}">
    <span class="one-radio_input">
      <span class="one-radio_inner">span>
      <input
      type="radio"
      class="one-radio_original"
      :value="label"
      v-model="model"
      >
    span>
    <span class="one-radio_label">
      <slot>slot>
      
      <template v-if="!$slots.default">{{label}}template>
      span>
  label>
template>
props: {
    label: {
      type: [String, Boolean, Number],
      default: "",
    },
    value: null,
    name: {
      type: String,
      default: "",
    },
  },
//计算属性
computed: {
    model: {
      get () {
        return this.value
      },
      set (value) {
        // 触发父组件的input事件
        this.$emit('input', value)
      }
    }
  },
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

//小问题 set属性好像需要传参 无法直接调用全局的变量
computed: {
    model: {
      get() {
        return this.value;
      },
      set() {
        this.$emit("input", value);
      },
    },
  },
//错误写法
computed: {
    model: {
      get() {
        return this.value;
      },
      set() {
        this.$emit("input", value);
      },
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

八、封装一个element-ui风格的radio-group组件

radio-group组件是再radio组件上进行优化的，它的目的是在我们使用radio组件时，不必给每个组件都添加一个v-model，而是通过绑定一个v-model来实现数据绑定。

使用radio-group组件包裹radio组件时，需要考虑到的一个问题就是radio-group组件于radio组件之间的通讯。我们在使用radio-group组件时将数据通过v-model进行了绑定，那么raido组件就不能直接拿到这个值，所以我们需要使用provide/inject进行祖孙组件之间得传值。

使用provide/inject非常简单，在radio-group中通过声明provide对象将组件自身进行传递，在radio中使用inject进行接收即可。

radio-group组件架构：

<template>
  <div class="one-radio-group">
    <slot>slot>
  div>
template>
<script>
export default {
  name: 'oneRadioGroup',
  provide () {
    return {
       // 将父组件的所有数据接口都传过去
      RadioGroup: this
    }
  },
  props: {
    // 组件接收到了value值，我们需要触发这个组件的input事件
    // provide 与 inject  用来做祖孙之间得组件通讯
    value: null
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在radio组件中，通过inject可以直接接收到参数，此时，原本通过v-model传递进来的value值，变成了radio-group组件传进来的RadioGroup.value值，所以在computed计算属性中，我们先写一个radio组件是否被radio-group组件进行判断的方法，并且使用在model中，如果被包裹了，则使用RadioGroup.value值，否则使用value值。

同时在is-checked类的判断上抛弃label于value的比较，转而通过label于model（model此时的值为value或RadioGroup.value）比较，来进行样式的更改。

<template>
  <label class="one-radio" :class="{'is-checked': label == model}">
    <span class="one-radio_input">
      <span class="one-radio_inner">span>
      <input
      type="radio"
      class="one-radio_original"
      :value="label"
      v-model="model"
      >
    span>
    <span class="one-radio_label">
      <slot>slot>
      
      <template v-if="!$slots.default">{{label}}template>
      span>
  label>
template>
<script>
export default {
  name: 'oneRadio',
  props: {
    label: {
      type: [String, Number, Boolean],
      defualt: ''
    },
    value: null,
    name: {
      type: String,
      defualt: ''
    }
  },
  inject: {
    RadioGroup: {
      default: ''
    }
  },
  computed: {
    model: {
      get () {
        return this.isGroup ? this.RadioGroup.value : this.value
      },
      set (value) {
        // 触发父组件的input事件
        this.isGroup ? this.RadioGroup.$emit('input', value) : this.$emit('input', value)
      }
    },
    // 用于判断radio是否被radioGroup包裹
    isGroup () {
      return !!this.RadioGroup
    }
  }
}
script>
 
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

--------------------------------------------至此，radio组件与radio-group组件封装完毕--------------------------------------------------

附radio组件代码：

<template>
  <label class="one-radio" :class="{'is-checked': label == model}">
    <span class="one-radio_input">
      <span class="one-radio_inner">span>
      <input
      type="radio"
      class="one-radio_original"
      :value="label"
      v-model="model"
      >
    span>
    <span class="one-radio_label">
      <slot>slot>
      
      <template v-if="!$slots.default">{{label}}template>
      span>
  label>
template>
<script>
export default {
  name: 'oneRadio',
  props: {
    label: {
      type: [String, Number, Boolean],
      defualt: ''
    },
    value: null,
    name: {
      type: String,
      defualt: ''
    }
  },
  inject: {
    RadioGroup: {
      default: ''
    }
  },
  computed: {
    model: {
      get () {
        return this.isGroup ? this.RadioGroup.value : this.value
      },
      set (value) {
        // 触发父组件的input事件
        this.isGroup ? this.RadioGroup.$emit('input', value) : this.$emit('input', value)
      }
    },
    // 用于判断radio是否被radioGroup包裹
    isGroup () {
      return !!this.RadioGroup
    }
  },
  data () {
    return {}
  },
  methods: {}
}
script>
<style lang="scss" scoped>
  .one-radio{
    color: #606266;
    font-weight: 500;
    line-height: 1;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    outline: none;
    font-size: 14px;
    margin-right: 30px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    .one-radio_input{
      white-space: nowrap;
      cursor: pointer;
      outline: none;
      display: inline-block;
      line-height: 1;
      position: relative;
      vertical-align: middle;
      .one-radio_inner{
        border: 1px solid #dcdfe6;
        border-radius: 100%;
        width: 14px;
        height: 14px;
        background-color: #fff;
        position: relative;
        cursor: pointer;
        display: inline-block;
        box-sizing: border-box;
        &:after{
          width: 4px;
          height: 4px;
          border-radius: 100%;
          background-color: #fff;
          content: "";
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%) scale(0);
          transition: transform .15s ease-in;
        }
      }
      .one-radio_original{
        opacity: 0;
        outline: none;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0px;
        right: 0;
        bottom: 0;
        margin: 0;
      }
    }
    .one-radio_label{
      font-size: 14px;
      padding-left: 10px;;
    }
  }
  // 选中的样式
  .one-radio.is-checked{
    .one-radio_input{
      .one-radio_inner{
        border-color: #409eff;
        background-color: #409eff;
        &:after{
          transform: translate(-50%,-50%) scale(1);
        }
      }
    }
    .one-radio_label{
      color:#409eff;
    }
  }
style>
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

附radio-group组件代码：

<template>
  <div class="one-radio-group">
    <slot>slot>
  div>
template>
<script>
export default {
  name: 'oneRadioGroup',
  provide () {
    return {
      RadioGroup: this
    }
  },
  props: {
    // 组件接收到了value值，我们需要触发这个组件的input事件
    // provide 与 inject  用来做祖孙之间得组件通讯
    value: null
  }
}
script>
 
<style lang="scss" scoped>
 
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24