vue-自定义组件-自定义checkbox效果

billycoder

已于 2022-01-22 20:22:27 修改

阅读量1k

点赞数

分类专栏：前端-随记文章标签： vue.js javascript 前端

于 2022-01-22 20:14:24 首次发布

本文链接：https://blog.youkuaiyun.com/billycoder/article/details/122642782

版权

前端-随记专栏收录该内容

11 篇文章

订阅专栏

一个学生的问题

需求

完成如下的checkbox效果
在这里插入图片描述

写了个简单的demo

子组件

<template lang="">
  <div>
    <div
      class="ck"
      v-for="(item, index) in items"
      :key="index"
      :checked="item.checked"
      @click.prevent="item.checked=!item.checked"
    >
      <span>{{ item.text }}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "MyCheckBox",
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  data() {
    return {};
  },
  methods: {
      switchCk(checked){
          console.log('switchCk');
          checked!=checked
      },
  }
};
</script>
<style scoped>
.ck {
  margin: 0px 5px;
  display: inline-block;
  border-radius: 30px;
  background-color: #ebeef7;
  padding: 5px;
  background-image: url("./icon-ck-normal.png");
  background-repeat: no-repeat;
  background-position: 96% center;
  padding-right: 40px;
}
.ck[checked] {
  background-color: #00bf77;
  background-image: url("./icon-ck-checked.png");
}
</style>

父组件

导入

import MyCheckBox from "./MyCheckBox.vue";

 components: {
    MyCheckBox
  },

使用

<my-check-box @change="onChange" :items="ckItems"> </my-check-box>

数据

ckItems: [
        { text: "人员死亡", checked: false },
        { text: "伤害妇女", checked: true },
        { text: "SSP人员涉离（即公安人员）", checked: false },
        { text: "SSP人员涉离（即公安人员）受害 ", checked: true },
        { text: "高于四层建筑", checked: false }
      ],

数据获取

printCkItems() {
      var checkedStr = this.ckItems
        .map(function(obj) {
          return obj.checked;
        })
        .join(",");
      alert(checkedStr);
    },