如何在Vue.js 3与Element Plus 2中让ElButton实现mailto链接功能？

针对你使用Element Plus 2.2.28和Vue 3.2.45遇到的按钮mailto无效问题，给你两个可行方案：

方案一：使用link类型按钮（推荐） #

Element Plus的<el-button>只有在设置type="link"时，才会渲染成<a>标签，此时href属性才能正常生效。写法如下：

<el-button type="link" href="mailto:someone@example.com">Contact</el-button>

这种方式完全符合组件设计逻辑，不需要额外JS代码，点击后会直接唤起邮件客户端。

方案二：保留普通按钮样式的JS实现 #

如果想保持普通按钮的样式，不想用link风格，可以通过点击事件实现，写法尽量简洁：

<el-button @click="() => window.location.href = 'mailto:someone@example.com'">Contact</el-button>

为什么你之前的写法无效？ #

默认情况下，<el-button>会渲染成原生的<button>标签，而原生<button>并不支持href属性，所以直接加href不会起作用。只有当按钮类型设为link时，组件才会切换为<a>标签渲染，从而支持href。

内容的提问来源于stack exchange，提问作者LondonAppDev