xqshare

This is a js share libiary.

View Chinese documents

Install

Browser:

import cdn

<!-- style -->
<link rel="stylesheet" href="https://xqgj.cc/xqcdn/libs/xqshare/css/xqshare.min.css">
<!-- browser -->
<script src="https://xqgj.cc/xqcdn/libs/xqshare/js/xqshare.min.js"></script>
<!-- es module -->
<script type="module">
    import xqshare from '../lib/js/xqshare-esm.min.js';
</script>

Usage

Browser

• html

<div>
    <button id="openBtn">share</button>
</div>
<div id="defaultShare"></div>
<div id="popShare"></div>
<div id="slideShare"></div>

• call

// 1.default mode
let defaultShare = new XqShare({
    el: '#defaultShare',
    type: 'default',
});

// 2.pop mode
let popShare = new XqShare({
    el: '#popShare',
    type: 'pop',
});

let openBtn = document.querySelector('#openBtn');
openBtn.addEventListener('click', showShare, false);
function showShare () {  
    popShare.show();
}

// 3.slide mode
let slideShare = new XqShare({
    el: '#slideShare',
    type: 'slide',
});

Vue

npm i xqshare

// main.js
import xqshare from 'xqshare/lib/vue/index';
Vue.use(xqshare);

<!-- xqshare start -->
<xq-share :type="type" :show="show" :title="title" :url="url"></xq-share>
<!-- xqshare end -->

export default {
    name: 'Demo',
    data() {
        return {
            type: 'default', // must value: default slide pop
            show: true, // must (pop is false, another is true)
            title: '', // optional 
            url: '', // optional
        }
    }
}

View xqshare

Run this script to view the demonstration case: npm run test:browser.

• demo

ask questions

submit your question

Author

@gitguanqi