other / mew-iview

  <template>

      <div>

          <Page prev-text="上一页" next-text="下一页" :total="total" show-sizer show-elevator show-total  :current.sync="current"></Page>

          {{ current }}

          <Button type="primary" @click="subject">- 1</Button>

          <Button type="primary" @click="change">Change</Button>

          <Page :current="2" :total="50" simple></Page>

  
          <div style="margin:10px 0px">

              <Page :total="1000"  show-sizer show-elevator show-total  :current="12"></Page>

          </div>

          <div style="margin:10px 0px">

              <Page :total="1000" show-sizer show-elevator show-total  :current="12"></Page>

          </div>

          <div style="margin:100px 0px">

              <Page :total="500" show-sizer show-elevator show-total  ></Page>

          </div>

          <div style="margin:100px 0px">

              <Page :total="500" show-sizer show-elevator  ></Page>

          </div>

          <div style="margin:100px 0px">

              <Page :total="500" show-sizer show-elevator   ></Page>

          </div>

          <div style="margin:10px 0px">

              <Page :total="500" show-sizer  ></Page>

          </div>

          <div style="margin: 10px 0px">
              <Page :total="40" size="small"></Page>
              <br><br>
              <Page :total="40" size="small" show-elevator show-sizer></Page>
              <br><br>
              <Page :total="40" size="small" show-total></Page>
              <br><br>
          </div>

      </div>

  </template>
  <script>

      export default {

          data () {
              return {

                  current: 1,

                  total: 21
              }
          },
          methods: {
              subject() {
                  this.total -= 1;

              },
              change() {
                  this.current = 1;

              }
          }

      }

  </script>