16. EditLabel.vue功能实现

编辑页显示标签名

<template>
  <Layout>
    -- snip --
    <div class="form-wrapper">
      <FormItem :value="tag.name" field-name="标签名" placeholder="请输入标签名"/>
    </div>
    -- snip --
  </Layout>
</template>
<script lang="ts">
- snip --
@Component({
  components: {Button, FormItem}
})
export default class EditLabel extends Vue{
  tag?: {id: string, name: string} = undefined
  created(){
    const id = this.$route.params.id
    tagListModel.fetch()
    const tags = tagListModel.data
    const tag = tags.find(t => t.id === id)
    if (tag) {
      this.tag = tag;
    } else {
      this.$router.replace('/404')
    }
  }
}

实现更新功能

tagListmodel添加update方法

type TagListModel = {
 // ...
  update: (id: string, name: string) => 'success' | 'not found' | 'duplicated',
}
const tagListModel: TagListModel = {
  // ...
  update(id, name) {
    const ids = this.data.map(item => item.id);
    if (ids.indexOf(id) >= 0) {
      const tag = this.data.filter(item => item.id === id)[0];
      if (tag.name === name) {
        return 'duplicated';
      } else {
        tag.name = name;
        this.save();
        return 'success';
      }
    } else {
      return 'not found';
    }
  }
};

EditLabel.vue里监听update:value事件

<template>
//...
    <div class="form-wrapper">
      <FormItem :value="tag.name"
                @update:value="update"
                field-name="标签名"
                placeholder="请输入标签名"/>
    </div>
//...
</template>
<script lang="ts">
// ...
  update(value:string) {
    if(this.tag){
      tagListModel.update(this.tag.id, value)
    }
  }
}
</script>

FormItem组件里的update:value事件是input时抛出的

<template>
  <div>
    <label class="formItem">
      <span class="name">{{ fieldName }}</span>
      <input type="text" :value="value"
             @input="onValueChanged($event.target.value)"
             :placeholder="placeholder">
    </label>
  </div>
</template>
<script lang="ts">
// ...
  onValueChanged(value:string){
    this.$emit('update:value', value)
  }
}
</script>

实现删除功能

tagListModel添加remove方法

  remove(id) {
    let index = -1
    for (let i = 0; i < this.data.length; i++) {
      if (this.data[i].id === id){
        index = i
        break
      }
    }
    this.data.splice(index, 1)
    this.save()
    return true
  }

回退按钮

  back():void {
    this.$router.back()
  }

父元素监听不到click事件，需要在根元素抛出click事件

<Icon class="leftIcon" name="left" @click="back"/>

<svg class="icon" @click="$emit('click', $event)">
  <use :xlink:href="'#'+name" />
</svg>

idCreator

新建lib目录，新建idCreator文件

let id:number = parseInt(window.localStorage.getItem('_idMax') || '0') || 0
const createId = ():number => {
  id++
  window.localStorage.setItem('_idMax', id.toString())
  return id
}
export default createId