+++
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}`を変更すればいいでしょう。