>웹 프론트엔드 >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으로 문의하시기 바랍니다. 삭제