https://github.com/freakingeek/vue-share-modal

A pure, lightweight, and beautiful share modal for Vue3 (SFC)
https://github.com/freakingeek/vue-share-modal

sfc share-modal vue

Last synced: about 2 months ago
JSON representation

A pure, lightweight, and beautiful share modal for Vue3 (SFC)

• Host: GitHub
• URL: https://github.com/freakingeek/vue-share-modal
• Owner: freakingeek
• License: isc
• Created: 2021-08-17T08:03:00.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2024-03-20T10:25:29.000Z (6 months ago)
• Last Synced: 2024-07-29T22:24:48.092Z (about 2 months ago)
• Topics: sfc, share-modal, vue
• Language: Vue
• Homepage: https://freakingeek.github.io/vue-share-modal/
• Size: 234 KB
• Stars: 10
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

## vue-share-modal

A pure, lightweight, and beautiful share modal for Vue 3  

  ‌

![screenshot](https://github.com/sttatusx/vue-share-modal/raw/master/screenshot.png)  

  ‌

## 🪁 Live version

You can see the live version here:  

[https://freakingeek.github.io/vue-share-modal/](https://freakingeek.github.io/vue-share-modal/)

  ‌

## 💾 Install

```shell

$ yarn add vue-share-modal

# npm install vue-share-modal

```

Or you can use any package manager you want

  ‌

## 🚀 Usage

You should import **share-modal** and **share-module** components from the vue-share-modal 

package and use them like this.  

  ‌

```vue

  

    

      

        

      

    

  

import ShareModal from "vue-share-modal";

import ShareModule from "vue-share-modal/src/components/share-module.vue";

import { ChatCircle, Instagram, Twitch, At, Share, Twitter } from "@salmon-ui/icons";

export default {

  name: "MyComponent",

  components: {

    At,

    Share,

    Twitch,

    Twitter,

    Instagram,

    ChatCircle,

    ShareModal,

    ShareModule,

  },

  data() {

    return {

      showModal: true,

    };

  },

  computed: {

    modules() {

      return [

        { name: "Chat", component: ChatCircle },

        { name: "Instagram", component: Instagram },

        { name: "Twitter", component: Twitter },

        { name: "Twitch", component: Twitch },

        { name: "E-mail", component: At },

        { name: "More", component: Share },

      ];

    },

  },

};

```

  ‌

> NOTE: vue-share-modal does not contain any icons by default. So we use **@salmon-ui/icons** package for example here

  ‌

  

## Options Or Props ( share-modal )

```show``` prop is used for showing modal with animation  

```@update:show``` event is used to update ```show``` value  

```vue

```

  ‌

  

```link``` prop is used for showing link in the footer  

```vue

```

  ‌

  

```mode``` prop is used for changing modal style ( ```normal``` / ```outline``` )  

```vue

```

  ‌

  

```direction``` prop is used for changing modal direction ( ```ltr``` / ```rtl``` )  

```vue

```

  ‌

  

```title``` prop is used for changing modal title  

```vue

```

  ‌

  

```footerHint``` prop is used for changing the footer text  

```vue

```

  ‌

  

```variables``` prop is used for changing the modal CSS variables ( like font-family and colors )  

```vue

```

  ‌

  

## Options Or Props ( share-module )

```tag``` generated tag for share-module component ( default: ```span``` )   

```vue

```

  ‌

  

```name``` name of the module   

```vue

```

  ‌

  

```iconClassName``` you can pass this prop to use font icons   

```vue

```

  ‌

  

```mode``` you can pass this prop to overwrite share-modal ```mode``` prop   

```vue

  

```

  ‌

## ✏ Todo

- [ ] Support for different themes

  ‌

## 📝 License

This project is under [ISC](https://github.com/sttatusx/vue-share-modal/blob/master/LICENSE) license