riot实现alert标签

最新推荐文章于 2023-11-26 19:14:40 发布

caiwanxia

最新推荐文章于 2023-11-26 19:14:40 发布

阅读量415

点赞数

分类专栏： riot 自定义组件文章标签： riot 自定义组件

本文链接：https://blog.csdn.net/caiwanxia1/article/details/53005071

版权

riot 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

自定义组件

3 篇文章 0 订阅

订阅专栏

<rg-alerts>
    <div class="alerts">
        <div each="{ opts.alerts }" class="alerts__alert { 'alerts__alert--' + type }" if="{ isvisible }" οnclick="{ select }">
            { text }
            <button class="button button--close" if="{ dismissable != false }" οnclick="{ parent.dismiss }">
                ×
            </button>
        </div>
    </div>

    <script>
        this.on('update', () => {
            if (!opts.alerts) return
        opts.alerts.forEach(alert => {
            if (typeof alert.isvisible === 'undefined') alert.isvisible = true
        if (alert.timeout) {
            alert.startTimer = () => {
                alert.timer = setTimeout(() => {
                            this.dismiss({
                            item: alert
                        })
            }, alert.timeout)
            }
            alert.startTimer()
        }
        })
        })

        this.dismiss = e => {
            const alert = e.item
            alert.isvisible = false
            clearTimeout(alert.timer)
            this.trigger('dismiss', alert)
            this.update()
        }

        this.select = e => {
            const alert = e.item
            if (alert.onclick) alert.onclick(alert)
            this.trigger('select', alert)
        }

    </script>
</rg-alerts>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Riot Alert Example: Page Switching</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/blazecss/latest/blaze.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>Alert</h2>
    <div class="demo">
        <rg-alerts alerts="{ alerts }"></rg-alerts>
        <button class="button" οnclick="{ addAlert() }">Add alert</button>
    </div>


    <!-- scripts we need -->
    <script src="https://rawgit.com/riot/riot/master/riot%2Bcompiler.min.js"></script>
    <!-- riot tags -->
    <script src="rg-alerts.tag" type="riot/tag"></script>

    <!-- mount this app -->
    <script>
        riot.mount('rg-alerts');
        this.alerts = [{
            type: 'primary',
            text: 'Look! Something you should know about.'
        }, {
            type: 'secondary',
            text: 'Warning! Something sort of bad happened.',
            dismissable: false
        }, {
            type: 'success',
            text: 'Success! Well done.'
        }, {
            type: 'error',
            text: 'Error! Something bad happened.',
            dismissable: true,
            timeout: 1000
        }];

        this.addAlert = () => {
            this.alerts.push({
                type: 'error',
                text: 'Eeek! Something broke...'
            })
        };
    </script>
</body>
</html>

caiwanxia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
riot实现alert标签

{ text } × this.on('update', () => { if (!opts.alerts) return opts.alerts.forEach(alert => { if (t
复制链接

扫一扫

专栏目录