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