https://github.com/knowscount/vue-selection-share

📄 a medium-like text highlight sharing component
https://github.com/knowscount/vue-selection-share

component medium share text-highlight vue vue2

Last synced: 2 days ago
JSON representation

📄 a medium-like text highlight sharing component

• Host: GitHub
• URL: https://github.com/knowscount/vue-selection-share
• Owner: KnowsCount
• License: wtfpl
• Created: 2021-06-01T08:53:53.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-06-11T11:00:55.000Z (over 3 years ago)
• Last Synced: 2024-09-25T01:24:00.675Z (3 days ago)
• Topics: component, medium, share, text-highlight, vue, vue2
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/vue-selection-share
• Size: 170 KB
• Stars: 12
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# vue-selection-share

> a medium-like text highlight sharing component with zero dependencies.

to learn how I created this, click [this](https://juejin.cn/post/6970687166145904654) to read a chinese tutorial.

![](https://knowscount-1304485449.cos.ap-shanghai.myqcloud.com/img/Screenshot%202021-06-01%20at%2021.21.11.png)

well, it's all about reinventing the wheel.

---

## 🤤 usage

to install the single file component, run:

```

npm install --save vue-selection-share

```

to use the component:

```vue.js

import VueSelectionShare from 'vue-selection-share';

Vue.use(VueSelectionShare)

```

then add the component outside of the elements that needs the popover, and the clicking behaviours:

```vue.js

    
mother of god


```

lastly add the `methods`, to `onShare` and `onHighlight`:

```vue.js

methods: {

    onShare (text) {

        console.log('share:', text)

    },

    onHighlight (text) {

        console.log('highlight:', text)

    }

}

```