vue-selection-share
vue-selection-share
a medium-like text highlight sharing component with zero dependencies.
to learn how I created this, click this to read a chinese tutorial.
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:
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:
<VueSelectionShare @share="onShare" @highlight="onHighlight">
<p>mother of god</p>
</VueSelectionShare>
lastly add the methods
, to onShare
and onHighlight
:
methods: {
onShare (text) {
console.log('share:', text)
},
onHighlight (text) {
console.log('highlight:', text)
}
}
Dependencies
@babel/core: ^7.12.10@babel/preset-env: ^7.12.11@rollup/plugin-alias: ^3.1.1@rollup/plugin-babel: ^5.2.2@rollup/plugin-commonjs: ^17.0.0@rollup/plugin-node-resolve: ^11.0.1@rollup/plugin-replace: ^2.3.4@vue/cli-plugin-babel: ^4.5.10@vue/cli-service: ^4.5.10cross-env: ^7.0.3eslint: ^7.27.0eslint-plugin-vue: ^7.10.0minimist: ^1.2.5rollup: ^2.36.1rollup-plugin-terser: ^7.0.2rollup-plugin-vue: ^5.1.9vue: ^2.6.12vue-template-compiler: ^2.6.12