classification

The components of the selection class can be subdivided into:

  • Check (a CheckBox)
  • Switch
  • Select from
  • Radio-group
  • Checkbox-group (checkbox-group)
  • Optional (Autocomplete)

Encapsulate several components individually for each category

Check the

CheckBox is a separate CheckBox that is used when users sign up to agree to terms and conditions. A box, make a check box can use software, otherwise don’t let you use. The feature is to return true and false. Let’s encapsulate it briefly:

<! -- Check box --><template>
  <el-checkbox
    v-model="value"
    @change="mySubmit"
    :id="'c' + meta.controlId"
    :name="'c' + meta.controlId"
    :disabled="meta.disabled"
    :placeholder="meta.placeholder"
  >
    {{meta.title}}
  </el-checkbox>
</template>

<script>
import controlManage from '.. /manage/controlManage.js'
import { metaInput } from '.. /manage/config.js'

export default {
  name: 'nf-el-from-checkbox'.props: {
    modelValue: Boolean.meta: metaInput
  },
  emits: ['change'.'blur'.'focus'],
  setup (props, context) {
    const { value, mySubmit } = controlManage(props, context)

    return {
      value,
      mySubmit
    }
  }
}
</script>

Copy the code

The common functions have been separated out, so it’s good to set the template here.

switch

Maybe the UI library felt that it was not good to check the boxes, so it made this switch, EMMM, really nice. Or simply encapsulate it:

<! -- Switch, radio --><template>
  <el-switch
    v-model="value"
    active-text="on"
    inactive-text=""
    @change="mySubmit"
    :disabled="meta.disabled"
  >
  </el-switch>
</template>

<script>
import controlManage from '.. /manage/controlManage.js'
import { metaInput } from '.. /manage/config.js'

export default {
  name: 'nf-el-from-switch'.props: {
    modelValue: Boolean.meta: metaInput
  },
  emits: ['input'.'change'.'blur'.'focus'.'clear'],
  setup (props, context) {
    return {
      ...controlManage(props, context)
    }
  }
}
</script>

Copy the code

Same as above.

The radio set

It’s just a set of circles. This can only be selected one way and is suitable for situations with few options, such as male or female. In some cases, it can be used as a TAB, and the UI library is thoughtful enough to provide TAB forms. Continue to:

<! -- Radio group --><template>
  <el-radio-group
    v-model="value"
    @change="mySubmit"
    :id="'c' + meta.controlId"
    :name="'c' + meta.controlId"
    :disabled="meta.disabled"
    :placeholder="meta.placeholder"
  >
    <el-radio
      v-for="item in meta.optionList"
      :key="'radio' + meta.controlId + item.value"
      :label="item.value">
        {{item.label}}
    </el-radio>
  </el-radio-group>
</template>

<script>
import controlManage from '.. /manage/controlManage.js'
import { metaInput } from '.. /manage/config.js'

export default {
  name: 'nf-el-from-radios'.props: {
    modelValue: String.meta: metaInput
  },
  emits: ['change'.'blur'.'focus'],
  setup (props, context) {
    const { value, mySubmit } = controlManage(props, context)

    return {
      value,
      mySubmit
    }
  }
}
</script>
Copy the code

This is thanks to the UI library, which not only provides a good look, but also provides the ability to value. So I’m just going to take the value.

Multiple groups

It’s a set of boxes, a more traditional multiple choice approach.

<! -- Multiple select group --><template>
  <el-checkbox-group
    v-model="value"
    @change="mySubmit"
    :id="'c' + meta.controlId"
    :name="'c' + meta.controlId"
    :disabled="meta.disabled"
    :placeholder="meta.placeholder"
  >
    <el-checkbox
      v-for="item in meta.optionList"
      :key="'check' + meta.controlId + item.value"
      :label="item.value">
        {{item.label}}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
import controlManage from '.. /manage/controlManage.js'
import { metaInput } from '.. /manage/config.js'

export default {
  name: 'nf-el-from-checkboxs'.props: {
    modelValue: Object.meta: metaInput
  },
  emits: ['change'.'blur'.'focus'],
  setup (props, context) {
    const { value, mySubmit } = controlManage(props, context)

    return {
      value,
      mySubmit
    }
  }
}
</script>
Copy the code

Similarly, we don’t need to write our own code, we can directly get the value of the option selected by the user.

Select from the drop-down list box

A very basic very commonly used selection components, can be single can also choose, and THE UI library also expanded the query function, in some conditions is very practical function.

<! -- Drop down select --><template>
  <el-select
    v-model="value"
    @change="mySubmit"
    :id="'c' + meta.controlId"
    :name="'c' + meta.controlId"
    :disabled="meta.disabled"
    :placeholder="meta.placeholder"
  >
    <el-option
      v-for="item in meta.optionList"
      :key="'select' + meta.controlId + item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
import controlManage from '.. /manage/controlManage.js'
import { metaInput } from '.. /manage/config.js'

export default {
  name: 'nf-el-from-select'.props: {
    modelValue: String.meta: metaInput
  },
  emits: ['change'.'blur'.'focus'],
  setup (props, context) {
    const { value, mySubmit } = controlManage(props, context)

    return {
      value,
      mySubmit
    }
  }
}
</script>

Copy the code

Relying on the powerful UI library, we can save trouble, just bind the properties. There was an odd case where I added “multiple” and the entire Select component crashed, and I had to keep trying to figure out why.

See the effect

Once wrapped, it’s much easier to use a single row of components, or even a v-for loop, which makes it easy to do multi-row, multi-column forms. In this way, you don’t have to worry about the size of the form, and you don’t have to worry about the customer always changing the requirements.

The source code

Github.com/naturefwvue…