服务器之家

服务器之家 > 正文

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

时间:2021-09-18 17:00     来源/作者:雪藏琉璃峰

本文实例为大家分享了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>

效果图

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

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

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

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

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

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部