el-tag入门学习

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

自律最差的编程狗

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

阅读量6.8k

点赞数 1

分类专栏： element-ui 文章标签：学习 vue.js javascript

本文链接：https://blog.csdn.net/qq_40765784/article/details/125313923

版权

element-ui 专栏收录该内容

43 篇文章 21 订阅

订阅专栏

el-tag入门学习

知识点

type属性默认是蓝色，还可以设置success,info,warning,danger
size属性默认最大，还可以设置medium,small,mini
closable属性可以进行移除样式显示
@close方法实现移除效果，其实就是对数组的删除操作
新增效果本质是对数组的增加，本次学习中接触到了el-input中的@blur,@keyup.enter.native两种触发事件钩子，一个是离开焦点钩子,一个是键盘回车钩子
effect设置主题，默认light主题，还可以设置dark,plain

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id='app'>
        <el-form>
            <el-form-item label='不同大小size'>
                <el-tag>标签1</el-tag>
                <el-tag type='success' size='medium'>标签2</el-tag>
                <el-tag type='info' size='small'>标签3</el-tag>
                <el-tag type='warning' size='mini'>标签4</el-tag>
                <el-tag type='danger'>标签5</el-tag>
            </el-form-item>
            <el-form-item label='可移除标签closable'>
                <el-tag v-for='tag in tags' :key='tag.id' :type='tag.type' closable @close='handleClose(tag)'>
                    {{tag.name}}</el-tag>
            </el-form-item>
            <el-form-item label='不同主题Dark'>
                <el-tag v-for='tag in tags' :key='tag.id' :type='tag.type' closable @close='handleClose(tag)' effect='dark'>
                    {{tag.name}}</el-tag>
            </el-form-item>
            <el-form-item label='不同主题Plain'>
                <el-tag v-for='tag in tags' :key='tag.id' :type='tag.type' closable @close='handleClose(tag)' effect='plain'>
                    {{tag.name}}</el-tag>
            </el-form-item>
        </el-form>
        <el-input class='input-new-tag' v-if='inputVisible' v-model='inputValue' size='small'
            @keyup.enter.native='confirmTag' @blur='confirmTag'>
        </el-input>
        <el-button v-else size='small' type='primary' @click='inputVisible = true'>+New Tag</el-button>
    </div>
</body>

</html>
<style>
    .el-tag+.el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tags: [
                    { id: 1, name: '标签', type: '' },
                    { id: 2, name: '标签', type: 'success' },
                    { id: 3, name: '标签', type: 'info' },
                    { id: 4, name: '标签', type: 'warning' },
                    { id: 5, name: '标签', type: 'danger' }
                ],
                inputVisible: false,
                inputValue: ''
            }
        },
        created() {
            this.mapTags()
        },
        methods: {
            mapTags() {
                this.tags.map(item => item.name = item.name + item.id)
            },
            handleClose(tag) {
                let index = this.tags.indexOf(tag)
                this.tags.splice(index, 1)
            },
            confirmTag() {
                if (this.inputVisible) {
                    let tag = {
                        id: this.tags.length + 1,
                        name: this.inputValue,
                        type: ''
                    }
                    this.tags.push(tag) 
                    this.inputValue = ''
                    this.inputVisible = false
                }
                

            }
        }
    })
</script>