帝国模板之家为广大用户提供专业、一站式建站服务。

综合教程

综合教程栏目,介绍网站开发前端、后台、服务器、数据库、建站工具等实用教程。

当前位置:首页 > 教程 > 综合教程 > 正文

Vue 自定义多选组件

帝国模板之家 2020-08-24 综合教程 评论

Vue 自定义多选组件

Vue如何自定义多选组件?今天帝国模板之家小编给大家分享一下实现方法:

首先我们来看看实现效果图:

Vue 自定义多选组件

代码如下:

子组件(选项卡)
checkBoxCard.vue

<template>
  <div class="checkBoxCard">
    <div :class="`box ${check && 'boxCheck'}`" @click="checked(), updateData()">
      {{ name }}
    </div>
  </div>
</template>

<script>
export default {
  name: "checkBoxCard",
  props: {
    name: String,
    checkIndex: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      radio: 0,
      check: false,
      radioName: "",
      list: [],
    };
  },
  methods: {
    checked() {
      if (this.radio == 1) {
        this.check = false;
        this.radio = 0;
      } else if (this.radio == 0) {
        this.check = true;
        this.radio = 1;
      }
    },
    updateData() {
      if (this.radio == 1) {
        this.radioName = this.name;
      } else if (this.radio == 0) {
        this.radioName = "";
      }
      this.$emit("updateSurveyData", this.radioName, this.checkIndex);
    },
  },
  mounted() {},
  created() {},
};
</script>

<style  lang="scss" scoped>
.checkBoxCard {
  margin-right: 15px;
  display: inline-block;
  margin-top: 10px;
}
.boxCheck {
  color: rgba(183, 37, 37, 1);
  background: bisque;
}
.box {
  border: 0.55px solid #eee;
  padding: 5px 10px;
  font-size: 3.73333vw;
  border-radius: 10px;
}
</style>

父组件
checkBox.vue

<template>
  <div class="checkBox">
    <div class="title">
      选择
    </div>

    <div class="card">    
        <CheckBoxCard
          v-for="item in list"
          :key="item.value"
          :name="item.name"
          :checkIndex="item.value"
          @updateSurveyData="updateSurveyData"
        />
    </div>
  </div>
</template>

<script>
import CheckBoxCard from "./checkBoxCard";
export default {
  name: "checkBox",
  components: {
    CheckBoxCard,
  },
  data: function () {
    return {
      list: [
        { value: 0, name: "选项1" },
        { value: 1, name: "选项2" },
        { value: 2, name: "选项3" },
        { value: 3, name: "选项4" },
        { value: 4, name: "选项5" },
        { value: 5, name: "选项6" },
        { value: 6, name: "其他" },
      ],
      name: "",
       checkList: [],
    };
  },
  methods: {
    updateSurveyData(question, index) {
      this.checkList[index] = question;
       console.log(this.checkList.filter((x) => x != ""));
      console.log(this.checkList.filter((x) => x != "").join());
    },
  },
  created() {},
};
</script>

<style scoped>
.checkBox {
  padding: 5.33333vw 4vw;
  border-bottom: 0.55px solid #eee;
  background: white;
}

.title {
  text-align: left;
  color: #323233;
  font-size: 3.73333vw;
  padding-bottom: 10px;
  line-height: 30px;
}
</style>

以上就是Vue 自定义多选组件教程,更多相关内容请关注帝国模板之家其他文章。

就像朝日会耀眼一样,有一颗明亮的心,一样会照亮人生。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

帝国手册

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言