Home > Article > Web Front-end > What are Vue list components and pop-up components? Use of list components and pop-up components (code example)
What are Vue list components and pop-up components? Use of list components and pop-up components (code example)
- 青灯夜游forward
- 2018-10-24 17:25:232052browse
The content of this article is to introduce to you what are Vue list components and pop-up components? Use of list components and pop-up components (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
List component
<!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>
# # Example 1 of pop-up component
<!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>
-
## Example 2 of pop-up component
<!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>
-
Example three of pop-up component##
<!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: { }, }
The above is the detailed content of What are Vue list components and pop-up components? Use of list components and pop-up components (code example). For more information, please follow other related articles on the PHP Chinese website!
Statement：
This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Take you to implement Vue two-way binding in detailNext article：Take you to implement Vue two-way binding in detail