Skip to content

Instantly share code, notes, and snippets.

@munierujp
Last active February 12, 2020 14:54
Show Gist options
  • Save munierujp/516f67aca91024f5caff51ea71faa489 to your computer and use it in GitHub Desktop.
Save munierujp/516f67aca91024f5caff51ea71faa489 to your computer and use it in GitHub Desktop.
<template>
<v-btn
:color="button.color"
small
dark
@click="open"
>
<v-icon
small
left
>
fab fa-twitter
</v-icon>
{{ button.label }}
</v-btn>
</template>
<script>
const URL_BASE = 'https://twitter.com/intent/tweet'
export default {
props: {
message: {
type: String,
default: ''
}
},
data: () => ({
button: {
color: '#1da1f2',
label: 'Tweet'
},
dialog: {
width: 550,
height: 420
}
}),
computed: {
encodedMessage () {
return encodeURIComponent(this.message)
},
url () {
return this.encodedMessage ? `${URL_BASE}?status=${this.encodedMessage}` : URL_BASE
}
},
methods: {
open () {
const { width, height } = this.dialog
const top = (screen.height - height) / 2
const left = (screen.width - width) / 2
const options = {
width,
height,
top,
left,
scrollbars: 'yes',
resizable: 'yes',
toolbar: 'no',
location: 'yes'
}
const windowFeatures = Object.entries(options).map(([key, value]) => `${key}=${value}`).join(',')
window.open(this.url, '_blank', windowFeatures)
}
}
}
</script>
@munierujp
Copy link
Author

munierujp commented Sep 23, 2019

Usage

<template>
  <div>
    <div>
      <input
        v-model="message"
        type="text"
      >
    </div>
    <div>
      <tweet-button :message="message" />
    </div>
  </div>
</template>

<script>
import TweetButton from '~/components/TweetButton'

export default {
  components: {
    TweetButton
  },
  data: () => ({
    message: ''
  })
}
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment