1、效果

  1.                                              ![屏幕录制 2020-09-09 下午3.10.42.gif](https://cdn.nlark.com/yuque/0/2020/gif/1225858/1599635641518-19897994-26b6-4eba-822c-42e5a950e04a.gif#align=left&display=inline&height=365&margin=%5Bobject%20Object%5D&name=%E5%B1%8F%E5%B9%95%E5%BD%95%E5%88%B6%202020-09-09%20%E4%B8%8B%E5%8D%883.10.42.gif&originHeight=365&originWidth=200&size=592116&status=done&style=none&width=200)

2、参数

参数 说明 默认
visible 是否打开 默认false
dataSource 数据源 { label: ‘标签一’, id: 1 },
{ label: ‘标签二’, id: 2 },
currentId 当前选增的标签id 1
classname 样式类 ‘ll’
clickMastClose 是否支持点击遮罩关闭 false

事件

handleCancel 点击取消触发的事件
handleChoose 切换标签的选中事件

3、使用

  1. import ModalList from './components/ModalList'
  2. ...
  3.  components: {
  4.     ModalList
  5.   }
  6. ...
  7. <modal-list
  8.   :visible.sync="visible"
  9.   :dataSource="this.dataSource"
  10.   :currentId="this.currentId"
  11.   @handleChoose="handleChoose"
  12.  >
  13. </modal-list>

4、组件源码

  1. <template>
  2.   <div :class="classname" class="modal-list-wrapper" v-show="visible">
  3.     <div class="mask" />
  4.     <div class="list-wrapper" :class="visible ? 'active-entry' : 'active-out'">
  5.       <ul class="list-ul">
  6.         <li
  7.           v-for="item in this.dataSource"
  8.           :key="item.id"
  9.           class="list-li"
  10.           :style="currentId === item.id && 'color:#0082FF'"
  11.           @click="handleChoose(item)"
  12.         >
  13.           {{ item.label }}
  14.         </li>
  15.       </ul>
  16.       <div class="cancel" @click="cancel">{{ cancelText }}</div>
  17.     </div>
  18.   </div>
  19. </template>
  21. <script>
  22. import Vue from 'vue';
  23. export default Vue.extend({
  24.   name: 'ModalList',
  25.   props: {
  26.     classname: {
  27.       default: 'll',
  28.       type: String,
  29.     },
  30.     dataSource: {
  31.       default: () => [
  32.         { label: '标签一', id: 1 },
  33.         { label: '标签二', id: 2 },
  34.       ],
  35.       type: Array,
  36.     },
  37.     currentId: {
  38.       default: 1,
  39.       type: Number,
  40.     },
  41.     cancelText: {
  42.       default: '取消',
  43.       type: String,
  44.     },
  45.     visible: {
  46.       type: Boolean,
  47.       default: false,
  48.     },
  49.   },
  50.   data() {
  51.     return {};
  52.   },
  53.   watch: {},
  54.   methods: {
  55.     cancel: function () {
  56.       this.$emit('update:visible', false);
  57.     },
  58.     handleChoose: function (item) {
  59.       this.$emit('handleChoose', item);
  60.     },
  61.     open: function () {
  62.       setTimeout(() => {
  63.         this.visible = true;
  64.       }, 1000);
  65.     },
  66.   },
  67. })
  68. </script>
  70. <style lang="scss" scoped>
  71. .modal-list-wrapper {
  72.   .mask {
  73.     position: fixed;
  74.     top: 0px;
  75.     left: 0px;
  76.     right: 0px;
  77.     bottom: 0px;
  78.     background-color: rgba(0, 0, 0, 0.6);
  79.     z-index: 99;
  80.   }
  81.   .list-wrapper {
  82.     position: fixed;
  83.     bottom: -180px;
  84.     width: 100%;
  85.     z-index: 100;
  86.     padding: 0px 8px;
  87.     // transition: all 3s;
  88.     box-sizing: border-box;
  89.     .list-ul {
  90.       width: 100%;
  91.       max-height: 300px;
  92.       overflow: auto;
  93.       list-style: none;
  94.       border-radius: 8px;
  95.       .list-li {
  96.         width: 100%;
  97.         background: #fff;
  98.         height: 56px;
  99.         line-height: 56px;
  100.         text-align: center;
  101.         border-bottom: 1px solid #e5e5e5;
  102.         &:last-of-type {
  103.           border-bottom: none;
  104.         }
  105.       }
  106.     }
  107.     .cancel {
  108.       border-radius: 8px;
  109.       background: #fff;
  110.       margin-top: 8px;
  111.       height: 56px;
  112.       line-height: 56px;
  113.       text-align: center;
  114.     }
  115.   }
  116.   .active-entry {
  117.     animation: slideIn 0.3s ease forwards;
  118.   }
  119.   .active-out {
  120.     animation: slideOut 0.3s ease forwards;
  121.   }
  123.   @keyframes slideIn {
  124.     0% {
  125.       transform translate3d(0, 0, 0);
  126.     }
  127.     100% {
  128.       transform translate3d(0, -115%, 0);
  129.     }
  130.   }
  132.   @keyframes slideOut {
  133.     0% {
  134.        transform translate3d(0, -115%, 0);
  135.     }
  136.     100% {
  137.         transform translate3d(0, 0, 0);
  138.     }
  139.   }
  140. }
  141. </style>