| <template> |
| <main ref="container" class="example-panel"> |
| <section class="example-section" v-for="(category, i) in category.group" :key="`${category.type}-${i}`"> |
| <h2 :ref="category.type" class="title" @click="scrollTo(category.type)">{{category.title || category.name | i18n}}</h2> |
| <p class="desc" v-if="category.desc || category.docLink"> |
| <span class="text" v-if="category.desc">{{category.desc | i18n}}</span> |
| <a class="link" v-if="category.docLink" :href="category.docLink | i18n | relative">Read more</a> |
| </p> |
| <div class="example-list"> |
| <figure class="example-card" v-for="example in category.examples" :key="example.hash | i18n"> |
| <a class="preview" target="_blank" :href="example.hash | i18n | url"> |
| <img class="screenshot" :src="example.screenshot | i18n"> |
| </a> |
| <figcaption class="message">{{example.title | i18n}}</figcaption> |
| </figure> |
| </div> |
| </section> |
| </main> |
| </template> |
| |
| <script> |
| export default { |
| props: ['type', 'category', 'language'], |
| filters: { |
| url (hash) { |
| return `http://dotwe.org/vue/${hash}` |
| } |
| }, |
| methods: { |
| scrollTo (hash) { |
| if (!hash) { |
| hash = this.parseHash().hash |
| } |
| const $container = this.$refs.container |
| const $tabs = this.$refs[hash] |
| if ($tabs && $tabs.length) { |
| // TODO: smooth scroll |
| $container.scrollTop = $tabs[0].offsetTop |
| if (typeof location !== 'undefined') { |
| location.hash = `#${this.type}/${hash}` |
| } |
| } else { |
| $container.scrollTop = 0 |
| } |
| } |
| }, |
| mounted () { this.scrollTo() }, |
| updated () { this.scrollTo() } |
| } |
| </script> |