精华内容
下载资源
问答
  • 本文为大家分享了vue微信分享插件的使用方法,供大家参考,具体内容如下 1.安装weixin-js-sdk npm install weixin-js-sdk 2.创建文件并引入 在src下创建common目录 在common目录下创建wxshare.js 3.在wxshare.js...
  • vue分享插件

    千次阅读 2018-11-20 09:52:00
    基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量!提供多种风格按钮,代码加载更快,引入社会化流量,提升网页抓取速度等优点。github地址:https://github.com/1006008051/vshare,欢迎star。 ...

    vshare

    markdown

    基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量!提供多种风格按钮,代码加载更快,引入社会化流量,提升网页抓取速度等优点。
    github地址:https://github.com/1006008051/vshare,欢迎star。

    安装

    npm install vshare -S

    使用

    注入

    // ES6
    import vshare from 'vshare'
    //or require
    var vshare = require('vshare')

    Vue.use(vshare)

    组件使用

    <vshare></vshare>

    默认展示

    markdown

    配置

    // 组件
    <vshare
      :vshareConfig="vshareConfig"
    >
    </vshare>
    // 数据
    data () {
      vshareConfig: {
              shareList: [
                // 此处放分享列表(ID)
              ],
              common : {
                //此处放置通用设置
              },
              share : [{
                //此处放置分享按钮设置
                }
              ],
              slide : [
                //此处放置浮窗分享设置
              ],
              image : [
                //此处放置图片分享设置
              ],
              selectShare : [
                //此处放置划词分享设置
              ]
            }
    }
    

    vshareConfig

    shareList

    配置项名称说明类型可选值默认值
    ----此处放分享列表(ID)arraymshare(一键分享 )
    qzone(QQ空间)
    tsina(新浪微博 )
    renren(人人网 )
    tqq(腾讯微博 )
    bdxc(百度相册 )
    kaixin001(开心网 )
    tqf(腾讯朋友 )
    tieba(百度贴吧 )
    douban(豆瓣网 )
    tsohu(搜狐微博 )
    bdhome(百度新首页 )
    sqq(QQ好友 )
    thx(和讯微博 )
    bdysc(百度云收藏 )
    meilishuo(美丽说 )
    mogujie(蘑菇街 )
    diandian(点点网 )
    huaban(花瓣 )
    duitang(堆糖 )
    hx(和讯 )
    fx(飞信 )
    youdao(有道云笔记 )
    sdo(麦库记事 )
    qingbiji(轻笔记 )
    people(人民微博 )
    xinhua(新华微博 )
    mail(邮件分享 )
    isohu(我的搜狐 )
    yaolan(摇篮空间 )
    wealink(若邻网 )
    ty(天涯社区 )
    fbook(Facebook )
    twi(Twitter)
    linkedin(linkedin)
    copy(复制网址 )
    print(打印 )
    ibaidu(百度个人中心 )
    weixin(微信 )
    iguba(股吧 )
    [‘more’,
    ‘qzone’,
    ‘tsina’,
    ‘tqq’,
    ‘renren’,
    ‘weixin’]

    common

    配置项名称说明类型可选值默认值
    bdText分享的内容string自定义 
    bdDesc分享的摘要string自定义 
    bdUrl分享的Url地址string自定义 
    bdPic分享的图片string自定义 
    bdSign‘on’: 默认值,使用正常方式挂载回流签名(#[数字签名])‘off’: 关闭数字签名,不统计回流量’normal’: 使用&符号连接数字签名,不破坏原始url中的#锚点stringon
    off
    normal
     
    bdMini下拉浮层中分享按钮的列数int1
    2
    3
     
    bdMiniList自定义下拉浮层中的分享按钮类型和排列顺序。array同shareList 
    onBeforeClick在用户点击分享按钮时执行代码,更改配置。cmd为分享目标id,config为当前设置,返回值为更新后的设置。functionfunction(cmd,config){} 
    onAfterClick在用户点击分享按钮后执行代码,cmd为分享目标id。可用于统计等。functionfunction(cmd){} 
    bdPopupOffsetLeft下拉浮层的y偏移量int正|负数 
    bdPopupOffsetTop下拉浮层的x偏移量int正|负数 

    share

    配置项名称说明类型可选值默认值
    tag表示该配置只会应用于data-tag值一致的分享按钮。如果不设置tag,该配置将应用于所有分享按钮。string与data-tag一致 
    bdSize分享按钮的尺寸int16
    24
    32
     
    bdCustomStyle自定义样式,引入样式文件string样式文件地址 

    slide (如不需要不传参数或者传false)

    配置项名称说明类型可选值默认值
    bdImg分享浮窗图标的颜色。string0
    1
    2
    3
    4
    5
    6
    7
    8
     
    bdPos分享浮窗的位置stringleft
    right
     
    bdTop分享浮窗与可是区域顶部的距离(px)int  

    image(如不需要不传参数或者传false)

    配置项名称说明类型可选值默认值
    tag表示该配置只会应用于data-tag值一致的图片。如果不设置tag,该配置将应用于所有图片。string与data-tag一致 
    viewType图片分享按钮样式。stringlist
    collection
     
    viewPos图片分享展示层的位置。stringtop
    bottom
     
    viewColor图片分享展示层的背景颜色。stringblack
    white
     
    viewSize图片分享展示层的图标大小。int16
    24
    32
     
    viewList自定义展示层中的分享按钮类型和排列顺序。array同shareList 

    selectShare(如不需要不传参数或者传false)

    配置项名称说明类型可选值默认值
    bdSelectMiniList自定义弹出浮层中的分享按钮类型和排列顺序。array同shareList 
    bdContainerClass自定义划词分享的激活区域。stringmyclassname 

    转载于:https://www.cnblogs.com/wangyongcun/p/9987182.html

    展开全文
  • 基于vue分享插件

    千次阅读 2019-09-18 17:16:11
    vue-socialmedia-share 是一个可以分享到facebook weibo等多个社交网站的插件使用十分简单 第一步: npm install vue-socialmedia-share <template> <div class="hello"> <facebook :url="url" ...

    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

    展开全文
  • Vue中引入分享功能插件 一度为快 实现 引入插件 npm config set strict-ssl false npm install vshare -S 页面实现 <template> <div style="text-align: center"> <h3>...

    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验证
    • 参考资料
    展开全文
  • 本文实例为大家分享vue微信分享展示的具体代码,供大家参考,具体内容如下 首先以分享给朋友为例 1、先看官方文档 wx.onMenuShareAppMessage({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // ...
  • 本篇文章主要介绍了IntelliJ IDEA 安装vue开发插件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue引入日期插件资源
  • vue微信分享插件

    2021-01-07 08:30:57
    3.在wxshare.js中编写插件 import wx from 'weixin-js-sdk' import URL from '@/common/urlConfig' export const shareTitle = '测试'; export const shareUrl = '测试连接'; export const shareImg = '测试图片'; ...
  • 本教程大家分享了自带气泡提示的vue校验插件,供大家参考,具体内容如下 安装 npm install vue-verify-pop 使用 VUE版本:1.x 必须在vue-cli生成的webpack模板环境中使用 一、在./main.js中执行全局配置 import ...
  • 本文实例为大家分享vue分页插件的具体代码,供大家参考,具体内容如下 分页插件代码: ()>上一页 <span v-show=current_page>5 class=jump @click=jumpPage(1)>1 <span class=ellipsis v-show=efo
  • 本篇文章主要介绍了vue使用facebook twitter分享示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 下面小编就为大家带来一篇vue引入jq插件的实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量!提供多种风格按钮,代码加载更快,引入社会化流量,提升网页抓取速度等优点。
  • 常用的Vue插件分享

    2020-07-16 18:57:37
    1.Chinese (Simplified) Language ... 6.Vue 2 Snippets 调用Vue时具有代码自动补全的功能 7.WakaTime 这个可以记录我们写代码,用了多长时间 以上就是我本人目前使用的插件,欢迎你们在评论里补充有趣,有意思的插件

    1.Chinese (Simplified) Language Pack for Visual Studio Code
    他是将编译器翻译成汉字,相当于一个汉化包,直接在如下,搜索即可
    在这里插入图片描述
    这是对我这样一个英语不好的人来说的福音,感谢汉化组。

    2.Live Server
    有了它之后可以直接右键打开服务器,运行网页,非常方便。

    3.open in browser
    跟上上边的Live Seriver配合适应,简直舒服。

    4.Beautify
    安装之后,可以美化你的代码,不至于一团糟。

    5.Bootstrap 3 Snippets
    这个是咱们调用bootstrap时候,具有自动补全的功能。

    6.Vue 2 Snippets
    调用Vue时具有代码自动补全的功能

    7.WakaTime
    这个可以记录我们写代码,用了多长时间

    以上就是我本人目前使用的插件,欢迎你们在评论里补充有趣,有意思的插件。

    展开全文
  • 本文实例为大家分享vue滚动插件better-scroll的具体代码,供大家参考,具体内容如下 1. 概述 1.1 说明 better-scroll是一款重点解决移动端(已支持PC)各种滚动场景需求的插件。例如淘宝聚划算中的类型选择(女装/...
  • 今天小编就为大家分享一篇Vue封装的可编辑表格插件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue-devtools-5.3.4 最新稳定版插件下载分享
  • 主要介绍了vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单,本文给大家分享个例子,给大家及时的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 本文实例讲述了Vue插件之滑动验证码用法。分享给大家供大家参考,具体如下: 目录 预览 基于滑动式的验证码,免于字母验证码的繁琐输入 用于网页注册或者登录 安装 使用方法 更新记录 V1.1.2 版本 V1.1.1 ...
  • 主要介绍了vue轮播图插件vue-concise-slider的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • https://github.com/fa-ge/NativeShare
  • Vue中Share.js分享组件

    万次阅读 2019-01-21 17:09:46
    Share.js是一款一键转发工具,它可以一键分享到新浪微博、微信、QQ空间、QQ好友、腾讯...(1)修改test.vue的脚本部分。以下代码用于引入外部的js .我们这里的js采用cdn方式引入 地址为: https://cdn.bootcss.com...
  • vue h5 微信分享功能

    2021-04-30 09:39:59
    首先安装插件 npm install weixin-jsapi 在项目目录新建wx.js文件 wx.js代码 import wx from 'weixin-jsapi' //引入刚才下载的包 import {getWxConfig} from '../api/red_package/index' //导入自己写的后台...
  • 本文实例为大家分享vue插件draggable实现拖拽移动图片顺序的具体方法,供大家参考,具体内容如下 例如图片显示的这种图片列表、商品展示需要拖动图片改变顺序,vuedraggable可以实现拖拽。 首先, npm i ...
  • VUE常用插件库总结

    千次阅读 多人点赞 2019-04-02 21:43:37
    一、UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 ...- 通过Vue Material和Vue 2建立...
  • Vue常用插件汇总

    2020-10-25 08:29:54
    框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 ...- 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vu
  • vue2.0插件大全 UI组件开发框架实用库服务端辅助工具应用实例Demo示例 UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 ...
  • 主要介绍了vue自定义全局组件(自定义插件)的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,482
精华内容 5,392
关键字:

vue分享插件

vue 订阅