Home  >  Article  >  Web Front-end  >  What are Vue list components and pop-up components? Use of list components and pop-up components (code example)

What are Vue list components and pop-up components? Use of list components and pop-up components (code example)

青灯夜游
青灯夜游forward
2018-10-24 17:25:232071browse

The content of this article is to introduce to you what are Vue list components and pop-up components? Use of list components and pop-up components (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

  • List component

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none
        }
        
        body {
            height: 2000px;
            overflow: hidden;
        }
        
        .header {
            width: 100%;
            height: 40px;
            background: #e1e1e1;
            text-align: center;
            line-height: 40px;
            position: fixed;
        }
        
        .header button {
            padding: 0rem 0.2rem;
            height: 40px;
            top: 0;
        }
        
        .header button:nth-of-type(1) {
            position: fixed;
            left: 0;
        }
        
        .header button:nth-of-type(2) {
            position: fixed;
            right: 0;
        }
        
        .content {
            position: fixed;
            top: 40px;
            overflow: auto;
            width: 100%;
            height: 100%;
        }
        
        .content .user_list h3 {
            background: #eeeeee;
            padding-left: 0.5rem;
            height: 2rem;
            line-height: 2rem;
        }
        
        .content .user_list ul li {
            height: 2.5rem;
            line-height: 2.5rem;
            border-bottom: .01rem #e1e1e1 solid;
            padding-left: 0.5rem
        }
        
        .user_list span:nth-of-type(2) {
            float: right;
            padding-right: 1rem
        }
        
        .content .user_index {
            position: fixed;
            right: 0.6rem;
            top: 50%;
            font-size: 1rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <custom-header :title="title">
            <button slot="left">返回</button>
        </custom-header>
        <custom-content :user-data="userData"></custom-content>
    </div>

    <template id="header">
        <div class="header">
            <slot name="left"></slot>
            <span>{{title}}</span>
            <slot name="right"></slot>
        </div>
    </template>
    <template id="list-content">
            <div class="content">
                    <ul class="user_list">
                        <li v-for="item in userData">
                            <h3>{{item.index}}</h3>
                            <ul>
                                <li v-for="user in item.users">
                                    <span>{{user.name}}</span>
                                    <span>{{user.tel}}</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="user_index" ref="user_index">
                        <li @click="setScroll" v-for="index in userIndex">{{index}}</li>
                    </ul>
                </div>
    </template>

    <script>
        // document.getElementById("").style.marginTop
        var userData = [{
            "index": "A",
            "users": [{
                "name": "a1",
                "tel": "123453221122"
            }, {
                "name": "a2",
                "tel": "123453221122"
            }, {
                "name": "a3",
                "tel": "123453221122"
            }]
        }, {
            "index": "B",
            "users": [{
                "name": "b1",
                "tel": "123453221122"
            }, {
                "name": "b2",
                "tel": "123453221122"
            }, {
                "name": "b3",
                "tel": "123453221122"
            }]
        }, {
            "index": "C",
            "users": [{
                "name": "c1",
                "tel": "123453221122"
            }, {
                "name": "c2",
                "tel": "123453221122"
            }, {
                "name": "c3",
                "tel": "123453221122"
            }]
        }, {
            "index": "D",
            "users": [{
                "name": "d1",
                "tel": "123453221122"
            }, {
                "name": "d2",
                "tel": "123453221122"
            }, {
                "name": "d3",
                "tel": "123453221122"
            }]
        }]
        Vue.component("custom-header", {
            template: '#header',
            props: ["title"]
        });
        Vue.component("custom-content", {
            template: "#list-content",
            props: ["userData"],
            computed: {
                userIndex: function() {
                    return this.filterIndex(this.userData);
                }
            },
            methods: {
                filterIndex: function(data) {
                    var result = [];
                    for (const i in data) {
                        if (data.hasOwnProperty(i)) {
                            const element = data[i];
                            result.push(element.index);
                        }
                    }
                    return result;
                },
                setListIndexPos: function() {
                    debugger
                    //获取索引元素
                    var element = this.$refs.user_index;
                    //获取offsetHight
                    var iH = element.offsetHeight;
                    element.style.marginTop = -iH / 2 + 'px';
                },
                setScroll: function() {

                }
            },
            mounted() {
                this.setListIndexPos();
            },

        });
        //多插槽的使用,则使用name属性来指定要插入的位置
        var vm = new Vue({
            el: '#app',
            data: {
                title: "通讯录",
                userData: userData
            },
            components: {

            }
        });
    </script>

</body>

</html>
  • # # Example 1 of pop-up component

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none
        }
        
        body {
            height: 2000px;
            overflow: hidden;
        }
        
        .header {
            width: 100%;
            height: 40px;
            background: #e1e1e1;
            text-align: center;
            line-height: 40px;
            position: fixed;
        }
        
        .header button {
            padding: 0rem 0.2rem;
            height: 40px;
            top: 0;
        }
        
        .header button:nth-of-type(1) {
            position: fixed;
            left: 0;
        }
        
        .header button:nth-of-type(2) {
            position: fixed;
            right: 0;
        }
        
        .content {
            position: fixed;
            top: 40px;
            overflow: auto;
            width: 100%;
            height: 100%;
        }
        
        .content .user_list h3 {
            background: #eeeeee;
            padding-left: 0.5rem;
            height: 2rem;
            line-height: 2rem;
        }
        
        .content .user_list ul li {
            height: 2.5rem;
            line-height: 2.5rem;
            border-bottom: .01rem #e1e1e1 solid;
            padding-left: 0.5rem
        }
        
        .user_list span:nth-of-type(2) {
            float: right;
            padding-right: 1rem
        }
        
        .content .user_index {
            position: fixed;
            right: 0.6rem;
            top: 50%;
            font-size: 1rem;
        }
        
        .message {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 5);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 200;
            display: flex;
        }
        
        .message .message-main {
            width: 200px;
            height: 150px;
            background: white;
            border-radius: 0.15rem;
            margin: auto;
            position: relative;
        }
        
        .message .message-title {
            padding: 0.1rem;
            border-bottom: 0.01rem solid #ccc;
        }
        
        .message .message-content {
            height: 2.5rem;
            line-height: 2.5rem;
            text-align: center;
        }
        
        .message .message-btn {
            position: absolute;
            right: 0;
            bottom: 0;
        }
        
        .message .message-btn button {
            margin: 1rem;
            padding: 0.1rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <custom-header :title="title">
            <button slot="left">返回</button>
        </custom-header>
        <custom-content :user-data="userData"></custom-content>
        <div class="message">
            <div class="message-main">
                <div class="message-title">xxxx</div>
                <div class="message-content">sssss</div>
                <div class="message-btn">
                    <button>确认</button>
                    <button>取消</button>
                </div>
            </div>
        </div>
    </div>

    <template id="header">
        <div class="header">
            <slot name="left"></slot>
            <span>{{title}}</span>
            <slot name="right"></slot>
        </div>
    </template>
    <template id="list-content">
            <div class="content">
                    <ul class="user_list">
                        <li v-for="item in userData">
                            <h3>{{item.index}}</h3>
                            <ul>
                                <li v-for="user in item.users">
                                    <span>{{user.name}}</span>
                                    <span>{{user.tel}}</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="user_index" ref="user_index">
                        <li @click="setScroll" v-for="index in userIndex">{{index}}</li>
                    </ul>
                </div>
    </template>

    <script>
        // document.getElementById("").style.marginTop
        var userData = [{
            "index": "A",
            "users": [{
                "name": "a1",
                "tel": "123453221122"
            }, {
                "name": "a2",
                "tel": "123453221122"
            }, {
                "name": "a3",
                "tel": "123453221122"
            }]
        }, {
            "index": "B",
            "users": [{
                "name": "b1",
                "tel": "123453221122"
            }, {
                "name": "b2",
                "tel": "123453221122"
            }, {
                "name": "b3",
                "tel": "123453221122"
            }]
        }, {
            "index": "C",
            "users": [{
                "name": "c1",
                "tel": "123453221122"
            }, {
                "name": "c2",
                "tel": "123453221122"
            }, {
                "name": "c3",
                "tel": "123453221122"
            }]
        }, {
            "index": "D",
            "users": [{
                "name": "d1",
                "tel": "123453221122"
            }, {
                "name": "d2",
                "tel": "123453221122"
            }, {
                "name": "d3",
                "tel": "123453221122"
            }]
        }]
        Vue.component("custom-header", {
            template: '#header',
            props: ["title"]
        });
        Vue.component("custom-content", {
            template: "#list-content",
            props: ["userData"],
            computed: {
                userIndex: function() {
                    return this.filterIndex(this.userData);
                }
            },
            methods: {
                filterIndex: function(data) {
                    var result = [];
                    for (const i in data) {
                        if (data.hasOwnProperty(i)) {
                            const element = data[i];
                            result.push(element.index);
                        }
                    }
                    return result;
                },
                setListIndexPos: function() {
                    debugger
                    //获取索引元素
                    var element = this.$refs.user_index;
                    //获取offsetHight
                    var iH = element.offsetHeight;
                    element.style.marginTop = -iH / 2 + 'px';
                },
                setScroll: function() {

                }
            },
            mounted() {
                this.setListIndexPos();
            },

        });
        //多插槽的使用,则使用name属性来指定要插入的位置
        var vm = new Vue({
            el: '#app',
            data: {
                title: "通讯录",
                userData: userData
            },
            components: {

            }
        });
    </script>

</body>

</html>
  • ## Example 2 of pop-up component

    <!DOCTYPE html>
    <html>
    
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../../Script/vue/vue.js"></script>
        <style>
            /** 弹窗动画*/
            
            .drop-enter-active {
                /* 动画进入过程:0.5s */
                transition: all 0.5s ease;
            }
            
            .drop-leave-active {
                /* 动画离开过程:0.5s */
                transition: all 0.3s ease;
            }
            
            .drop-enter {
                /* 动画之前的位置 */
                transform: translateY(-500px);
            }
            
            .drop-leave-active {
                /* 动画之后的位置 */
                transform: translateY(-500px);
            }
            /* 最外层 设置position定位 */
            
            .message {
                position: relative;
                font-size: 1rem;
            }
            /* 遮罩 设置背景层,z-index值要足够大确保能覆盖,高度 宽度设置满 做到全屏遮罩 */
            
            .message-cover {
                position: fixed;
                z-index: 200;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
            }
            /* 内容层 z-index要比遮罩大,否则会被遮盖 */
            
            .message-content {
                position: fixed;
                top: 35%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                z-index: 300;
            }
            
            .message-header {
                /*  头部title的背景 居中圆角等属性。
                 没有图片就把background-image注释掉 */
                /* background-image: url("../../static/gulpMin/image/dialog/dialog_head.png"); */
                width: 86.5%;
                height: 43px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }
            
            .message-main {
                /* 主体内容样式设置 */
                background: #ffffff;
                display: flex;
                justify-content: center;
                align-content: center;
                width: 86.5%;
                padding: 22px 0 47px 0;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }
            
            .message-foot-close {
                width: 45px;
                height: 45px;
                border-radius: 50%;
                background: #fcca03;
                display: flex;
                justify-content: center;
                align-content: center;
                margin-top: -25px;
            }
            
            .close_img {
                /* background-image: url("../../static/gulpMin/image/dialog/dialog_close.png"); */
                width: 42px;
                height: 42px;
            }
            
            .message-header div {
                background: #fcca03;
                width: 100%;
                height: 100%;
                text-align: center;
                line-height: 43px;
                padding: 0;
                margin: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                align-content: center;
                border-top-left-radius: 0.5rem;
                border-top-right-radius: 0.5rem;
            }
        </style>
    </head>
    
    
    <body>
        <div id="app">
            <button @click="dialogContent">弹窗</button>
            <message-dialog :is-show="isShow" @on-close="close" v-show="isShow" :width="100">
                <div slot="header">{{message}}</div>
                <div slot="main">{{content}}</div>
            </message-dialog>
        </div>
    
        <!-- 消息弹出窗 -->
        <template id="message-dialog">
                <div>
                        <!--外层的遮罩 点击事件用来关闭弹窗,isShow控制弹窗显示 隐藏的props-->
                        <div class="message-cover back" v-if="isShow"></div>
                        <!-- transition 这里可以加一些简单的动画效果 -->
                        <transition name="drop">
                            <div :style="{width:width+&#39;%&#39;,top:topDistance+&#39;%&#39;}" v-if="isShow">
                                <!--弹窗头部 title-->
                                <div>
                                    <slot name="header"></slot>
                                </div>
                                <!--弹窗的内容-->
                                <div :style="{paddingTop:padingTop+&#39;px&#39;,paddingBottom:padingBottom+&#39;px&#39;}">
                                        <slot name="main"></slot>
                                </div>
                                <!--弹窗关闭按钮-->
                                <div @click="close">
                                    <div class="message-close-img back" ></div>
                                </div>
                            </div>
                        </transition>
                    </div>
        </template>
        <script>
            Vue.component("message-dialog", {
                template: "#message-dialog",
                props: {
                    isShow: {
                        type: Boolean,
                        required: true,
                        default: false,
                    },
                    width: {
                        type: Number,
                        default: 86.5
                    },
                    topDistance: {
                        type: Number,
                        default: 35
                    },
                    padingTop: {
                        type: Number,
                        default: 22
                    },
                    padingBottom: {
                        type: Number,
                        default: 47
                    }
                },
                methods: {
                    close: function() {
                        this.$emit('on-close');
                    }
                }
            });
    
            var vm = new Vue({
                el: '#app',
                data: {
                    isShow: false,
                    message: "提示信息",
                    content: "内容"
                },
                methods: {
                    dialogContent: function() {
                        this.isShow = !this.isShow;
                    },
                    close: function() {
                        this.isShow = false;
                    }
                }
            });
        </script>
    </body>
    
    </html>
  • Example three of pop-up component##

    <!DOCTYPE html>
    <html>
    
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../../Script/vue/vue.js"></script>
        <link rel="stylesheet" href="message-dialog.1.css">
        <script src="message-dialog.js"></script>
    </head>
    
    
    <body>
        <div id="app">
            <button @click="dialogContent">弹窗</button>
            <message-dialog :width="99" :is-show="isShow" v-show="isShow">
                <div slot="message_header">{{message}}</div>
                <div slot="message_content">{{content}}</div>
                <!-- <div slot="message_btn">
                    <button type="button" @click="sure">确定</button>
                    <button type="button" @click="cancel">取消</button>
                </div> -->
                <div slot="message_close" @click="cancel">×</div>
            </message-dialog>
        </div>
    
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    isShow: false,
                    message: "提示信息",
                    content: "内容"
                },
                methods: {
                    dialogContent: function() {
                        this.isShow = !this.isShow;
                    },
                    close: function() {
                        this.isShow = false;
                    },
                    sure: function() {
                        alert(1234);
                        this.isShow = !this.isShow;
                    },
                    cancel: function() {
                        this.isShow = !this.isShow;
                    }
                }
            });
        </script>
    </body>
    
    </html>
    /** 弹窗动画*/
    
    .drop-enter-active {
        /* 动画进入过程:0.5s */
        transition: all 0.5s ease;
    }
    
    .drop-leave-active {
        /* 动画离开过程:0.5s */
        transition: all 0.3s ease;
    }
    
    .drop-enter {
        /* 动画之前的位置 */
        transform: translateY(-500px);
    }
    
    .drop-leave-active {
        /* 动画之后的位置 */
        transform: translateY(-500px);
    }
    
    
    /* 最外层 设置position定位 */
    
    .message-dialog {
        position: relative;
        font-size: 1rem;
    }
    
    
    /* 遮罩 设置背景层,z-index值要足够大确保能覆盖,高度 宽度设置满 做到全屏遮罩 */
    
    .message-dialog-cover {
        position: fixed;
        z-index: 200;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }
    
    
    /* 内容层 z-index要比遮罩大,否则会被遮盖 */
    
    .message-dialog-content {
        position: fixed;
        top: 35%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 300;
        left: 0;
        right: 0;
    }
    
    .message-dialog-header {
        /*  头部title的背景 居中圆角等属性。
         没有图片就把background-image注释掉 */
        /* background-image: url("../../static/gulpMin/image/dialog/dialog_head.png"); */
        width: 86.5%;
        height: 43px;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        text-align: center;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background: #fcca03;
    }
    
    .message-dialog-main {
        /* 主体内容样式设置 */
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        text-align: center;
        width: 86.5%;
        padding: 22px 0 47px 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    
    .message-dialog-footer {
        width: 86.5%;
        height: 45px;
        display: flex;
        justify-content: center;
        align-content: center;
        text-align: center;
        align-items: center;
    }
    
    .message-dialog-close-img {
        /* background-image: url("../../static/gulpMin/image/dialog/dialog_close.png"); */
        width: 45px;
        height: 45px;
        line-height: 45px;
        border-radius: 50%;
        background: #fcca03;
        margin-top: -45px;
    }
    
    .message-dialog-btn {
        width: 100%;
        height: 100%;
        top: -8px;
        background: #fcca03;
        position: relative;
        line-height: 45px;
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        align-content: center;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    
    .message-dialog-btn button {
        border-radius: 0.2rem;
        background: linear-gradient(to bottom, #4eb5e5 0%, #389ed5 100%);
        box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, .2);
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
        color: #fbfbfb;
        font-weight: bold;
        font-family: 'Open Sans', sans-serif;
        font-size: 1rem;
        cursor: pointer;
        border: none;
        margin: 10px;
        height: 30px;
        line-height: 30px;
    }
    
    button:active {
        box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, .2);
        top: 1px;
    }
    
    button:after {
        content: "";
        width: 0;
        height: 0;
        display: block;
        position: absolute;
        opacity: 0.6;
        right: 0;
        top: 0;
        border-radius: 0 5px 5px 0;
    }
    Vue.component("message-dialog", {
        template: `<div class="message-dialog">
                    <!-- 遮罩 -->
                    <div class="message-dialog-cover"></div>
                    <transition name="drop">
                        <div class="message-dialog-content" v-bind:style="{width:width+&#39;%&#39;,top:topDistance+&#39;%&#39;}" v-if="isShow">
                            <div class="message-dialog-header">
                                 <!-- 使用插槽 -->
                                <slot name="message_header"></slot>
                            </div>
                            <div class="message-dialog-main">
                            <slot name="message_content"></slot>
                            </div>
                            <div class="message-dialog-footer">
                            <slot name="message_btn"></slot>
                            <slot name="message_close"></slot>
                            <!-- <div class="message-dialog-btn">
                                     <button type="button">确定</button>
                                     <button type="button">取消</button>
                                 </div>
                             <div class="message-dialog-close-img">×</div> -->
                            </div>
                        </div>
                    </transition>
                </div>`,
        data: function() { return {}; },
        props: {
            width: {
                type: Number,
                default: 86.5
            },
            topDistance: {
                type: Number,
                default: 35
            },
            isShow: {
                type: Boolean,
                default: false
            }
        },
        methods: {
    
        },
    }

The above is the detailed content of What are Vue list components and pop-up components? Use of list components and pop-up components (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete