What are Vue list components and pop-up components? Use of list components and pop-up components (code example)-JS Tutorial-php.cn

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>

Copy after login

# # 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>

Copy after login

## 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>

Copy after login

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>

Copy after login

/** 弹窗动画*/

.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;
}

Copy after login

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: {

    },
}

Copy after login

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!