按钮式的单选封装-vue

LinDon_

已于 2023-04-14 11:30:48 修改

阅读量157

点赞数

文章标签： vue.js 前端

于 2023-04-14 11:22:20 首次发布

本文链接：https://blog.csdn.net/weixin_46252229/article/details/130149632

版权

组件

<template>
  <div>
    <el-button-group>
      <el-button
        style='margin-right: 15px'
        v-for="(btn, index) in buttons"
        :key="index"
        :type="value === btn.value ? 'primary' : ''"
        @click="$emit('input', btn.value)"
      >
        {{ btn.label }}
      </el-button>
    </el-button-group>
  </div>
</template>

<script>
export default {
  name: 'MyRadio',
  props: {
    value: Boolean,
    buttons: {
      type: Array,
      default: () => [
          { label: '是', value: true },
          { label: '否', value: false }
      ]

    }
  },
  data() {
    return {

    }
  }
}
</script>

页面使用

<template>
  <div>
    <h3>您是否喜欢这个单选组件？</h3>
    <my-radio v-model="likesIt"  />
  </div>
</template>

<script>
import MyRadio from './MyRadio.vue'

export default {
  components: { MyRadio },
  data() {
    return {
      likesIt: null
    }
  }
}
</script>