This is the 20th day of my participation in the August Text Challenge.More challenges in August

Button component, Dialog component, input component and switch component

Build Vue2 UI Component Library from 0 (1)

Build Vue2 UI Component Library from 0 (2)

Build Vue2 UI Component Library from 0 (3)

Build Vue2 UI Component Library from 0 (4)

This article will write how to package radio components ~~~

1. Encapsulate radio components

1. Parameter support

The parameter name The parameter types Parameters to describe The default value
v-model Any type Two-way binding There is no
label Boolean,String, Number Value Indicates the value of the option box There is no
name Boolean Two-way binding false

1.1. Obtain label, Name, value attributes and custom content

  • Obtain the label and name attributes passed by the user using props.
  • Because of the supportv-modelProperties,v-modelBy default, names are usedvalueProp and namedinputSo accept the value attribute with props.
  • Get what the user has written with a slot.
<span class="zh-radio__label">
   <slot></slot>
   <template v-if=! "" $slots.default">{{label}}</template>
</span>
Copy the code
props: {
 label: {
   type: [String.Number.Boolean].default: ""
 },
 value: null.name: {
   type: String.default: ""}},Copy the code

1.2. Set v – model

  • Since it is difficult to style native checkboxes, hide the native checkboxes and show a checkbox of your own design that is easy to style.
  • The native checkbox is hidden, but still retains its functionality, so set
  1. The name attribute is the name passed in by the user,
  2. The value attribute is the label passed in by the user,
  3. The v-Model property cannot be the value passed in by the user, because the child component cannot change the value passed in by the parent component, so a Model state needs to be set for bidirectional binding. Because the Model value is affected by the value passed in by the user, you should set it up using computed. If you use v-model to bind a calculation property, then the property must be set with get and set, instead of using simple functions. So set model to get and set methods. When get returns the value passed in by the user. When a set, or model, changes, the value of the parent component should also change, so the parent component’s input event needs to be triggered to change the value of the parent component.
  • When the label value passed in by the user is equal to the Model value, the current check box is selected and the IS-Checked class is set to indicate the check.
  <label class="zh-radio" :class="{'is-checked': label === model}">
    <span class="zh-radio__input">
      <span class="zh-radio__inner"></span>
      <input class="zh-radio__original" 
        type="radio" 
        :value="label"
        :name="name"
        v-model="model">
    </span>.</label>
Copy the code
computed: {
    model: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value); }}}Copy the code