实现Tag取消选中功能

自定义dataSouce参数传递外部数据

// Money.vue 传递数据
<template>
  <Latout class-prefix="layout">
    <Tags :data-source="tags"/>
  </Latout>
</template>

<script>
export default {
  data(){
    return{
      tags:['衣', '食', '住', '行']
    } 
  }
}
</script>

// Tags.vue 使用外部数据
<template>
  <ul class="current">
    <li v-for="tag in dataSource" :key="tag"
      :class = "selectedTags.indexOf(tag) >= 0 && 'selected'">
{{tag}}</li>
  </ul>
</template>
<script lang="ts">
  import {Prop} from 'vue-property-decorator'; 
  export default class Tags extends Vue{
    @Prop() dataSource: string[] | undefined;
    selectedTags: string[] = [];    //选中的tag
  } 
</script>

实现切换

<template>
  <li v-for="tag in dataSource" :key="tag" :class="{selected: selectedTags.indexOf(tag) >=0 }" @click="toggle(tag)">{{tag}}</li>
</template>
<script lang="ts">
  export default class Tags extends Vue{
    selectedTags: string[] = [];
    toggle(tag: string){
      const index = this.selectedTags.indexOf(tag);   
      if(index >=0 ){     //查看tag索引是否在数组中，若存在则移除，不存在则添加
        this.selectedTags.splice(index,1);
      }else{
        this.selectedTags.push(tag);
      }     
    }  
  } 
</script>

实现新增标签

<template>
  <div class="new">
    <button @click="create">新增标签</button>
  </div>
</template>
<script lang="ts">
  create(){
    const name = window.prompt('请输入标签名');
    if(name === ''){
      window.alert('标签名不能为空')
    }else if(this.dataSource){
      this.$emit('update:dataSource',[...this.dataSource,name]);
    }    
  }
</script>

将record 复制保存至list

NumberPad ok 按钮

ok(){
  this.$emit('submit',this.output)
}

Money.vue

<NumberPad @submit="saveRecord"></NumberPad>
<script >
  const recordList: Record[] = JSON.parse(window.localStorage.getItem('recordList') || '[]');
  recordList: Record[] = recordList;   //声明类型及初始值
  saveRecord(){
    const record2: Record = JSON.parse(JSON.stringify(this.record));  //深拷贝，否则record2数组全部变为最后一次 record
    this.recordList.push(record2);
  } 
  @Watch('recordList')
  onRecordListChange(){
    window.localStorage.setItem('recordList',JSON.stringify(this.recordList)); // 将recordList 保存至缓存
  }
</script>

封装出一个 model

使用js实现

const localStorageKeyName = 'recordList'
const model = {
   fetch(){
     return JSON.parse(window.localStorage.getItem(localStorageKeyName) || [])
   },
  save(data){
     window.localStorage.setItem(localStorageKeyName,JSON.stringify(data))
  }
}
export default model
// export model

// ts 使用 require 导入 js
  const model = require('@/model.js').default;   // js为 export default model
  const model = require('@/model.js').model;    //  js为 export model
  // const {model} = require('@/model.js')
  console.log(model);

使用ts实现 ： 修改后缀名--> 加分号 --> 按报错提示修改

// custom.d.ts 自定义描述文件，整个目录可使用声明类型
type RecordItem = {
  tags: string[];
  notes: string;
  type: string;
  amount: number;
  createdAt?: Date;
}

const localStorageKeyName = 'recordList';
const model = {
  clone(data: RecordItem[] | RecordItem){
    return JSON.parse(JSON.stringify(data));
  },
   fetch(){
     //const x : RecordItem[] = JSON.parse(window.localStorage.getItem(localStorageKeyName) || '[]');return x;
     return JSON.parse(window.localStorage.getItem(localStorageKeyName) || '[]') as RecordItem[];  // as RecordItem[] 声明返回值类型
   },
  save(data: RecordItem[]){
     window.localStorage.setItem(localStorageKeyName,JSON.stringify(data));
  }
};
export default model;   // 对应的导入 import model from '@/model.ts';
export {model};   // import {model} from '@/model.ts';

  //const recordList: RecordIem[] = JSON.parse(window.localStorage.getItem('recordList') || '[]');
  const recordList = model.fetch();

  export default class Money extends Vue{
    saveRecord(){
      //const record2: RecordItem = JSON.parse(JSON.stringify(this.record));
      const record2: RecordItem = model.clone(this.record);
    }
    @Watch('recordList')
    onRecordListChange(){
     //window.localStorage.setItem('recordList', JSON.stringify(this.recordList));
      model.save(this.recordList);
    }
  }