el-dialog自动关闭

根据提供的引用内容，el-dialog在鼠标往左滑动时会自动关闭。为了防止el-dialog自动关闭，可以在el-dialog标签中添加属性:close-on-click-modal="false"。这样设置后，当鼠标往左滑动时，el-dialog不会自动关闭。

以下是一个示例代码：

<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
  <!-- 对话框内容 -->
</el-dialog>

请注意，这只是一个示例代码，你需要根据你的实际情况进行相应的修改。

相关问题

el-dialog 内嵌入 el-autocomplete 选中一个选项后，怎么禁止el-dialog自动关闭

要禁止el-dialog在el-autocomplete选中一个选项后自动关闭，你可以通过以下步骤实现：

1. 在el-dialog组件上添加一个`@close`事件监听器，用于捕获对话框关闭的事件。
2. 在el-autocomplete组件上添加一个`@select`事件监听器，用于捕获选中选项的事件。
3. 在`@select`事件处理程序中，使用`event.stopPropagation()`方法来阻止事件冒泡，从而阻止el-dialog组件的`@close`事件被触发。

下面是一个示例代码：

<template>
  <el-dialog :visible.sync="dialogVisible" @close="handleDialogClose">
    <el-autocomplete v-model="selectedOption" :fetch-suggestions="fetchSuggestions" @select="handleAutocompleteSelect">
      <!-- el-autocomplete的内容 -->
    </el-autocomplete>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      selectedOption: '',
      // 其他数据...
    };
  },
  methods: {
    fetchSuggestions(queryString, callback) {
      // 获取选项列表的逻辑...
    },
    handleDialogClose() {
      // 对话框关闭的处理逻辑...
    },
    handleAutocompleteSelect(item) {
      // 选中选项的处理逻辑...
      event.stopPropagation(); // 阻止事件冒泡
    },
  },
};
</script>

这样，当你在el-autocomplete组件中选择一个选项时，el-dialog组件不会自动关闭。你可以根据自己的需求在`handleAutocompleteSelect`方法中添加其他逻辑。

el-dialog内的el-select如何在el-dialog关闭时自动折叠

可以通过监听`el-dialog`的`closed`事件，在事件触发时手动将`el-select`的折叠状态设置为true。具体实现可以参考以下代码：

<template>
  <el-dialog
    title="选择选项"
    :visible.sync="dialogVisible"
    @closed="handleDialogClosed"
  >
    <el-select v-model="selectedOption" :collapse-tags="true">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      options: [
        { label: '选项1', value: 1 },
        { label: '选项2', value: 2 },
        { label: '选项3', value: 3 }
      ],
      selectedOption: null
    };
  },
  methods: {
    handleDialogClosed() {
      // 在dialog关闭时将el-select的折叠状态设置为true
      this.$nextTick(() => {
        const select = this.$refs.select;
        select.collapseTags = true;
      });
    }
  }
};
</script>

在上述代码中，我们在`el-dialog`组件上监听了`closed`事件，并在事件处理函数`handleDialogClosed`中将`el-select`的折叠状态设置为true。需要注意的是，由于`el-select`是通过ref引用的，因此需要在下一次DOM更新后才能获取到`el-select`实例并修改其属性。因此我们使用了`$nextTick`方法来等待下一次DOM更新后再进行设置。