vue3-social-share/lib/index.esm.js

vue3的快捷分享组件

import{defineComponent as n,openBlock as e,createElementBlock as o,renderSlot as a,createCommentVNode as t,ref as i,resolveComponent as r,createElementVNode as c,createVNode as s}from"vue";import l from"qrcode.vue";var d=n({name:"nd-button"});const h={class:"nd-btn"},p={key:0};d.render=function(n,i,r,c,s,l){return e(),o("button",h,[n.$slots.default?(e(),o("span",p,[a(n.$slots,"default")])):t("v-if",!0)])},d.__file="packages/button/src/button.vue",d.install=n=>{n.component(d.name,d)};var f=n({props:{QQ:{type:Boolean,default:!0},weibo:{type:Boolean,default:!0},weChat:{type:Boolean,default:!0},douban:{type:Boolean,default:!1},QZone:{type:Boolean,default:!0},linkedin:{type:Boolean,default:!1},diandian:{type:Boolean,default:!1},facebook:{type:Boolean,default:!1},twitter:{type:Boolean,default:!1},google:{type:Boolean,default:!1},url:{type:String,default:window.location.href},source:{type:String,default:""},origin:{type:String,default:window.location.origin},title:{type:String,default:document.title},description:{type:String,default:""},image:{type:String,default:""}},components:{QrcodeVue:l},name:"Share",setup(n){i();const e=i(""),o=()=>{e.value=n.url};return{url:e,shareWeibo:()=>{window.open("http://service.weibo.com/share/share.php?url="+encodeURIComponent(n.url)+"&title="+encodeURIComponent(n.title)+"&pic="+encodeURIComponent(n.image)+"&appkey=")},shareQQ:()=>{window.open("http://connect.qq.com/widget/shareqq/index.html?url="+encodeURIComponent(n.url)+"&title="+encodeURIComponent(n.title)+"&source="+encodeURIComponent(n.source)+"&desc="+encodeURIComponent(n.description)+"&pics="+encodeURIComponent(n.image))},shareWeChat:()=>{o()},shareDouban:()=>{window.open("http://shuo.douban.com/!service/share?href="+encodeURIComponent(n.url)+"&name="+encodeURIComponent(n.title)+"&text="+encodeURIComponent(n.description)+"&image="+encodeURIComponent(n.image)+"&starid=0&aid=0&style=11")},shareQZone:()=>{window.open("http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url="+encodeURIComponent(n.url)+"&title="+encodeURIComponent(n.title)+"&desc="+encodeURIComponent(n.description)+"&summary="+encodeURIComponent(n.description)+"&site="+encodeURIComponent(n.source)+"&pics="+encodeURIComponent(n.image))},shareLinkedin:()=>{window.open("http://www.linkedin.com/shareArticle?mini=true&ro=true&title="+encodeURIComponent(n.title)+"&url="+encodeURIComponent(n.url)+"&summary="+encodeURIComponent(n.description)+"&source="+encodeURIComponent(n.source)+"&armin=armin")},shareDianDian:()=>{window.open("http://www.diandian.com/share?lo="+encodeURIComponent(n.url)+"&ti="+encodeURIComponent(n.title)+"&type=link")},shareFacebook:()=>{window.open("https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(n.url))},shareTwitter:()=>{window.open("https://twitter.com/intent/tweet?text="+encodeURIComponent(n.description)+"&url="+encodeURIComponent(n.url)+"&via="+encodeURIComponent(n.origin))},shareGoogle:()=>{window.open("https://plus.google.com/share?url="+encodeURIComponent(n.url))}}}});const u={class:"social-share"},b={class:"wechat-qrcode"},m=c("h4",null,"二维码",-1),w=c("div",{class:"help"},"扫描二维码，点击右上角分享",-1);f.render=function(n,a,i,l,d,h){const p=r("qrcode-vue");return e(),o("div",u,[n.weibo?(e(),o("a",{key:0,class:"social-share-icon icon-weibo",style:{cursor:"pointer"},onClick:a[0]||(a[0]=(...e)=>n.shareWeibo&&n.shareWeibo(...e))})):t("v-if",!0),n.QQ?(e(),o("a",{key:1,class:"social-share-icon icon-qq",style:{cursor:"pointer"},onClick:a[1]||(a[1]=(...e)=>n.shareQQ&&n.shareQQ(...e))})):t("v-if",!0),n.weChat?(e(),o("a",{key:2,class:"social-share-icon icon-wechat",style:{cursor:"pointer"},onMouseover:a[2]||(a[2]=(...e)=>n.shareWeChat&&n.shareWeChat(...e))},[c("div",b,[m,s(p,{value:n.url,size:120,level:"H",style:{margin:"5px"}},null,8,["value"]),w])],32)):t("v-if",!0),n.douban?(e(),o("a",{key:3,class:"social-share-icon icon-douban",style:{cursor:"pointer"},onClick:a[3]||(a[3]=(...e)=>n.shareDouban&&n.shareDouban(...e))})):t("v-if",!0),n.QZone?(e(),o("a",{key:4,class:"social-share-icon icon-qzone",style:{cursor:"pointer"},onClick:a[4]||(a[4]=(...e)=>n.shareQZone&&n.shareQZone(...e))})):t("v-if",!0),n.linkedin?(e(),o("a",{key:5,class:"social-share-icon icon-linkedin",style:{cursor:"pointer"},onClick:a[5]||(a[5]=(...e)=>n.shareLinkedin&&n.shareLinkedin(...e))})):t("v-if",!0),n.diandian?(e(),o("a",{key:6,class:"social-share-icon icon-diandian",style:{cursor:"pointer"},onClick:a[6]||(a[6]=(...e)=>n.shareDianDian&&n.shareDianDian(...e))})):t("v-if",!0),n.facebook?(e(),o("a",{key:7,class:"social-share-icon icon-facebook",style:{cursor:"pointer"},onClick:a[7]||(a[7]=(...e)=>n.shareFacebook&&n.shareFacebook(...e))})):t("v-if",!0),n.twitter?(e(),o("a",{key:8,class:"social-share-icon icon-twitter",style:{cursor:"pointer"},onClick:a[8]||(a[8]=(...e)=>n.shareTwitter&&n.shareTwitter(...e))})):t("v-if",!0),n.google?(e(),o("a",{key:9,class:"social-share-icon icon-google",style:{cursor:"pointer"},onClick:a[9]||(a[9]=(...e)=>n.shareGoogle&&n.shareGoogle(...e))})):t("v-if",!0)])},f.__file="packages/Share/src/Share.vue";!function(n,e){void 0===e&&(e={});var o=e.insertAt;if(n&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===o&&a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.styleSheet?t.styleSheet.cssText=n:t.appendChild(document.createTextNode(n))}}('@font-face {\n    font-family: "socialshare";\n    src: url("../fonts/iconfont.eot");\n    src: url("../fonts/iconfont.eot?#iefix") format("embedded-opentype"), url("../fonts/iconfont.woff") format("woff"), url("../fonts/iconfont.ttf") format("truetype"), url("../fonts/iconfont.svg#iconfont") format("svg")\n}\n\n.social-share {\n    font-family: "socialshare" !important;\n    font-size: 16px;\n    font-style: normal;\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-stroke-width: 0.2px;\n    -moz-osx-font-smoothing: grayscale\n}\n\n.social-share * {\n    font-family: "socialshare" !important\n}\n\n.social-share .icon-tencent:before {\n    content: "\\f07a"\n}\n\n.social-share .icon-qq:before {\n    content: "\\f11a"\n}\n\n.social-share .icon-weibo:before {\n    content: "\\f12a"\n}\n\n.social-share .icon-wechat:before {\n    content: "\\f09a"\n}\n\n.social-share .icon-douban:before {\n    content: "\\f10a"\n}\n\n.social-share .icon-heart:before {\n    content: "\\f20a"\n}\n\n.social-share .icon-like:before {\n    content: "\\f00a"\n}\n\n.social-share .icon-qzone:before {\n    content: "\\f08a"\n}\n\n.social-share .icon-linkedin:before {\n    content: "\\f01a"\n}\n\n.social-share .icon-diandian:before {\n    content: "\\f05a"\n}\n\n.social-share .icon-facebook:before {\n    content: "\\f03a"\n}\n\n.social-share .icon-google:before {\n    content: "\\f04a"\n}\n\n.social-share .icon-twitter:before {\n    content: "\\f06a"\n}\n\n.social-share a {\n    position: relative;\n    text-decoration: none;\n    margin: 4px;\n    display: inline-block;\n    outline: none\n}\n\n.social-share .social-share-icon {\n    position: relative;\n    display: inline-block;\n    width: 32px;\n    height: 32px;\n    font-size: 20px;\n    border-radius: 50%;\n    line-height: 32px;\n    border: 1px solid #666;\n    color: #666;\n    text-align: center;\n    vertical-align: middle;\n    transition: background 0.6s ease-out 0s\n}\n\n.social-share .social-share-icon:hover {\n    background: #666;\n    color: #fff\n}\n\n.social-share .icon-weibo {\n    color: #ff763b;\n    border-color: #ff763b\n}\n\n.social-share .icon-weibo:hover {\n    background: #ff763b\n}\n\n.social-share .icon-tencent {\n    color: #56b6e7;\n    border-color: #56b6e7\n}\n\n.social-share .icon-tencent:hover {\n    background: #56b6e7\n}\n\n.social-share .icon-qq {\n    color: #56b6e7;\n    border-color: #56b6e7\n}\n\n.social-share .icon-qq:hover {\n    background: #56b6e7\n}\n\n.social-share .icon-qzone {\n    color: #FDBE3D;\n    border-color: #FDBE3D\n}\n\n.social-share .icon-qzone:hover {\n    background: #FDBE3D\n}\n\n.social-share .icon-douban {\n    color: #33b045;\n    border-color: #33b045\n}\n\n.social-share .icon-douban:hover {\n    background: #33b045\n}\n\n.social-share .icon-linkedin {\n    color: #0077B5;\n    border-color: #0077B5\n}\n\n.social-share .icon-linkedin:hover {\n    background: #0077B5\n}\n\n.social-share .icon-facebook {\n    color: #44619D;\n    border-color: #44619D\n}\n\n.social-share .icon-facebook:hover {\n    background: #44619D\n}\n\n.social-share .icon-google {\n    color: #db4437;\n    border-color: #db4437\n}\n\n.social-share .icon-google:hover {\n    background: #db4437\n}\n\n.social-share .icon-twitter {\n    color: #55acee;\n    border-color: #55acee\n}\n\n.social-share .icon-twitter:hover {\n    background: #55acee\n}\n\n.social-share .icon-diandian {\n    color: #307DCA;\n    border-color: #307DCA\n}\n\n.social-share .icon-diandian:hover {\n    background: #307DCA\n}\n\n.social-share .icon-wechat {\n    position: relative;\n    color: #7bc549;\n    border-color: #7bc549\n}\n\n.social-share .icon-wechat:hover {\n    background: #7bc549\n}\n\n.social-share .icon-wechat .wechat-qrcode {\n    display: none;\n    border: 1px solid #eee;\n    position: absolute;\n    z-index: 9;\n    top: -205px;\n    left: -84px;\n    width: 200px;\n    height: 192px;\n    color: #666;\n    font-size: 12px;\n    text-align: center;\n    background-color: #fff;\n    box-shadow: 0 2px 10px #aaa;\n    transition: all 200ms;\n    -webkit-tansition: all 350ms;\n    -moz-transition: all 350ms\n}\n\n.social-share .icon-wechat .wechat-qrcode.bottom {\n    top: 40px;\n    left: -84px\n}\n\n.social-share .icon-wechat .wechat-qrcode.bottom:after {\n    display: none\n}\n\n.social-share .icon-wechat .wechat-qrcode h4 {\n    font-weight: normal;\n    height: 26px;\n    line-height: 26px;\n    font-size: 12px;\n    background-color: #f3f3f3;\n    margin: 0;\n    padding: 0;\n    color: #777\n}\n\n.social-share .icon-wechat .wechat-qrcode .qrcode {\n    width: 105px;\n    margin: 10px auto\n}\n\n.social-share .icon-wechat .wechat-qrcode .qrcode table {\n    margin: 0 !important\n}\n\n.social-share .icon-wechat .wechat-qrcode .help p {\n    font-weight: normal;\n    line-height: 16px;\n    padding: 0;\n    margin: 0\n}\n\n.social-share .icon-wechat .wechat-qrcode:after {\n    content: \'\';\n    position: absolute;\n    left: 50%;\n    margin-left: -6px;\n    bottom: -13px;\n    width: 0;\n    height: 0;\n    border-width: 8px 6px 6px 6px;\n    border-style: solid;\n    border-color: #fff transparent transparent transparent\n}\n\n.social-share .icon-wechat:hover .wechat-qrcode {\n    display: block\n}\n'),f.install=n=>{n.component(f.name,f)};const g=[d,f];var k={install:n=>{g.map((e=>n.component(e.name,e)))}};export{d as NdButton,f as Share,k as default};