基于Vshare插件实现vue分享功能

乘风御浪云帆之上

于 2020-11-30 14:05:44 发布

阅读量1.8k

点赞数 1

分类专栏： vue 文章标签： vue vshare 分享 vue分享

本文链接：https://blog.youkuaiyun.com/eieiei438/article/details/110386923

版权

vue 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中引入并使用分享功能插件vshare。首先，通过npm设置ssl验证为false，然后安装vshare插件。接着，在组件模板中配置分享按钮，并在main.js中全局注册。最后，提供了配置示例，包括分享列表、通用设置、分享按钮、浮窗分享、图片分享和划词分享等选项。这是一篇针对前端开发者，特别是Vue使用者的实用教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue中引入分享功能插件

一度为快

实现

引入插件
- npm config set strict-ssl false
- npm install vshare -S

页面实现

<template>
  <div style="text-align: center">
    <h3>分享demo</h3>
    <div>
      <vshare :vshareConfig="vshareConfig">
      </vshare>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        vshareConfig: {
          shareList: [
            // 此处放分享列表（ID）
          ],
          common: {
            //此处放置通用设置
          },
          share: [{
            //此处放置分享按钮设置
          }
          ],
          slide: [
            //此处放置浮窗分享设置
          ],
          image: [
            //此处放置图片分享设置
          ],
          selectShare: [
            //此处放置划词分享设置
          ]
        }

      }
    }
  }
</script>

main.js配置

import vshare from 'vshare'

Vue.use(vshare)

备注

npm config set strict-ssl false 的作用：取消ssl验证，2014年2月27日，npm不再支持自签名证书，npm install走的是https协议，需要通过数字证书来保证的，执行【npm install vshare -S】前先取消ssl验证
参考资料
- （vshare）https://blog.youkuaiyun.com/wang1006008051/article/details/84258129