单选题（公共组件）（原生）

最新推荐文章于 2023-06-13 18:49:42 发布

原创最新推荐文章于 2023-06-13 18:49:42 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

功能专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个基于Vue的自定义单选组件实现细节，包括HTML结构、JavaScript逻辑和CSS样式。该组件支持动态数据绑定、状态监听及父组件交互。

html

<div class="commentRadio">
      <div v-for="(item,index) in Obj.tmList" :key="index" class="inputClass">
        <input
          :id="item.id"
          type="radio"
          :disabled="true"
          :value="item.id"
          :checked="item.id===radioVal?true:false"
          @change="changeFun(item.id)"
        >
        <label :for="item.id"></label>
        <span>
          <label :for="item.id">
            {{item.item}}.{{item.title}}
            <a style="color:red;font-size:4vw">({{item.score}}分)</a>
          </label>
        </span>
      </div>
    </div>

js

export default {
  props: ['Obj'],
  data() {
    return {
      radioVal: '',
    }
  },
  watch: {
    radioVal: {
      handler(val) {  
         //拿到后台返回的正确选项显示，单选默认选中
         this.Obj.selectedId = val
         //父组件获取单选题的答案
         this.$emit('getRadioVal', { tmId: this.questionId, radioValue: val })
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    changeFun(id) {
      this.radioVal = id
    }
  }
}

css

.commentRadio input {
  width: 4.5vw;
  height: 4.5vw;
}
.inputClass {
  position: relative;
  line-height: 10vw;
  margin-left: 15px;
}

.inputClass input[type='radio'] {
  width: 20px;
  height: 20px;
  opacity: 0;
}

.inputClass > label {
  position: absolute;
  left: -2px;
  top: 9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #999;
}

/*设置选中的input的样式*/
/* + 是兄弟选择器,获取选中后的label元素*/
.inputClass input:checked + label {
  background-color: #f24d4b;
  border: 1px solid #f24d4b;
}

.inputClass input:checked + label::after {
  position: absolute;
  content: '';
  width: 5px;
  height: 10px;
  top: 3px;
  left: 6px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}