-
{{item.index}}
- {{user.name}} {{user.tel}}
- {{index}}
这篇文章主要介绍了Vue列表组件与弹窗组件有什么用,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
成都创新互联专注于连山企业网站建设,自适应网站建设,商城网站建设。连山网站建设公司,为连山等地区提供建站服务。全流程按需策划设计,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务
列表组件
Page Title {{title}}
{{item.index}}
- {{user.name}} {{user.tel}}
- {{index}}
弹窗组件的示例一
Page Title {{title}}
{{item.index}}
- {{user.name}} {{user.tel}}
- {{index}}
弹窗组件的示例二
{{message}}{{content}}
弹窗组件的示例三
{{message}}{{content}}×
/** 弹窗动画*/ .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: ``, data: function() { return {}; }, props: { width: { type: Number, default: 86.5 }, topDistance: { type: Number, default: 35 }, isShow: { type: Boolean, default: false } }, methods: { }, }
感谢你能够认真阅读完这篇文章,希望小编分享Vue列表组件与弹窗组件有什么用内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!