Browse Source

fix(pagination): ul all tag replace view

richard1015 4 years ago
parent
commit
cc456e3706

+ 15 - 20
src/packages/__VUE/pagination/index.taro.vue

@@ -1,19 +1,15 @@
 <template>
-  <ul class="nut-pagination">
-    <li
-      :class="[
-        'nut-pagination-prev',
-        mode == 'multi' ? '' : 'simple-border',
-        modelValue == 1 ? 'disabled' : ''
-      ]"
+  <view class="nut-pagination">
+    <view
+      :class="['nut-pagination-prev', mode == 'multi' ? '' : 'simple-border', modelValue == 1 ? 'disabled' : '']"
       @click="select(modelValue - 1, true)"
     >
       <slot name="prev-text">
         {{ prevText }}
       </slot>
-    </li>
-    <div class="nut-pagination-contain" v-if="mode == 'multi'">
-      <li
+    </view>
+    <view class="nut-pagination-contain" v-if="mode == 'multi'">
+      <view
         v-for="(item, index) of pages"
         :key="index + 'pagination'"
         :class="['nut-pagination-item', item.active ? 'active' : '']"
@@ -22,20 +18,20 @@
         <slot name="page" :item="item">
           {{ item.text }}
         </slot>
-      </li>
-    </div>
-    <div class="nut-pagination-contain" v-if="mode == 'simple'">
-      <li class="nut-pagination-simple">{{ modelValue }}/{{ countRef }}</li>
-    </div>
-    <li
+      </view>
+    </view>
+    <view class="nut-pagination-contain" v-if="mode == 'simple'">
+      <view class="nut-pagination-simple">{{ modelValue }}/{{ countRef }}</view>
+    </view>
+    <view
       :class="['nut-pagination-next', modelValue >= countRef ? 'disabled' : '']"
       @click="select(modelValue + 1, true)"
     >
       <slot name="next-text">
         {{ nextText }}
       </slot>
-    </li>
-  </ul>
+    </view>
+  </view>
 </template>
 <script lang="ts">
 import { toRefs, onMounted, watchEffect, computed } from 'vue';
@@ -90,8 +86,7 @@ export default create({
     //计算页面的数量
     const countRef = computed(() => {
       const { pageCount, totalItems, itemsPerPage } = toRefs(props);
-      const num =
-        +pageCount.value || Math.ceil(+totalItems.value / +itemsPerPage.value);
+      const num = +pageCount.value || Math.ceil(+totalItems.value / +itemsPerPage.value);
       return Math.max(1, num);
     });
 

+ 15 - 20
src/packages/__VUE/pagination/index.vue

@@ -1,19 +1,15 @@
 <template>
-  <ul class="nut-pagination">
-    <li
-      :class="[
-        'nut-pagination-prev',
-        mode == 'multi' ? '' : 'simple-border',
-        modelValue == 1 ? 'disabled' : ''
-      ]"
+  <view class="nut-pagination">
+    <view
+      :class="['nut-pagination-prev', mode == 'multi' ? '' : 'simple-border', modelValue == 1 ? 'disabled' : '']"
       @click="select(modelValue - 1, true)"
     >
       <slot name="prev-text">
         {{ prevText }}
       </slot>
-    </li>
-    <div class="nut-pagination-contain" v-if="mode == 'multi'">
-      <li
+    </view>
+    <view class="nut-pagination-contain" v-if="mode == 'multi'">
+      <view
         v-for="(item, index) of pages"
         :key="index + 'pagination'"
         :class="['nut-pagination-item', item.active ? 'active' : '']"
@@ -22,20 +18,20 @@
         <slot name="page" :item="item">
           {{ item.text }}
         </slot>
-      </li>
-    </div>
-    <div class="nut-pagination-contain" v-if="mode == 'simple'">
-      <li class="nut-pagination-simple">{{ modelValue }}/{{ countRef }}</li>
-    </div>
-    <li
+      </view>
+    </view>
+    <view class="nut-pagination-contain" v-if="mode == 'simple'">
+      <view class="nut-pagination-simple">{{ modelValue }}/{{ countRef }}</view>
+    </view>
+    <view
       :class="['nut-pagination-next', modelValue >= countRef ? 'disabled' : '']"
       @click="select(modelValue + 1, true)"
     >
       <slot name="next-text">
         {{ nextText }}
       </slot>
-    </li>
-  </ul>
+    </view>
+  </view>
 </template>
 <script lang="ts">
 import { toRefs, onMounted, watchEffect, computed } from 'vue';
@@ -91,8 +87,7 @@ export default create({
     //计算页面的数量
     const countRef = computed(() => {
       const { pageCount, totalItems, itemsPerPage } = toRefs(props);
-      const num =
-        +pageCount.value || Math.ceil(+totalItems.value / +itemsPerPage.value);
+      const num = +pageCount.value || Math.ceil(+totalItems.value / +itemsPerPage.value);
       return Math.max(1, num);
     });
 

+ 6 - 21
src/sites/mobile-taro/vue/src/nav/pages/pagination/index.vue

@@ -1,26 +1,13 @@
 <template>
   <div class="demo">
     <h2>基础用法</h2>
-    <nut-pagination
-      v-model="currentPage"
-      :total-items="25"
-      :items-per-page="5"
-    />
+    <nut-pagination v-model="currentPage" :total-items="25" :items-per-page="5" @change="pageChange" />
     <h2>简单模式</h2>
-    <nut-pagination v-model="currentPage1" :page-count="12" mode="simple" />
+    <nut-pagination v-model="currentPage1" :page-count="12" mode="simple" @change="pageChange" />
     <h2>显示省略号</h2>
-    <nut-pagination
-      v-model="currentPage2"
-      :total-items="125"
-      :show-page-size="3"
-      force-ellipses
-    />
+    <nut-pagination v-model="currentPage2" :total-items="125" :show-page-size="3" force-ellipses @change="pageChange" />
     <h2>自定义按钮</h2>
-    <nut-pagination
-      v-model="currentPage3"
-      :total-items="500"
-      :show-page-size="5"
-    >
+    <nut-pagination v-model="currentPage3" :total-items="500" :show-page-size="5" @change="pageChange">
       <template #prev-text>
         <nut-icon name="left" size="10px" />
       </template>
@@ -44,8 +31,8 @@ export default defineComponent({
       currentPage2: 1,
       currentPage3: 1
     });
-    const pageChange = (value) => {
-      console.log(value, 444);
+    const pageChange = (value: number) => {
+      console.log(value);
     };
 
     return {
@@ -55,5 +42,3 @@ export default defineComponent({
   }
 });
 </script>
-
-<style lang="scss"></style>