Vue.js的一个易于使用的按钮组件

社交 (vuesocial)

One easy-to-use button component for Vue.js with 65+ social networks.

一个带有65个以上社交网络的Vue.js易于使用的按钮组件。

安装 (Installation)

npm install @growthbunker/vuesocial

# Or if you prefer using yarn
yarn add @growthbunker/vuesocial

Vue.js (Vue.js)

In your main.js file:

在您的main.js文件中：

import Vue from "vue"
import vuesocial from "@growthbunker/vuesocial"

Vue.use(vuesocial)

Nuxt.js (Nuxt.js)

Create a new plugin in plugins/vuesocial.js:

在plugins/vuesocial.js创建一个新插件：

import Vue from "vue"
import vuesocial from "@growthbunker/vuesocial"

Vue.use(vuesocial)

Add this new plugin to nuxt.config.js.

将此新插件添加到nuxt.config.js 。

module.exports = {
  // ...
  plugins: [{ src: "@/plugins/vuesocial.js" }];
}

CDN (CDN)

Get the latest version from jsdelivr, and import the JavaScript file in your page.

从jsdelivr获取最新版本，并将JavaScript文件导入页面中。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuesocial.min.js"></script>

We recommend our users to lock Vue Social's version when using CDN. Requesting the latest version (as opposed to "latest major" or "latest minor") is dangerous because major versions usually come with breaking changes. Only do this if you really know what you are doing. Please refer to jsdelivr.com for more information.

我们建议用户在使用CDN时锁定Vue Social的版本。 要求最新版本(而不是“最新的主要版本”或“最新的次要版本”)很危险，因为主要版本通常带有重大更改。 仅当您真正知道自己在做什么时才这样做。 有关更多信息， 请访问jsdelivr.com 。

图示 (Icons)

All the icons are available here in three themes (color, black and white). Copy them somewhere in your somewhere in your "public" / "static" folder. You will also have to set the icon path for the component to be able to find them (see package options and component props).

所有图标都可以在三个主题(彩色，黑色和白色)中找到。 将它们复制到“ public” /“ static”文件夹中的某个位置。 您还必须设置组件的图标路径，以便能够找到它们(请参阅软件包选项和组件属性)。

A huge thank you to Alexis Doreau for designing them.

非常感谢Alexis Doreau设计它们。

例 (Example)

Once the plugin is installed, you can use the component like this:

安装插件后，您可以使用以下组件：

<template>
  <gb-social-button network="facebook" size="small" theme="light">
    Do something with Facebook
  </gb-social-button>
</template>

翻译自: https://vuejsexamples.com/one-easy-to-use-button-component-for-vue-js/