Vue简单使用Element Plus Tag标签组件

最新推荐文章于 2024-06-17 08:43:56 发布

原创最新推荐文章于 2024-06-17 08:43:56 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文详细介绍了如何在Vue项目中使用ElementPlus的Tag标签组件进行动态设置，包括引入库、书写页面和相关API的使用。

文章目录

前言
一、准备工作？
二、使用步骤
- 1.引入库
- 2.书写页面
总结

前言

在开发中我们可能会使用到标签用于设置属性，怎么动态有趣的设置呢？我们可以使用Tag标签组件来实现
Element Plus
像我下面这样的效果怎么做呢？
在这里插入图片描述

提示：以下是本篇文章正文内容，下面案例可供参考

一、准备工作？

首先要创建一个vue项目，然后下载 Element Plus npm install element-plus --save

二、使用步骤

1.引入库

需要在main.js中添加以下内容
代码如下（示例）：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

2.书写页面

在vue文件中书写以下内容
代码如下（示例）：

<div class="flex gap-2">标签：
        <el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="false" @close="handleClose(tag)"
            style="margin-right: 8px">
            {{ tag }}
        </el-tag>
        <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="w-20" size="small"
            @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" style="width: 100px;" />
        <el-button v-else class="button-new-tag" size="small" @click="showInput">
            + New Tag
        </el-button>
    </div>

在script标签中书写

const inputValue = ref('')
const dynamicTags = ref(['企业', '新闻', '热点'])
const inputVisible = ref(false)
let InputRef = ref('')
let showInput = () => {
    inputVisible.value = true
    nextTick(() => {
        InputRef.value.focus()
    })
}

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

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

然后效果就出现了

在这里插入图片描述

总结

Tag标签中还有其他各种api，感兴趣的可以去查看一下文档。

在这里插入图片描述