如何将自定义网址共享到 vue 中的社交媒体按钮中？

编程问答 2022-05-24

问题描述

我想通过我网站上的社交媒体按钮分享特定的网址（比如表单网址），但无法使其正常工作，只能通过 whatsapp 共享。我正在使用 vue2 并在语言环境中运行。我的主要问题是它共享我的 localhost url，而不是我的自定义 url。目前我正在使用以下按钮设计：

<head>
<a
      href="https://wa.me/5211234567890?text=Me%20gustaría%20saber%20el%20precio%20del%20coche"
      class="whatsapp"
      target="_blank"
    >
      <i class="fa fa-whatsapp whatsapp-icon"></i
    ></a>
  </head>
  <body>
    <a href="#" class="fa fa-facebook"></a>
    <a href="#" class="fa fa-twitter"></a>
    <a href="#" class="fa fa-linkedin"></a>
    <a href="#" class="fa fa-youtube"></a>
    <a href="#" class="fa fa-instagram"></a>
    <a href="#" class="fa fa-skype"></a>
</body>

<style>
 .whatsapp-icon {
    margin-top: 13px;
  }

  .fa {
    padding: 10px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
  }

  .fa:hover {
    opacity: 0.7;
  }

  .fa-facebook {
    background: #3b5998;
    color: white;
  }

  .fa-twitter {
    background: #55acee;
    color: white;
  }

  .fa-linkedin {
    background: #007bb5;
    color: white;
  }

  .fa-instagram {
    background: #125688;
    color: white;
  }

  .fa-skype {
    background: #00aff0;
    color: white;
  }
</style>

解决方法

您必须更改 # 中的 href="#"，还需要将 https://url 放在 # 中。

举个例子

<a href="https://facebook.com/your-name" target="_blank"><i class="fa fa-facebook facebook-icon"></i></a>
htmlmediamediasocialsocialurlvue.js