Vue自定义slot写消息提示小红点

cysear

于 2017-08-07 09:06:38 发布

阅读量1.5w

点赞数 4

分类专栏： vue 文章标签： slot-作用域插槽小红点提示 vue-js

本文链接：https://blog.csdn.net/cysear/article/details/76798176

版权

先上效果图：
红点提示效果图

我是用的elementUI结合作用域插槽，
先写slot，直接用的模板定义

<script type="text/x-template" id="tipnotes">
    <span>
        <slot :text="redval"></slot>
    </span>
</script>

注册组件：

Vue.component('tipnotes',{
        template:'#tipnotes',
        props:['redval']
    });

data属性：

data: function () {
   
            return { 
                redmsg:"3",
                rednote:"4",
                redday:"0"
            };
        },

父组件模板：

<el-dropdown class=" color-white head-item">
                  <span class

最低0.47元/天解锁文章