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