vue-yandex-share позволяет интегрировать Блок "Поделиться" от Яндекса
$ npm i @cookieseater/vue-yandex-share --save
- Подключить глобально
// main.js
import Vue from 'vue';
import YandexShare from '@cookieseater/vue-yandex-share';
Vue.component('yandex-share', YandexShare);
И далее использовать в любых компонентах
- Или импортировать непосредственно в компоненте
<template>
<yandex-share :services="['vkontakte','facebook','twitter']" counter />
</template>
<script>
import YandexShare from '@cookieseater/vue-yandex-share';
export default {
components: {
YandexShare,
// ...
},
// ...
};
</script>
Более подробное описание находится на странице сервиса: https://tech.yandex.ru/share/doc/dg/api-docpage/
Название | Тип | Описание | Обязателен | По умолчанию |
---|---|---|---|---|
services | Array | Список сервисов, список поддерживаемых | true | null |
counter | Boolean | Отображать счётчик публикаций | false | false |
url | String | Ссылка, которой нужно поделиться | false | Текущий url |
title | String | Заголовок, которым нужно поделиться | false | Текущий заголовок |
description | String | Текст, которым нужно поделиться | false | '' |
image | String | Изображение, которым нужно поделиться | false | undefined |
contentByService | Object | Параметры для отельных сервисов, подробнее | false | {} |
vertical | Boolean | Вертикальное направление списка вместо горизонтального | false | false |
small | Boolean | Маленький размер кнопок соцсетей вместо больших | false | false |
lang | String | Язык | false | 'ru' |
limit | Number | Количество соцсетей, отображаемых в виде кнопок | false | undefined |
bare | Boolean | Отключение стилей и вывод кнопок в виде текста (не будет работать если на странице несколько компонентов) | false | false |
copy | String | Позиция кнопки Скопировать ссылку (last, first или hidden) | false | 'last' |
popupTop | Boolean | Открытие pop-up вверх вместо вниз | false | false |
popupOuter | Boolean | Outer расположение pop-up | false | false |
Название | Передаваемые данные | Описание |
---|---|---|
ready | - | Срабатывает при инициализации виджета |
share | Идентификатор соцсети | Срабатывает при нажатии на кнопку соцсети |