效果图如下：

需求是（其中我用了mui的css样式）：
1、点击input框后选择审核人列表菜单过渡从下往上出现；
2、选择人后点击确定按钮，选择的人出现在input框中；
3、点击空白的地方则关闭选择审核人窗口
4、选择审核人列表菜单中有查询功能
实例一实例一
Computer$1600

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link rel="stylesheet" href="css/mui.min.css">
    <style>
        /*，蒙版*/
        .overlay{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1000;
            background: rgba(0, 0, 0, .5);
        }
     .checklist{
         -webkit-transition: .3s;
         position: fixed;
         bottom: 0;
         left: 0;
         z-index: 2000;
         width: 100%;
         background-color: #fff;
     }
        .wrap {
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 45px;
            font-size: 16px;
            padding: 0 13px;
            border-bottom: 1px solid rgb(217, 217, 217);
        }
        .cancel{
            padding: 5px 10px;
            font-size: 12px;
            font-weight: 400;
            display: inline-block;
            cursor: pointer;
            text-align: center;
            color: #333;
            border: 1px solid #ccc;
            border-radius: 3px;
            background-color: #fff;
        }
        .confirm{
            padding: 5px 10px;
            font-size: 12px;
            font-weight: 400;
            display: inline-block;
            cursor: pointer;
            text-align: center;
            border-radius: 3px;
            color: #fff;
            border: 1px solid #007aff;
            background-color: #007aff;
        }
       .list{
           width: 100%;
           height: 230px;
           overflow-x: hidden;
           overflow-y: scroll;
       }
        .list .line {
            display: -webkit-flex;
            display: flex;
            justify-content: center;  /*周围留有空白*/
            align-items: center;
            height: 30px;
        }
        .list .line .lines{
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: center; /*周围留有空白*/
            align-items: flex-start;
            width: 90%;
        }
        /*过渡样式*/
        .fade-enter-active, .fade-leave-active {
            -webkit-transform: translateY(0px);
        }
        .fade-enter, .fade-leave-active {
            -webkit-transform: translateY(300px);
        }
            /*搜索框样式*/
        .mui-search .mui-placeholder{
            line-height: 30px;
        }
        .row{
            overflow: visible !important;
            position: relative;
            left: 30%;
            width: 60%;
            transform: translateX(-50%);
            height: 30px;
            display: inline-block;
        }
        input[type=search]{
            height: 30px;
            padding-left: 30px;
        }
        .mui-search input[type=search]{
            padding-right: 0px;
        }
         .title{
            width: 110%;
        }
    </style>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input type="text" @click="btn($event)" v-model="peoPle">
     <!--过渡的动画-->
     <transition name="fade">
         <div class="checklist" v-if="visible" ref="main">
             <div class="wrap">
                 <button class="cancel" @click="onhide">取消</button>
                 <div class="mui-input-row row">
                     <div>
                         <span class="mui-icon mui-icon-search" style="position: absolute; top: 9%; left: 2%;"></span>
                     </div>
                     <input v-model="search" type="search" placeholder="" class="int mui-input-clear">
                 </div>
               <!--  <span class="title">选择审核人</span>-->
                 <button class="confirm" @click="onConfirm">完成</button>
             </div>
             <div class="list">
                 <div class="line" v-for="item in list">
                     <div class="lines">
                         <label :for="item.name" class="title">{{item.name}}</label>
                     </div>
                     <div>
                         <input :id="item.name" :value="item.name" type="checkbox" v-model="checkedNames">
                     </div>
                 </div>
             </div>
         </div>
     </transition>
     <!--蒙层-->
     <div class="overlay" v-if="visible"></div>
</div>
<script>
  var vm = new Vue({
        el: '#app',
      //屏幕以外的点击
        data: {
            message: 'Hello Vue.js!',
            visible:false,
            info:[
                {
                    'name':'智子'
                },
                {
                    'name':'王静云'
                },
                {
                    'name':'王云'
                },
                {
                    'name':'张三'
                },
                {
                    'name':'李四'
                },
                {
                    'name':'王五'
                },
                {
                    'name':'赵璐'
                },
                {
                    'name':'李文'
                },
                {
                    'name':'海翔'
                }
            ], //数据
            peoPle:'',
            search:'', //查询
            checkedNames:[]
        },
      //查询功能
      //  computed比methods效率高，不需要重新渲染页面
      computed:{
          list:function(){
              const arr =[];
              for(let i=0;i<this.info.length;i++){
                  //   console.log(that.info.length)
                  if(this.info[i].name.indexOf(this.search)!=-1){
                      arr.push(this.info[i])
                  }
              }
              return arr;
          }
      },
        methods:{
            /*点击input*/
            btn (event) {
                //阻止冒泡
                event || (event = window.event);

                event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
                this.visible ? this.hide() : this.show()
            },
            show () {
                this.visible = true;
                document.addEventListener('click', this.hidePanel, false)
            },
            hide () {
                this.visible = false;
                document.removeEventListener('click', this.hidePanel, false)
            },

            hidePanel (e) {
                if (this.$refs.main && !this.$refs.main.contains(e.target)) {//点击除弹出层外的空白区域
                    this.hide()
                }
            },
            /*取消*/
            onhide(){
                this.visible = false;
            },
            /*完成*/
            onConfirm(){
                this.visible = false;
                this.peoPle= this.checkedNames
            }
        }
    })
</script>
</body>
</html>
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue