vue自定义单选框组件

因工作需要，要对用户进行问卷调查，问题较多，问卷有多份。故稍微研究了一下，自己写了一个组件。

1.首先

先稍微看一下官方文档，看不懂也没关系

2.开始尝试着写一下

新建一个myRadio.vue的文件，文件名随意，调用组件的时候引入此文件

并像平时写vue页面一样，添加<template>、<script>、<style>标签

注：<style>标签不应该加 scoped ，因为要在其它页面展示

先从html开始：

<div class="radioBox">
  <label class="my-radio">
    <input class="radio-icon" type="radio" name="1" ><span class="radio-content">我是单选项1</span>
    <input class="radio-icon" type="radio" name="1" ><span class="radio-content">我是单选项2</span>
  </label>
</div>

大致是这样：

然后自行添加css啦

注：如果嫌弃原生选择框不好看，可以自己写

隐藏原生：input添加样式 display: none;

添加自定义：   例 - 点击之后背景颜色改变（.radio-icon 和 .radio-content 是我上文定义的class名）

在点击input标签后，后面的span标签背景颜色会变成 #ffe200

    .radio-icon:checked + .radio-content {
      border-radius: 11px;
      background-color: #ffe200;
      border-color: #ffe200;
    }

然后是js

首先我们要明确需要什么功能，单选框所需要的最基本的功能有：

1. 自定义选项内容
2. input的name属性

按照官方文档的写法，应该写成这样：

注：看到这一部分，有不懂的话，就要重新看一遍官方文档

<script>
export default {
  name: 'my-radio', // 组件名
  model: { // 自定义 v-model的 prop和event
    prop: 'options', // 属性
    event: 'updataInp' // 事件
  },
  props: {
    options: { // radio的value属性，每一项的名称
      type: Array, // 数据类型
      required: true // 是否为必填的字符串
      // default: 100默认值（仅示意）
    },
    name: {
      type: [Number, String],
      required: true
    }
  },
  methods: {
    updataInp (ev) {
      // console.log(ev.target.value)
      this.$emit('change', ev.target.value)
    }
  }
}
</script>

因为传过来的options必须为数组，所以我们的html可以用v-for循环出来，html改写成

  <div class="radioBox">
    <label class="my-radio" v-for="(item, index) in options" :key="index" >
      <input class="radio-icon" type="radio" :name="name" :value="item" @change="updataInp">
      <span class="radio-content">{{item}}</span>
    </label>
  </div>

3.这时候就要去其他页面调用一下试试看

• 在<script>内引入：

import myRadio from './CustomComponent/myRadio.vue'

• 在components内注册：

  components: {
    myRadio
  }

• 在html内添加：

注：按照驼峰命名规则，my-radio 要写成 myRadio

updataVal与updataInp是两个不同的函数

updataInp是当时写在组件内部的函数，用于子组件像父组件传值，告诉父组件用户选择了什么。我们这里的子组件就是我们自定义的MyRadio，父组件就是注册和使用MyRadio的页面

updataVal是父组件的接收函数

<myRadio :options="['是', '否', '搞不清']" :name="1" @change="updataVal"></myRadio>

4.来进行父子组件传值吧！

子组件的updataInp函数：

     this.$emit() ：子组件发出数据

    ev.target.value：单选选中的value值，必须写在input 的value内才能取到

  methods: {
    updataInp (ev) {
      // console.log(ev.target.value)
      this.$emit('change', ev.target.value)
    }
  }

父组件的updataVal函数：

    父组件updataVal内有一个参数，此参数就是子组件传过来的值

  methods: {
    updataVal (option) {
      console.log(option)
    }
  }

到此我们就完成一个基本的组件了，如果还需要其他功能，也可以依此写 ：)

最后

以上就是拼搏夕阳为你收集整理的vue自定义单选框组件的全部内容，希望文章能够帮你解决vue自定义单选框组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。