Vue自定义多选组件使用详解

本文实例为大家分享了Vue自定义多选组件使用的具体代码，供大家参考，具体内容如下

子组件（选项卡）

checkBoxCard.vue

1. <template>
2. <div class="checkBoxCard">
3. <div :class="`box ${check && 'boxCheck'}`" @click="checked(), updateData()">
4. {{ name }}
5. </div>
6. </div>
7. </template>
8.  
9. <script>
10. export default {
11. name: "checkBoxCard",
12. props: {
13. name: String,
14. checkIndex: {
15. type: Number,
16. default: null,
17. },
18. },
19. data() {
20. return {
21. radio: 0,
22. check: false,
23. radioName: "",
24. list: [],
25. };
26. },
27. methods: {
28. checked() {
29. if (this.radio == 1) {
30. this.check = false;
31. this.radio = 0;
32. } else if (this.radio == 0) {
33. this.check = true;
34. this.radio = 1;
35. }
36. },
37. updateData() {
38. if (this.radio == 1) {
39. this.radioName = this.name;
40. } else if (this.radio == 0) {
41. this.radioName = "";
42. }
43. this.$emit("updateSurveyData", this.radioName, this.checkIndex);
44. },
45. },
46. mounted() {},
47. created() {},
48. };
49. </script>
50.  
51. <style lang="scss" scoped>
52. .checkBoxCard {
53. margin-right: 15px;
54. display: inline-block;
55. margin-top: 10px;
56. }
57. .boxCheck {
58. color: rgba(183, 37, 37, 1);
59. background: bisque;
60. }
61. .box {
62. border: 0.55px solid #eee;
63. padding: 5px 10px;
64. font-size: 3.73333vw;
65. border-radius: 10px;
66. }
67. </style>

父组件

checkBox.vue

1. <template>
2. <div class="checkBox">
3. <div class="title">
4. 选择
5. </div>
6.  
7. <div class="card">
8. <CheckBoxCard
9. v-for="item in list"
10. :key="item.value"
11. :name="item.name"
12. :checkIndex="item.value"
13. @updateSurveyData="updateSurveyData"
14. />
15. </div>
16. </div>
17. </template>
18.  
19. <script>
20. import CheckBoxCard from "./checkBoxCard";
21. export default {
22. name: "checkBox",
23. components: {
24. CheckBoxCard,
25. },
26. data: function () {
27. return {
28. list: [
29. { value: 0, name: "选项1" },
30. { value: 1, name: "选项2" },
31. { value: 2, name: "选项3" },
32. { value: 3, name: "选项4" },
33. { value: 4, name: "选项5" },
34. { value: 5, name: "选项6" },
35. { value: 6, name: "其他" },
36. ],
37. name: "",
38. checkList: [],
39. };
40. },
41. methods: {
42. updateSurveyData(question, index) {
43. this.checkList[index] = question;
44. console.log(this.checkList.filter((x) => x != ""));
45. console.log(this.checkList.filter((x) => x != "").join());
46. },
47. },
48. created() {},
49. };
50. </script>
51.  
52. <style scoped>
53. .checkBox {
54. padding: 5.33333vw 4vw;
55. border-bottom: 0.55px solid #eee;
56. background: white;
57. }
58.  
59. .title {
60. text-align: left;
61. color: #323233;
62. font-size: 3.73333vw;
63. padding-bottom: 10px;
64. line-height: 30px;
65. }
66. </style>

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

原文链接：https://blog.csdn.net/z772330927/article/details/107907159