SOURCE

var Main = {
    data() {
      return {
           startDate: '',
      endDate: '',
      showStartDatePicker: false,
      showEndDatePicker: false,
      currentDate: new Date(),
           showOptions: false,
       options: ['Option 1', 'Option 2', 'Option 3'], // 示例选项列表
     
          
      selectedOption: '', // 用于存储选中的选项
      showPopup: false, // 控制弹出层的显示
            search: '',
      showDropdown: false,
      dropdownItems: ['选项1', '选项2', '选项3'], // 你的下拉框选项
      selectedItem: '',
       showPopover: false,
      actions: [
        { text: '选项dfd一', disabled: true },
        { text: '选项zxdf二', disabled: true },
        { text: '选项fdd三' },
      ],
                   //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: "",



      };
    },
   

  computed: {
     optionListVisible() {
       return this.showOptions && this.options.length > 0;
     },
   },

methods: {
     onStartDateConfirm(value) {
      this.startDate = this.formatDate(value);
      this.showStartDatePicker = false;
    },
    onEndDateConfirm(value) {
      this.endDate = this.formatDate(value);
      this.showEndDatePicker = false;
    },
    formatDate(date) {
      // 格式化日期
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
    },
     onOptionChange(picker, value, index) {
      this.selectedOption = value;
      // 你可以在这里处理选项变化的逻辑
    },
    onConfirm(value) {
      this.selectedOption = value;
      console.log("assa"+JSON.stringify(value))
      this.showPopup = false;
      // 你可以在这里处理确认选择后的逻辑
    },
     handleSelect(item) {
      this.selectedItem = item;
      this.showDropdown = false;
    },
    click2() {
      this.showPopover =true;
      console.log("asa"+this.showPopover)
     
    },
     click() {
      this.showPopover =true;
      console.log("asfffa"+this.showPopover)
     
    },
    //搜索病历信息
    //每次改变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 v-if="!showPopover"  type="primary">
              禁用选项
              <van-icon name="arrow-down" />
            </van-button>
            <van-button v-else  type="primary">
              禁用选项
              <van-icon  name="arrow-up" />
            </van-button>
          </template>
        </van-popover>
      </template>
    </van-search>
  </div> -->
   
   <div class="date-range-selector">
    <van-field
      readonly
      clickable
      :value="startDate"
      
      placeholder="请选择开始日期"
      @click="showStartDatePicker = true"
    />
    <van-field
      readonly
      clickable
      :value="endDate"
      label="结束日期"
      placeholder="请选择结束日期"
      @click="showEndDatePicker = true"
    />
    <van-popup v-model="showStartDatePicker" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @confirm="onStartDateConfirm"
        @cancel="showStartDatePicker = false"
      />
    </van-popup>
    <van-popup v-model="showEndDatePicker" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @confirm="onEndDateConfirm"
        @cancel="showEndDatePicker = false"
      />
    </van-popup>
  </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;
}

.funnel-icon-container {
  position: relative; /* 添加相对定位 */
}

/* 新增 CSS 样式，将选项列表绝对定位在漏斗图标的下方 */
.options-list {
  position: absolute;
  left: 0;
  bottom: 100%; /* 使其紧贴漏斗图标底部 */
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}