Vue列表组件与弹窗组件是什么?列表组件与弹窗组件的使用(代码示例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是介绍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: {      }, }
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » Vue列表组件与弹窗组件是什么?列表组件与弹窗组件的使用(代码示例)

发表评论

提供最优质的资源集合

立即查看 了解详情