집 >웹 프론트엔드 >JS 튜토리얼 >Vue 목록 구성 요소와 팝업 구성 요소는 무엇입니까? 목록 구성 요소 및 팝업 구성 요소 사용(코드 예)

Vue 목록 구성 요소와 팝업 구성 요소는 무엇입니까? 목록 구성 요소 및 팝업 구성 요소 사용(코드 예)

青灯夜游앞으로: 2018-10-24 17:25:232211검색

이 글의 내용은 Vue 리스트 컴포넌트와 팝업 컴포넌트가 무엇인지 소개하는 것입니다. 목록 구성 요소 및 팝업 구성 요소 사용(코드 예제) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 예 팝업 구성 요소 2개

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

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

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

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

위 내용은 Vue 목록 구성 요소와 팝업 구성 요소는 무엇입니까? 목록 구성 요소 및 팝업 구성 요소 사용(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Vue 양방향 바인딩을 자세히 구현하는 방법을 안내해 드립니다.다음 기사：Vue 양방향 바인딩을 자세히 구현하는 방법을 안내해 드립니다.