标签：el 18 blog tag components 标签 my data card

 components/card下创建CardTag.vue：

<template>
    <el-card :body-style="{ padding: '8px 18px' }">
        <div slot="header" class="my-tag-header">
            <span>最热标签</span>
            <a @click="moreTags" class="my-pull-right my-tag-more">查看全部</a>
        </div>

        <ul class="my-tag-list">
            <li class="my-tag-item" v-for="t in tags" :key="t.id">
                <!--type="primary"-->
                <!--round:是否圆角按钮,plain:是否朴素按钮-->
                <el-button @click="tag(t.id)" size="mini" type="primary" round plain>{{t.tagName}}</el-button>
            </li>
        </ul>
    </el-card>
</template>
<script>
    export default
    {
        name:"ArticleTag",
        props:
        {
            tags:Array
        },
        data()
        {
            return{

            }
        },
        methods:
        {
            moreTags()
            {
                this.$router.push('/tag/all');
            },
            tag(id)
            {
                this.$router.push({path:`/tag/${id}`,});
            }
        }
    }
</script>

<style>
    .my-tag-header
    {
        font-weight: 600;
    }

    .my-tag-more
    {
        font-size: 14px;
        color: #78b6f7;
    }

    .my-tag-list
    {
        list-style-type: none;
    }

    .my-tag-item
    {
        display: inline-block;
        padding: 4px;
        font-size: 14px;
        color: #5FB878;
    }

    .my-tag-item a:hover
    {
        text-decoration: underline;
    }
</style>

上面有两个触发方法，一个是查看全部的tag，跳转到/tag/all

一个是查看标签下的文章，跳转到/tag/{tagId}

需要外部传值 tags，标签列表，其中Tag必须有id，tagName这两个属性

添加到侧边栏(views下的Index.vue)

<!--body-->
<template>
  <div>
    <el-container>
        <el-main class="myArticles">
            <!--文章列表-->
            <ArticleScrollPage>

            </ArticleScrollPage>
        </el-main>
        <el-aside>
            <mine></mine>
            <article-tag :tags="hotTags"></article-tag>
        </el-aside>
    </el-container>
  </div>
</template>

<script>
    import ArticleScrollPage from "@/components/common/ArticleScrollPage"
    import Mine from "@/components/card/Mine"
    import ArticleTag from "@/components/card/ArticleTag"
    import {getHotTags} from "@/api/tag";
    export default
    {
        name: '',
        components:
        {
            ArticleScrollPage,
            mine:Mine,
            "article-tag":ArticleTag

        },
        data()
        {
            return{
                hotTags:Array
            }
        },
        created()
        {
            this.getHotTags();
        },
        methods:
        {
            getHotTags()
            {
                getHotTags().then((res)=>
                    {
                        if(res.data.success)
                        {
                            this.hotTags = res.data.data
                        }else
                        {
                            this.$message.error(res.data.msg)
                        }
                    }).catch(()=>
                    {
                        this.$message.error("系统出错");
                    }).finally(()=>
                    {

                    })
            }
        }
    }
</script>

<style scoped>
.el-container
{
    width: 960px;
}
/*右侧边栏*/
.el-aside
{
    /*右侧和主部空了20px的距离*/
    margin-left: 20px;
    width: 260px;
}
/*主栏*/
.el-main {
    padding: 0px;
    line-height: 16px;
}
/*文章列表*/
.el-card {
    border-radius: 0;
}
/*设置卡片最后一个子元素除外的样式，第一个不用和上面有间隙*/
.el-card:not(:first-child)
{
    margin-top: 20px;
}
</style>

标签：el,18,blog,tag,components,标签,my,data,card
来源： https://blog.csdn.net/weixin_45974277/article/details/122845635

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。