Tags.vue的封装

  1. Tags.vue拥有的组件
1
2
3
4
5
6

  components: {
  	Scroll,
    TagsNav,
    TagSelected,
    TagList
  }
  1. TagsNav的封装
    • 无难点，注意判断完成的点击状态，以及complete方法传入新添的tag即可
1
2
3
4
5
6
7
8
9

<template>
  <header>
    <div class="back" @click="back">
      <Icon name="back" />
    </div>
    <span>添加支出类别</span>
    <span class="complete" :class="{'complete-clicked':clicked}" @click="complete">完成</span>
  </header>
</template>
  1. TagSelected的封装
    • 无难点，只需从Tags.vue中传入选中的tag即可
1

   @Prop({ default: { name: "餐饮", id: 1 }, type: Object }) selectedTag?: Tag;
  1. TagsList的封装
  • 这里需要从Tags.vue中传入tagList和selectTag从而正确的显示
  • 点击Icon后会得到一个selectTag从而给其添加样式
  • 通过判断当前选中的tag的id是否与当前Icon的id一致来判断是否添加class
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<ul class="icons">
      <li v-for="tag in tagList" :key="tag.id">
        <Icon
          class="icon"
          :name="tag.name"
          @click.native="selectTag(tag)"
          :class="{'selected':selectedTag.id===tag.id}"
        />
        <span>{{tag.name}}</span>
</li>

@Component
export default class TagList extends Vue {
  @Prop() readonly tagList!: Tag[];
  @Prop() selectedTag?: Tag;

  selectTag(tag: Tag) {
    this.$emit("selectTag", tag);
  }
}

Tags.vue的selected方法（遇到的坑）

1
2
3

  selectTag(tag: Tag) {
    this.selectedTag = tag;
  } // 正确的写法，会同步更新

1
2
3
4

  selectTag(tag: Tag) {
    this.selectedTag.name = tag.name
    this.selectedTag.id = tag.id
  }// 错误的写法，selectedTag不会同步更新

原因：以这种方式修改对象属性不会自动更新