基于vue的分享插件
vue-socialmedia-share 是一个可以分享到facebook weibo等多个社交网站的插件使用十分简单第一步:npm install vue-socialmedia-share<template><div class="hello"><facebook :url="url" scale="3"></facebook&...
·
vue-socialmedia-share 是一个可以分享到facebook weibo等多个社交网站的插件使用十分简单
第一步:
npm install vue-socialmedia-share
<template>
<div class="hello">
<facebook :url="url" scale="3"></facebook>
<twitter :url="url" title="Check me on Github" scale="3"></twitter>
<linkedin :url="url" scale="3"></linkedin>
<telegram :url="url" scale="3"></telegram>
<whats-app :url="url" title="Hello" scale="3"></whats-app>
<pinterest :url="url" scale="3"></pinterest>
<reddit :url="url" scale="3" title="My Github"></reddit>
<google :url="url" scale="3"></google>
<email :url="url" subject="Hello" scale="3"></email>
</div>
</template>
<script>
import {
Facebook,
Twitter,
Linkedin,
Pinterest,
Reddit,
Telegram,
WhatsApp,
Email,
Google
} from "vue-socialmedia-share";
export default {
name: "HelloWorld",
components: {
Facebook,
Twitter,
Linkedin,
Pinterest,
Reddit,
Telegram,
WhatsApp,
Email,
Google
},
data() {
return {
url: "https://github.com/mbj36"
};
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.hello > span {
padding: 1em;
}
</style>
效果如下
此插件对应的github地址
https://github.com/mbj36/vue-socialmedia-share
更多推荐
已为社区贡献10条内容
所有评论(0)