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>