SOURCE

var Main = {
    data() {
      return {
         
            search: '',
      showPopover: false,
      actions: [
        { text: '选项一', disabled: true },
        { text: '选项二', disabled: true },
        { text: '选项三' },
      ],
                   //v-model 到搜索框
     myTableData: [{
            date: '2016-05-02',
            name: '王小ww虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小e虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小er虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小4虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
      fakeData: [],
      searchVal: "",



      };
    },
   

 
methods: {
   
    onConfirm(value) {
       console.log("asa"+value)
     
      // 你可以在这里处理确认选择后的逻辑
    },
    
     click() {
          console.log("asa"+this.showPopover)
      this.showPopover =true;
     
     
    },
    //搜索病历信息
    //每次改变input框值时就改变this.myTableData的值
    inputChange() { //循环每一项 只要content的值含有输入的searchVal值，就加进newList；反之，就无东西加进newList
      let newlist = this.fakeData.filter(
        (item) => item.name.indexOf(this.searchVal) > -1 ||
        item.address.indexOf(this.searchVal) > -1
      );
      this.myTableData = newlist;
    }
  }

//生命周期 - 创建完成（可以访问当前this实例）
    
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<div id="app">
<template>
 <div class="container">
    <van-search v-model="search" placeholder="搜索" show-action>
      <template #action>
      <van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onConfirm">
  <template #reference>
    <van-button type="primary">禁用选项</van-button>
  </template>
</van-popover>
      </template>
    </van-search>
  </div>
 
</template>

</div>

@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

/* 自定义的icon 使用的是阿里的图标库 https://www.iconfont.cn/ */

@import url("//at.alicdn.com/t/font_3295968_rwmcgh4pbj.css");
.container {
  display: flex;
  align-items: center;
}

.custom-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  background-color: #fff;
  border: 1px solid #ccc;
}

.dropdown-item {
  padding: 10px;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f0f0f0;
}