Element: [Feature Request] 如何让 el-button 支持 href属性 或者 让普通a标签拥有el-button的样式？ 开发一个 el-a 组件？

[javasgl]

Existing Component

No

Component Name

el-button

Description

如何让el-button支持 href跳转 或者 让 普通的 a 标签 拥有 el-button的样式？或者 新开发一个类似的 el-a 组件来实现？
目前个人拙劣的实现是 通过给el-button 绑定click事件，通过click事件的参数来跳转到目标地址。

<el-button @click="goTarget('https://domain:port')" ></el-button>

...
methods:{
   goTarget:function(href){
     //todo go to the target address
 }
}
...

[Leopoldthecoder]

很少有组件库会给 a 标签写一个组件吧。直接把 a 标签放到 el-button 里就好：

<el-button>
  <a href="https://github.com">GitHub</a>
</el-button>

可能需要改一下 a 的样式。

[javasgl]

对的，嵌套的话需要自己处理a标签原有的样式

[javasgl]

比较优雅的实现 是 让 el-button可以绑定 href属性，like this:

<el-button :href='https://github.com'>Github</el-button>

[tipmao]

@javasgl 目前的el-button 可以支持这样绑定href么?

[javasgl]

@tipmao 不支持绑定href
需要在el-button嵌套a标签来使el-button 的行为和 a标签一样。

[littlee]

<a href="#" class="el-button el-button--primary">xx</a>

@javasgl the code above is my hack.

[stariveer]

很少有组件库会给 a 标签写一个组件吧。直接把 a 标签放到 el-button 里就好：

<el-button>
  <a href="https://github.com">GitHub</a>
</el-button>

可能需要改一下 a 的样式。

.el-button { a, a:hover, a:focus, a:focus-within, a:active, a:visited { color: inherit; } }

[FuDesign2008]

目前有了 el-link ， 见 https://element.eleme.cn/#/zh-CN/component/link

[famingyuan]

IE11 下 el-button 嵌套 a 标签 ，无法跳转。

 <div id="app">
     <el-button type="primary" size="mini">
        <a style="color:#fff;" :href="'https://www.west.cn'" target="_blank">测试</a>
     </el-button>
 </div>