vue弹窗消息组件练习2

最新推荐文章于 2024-09-02 17:14:49 发布

章鱼no丸子

最新推荐文章于 2024-09-02 17:14:49 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue 组件弹窗

本文链接：https://blog.csdn.net/yuki_haha/article/details/72683136

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本来打算写一个那种提示完了自动消失的弹窗的，但是没有想好淡入淡出的效果。所以暂时算是半成品。

练习代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ys-alert-component</title>
    <style>
        input {
            border-radius: 5px;
            border: 1px solid #2f9df9;
            background-color: #39befb;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#39befb), to(#2091fc));
            background: -moz-gradient(linear, 0 0, 0 100%, from(#39befb), to(#2091fc));
            background: -o-gradient(linear, 0 0, 0 100%, from(#39befb), to(#2091fc));
            background: -ms-gradient(linear, 0 0, 0 100%, from(#39befb), to(#2091fc));
            color: #FFFFFF;
            height: 28px;
            padding: 0 20px;
            cursor: pointer;
            line-height: 28px;
            display: inline-block;
            margin-right: 5px;
            outline: none;
        }
        .ys-alert {
            display: inline-block;
            height: 26px;
            padding: 8px 25px;
            min-width: 200px;
            border-radius: 5px;
            box-shadow: 0 4px 12px rgba(0,0,0,.5);
            background: #b8d2f3;
            margin: 50px;
        }
        .icon {
            float: left;
            width: 26px;
            height: 26px;
            border: 3px solid #fff;
            border-radius: 50%;
            font-size: 16px;
            line-height: 20px;
            font-weight: bold;
            text-align: center;
            color: #fff;
            box-sizing: border-box;
            margin-right: 8px;
        }
        .content {
            float: left;
            line-height: 26px;
            font-size: 15px;
            color: #fff;
        }
        /*成功的样式*/
        .success {
            background: #9bdda7;
        }
        /*失败的样式*/
        .error {
            background: #f7d13b;
        }
        /*警告样式*/
        .warning {
            background: #e98c97;
        }   
    </style>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="呼唤默认的按钮" @click="alertShow('info')">
        <input type="button" value="呼唤成功的按钮" @click="alertShow('success')">
        <input type="button" value="呼唤失败的按钮" @click="alertShow('error')">
        <input type="button" value="呼唤警告的按钮" @click="alertShow('warning')">
        <input type="button" value="呼唤美美哒博客" @click="alertShow('yuki')">
        <ys-alert-component 
            icon-bar="O" 
            type="info" 
            v-if="info" 
            alert-content="我是默认的按钮哟">
        </ys-alert-component>
        <ys-alert-component 
            icon-bar="V" 
            type="success"  
            v-if="success" 
            alert-content="我是成功的按钮哟">   
        </ys-alert-component>
        <ys-alert-component 
            icon-bar="X" 
            type="error"  
            v-if="error" 
            alert-content="我是失败的按钮哟">
        </ys-alert-component>
        <ys-alert-component 
            icon-bar="!" 
            type="waring"  
            v-if="warning" 
            alert-content="我是警告的按钮哟">
        </ys-alert-component>
        <ys-alert-component 
            icon-bar="E" 
            type=""  
            v-if="yuki" 
            alert-content="我是灰色定制的按钮哟" 
            style="background-color: #ccc; color: #fff;">
            <div slot="alert-content">
                <span>章鱼不丸子</span>
                <a href="http://www.yuki.kim" >http://www.yuki.kim</a>
            </div>
        </ys-alert-component>
    </div>
    <script>
        /*
            props：
                type:
                    info: 默认
                    success: 成功
                    error: 失败
                    warning：警告
                iconBar： 字符串，我没有图标，就用字母写的。很low...
                alertContent： 定制提醒的内容
                hideIcon: 隐藏或者显示丑丑的图标
            slot：
                alert-content: 定制提醒信息内容及icon整套模板

            methods：
                无，没有写方法

        */
        Vue.component("ys-alert-component", {
            props: {
                iconBar: {
                    type: String,
                    default: ""
                },
                alertContent: {
                    type: String,
                    default: "请定制提醒内容"
                },
                hideIcon: {
                    type: Boolean,
                    default: false
                },
                type: {
                    type: String,
                    default: ""
                }
            },
            template:`
                <div class="ys-alert" :class="type">
                    <slot name="alert-content">
                        <div class="icon" >{{ iconBar }}</div>
                        <div class="content">
                            {{ alertContent }}
                        </div>
                    </slot>
                </div>`

        })


        var vm = new Vue({
            el: "#app",
            data: {
                info: false,
                error: false,
                success: false,
                warning: false,
                yuki: false
            },
            methods: {
                alertShow (type) {
                    switch (type) {
                        case "info" :
                            this.info = !this.info;
                            //setTimeout("vm.info = !vm.info", 2000);
                            break;
                        case "error" :
                            this.error = !this.error;
                            //setTimeout("vm.error = !vm.error", 2000);
                            break;
                        case "success" :
                            this.success = !this.success;
                            //setTimeout("vm.success = !vm.success", 2000);
                            break;
                        case "warning" :
                            this.warning = !this.warning;
                            //setTimeout("vm.warning = !vm.warning", 2000);
                            break;
                        default:
                            this.yuki = !this.yuki;
                            //setTimeout("vm.yuki = !vm.yuki", 2000);
                    }
                }
            }
        })
    </script>
</body>
</html>