vue翻頁元件

1.SlideDemo.vue

<template>
  <div class="yh-page">
    <h1>Slide 示範</h1>
    <div class="desc">
      Demo源代碼：
      <code>/examples/components/modules/BlockHeaderDemo.vue</code>
    </div>
    <div class="yh-block">
      <div>
        <table style="width:320px;background-color:#ececec" cellpadding="5px">
          <tr>
            <td style="height:50px;font-weight:bold;width:60px">标題：</td>
            <td>{{pageData.title}}</td>
          </tr>
          <tr>
            <td style="height:200px;font-weight:bold">正文：</td>
            <td>{{pageData.text}}</td>
          </tr>
        </table>
        <div style="width:300px;text-align:center;margin-top:5px;">
          <yh-button @click="onPrevClick" class="yh-icon" style="color:#999">◁</yh-button>
          <span>第{{page + 1}}/{{pages.length}}個</span>
          <yh-button @click="onNextClick" class="yh-icon" style="color:#999">▷</yh-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import yhbutton from "../../components/comcompont/Button";
export default {
  name: "SlideDemo",
  data() {
    return {
      pages: [
        {
          title: "Title 1",
          text:
            "與現實生活一緻：與現實生活的流程、邏輯保持一緻，遵循使用者習慣的語言和概念；在界面中一緻：所有的元素和結構需保持一緻，比如：設計樣式、圖示和文本、元素的位置等。"
        },
        {
          title: "Title 2",
          text:
            "控制回報：通過界面樣式和互動動效讓使用者可以清晰的感覺自己的操作；頁面回報：操作後，通過頁面元素的變化清晰地展現目前狀态。"
        },
        {
          title: "Title 3",
          text: "Text"
        }
      ],
      page: 0
    };
  },
  computed: {
    pageData: function() {
      return this.pages[this.page];
    }
  },
  methods: {
    onPrevClick() {
      var p = this.page;
      if (p > 0) {
        this.page = p - 1;
      }
    },
    onNextClick() {
      var p = this.page;
      if (p < this.pages.length - 1) {
        this.page = p + 1;
      }
    }
  },
  components: {
    "yh-button": yhbutton
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scope>
</style>