찾다

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

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

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

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

  • nbsp;html>



    <meta>
    <meta>
    <title>Page Title</title>
    <meta>
    <script></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>



    <div>
        <custom-header>
            <button>返回</button>
        </custom-header>
        <custom-content></custom-content>
    </div>

    <template>
        <div>
            <slot></slot>
            <span>{{title}}</span>
            <slot></slot>
        </div>
    </template>
    <template>
            <div>
                    <ul>
                        <li>
                            <h3>{{item.index}}</h3>
                            <ul>
                                <li>
                                    <span>{{user.name}}</span>
                                    <span>{{user.tel}}</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <ul>
                        <li>{{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: &#39;#header&#39;,
            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 + &#39;px&#39;;
                },
                setScroll: function() {

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

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

            }
        });
    </script>

    • 팝업 구성 요소의 예 3

  • nbsp;html>



    <meta>
    <meta>
    <title>Page Title</title>
    <meta>
    <script></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>



    <div>
        <custom-header>
            <button>返回</button>
        </custom-header>
        <custom-content></custom-content>
        <div>
            <div>
                <div>xxxx</div>
                <div>sssss</div>
                <div>
                    <button>确认</button>
                    <button>取消</button>
                </div>
            </div>
        </div>
    </div>

    <template>
        <div>
            <slot></slot>
            <span>{{title}}</span>
            <slot></slot>
        </div>
    </template>
    <template>
            <div>
                    <ul>
                        <li>
                            <h3>{{item.index}}</h3>
                            <ul>
                                <li>
                                    <span>{{user.name}}</span>
                                    <span>{{user.tel}}</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <ul>
                        <li>{{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: &#39;#header&#39;,
            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 + &#39;px&#39;;
                },
                setScroll: function() {

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

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

            }
        });
    </script>




    nbsp;html>



    <title></title>
    <meta>
    <meta>
    <script></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>




    <div>
        <button>弹窗</button>
        <message-dialog>
            <div>{{message}}</div>
            <div>{{content}}</div>
        </message-dialog>
    </div>

    <!-- 消息弹出窗 -->
    <template>
            <div>
                    <!--外层的遮罩 点击事件用来关闭弹窗，isShow控制弹窗显示 隐藏的props-->
                    <div></div>
                    <!-- transition 这里可以加一些简单的动画效果 -->
                    <transition>
                        <div>
                            <!--弹窗头部 title-->
                            <div>
                                <slot></slot>
                            </div>
                            <!--弹窗的内容-->
                            <div>
                                    <slot></slot>
                            </div>
                            <!--弹窗关闭按钮-->
                            <div>
                                <div></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(&#39;on-close&#39;);
                }
            }
        });

        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                isShow: false,
                message: "提示信息",
                content: "内容"
            },
            methods: {
                dialogContent: function() {
                    this.isShow = !this.isShow;
                },
                close: function() {
                    this.isShow = false;
                }
            }
        });
    </script>



    nbsp;html>



    <title></title>
    <meta>
    <meta>
    <script></script>
    <link>
    <script></script>




    <div>
        <button>弹窗</button>
        <message-dialog>
            <div>{{message}}</div>
            <div>{{content}}</div>
            <!-- <div slot="message_btn">
                <button type="button" @click="sure">确定</button>
                <button type="button" @click="cancel">取消</button>
            </div> -->
            <div>×</div>
        </message-dialog>
    </div>

    <script>
        var vm = new Vue({
            el: &#39;#app&#39;,
            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>

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

성명：
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：Vue 양방향 바인딩을 자세히 구현하는 방법을 안내해 드립니다.다음 기사：Vue 양방향 바인딩을 자세히 구현하는 방법을 안내해 드립니다.

관련 기사

더보기