tag,VUE3的JS写法

最新推荐文章于 2024-07-12 16:27:40 发布

李白的故乡

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量112

点赞数

分类专栏：项目技术文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_45448242/article/details/128850560

版权

项目技术专栏收录该内容

21 篇文章 0 订阅

订阅专栏

代码

<template>
  <!-- <div>
<img
src="https://img0.baidu.com/it/u=1590746422,1746295824&fm=253&fmt=auto&app=120&f=JPEG?w=463&h=454"
alt=""/>       
  </div> -->
  <el-tag
    v-for="tag in dynamicTags"
    :key="tag"
    class="mx-1"
    closable
    :disable-transitions="false"
    @close="handleClose(tag)"
  >
    {{ tag }}
  </el-tag>
  <el-input
    v-if="inputVisible"
    ref="InputRef"
    v-model="inputValue"
    class="ml-1 w-20"
    size="small"
    @keyup.enter="handleInputConfirm"
    @blur="handleInputConfirm"
  />
  <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
    + New Tag
  </el-button>
</template>

<script setup>
import { nextTick, ref } from 'vue'
import { ElInput } from 'element-plus'

const inputValue = ref('')
const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3'])
const inputVisible = ref(false)
const InputRef = ref()

const handleClose = (tag) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value?.input?.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>