使用mintui 的js组件图标的使用

最新推荐文章于 2024-11-05 20:28:06 发布

行尽江南

最新推荐文章于 2024-11-05 20:28:06 发布

阅读量788

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_43209953/article/details/86531286

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个使用Vue.js的App组件，演示了如何通过点击事件触发Mint UI的Toast消息提示，并展示了不同大小的badge标签的使用方法。同时，通过router-link实现了页面间的跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div>
        <h1 @click="show">我是App组件</h1>
        <router-link to="/acount">acount</router-link>
        <router-link to="/goodlist">goodlist</router-link>
        <router-view></router-view>
        <mt-badge size="small">30</mt-badge>
        <mt-badge size="normal">10</mt-badge>
        <mt-badge size="large">10</mt-badge>
    </div>

</template>

<style></style>
<script>
    //导入mintUI的js包
    import { Toast } from 'mint-ui';
    export default {
        data:function(){
            return {
                toastinstance:null
            }
        },
        created:function(){
            this.show();
            var that=this.toastinstance;
            setTimeout(function(){
                that.close();
            },3000)
        },
        methods:{
            show:function(){
                this.toastinstance=Toast({
                    message: '这是消息',
                    position: 'center',
                    duration: -1,
                    iconClass:"glyphicon glyphicon-heart",//设置图标的类
                    className:"myClass"//这里可以定义自己的类在这个toast上生效
                });
            }
        }
    }
</script>