elementui trigger

elementui trigger 使用指南

Element UI 中的 trigger 属性用于控制组件触发方式，常见于 Tooltip、Popover、Dropdown 等组件。以下是具体用法和示例：

触发方式类型

trigger 支持以下值：

• hover：鼠标悬停时触发（默认）
• click：点击时触发
• focus：获得焦点时触发
• manual：手动控制触发（需通过 show/hide 方法）

Tooltip 示例

<el-tooltip content="提示文字" trigger="click">
  <el-button>点击触发</el-button>
</el-tooltip>

Dropdown 示例

<el-dropdown trigger="click">
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>选项1</el-dropdown-item>
    <el-dropdown-item>选项2</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

组合触发

某些组件支持多模式组合，例如：

<el-tooltip trigger="hover focus">
  <el-button>悬停或聚焦时触发</el-button>
</el-tooltip>

手动控制

manual 模式下需通过编程控制：

this.$refs.tooltip.show(); // 显示
this.$refs.tooltip.hide(); // 隐藏

注意事项

1. hover 模式在移动端可能不生效，建议移动端使用 click
2. 动态修改 trigger 需要组件重新渲染才能生效
3. focus 模式要求目标元素可聚焦（如 input、button）