123 lines
2.7 KiB
Markdown
123 lines
2.7 KiB
Markdown
+++
|
|
date = "2020-04-10"
|
|
tags = ["vue"]
|
|
title = "vueで作ったマンガビューアを更新してみた"
|
|
slug = "vue"
|
|
+++
|
|
|
|
vueの標準機能を使い自前で作っていたwebのマンガビューアでしたが、ページも増えてきた関係で、流石に機能が少なく使いにくいと思ったのでlibraryを使うことに。前は次のページボタンしかなかったのですが、戻るボタンと上下に全体位置を示すバーを付けました。
|
|
|
|
|
|
|
|
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}`を変更すればいいでしょう。
|
|
|