"轻提示"组件:<toast> —— 快应用组件库H-UI

最新推荐文章于 2025-06-03 09:05:34 发布

原创最新推荐文章于 2025-06-03 09:05:34 发布 · 319 阅读

0 ·

CC 4.0 BY-SA版权

操作反馈专栏收录该内容

10 篇文章

订阅专栏

本文展示了H-UI框架中Toast组件的各种用法，包括显示文本、图标、自定义图片、加载提示及设置持续时间，通过按钮触发不同的Toast展示效果。

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

-w605

Screenshot_20200417_161206_com.huawei.fastapp

<import name="toast" src="../Common/ui/h-ui/feedback/c_toast"></import>
<import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
<template>
    <div class="container">
        <toast id="toast"></toast>
        <h-button text="文本 Toast" block="true" type="info" οnclick="handleClick1"></h-button>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {},
        handleClick1() {
            this.$child('toast').showToast({
                text: '文本内容'
            });
        }
    }
</script>

-w604

Screenshot_20200417_161214_com.huawei.fastapp

<import name="toast" src="../Common/ui/h-ui/feedback/c_toast"></import>
<import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
<template>
    <div class="container">
        <toast id="toast"></toast>
        <h-button text="文本 + ICON" block="true" type="info" οnclick="handleClick2"></h-button>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {},
        handleClick2() {
            this.$child('toast').showToast({
                text: '文本内容',
                icon: 'warning'
            });
        }
    }
</script>

-w605

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n1wSkwDp-1587114143513)(https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/blog/feedback/toast/Screenshot_20200417_161221_com.huawei.fastapp.jpg)]

<import name="toast" src="../Common/ui/h-ui/feedback/c_toast"></import>
<import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
<template>
    <div class="container">
        <toast id="toast"></toast>
        <h-button text="自定义图片" block="true" type="info" οnclick="handleClick3"></h-button>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {},
        handleClick3() {
            this.$child('toast').showToast({
                text: 'H-UI',
                image: '/Common/icons/logo.png'
            });
        }
    }
</script>

-w605

Screenshot_20200417_161228_com.huawei.fastapp

<import name="toast" src="../Common/ui/h-ui/feedback/c_toast"></import>
<import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
<template>
    <div class="container">
        <toast id="toast"></toast>
        <h-button text="加载中" block="true" type="info" οnclick="handleClick4"></h-button>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {},
        handleClick4() {
            this.$child('toast').showToast({
                text: '正在加载...',
                loading: true
            });
        }
    }
</script>

-w605

Screenshot_20200417_161233_com.huawei.fastapp

<import name="toast" src="../Common/ui/h-ui/feedback/c_toast"></import>
<import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
<template>
    <div class="container">
        <toast id="toast"></toast>
        <h-button text="自定义持续时间" block="true" type="info" οnclick="handleClick5"></h-button>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {},
        handleClick5() {
            this.$child('toast').showToast({
                text: '5秒后消失',
                duration: 5
            });
        }
    }
</script>