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

最新推荐文章于 2025-05-14 23:39:01 发布

原创最新推荐文章于 2025-05-14 23:39:01 发布 · 200 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

功能专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个子组件中复选框的实现方式，通过Vue.js进行数据绑定和监听，实现了与父组件之间的数据交互。文章详细展示了如何使用v-model进行双向数据绑定，以及如何在数据变化时触发自定义事件。

子组件

html

<div class="commentRadio">
      <div v-for="(con,i) in Obj.tmList" :key="i+'r'" class="inputClass">
        <input
          :id="con.id"
          type="checkbox"
          :value="con.id"
          v-model="checklist"
          :disabled="false"
        >
        <label :for="con.id"></label>
        <span>
          <label :for="con.id" style="margin-left:30px">
            {{con.item}}.{{con.title}}
            <a style="color:red;font-size:4vw">({{con.score}}分)</a>
          </label>
        </span>
      </div>
  </div>

js

export default {
  props: ['Obj'],
  data() {
    return {
      checklist: [],
      subjectId: ''
    }
  },
  watch: {
    Obj: {
      handler(val) {
          this.questionId = val.id
          if (!val.selectedId) {
            this.checklist = []
          } else {
            if (typeof val.selectedId === 'string') {
              this.checklist = this.strAndArr(val.selectedId)
            }
            if (typeof val.selectedId === 'object') {
              this.checklist = val.selectedId
            }
          }
      },
      deep: true,
      immediate: true
    },
    checklist: {
      handler(val) {
        this.Obj.selectedId = val
        this.$emit('getCheckboxVal', {
          tmId: this.questionId,
          checkValues: val
        })
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.stateValue = sessionStorage.getItem('stateValue')
  },
  methods: {
    // 字符串转数组
    strAndArr(str) {
      return str.split(',')
    }
  }
}

css

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

.inputClass input[type='checkbox'] {
  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);
}