Share 分享

用于App端的分享组件。

基本用法

share.value.open({
  // 属性
  itemWidth:100,
  title:'分享标题',
  desc:'描述',
  path:'/pages/home/index',
  imageUrl:'/static/img/share-img.jpg',
  href:'https://www.zhuyanjun.cn/cook-uni/index.html',
  // ...

  // 事件
  close：()=>{},
  // ...
})

平台

App	小程序	H5
√	×	×

属性

属性名	类型	默认值	说明	平台
btn	Array	[]	显示分享按钮 格式[{type:'wx',text:'描述',icon:'图标图片'},'wxTimeline'] type的值有：wx-微信好友，wxTimeline-微信朋友圈，wxMin-微信（小程序），wxTimelineMin-微信朋友圈（小程序），qq-QQ，weibo-微博，more-更多，copy-复制链接	All
title	String		分享的标题	All
desc	String		分享的摘要	All
href	String		分享的链接	All
imageUrl	String		分享的图片，推荐使用小于20Kb的图片	All
mediaUrl	String		分享的视频、音乐	All
appid	String	null	小程序appid	All
path	String	null	小程序的页面路径	All
itemWidth	Number,String	146rpx	每项宽度	All
radius	Number,String	null	圆角	All
closeOnMaskClick	Boolean	true	点击遮罩关闭	All
maskBgColor	String	rgba(0, 0, 0, 0.4)	弹出层背景	All
animation	Boolean	true	开启动画	All
customTabBar	Boolean	false	是否自定义tabBar	MP-WEIXIN
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

提示

小程序tabBar页面使用，当自定义tabBar时，需要设置customTabBar为true，否则会显示不正确。

事件

事件名	说明
close	关闭时
cancel	取消分享时
select	选择选项时，参数item

示例

<template>
    <c-share ref="share" />
    <c-button @click="open()">分享</c-button>
</template>
<script setup>
import { ref } from 'vue'

const share = ref(null);
function open(){
  share.value.open({
    itemWidth:100,
    title:'分享标题',
    desc:'描述',
    path:'/pages/home/index',
    imageUrl:'/static/img/share-img.jpg',
    href:'https://www.zhuyanjun.cn/cook-uni/index.html',
  })
}
</script>