2020-04-10 / @syui

vue

vueで作ったマンガビューアを更新してみた

vueの標準機能を使い自前で作っていたwebのマンガビューアでしたが、ページも増えてきた関係で、流石に機能が少なく使いにくいと思ったのでlibraryを使うことに。前は次のページボタンしかなかったのですが、戻るボタンと上下に全体位置を示すバーを付けました。

https://github.com/syui/comic.page

使ったのはhooperとvue-cli 4です。vue-cliは古いバージョンに比べ格段に使いやすくなっていて、webpackを使わなくて済みました。

$ yarn add hooper

vueはこんな感じで書きます。hooperはslide {content}みたいな構成でhtmlを書きます。

<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をもう少しだけ。例えば、指定のコンテンツを配置するとしたら下記のような感じです。

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