javascript - 在vuejs2模板中以新窗口的形式打开链接

时间:2018-06-07 10:58:14

标签: vuejs2 element-ui

我需要打开一个具有一定高度和宽度的新窗口。

在vuejs2中我有这样的事情:

<el-table-column label="Link" width="80">
  <template scope="props">
    <a v-bind:href="''+props.row.link+''" target="chart"> Link to chart </a>
  </template>
</el-table-column>
     

并在props.row.link中有:http://host/charts/index.php?par=sth   所以这个href在新标签中打开但没有高度和宽度,而不是在新窗口中。

在html上这么简单:

<a href="http://host/charts/index.php?par=1" onclick="window.open('http://host/charts/index.php?par=1', 'chart', 'width=1225, height=770'); return false;">Link to chart</a>

如何在vue js 2中实现这一点, 也许是点击方法?

2 个答案:

答案 0 :(得分:2)

而不是

<a v-bind:href="''+props.row.link+''" target="chart"> Link to chart </a>

使用

<a href="" v-on:click.stop.prevent="openWindow(props.row.link)">Link to chart</a>

这样可以防止点击和重定向链接。 此外,它调用函数&#34; openWindow&#34;在组件的methods-object中声明:

openWindow: function (link) {
  window.open(...);
}

答案 1 :(得分:0)

不要使用v-bind:href,而是调用一个会打开新窗口的函数