el-date-picker实现通过按钮触发

el-date-picker是Element UI中用于日期选择的一个组件，它可以非常方便地集成到你的Vue项目中。如果你想通过按钮触发日期选择器的显示，你需要使用v-model绑定一个数据模型，并通过一个按钮来控制日期选择器的显示状态。

以下是一个简单的示例代码，展示了如何通过按钮触发el-date-picker：

<template>
  <div>
    <!-- 按钮用于触发日期选择器 -->
    <el-button @click="showPicker = true">选择日期</el-button>

    <!-- el-date-picker组件 -->
    <el-date-picker
      v-model="value"
      type="date"
      :disabled-date="disabledDate"
      :visible-model="showPicker"
      @close="handleClose"
      @input="handleDateChange"
      @open="handleOpen"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false, // 控制日期选择器是否显示
      value: '', // 绑定的日期模型
    };
  },
  methods: {
    // 关闭日期选择器时的回调函数
    handleClose() {
      this.showPicker = false;
    },
    // 选择日期时的回调函数
    handleDateChange(value) {
      this.value = value;
      this.handleClose(); // 选择日期后关闭选择器
    },
    // 打开日期选择器时的回调函数
    handleOpen() {
      this.showPicker = true;
    }
  }
};
</script>

在这个例子中，我们使用了一个按钮来触发日期选择器的显示，通过`:visible-model="showPicker"`属性来控制el-date-picker的显示状态。当点击按钮时，会执行`@click="showPicker = true"`，这会使`showPicker`变为`true`，从而显示日期选择器。日期选择完成后，会调用`handleDateChange`方法来处理日期变化，并关闭日期选择器。