1
0
hugo/content/blog/2020-04-10-vue.md

123 lines
2.7 KiB
Markdown
Raw Normal View History

2024-04-23 13:21:26 +00:00
+++
date = "2020-04-10"
tags = ["vue"]
title = "vueで作ったマンガビューアを更新してみた"
slug = "vue"
+++
vueの標準機能を使い自前で作っていたwebのマンガビューアでしたが、ページも増えてきた関係で、流石に機能が少なく使いにくいと思ったのでlibraryを使うことに。前は次のページボタンしかなかったのですが、戻るボタンと上下に全体位置を示すバーを付けました。
![](https://github.com/syui/comic.page/raw/master/vue-sample-manga-page-slide-0.gif)
https://github.com/syui/comic.page
使ったのは`hooper`と`vue-cli 4`です。`vue-cli`は古いバージョンに比べ格段に使いやすくなっていて、webpackを使わなくて済みました。
```sh
$ yarn add hooper
```
vueはこんな感じで書きます。hooperは`slide {content}`みたいな構成でhtmlを書きます。
```html:App.vue
<template>
<hooper :settings="hooperSettings">
<slide v-for="(n,index) of products" :key="n">
<img :src="'/manga/'+ (index) +'.png'" />
<div class="page_n">{{ n }}</div>
</slide>
<hooper-navigation slot="hooper-addons"></hooper-navigation>
<hooper-pagination slot="hooper-addons"></hooper-pagination>
<hooper-progress slot="hooper-addons"></hooper-progress>
</hooper>
</template>
<script>
import {
Hooper,
Slide,
Progress as HooperProgress,
Pagination as HooperPagination,
Navigation as HooperNavigation
} from 'hooper';
import 'hooper/dist/hooper.css';
export default {
name: 'App',
components: {
Hooper,
Slide,
HooperProgress,
HooperPagination,
HooperNavigation
},
data() {
return {
products: [...Array(Number(process.env.VUE_APP_PAGE)).keys()],
hooperSettings: {
itemsToShow: 1,
centerMode: true
}
};
}
};
</script>
<style>
.hooper {
height: 100%;
}
button.hooper-indicator {
background-color: #000;
}
img {
width:100%;
}
.page_n {
text-align: center;
height: 50px;
}
</style>
```
vueとhooperのexampleをもう少しだけ。例えば、指定のコンテンツを配置するとしたら下記のような感じです。
```html:App.vue
<template>
<hooper :settings="hooperSettings">
<slide v-for="(item, index) in items">
{{ index }} - {{ item.message }}
</slide>
</hooper>
</template>
<script>
import {
Hooper,
Slide
} from 'hooper';
import 'hooper/dist/hooper.css';
export default {
name: 'App',
components: {
Hooper,
Slide
},
data() {
return {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
};
}
};
</script>
```
この場合のスライド出力は、`0 - Foo`, `1 - Bar`となります。`data{items}`を変更すればいいでしょう。