10-18 09:13 阅读 112

Tag模块数组 indexOf，splice的使用方法

小知识

indexOf()查找一个数值在不在当前数组中，若在就返回第一次该数值出现的索引，否则返回-1。

arr.indexOf(2) //0 arr.indexOf(3) //-1

splice：

参数（开始项的下标，剪切长度，剪切以后最后一位开始添加数据）

Tags模块数组

外部传来的tags数据

Tags分为两种，未选中和已选中：

<Tags :data-source="tags"/>
---------------------
tags:['衣'，'食','住','行']复制代码

tags = [ ];,tags是一个数组，但是tags是一个字符串数组该如何表示？
tags :string[]=[];,tags是一个字符串数组，目前是一个空数组；
selectedTags: string[]=[];,已被选中的数组也是字符串数组,默认是一个空数组;
tags是外部传来的数组：@Prop() tags :string[]=[];
因为tags是外部传来的数据，所以没有默认值。有可能给值，有可能是空的。@Prop() tags :string[] | undefined;
在外部准备赋值时<Tags tags=""/>,发现两个都是tags，有点重复了，所以把tags改成dataSource,代表意思就是一开始的数据源，外部输入的最开始的数据；
所以变成了，@Prop() dataSource :string[] | undefined;
外部就是

在内部渲染tags：遍历datasource也就是tags里面的内容，并显示在{{tag}}里面，用v-for，就得加个key。

<li v-for="tag in dataSource" ：key=“tag”>{{tag}}</li>

这样tags的内容“衣食住行”就会显示在页面上。

已选中的数据

selectedTags: string[]=[];,已被选中的数组也是字符串数组,默认是一个空数组;
点击哪个就是选中哪个；在li上添加一个click；

`<li v-for="tag in dataSource" ：key=“tag” @click="select(tag)">{{tag}}</li>`复制代码

select如何实现？给select一个tag，就把这个tag放到专门存放已选中的的数组里。

select(tag；string){
this.selectedTags.push(tag)//把这个tag放到selectedTags里面。
}复制代码

在li里面，如果tag在selectedTags里面，那么这个tag就是被选中的；

:class={selected:selectedTags.indexOf(tag)>=0}

在CSS里面给selected加样式，则选中时，就会体现那个样式。

&.selected{ background:darken($bg,50%);}

再次点击时，就取消选中该如何表达？

 const index = this.selectedTags.indexOf(tag);
 //查找this.selectedTags是否有tag，若无,index = -1，若有,index > 0。
    if (index >= 0) {
      this.selectedTags.splice(index, 1);
      //从index的位置开始剪切，剪切1个；意思就是把这个删除,从已选中的数组中拿出去。
    } else {
      this.selectedTags.push(tag);//如果tag里面没有的话，就把它放入已选中的数组里面里面；
    }复制代码

新增标签

先绑定一个点击事件；
create,如何创建呢，在ts内声明方法；
创建之后，把他放到datasource里面
解析：如果标签名不为空，就像外部发送一个更新datasource的请求，并在datasource后面，添加新增的name。
在tags上加一个.sync，就会把传的这个数组[...this.dataSource, name]，赋值给datasource。

当点击新增标签时，新添加标签；<button @click="create">新增标签</button>

create(){
const name= window.prompt(message:'请输入标签名')；
}复制代码

 create() {
  const name = window.prompt('请输入标签名');
  if (name === '') {
    window.alert('标签名不能为空');
  } else if (this.dataSource) {
  //如果这个datasource存在；
    this.$emit('update:dataSource',
      [...this.dataSource, name]);
  }
}复制代码

<Tags :data-source.sync="tags/>

如果点击时，tag在里面，那么就删掉，就是回到未选中的状态；
如果tag不在里面就是添加到已选中的数组里。

作者：小阿妍
链接：https://juejin.cn/post/7020323206946881566