Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

TIP 👉 Get the first month, sunny flowers and trees easy for spring. Song · Yu Wenbao, Record of The Clear Night

preface

In our daily project development, we often write some form items, so we encapsulate this form item component.

One box component

attribute

1. title

• Title of a single box group
• The value is a string

2. options

• Array of radio items
• mandatory

Examples of objects in array: {value: ’01’, label: ‘male’, disabled: false}

• Value: the value
• Label: displayed text
• Disabled: Indicates whether the device can be used

3. value

• Currently selected value

4. disabled

• Whether the available
• The value is a Boolean type

The sample

<template>
  <div class="radio-wrap">
    <BaseRadio title="Please select bank :" :options="radioOptions" v-model="bank" @change="doChange"></BaseRadio>
    <br><h3>The selection result is: {{bank}}</h3>
  </div>
</template>
<script>
import BaseRadio from '@/components/base/radio/index.vue'
export default {
  name: 'RadioDemo'.components: {
    BaseRadio
  },
  data () {
    return {
      bank: '03'.radioOptions: [{value: '01'.label: 'all' },
        { value: '02'.label: 'scattered' },
        { value: '03'.label: 'some'.disabled: true}}},methods: {
    doChange (val) {
      console.log('Trigger the change event, value =', val)
    }
  }
}
</script>
<style lang="scss" scoped>
.radio-wrap{
  padding: 40px;
  font-size: 36px;
  line-height: 60px;
}
</style>
Copy the code

To realize radio. Vue

<! -- Radio component --><template>
  <div class="radio-list" :class="disabled ? 'disabled': ''">
    <div v-if="title" class="radio-title">{{title}}</div>
    <div class="radio-item" v-for="option in options" :key="option.value">
      <label>
        <input type="radio" :name="groupName" v-model="currentValue" :disabled="disabled || option.disabled" :value="option.value"/>
        <span class="input-box">
          <span class="input-box-circle"></span>
        </span>
        <span class="input-span">{{option.label}}</span>
      </label>
    </div>
  </div>
</template>
<script>
import { generateUUID } from '@/assets/js/utils.js'
export default {
  name: 'BaseRadio'.props: {
    // Radio group title
    title: String./** * Array of radio items * Examples of objects in the array: {value: '01', label: 'male', disabled: false} * value: value * label: displayed text * disabled: available **/
    options: {
      type: Array.required: true
    },
    // The current selected value
    value: [String.Number].// Whether it is available
    disabled: {
      type: Boolean.default: false
    }
  },
  data () {
    return {
      currentValue: this.value,
      groupName: generateUUID()
    }
  },
  watch: {
    value (val) {
      this.currentValue = val
    },
    currentValue (val) {
      this.$emit('input', val)
      this.$emit('change', val)
    }
  }
}
</script>
<style lang="scss" scoped px2rem="false">
$outer-border-color: $border-color-base;
$disable-bg-color: $input-disabled-bg-color;
$disable-inner-dot-color: $color-text-placeholder;
.radio-list{
  .radio-title{
    display: inline-block;
    vertical-align: middle;
    margin: 0 15px;
    color: #333;
  }
  .radio-item{
    position: relative;
    display: inline-block;
    padding: 0 30px 0 0;
    // vertical-align: middle;
    white-space: nowrap;
    &:last-of-type {
      padding-right: 0;
    }
    label {
      display: inline-block;
      align-items: center;
      position: relative;
      cursor: pointer;
      input {
        position: absolute;
        top: 50%;
        left: 0;
        width: 1em;
        height: 1em;
        transform: translate(0, -50%);
        font-size: inherit;
        opacity: 0;
        z-index: 1;
        &:checked + .input-box {
          @include primary-border-color();
          @include primary-background-color();
          &> .input-box-circle {
            width: 4px;
            height: 4px;
            opacity: 1;
          }
        }
        &:disabled {
          & + .input-box {
            border-color: $outer-border-color !important;
            background-color: $disable-bg-color !important;
            cursor: not-allowed;
            .input-box-circle {
              background-color: $disable-inner-dot-color;
            }
            & + .input-span {
              color: #999;
              cursor: not-allowed;
            }
          }
        }
      }
      .input-box {
        box-sizing: border-box;
        position: relative;
        display: inline-block;
        border: solid 1px $outer-border-color;
        border-radius: 50%;
        padding: 0;
        width: 1em;
        height: 1em;
        vertical-align: middle;
        overflow: hidden;
        user-select: none;
        margin-right: 10px;
        margin-top: -3px;
        flex: none;
        &:hover {
          @include primary-border-color();
        }
      }
      .input-box-circle {
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        background-color: #FFF;
        border-radius: 50%;
        opacity: 0;
        transition: width 0.15s ease-in, height 0.15s ease-in, margin 0.15s ease-in;
      }
      .input-span{
        display: inline-block;
        // vertical-align: middle;
        color: #666;
      }
    }
  }
  &.disabled {
    cursor: not-allowed;
    label {
      cursor: not-allowed;
    }
  }
}
</style>
// Do not delete the following comment. It is used to determine whether mobile terminals are supported according to the isMobile configuration item in the configuration file. If not, comment out the style
/* [auto html command START {isMobile=false}] */
<style lang="scss" scoped>
@media (max-width: $max-mobile-width) {
  .radio-list {
    .radio-title {
      display: block;
      margin: 0;
      padding: 0 40px;
      // background-color: #f5f5f5;
      @include primary-background-color(.03);
    }
    .radio-item {
      display: block;
      padding: 0 40px;
      label {
        display: flex;
        .input-box {
          flex: none;
        }
      }
    }
  }
}
</style>
/* [auto html command END {isMobile=false}] */
Copy the code

Thanks for the comment section.

Hope to finish watching friends can give a thumbs-up, encourage once