您好,欢迎访问一九零五行业门户网

Vue列表组件与弹窗组件是什么?列表组件与弹窗组件的使用(代码示例)

本篇文章给大家带来的内容是介绍vue列表组件与弹窗组件是什么?列表组件与弹窗组件的使用(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
 列表组件
<!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+'%',top:topdistance+'%'}" v-if="isshow">                            <!--弹窗头部 title-->                            <div>                                <slot name="header"></slot>                            </div>                            <!--弹窗的内容-->                            <div :style="{paddingtop:padingtop+'px',paddingbottom:padingbottom+'px'}">                                    <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>
/** 弹窗动画*/.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;}
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+'%',top:topdistance+'%'}" 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: {    },}
以上就是vue列表组件与弹窗组件是什么?列表组件与弹窗组件的使用(代码示例)的详细内容。
其它类似信息

推荐信息