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 lang="en"> <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 class="message">
<!--外层的遮罩 点击事件用来关闭弹窗，isShow控制弹窗显示 隐藏的props-->
<div class="message-cover back" v-if="isShow"></div>
<!-- transition 这里可以加一些简单的动画效果 -->
<transition name="drop">
<div class="message-content" :style="{width:width+'%',top:topDistance+'%'}" v-if="isShow">
<!--弹窗头部 title-->
<div class="message-header">
<slot name="header"></slot>
</div>
<!--弹窗的内容-->
<div class="message-main" :style="{paddingTop:padingTop+'px',paddingBottom:padingBottom+'px'}">
<slot name="main"></slot>
</div>
<!--弹窗关闭按钮-->
<div class="message-foot-close" @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 lang="en"> <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 class="message-dialog-btn" slot="message_btn">
<button type="button" @click="sure">确定</button>
<button type="button" @click="cancel">取消</button>
</div> -->
<div class="message-dialog-close-img" 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:;
top:;
left:;
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:;
left:;
right:;
}
.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:;
height:;
display: block;
position: absolute;
opacity: 0.6;
right:;
top:;
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列表组件与弹窗组件示例的更多相关文章
- 封装Vue Element的dialog弹窗组件
我本没有想着说要封装一个弹窗组件,但有同行的朋友在问我,而且弹窗组件也确实在项目开发中用的比较多.思前想后,又本着样式统一且修改起来方便的原则,还是再为大家分享一个我所封装的弹窗组件吧. 其实,并不是 ...
- vue+element table的弹窗组件
在处理表格编辑相关的需求,是需要做一个弹框进行保存的:或者查看表格数据的详细信息时,也是需要做弹窗: 当然 ,这是类似于这样的 ,当然 element 已经帮我们做好 弹窗这一块 主要 我想记录的是 ...
- Flutter——AlertDialog组件、SimpleDialog组件、showModalBottomSheet组件（弹窗组件）
AlertDialog组件 import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: " ...
- 封装React AntD的dialog弹窗组件
前一段时间分享了基于vue和element所封装的弹窗组件(封装Vue Element的dialog弹窗组件),今天就来分享一个基于react和antD所封装的弹窗组件,反正所使用的技术还是那个技术, ...
- 【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）
Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
- Vue.js 多选列表（Multi-Select）组件
搬运公众号早前文章 多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行多选的 UI 元素.这是一种常见的设计元素.有时候为了节省空间,我们会将选 ...
- 从零开始徒手撸一个vue的toast弹窗组件
相信普通的vue组件大家都会写,定义 -> 引入 -> 注册 -> 使用,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): ...
- Vue - 简单实现一个命令式弹窗组件
前言 在日常工作中弹窗组件是很常用的组件,但用得多还是别人的,空闲时间就自己来简单实现一个弹窗组件 涉及知识点:extend.$mount.$el 使用方式: this.$Confirm({ titl ...
- Vue.js（24）之 弹窗组件封装
同事封装了一个弹窗组件,觉得还不错,直接拿来用了: gif图展示: 弹框组件代码: <template> <transition name="confirm-fade&qu ...
随机推荐
- 《温故而知新》JAVA基础八
集合接口与泛型 定义: 集合接口会操作一系列相同属性数据的对象类型的数据结构,类似于数组,但是相对于数组来说更显得高端大气 集合的接口分为Collention和Map两大类,不直接操作,而是通过子类的 ...
- 【三】jquery之选择器
转自:https://www.cnblogs.com/youfeng365/p/5846650.html jquery参考手册:http://jquery.cuishifeng.cn/index.ht ...
- Angular4学习笔记（七）- ViewChild和ViewChildren
基础 ViewChild ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法.它支持 Type 类型或 string 类型的选择器,同时支持设置 read 查询条件,以获取不同 ...
- hive新功能cube和rollup
1.cube简称数据魔方,可以实现hive多个任意维度的查询,cube(a,b,c)则首先会对(a,b,c)进行group by,然后依次是(a,b),(a,c),(a),(b,c),(b),(c), ...
- 雷林鹏分享：jQuery EasyUI 数据网格 - 创建自定义视图
jQuery EasyUI 数据网格 - 创建自定义视图 在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局.对于用户来说,卡片视图(Card View)是个不错的选择.这个工具 ...
- EXCEL VBA——数组，使用数组提升程序效率
数组的存在价值就是让代码提速. 数组和非数组的差异只在于数据的保存和读取方式不同,虽然操作这些数据的方法或者函数并没有不同,但是保存与读取上的差异却使VBA代码在处理数据时实现了质的飞跃.在完成相同工 ...
- Win10系列：C#应用控件基础12
TextBlock控件 TextBlock控件是应用程序开发过程中经常使用的控件之一,它的主要功能是显示一段只读的文本内容.开发者可以使用TextBlock控件来显示提示信息,还可以根据需求将显示的提 ...
- 【转载】GET和POST两种基本请求方法的区别
原文地址:http://www.cnblogs.com/logsharing/p/8448446.html GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一 ...
- Java语法基础学习DayEleven(Map)
一.Map接口 1.概述:Map与Collection并列存在,用于保存具有映射关系的数据Key-Value. Map接口 |- - - - -HashMap:Map的主要实现类 |- - - - - ...
- HDU1171将多个不同价值不同数量的器材尽可能按等价值均分 第一份的价值尽可能的大 所以sum/2对第二份进行01背包 使其价值尽可能的大
//hdu1171void solve(){ for(int i=1;i<=n;i++) { for(int j=W;j>=w[i];j--) { dp[j]=max(dp[j],dp[j ...