vue封装radio组件

最新推荐文章于 2024-07-02 17:50:24 发布

FourteenSeptember

最新推荐文章于 2024-07-02 17:50:24 发布

阅读量181

点赞数

分类专栏： Vue 文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/wozouludaifeng/article/details/120060209

版权

Vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文介绍了使用 Vue.js 创建一个可复用的单选框组件，该组件支持从字符串或数组形式的选项，并能双向绑定选中值。组件内部处理了选项的禁用状态，并在值改变时触发父组件的输入事件。同时，展示了父组件如何使用该组件并展示选中值。

摘要由CSDN通过智能技术生成

子组件

<template>
  <div class="radio">
    <label class="title">{{title}}</label>
    <a href="#"
       v-for="(item, index) in options"
       :key="index"
       class="radioLink">
      <div class="radioList">
        <div class="radioArea">
          <label>
            <span>
              <input type="radio"
                     :value="typeof item == 'string' ? item : item.value"
                     class="radioInput"
                     v-model="selectedValue"
                     :disabled="typeof item == 'string' ? false : item.disabled == true ? true :false">
              <span class="radioSelect"
                    :class="typeof item == 'string' ? '' : item.disabled == true ? 'radioSelectDisabled' : '' "></span>
            </span>
            <span class="selectListItem">{{typeof item == 'string' ? item : item.label}}</span>
          </label>
        </div>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  name: 'radio',
  data () {
    return {
      selectedValue: ''
    }
  },
  props: {
    title: String,
    options: [String, Array]
  },
  created () {
    console.log(this.options);
    console.log(typeof (this.options));
    if (typeof (this.options) == 'string') {
      this.options = eval("(" + this.options + ")");
      console.log(this.options);
    }
  },
  methods: {
  },
  computed: {
  },
  watch: {
    selectedValue () {
      this.$emit('input', this.selectedValue)
    }
  }
}
</script>

<style scoped lang="less">
.title {
  color: #000;
  font-size: 14px;
  text-align: left;
  line-height: 20px;
  display: block;
  padding: 10px 0;
}
.radioLink {
  box-sizing: border-box;
  color: inherit;
  min-height: 40px;
  display: block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.radioList {
  height: 40px;
  line-height: 40px;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}

.radioArea,
.radioArea label {
  height: 40px;
  width: 100%;
  display: block;
}

.radioInput {
  display: none;
}

.radioSelect {
  box-sizing: border-box;
  display: inline-block;
  background-color: #fff;
  border-radius: 100%;
  border: 1px solid #ccc;
  position: relative;
  width: 12px;
  height: 12px;
  vertical-align: middle;
}

.radioSelectDisabled {
  background-color: #d9d9d9;
  border-color: #ccc;
}

.radioInput:checked + .radioSelect {
  background-color: #3578F6;
  border-color: #3578F6;
}

.radioInput:checked + .radioSelect::after {
  background-color: #fff;
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}

.radioSelect::after {
  content: ' ';
  border-radius: 100%;
  top: 1px;
  left: 1px;
  position: absolute;
  width: 8px;
  height: 8px;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
  // -webkit-transform: scale(0);
  // transform: scale(0);
}
.selectListItem {
  font-size: 12px;
  vertical-align: middle;
  margin-left: 6px;
  color: #666;
}
</style>

父组件

<template>
  <m-page>
    <div slot="content">
      <div class="about">
        <Radio title="普通单选框列表"
              v-model="value1"
              :options="options1" />
        <p>您选中的是：{{value1}}</p>
        <Radio title="有默认选中的单选框列表"
              v-model="value2"
              :options="options1" />
        <p>您选中的是：{{value2}}</p>
        <Radio title="油性漆参加问卷调查吗？"
              v-model="daan"
              :options="options" />
        <p @click="sss">您选中的是：{{daan}}</p>
      </div>
      
    </div>
    </div>
  </m-page>
</template>

<script>
import Radio from '@/components/m-radio.vue'
export default {
  components: {
    Radio
  },
  data () {
    return {
      daan: '',
      value1: '',
      value2: 'optionA',
      options1: ['optionA', 'optionB', 'optionC'],
      options: [
        {
          label: '有的',
          value: 'valueF',
          disabled: true
        },
        {
          label: '没有',
          value: 'valueA'
        },
        {
          label: '一点没有',
          value: 'valueB'
        }
      ]
    }
  },
  methods: {
    sss(){
      console.log(this.daan)
    }
  },
  mounted(){
     
  }
}
</script>

<style lang="less" scoped>
.about {
  min-height: 100vh;
  background: #fff;
  box-sizing: border-box;
}
.about p {
  padding: 0rem 0.2rem;
  box-sizing: border-box;
  font-size: 0.28rem;
  color: #4e4e4e;
  margin-bottom: 0.8rem;
}
}
</style>