简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

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

青灯夜游
풀어 주다： 2018-10-24 17:27:07
앞으로
2021명이 탐색했습니다.

이 글의 내용은 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>
    로그인 후 복사

    • 팝업 구성 요소의 예 3

  • <!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
vue 弹窗组件
원천：cnblogs.com
이전 기사：Vue 양방향 바인딩을 자세히 구현하는 방법을 안내해 드립니다. 다음 기사：Vue 구성요소란 무엇입니까? Vue 컴포넌트를 사용하는 방법은 무엇입니까? (코드 예)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
템플릿의 메서드에 정의된 변수 사용 Vue(v3가 아닌 v2)를 사용하는 것은 이번이 처음이고 템플릿(메소드 내부에 정의됨) 내에서 변수를 사용하려고 노력해 왔습니다. 내 단순화된 코드: <t...
에서 2024-04-06 18:10:25
0
2
513
로그인하지 않고 Firebase를 사용하여 Vue에서 사용자 만들기 사용자 프로필을 생성하기 위한 양식을 만들었습니다. 하지만 사용자를 만들 때마다 문제가 발생합니다. 로그인 및 로그아웃된 사용자입니다. 이 문제를 해결하는 데 도...
에서 2024-04-06 14:20:12
0
1
514
Vue3 웹 구성요소 프로덕션 빌드 문제 해결 vue2web 구성요소를 vue3으로 마이그레이션하려고 하는데 프로덕션용 빌드를 생성할 때 문제가 발생합니다. --targetwc와 함께 vue-cli를 사용하고...
에서 2024-04-06 12:43:37
0
1
473
vue vee-validate는 날짜 선택기 선택 문제를 포착합니다. 내 datepicker 필드의 v-model 바인딩이 제대로 작동하지 않습니다. 선택하면 화면에 실시간으로 업데이트되지만 formValues ​​반응형 개체에 값...
에서 2024-04-06 11:38:56
0
1
510
vue에서 경로 소품을 설정하는 방법이 있나요? this.$router.push({name:"AdminNotifications",params:{tab:"requests"},}...
에서 2024-04-06 11:35:59
0
1
456
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！