本篇文章给大家带来的内容是介绍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列表组件与弹窗组件是什么?列表组件与弹窗组件的使用(代码示例)的详细内容。