Sharing my social sharing dialog component



  • Free component for you guys!

    <template>
    <q-dialog v-model="showDialog" @hide="cancel">
    	<q-card class="card"><q-card-section class="justify-evenly items-center">
    		<q-btn icon="fab fa-facebook" label="Facebook" no-caps color="red-10" glossy push @click="facebook"/>
    		<q-btn icon="fab fa-linkedin" label="LinkedIn" no-caps color="red-10" glossy push @click="linkedin"/>
    		<q-btn icon="fab fa-twitter" label="Twitter" no-caps color="red-10" glossy push @click="twitter"/>
    		<q-btn icon="fas fa-paste" label="Clipboard" no-caps color="red-10" glossy push @click="clipboard"/>
    	</q-card-section></q-card>
    </q-dialog>
    </template>
    <script>
    export default{
    	props:['facebookAppID'],
    	data(){
    		return{
    			showDialog:false,
    			message:'',
    			url:'',
    			resolve:null,
    			reject:null
    		};
    	},
    	methods:{
    		show(message,url){
    			this.message=message;
    			this.url=url;
    			this.showDialog=true;
    			return new Promise((resolve,reject)=>{
    				this.resolve=resolve;
    				this.reject=reject;
    			});
    		},
    		cancel(){
    			this.showDialog=false;
    			this.reject();
    		},
    		facebook(){
    			window.open('https://www.facebook.com/dialog/share?app_id='+this.facebookAppID+'&display=popup&href='+encodeURIComponent(this.url)+'&quote='+encodeURIComponent(this.message));
    			this.showDialog=false;
    			this.resolve();
    		},
    		linkedin(){
    			window.open('https://www.linkedin.com/sharing/share-offsite/?url='+encodeURIComponent(this.url)+'&message='+encodeURIComponent(this.message));
    			this.showDialog=false;
    			this.resolve();
    		},
    		twitter(){
    			window.open('https://twitter.com/intent/tweet?url='+encodeURIComponent(this.url)+'&text='+encodeURIComponent(this.message));
    			this.showDialog=false;
    			this.resolve();
    		},
    		clipboard(){
    			if(navigator.clipboard){
    				navigator.clipboard.writeText(this.message+' '+this.url);
    			}else{
    				let textArea=document.createElement("textarea");
    				textArea.value=this.message+' '+this.url;
    				textArea.style.top="0";
    				textArea.style.left="0";
    				textArea.style.position="fixed";
    				document.body.appendChild(textArea);
    				textArea.focus();
    				textArea.select();
    				document.execCommand('copy');
    				document.body.removeChild(textArea);
    			}
    			this.$q.notify({message:'Copied to clipboard: '+this.message+' '+this.url,timeout:2000});
    			this.showDialog=false;
    			this.resolve();
    		}
    	}
    };
    </script>


  • @walfin nice 🙂

    Quasar offers clipboard copy OOB here:

    https://quasar.dev/quasar-utils/other-utils#Copy-to-Clipboard

    This vue component has also social sharing, but of course, yours is more interesting, because it is Quasar based hi hi 🙂
    https://github.com/nicolasbeauvais/vue-social-sharing



  • @qyloxe Lol I didn’t know about the copy to clipboard out of the box! Learn a new thing everyday.



  • @qyloxe said in Sharing my social sharing dialog component:

    https://quasar.dev/quasar-utils/other-utils#Copy-to-Clipboard

    Does copy to clipboard have support for all platforms? I’ve been using Capacitor since It’s already in my project but didn’t realise Quasar supports It


Log in to reply