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

朴灿烈づ我的快乐病毒、 2022-12-25 03:51 108阅读 0赞

# **Vue中引入分享功能插件** #

### **一度为快** ###

*  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VpZWllaTQzOA_size_16_color_FFFFFF_t_70][]
 *  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VpZWllaTQzOA_size_16_color_FFFFFF_t_70 1][]

### **实现** ###

*  引入插件
    
     *  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.csdn.net/wang1006008051/article/details/84258129][https_blog.csdn.net_wang1006008051_article_details_84258129]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VpZWllaTQzOA_size_16_color_FFFFFF_t_70]: /images/20221120/5af973e6faea4e20b704825746d37127.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VpZWllaTQzOA_size_16_color_FFFFFF_t_70 1]: /images/20221120/b98437707e1b49659e7044ae4abf2b11.png
[https_blog.csdn.net_wang1006008051_article_details_84258129]: https://blog.csdn.net/wang1006008051/article/details/84258129