Alexandrshy
6 years ago
10 changed files with 111 additions and 71 deletions
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,58 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="hello"> |
|
||||||
<h1>{{ msg }}</h1> |
|
||||||
<p> |
|
||||||
For a guide and recipes on how to configure / customize this project,<br> |
|
||||||
check out the |
|
||||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. |
|
||||||
</p> |
|
||||||
<h3>Installed CLI Plugins</h3> |
|
||||||
<ul> |
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> |
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> |
|
||||||
</ul> |
|
||||||
<h3>Essential Links</h3> |
|
||||||
<ul> |
|
||||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> |
|
||||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> |
|
||||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> |
|
||||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> |
|
||||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> |
|
||||||
</ul> |
|
||||||
<h3>Ecosystem</h3> |
|
||||||
<ul> |
|
||||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> |
|
||||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> |
|
||||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> |
|
||||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> |
|
||||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
name: 'HelloWorld', |
|
||||||
props: { |
|
||||||
msg: String |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|
||||||
<style scoped> |
|
||||||
h3 { |
|
||||||
margin: 40px 0 0; |
|
||||||
} |
|
||||||
ul { |
|
||||||
list-style-type: none; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
li { |
|
||||||
display: inline-block; |
|
||||||
margin: 0 10px; |
|
||||||
} |
|
||||||
a { |
|
||||||
color: #42b983; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -0,0 +1,33 @@ |
|||||||
|
<template> |
||||||
|
<button class="share-button" :class="className" @click="openShareWindow"> |
||||||
|
<i class="share-button__icon">123</i> |
||||||
|
<span class="share-button__text" v-if="btnText">{{btnText}}</span> |
||||||
|
</button> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { getDocumentHref, eventEmit } from "../helpers"; |
||||||
|
export default { |
||||||
|
name: "twitter-button", |
||||||
|
props: { |
||||||
|
className: { type: String }, |
||||||
|
pageUrl: { type: String, deflate: getDocumentHref }, |
||||||
|
btnText: { type: String, default: "Twitter" }, |
||||||
|
hasIcon: { type: Boolean, default: true } |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
openShareWindow: function() { |
||||||
|
console.log(eventEmit(this, { name: "qwee" })); |
||||||
|
const url = |
||||||
|
"https://twitter.com/share?url=https://vuejs.org/&text=Super-test"; |
||||||
|
// return window.open(url, "__blank"); |
||||||
|
return window.open( |
||||||
|
url, |
||||||
|
"Share this", |
||||||
|
"width=500,height=700,left=100,top=200,toolbar=no,menubar=no,scrollbars=no" |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
@ -0,0 +1,8 @@ |
|||||||
|
/** |
||||||
|
* Trigger an event. |
||||||
|
* |
||||||
|
* @param {object} vm - VueComponent. |
||||||
|
* @param {object} option - Custom options. |
||||||
|
* @return {object} - Event. |
||||||
|
*/ |
||||||
|
export const eventEmit = (vm, option) => vm.$emit("onClick", { ...option }); |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
/** |
||||||
|
* Get href for page. |
||||||
|
* |
||||||
|
* @returns {string} - page href. |
||||||
|
*/ |
||||||
|
export const getDocumentHref = () => document.location.href; |
||||||
Loading…
Reference in new issue