vue.jselement-plus

How to use `ElButton` as a link using Element Plus and Vue.js

I'm using Element Plus 2.2.28 and Vue.js 3.2.45.

I want to have a button like this:

<el-button>Contact</el-button>

When I click the button, I want it to behave like a link tag using mailto:someone@example.com.

I tried this:

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

However, this doesn't work.

I could use pure JS in the @click event of the button, but I understand this is not recommended.

Solution

  • Since you want to click on the button to redirect you, then you do not need any other functionality that the el-button offers. As such, you only want the appearance of an el-button. Therefore, you can use the el-button class instead on an anchor tag as follows;

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