分页

杨泽宇
1 parent 3c59915d
Showing 4 changed files with 204 additions and 2 deletions
src/components/Pagination/index.vue
src/components/Test/index.vue
src/main.ts
src/views/tengxi/index.vue
+<script setup lang="ts">
+import { defineEmits } from "vue";
+
+// 每个属性都必传，不带默认值
+// defineProps<{
+//   total: number;
+//   currentPage: number;
+//   pageSizes: number[];
+//   pageSize: number;
+// }>();
+
+// 可以带默认值
+interface Props {
+  total: number;
+  pageSizes?: number[];
+  pageSize?: number;
+  currentPage?: number;
+  tagName?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  total: 0,
+  pageSizes: () => [10, 20, 50, 100],
+  pageSize: 10,
+  currentPage: 1,
+});
+
+
+const handleSizeChange = (val) => {
+  emit("pageChange", props.currentPage, val, props.tagName)
+}
+const handleCurrentChange = (val) => {
+  emit('pageChange', val, props.pageSize, props.tagName)
+}
+const emit= defineEmits<{
+  (e: 'pageChange', curPage: number, curSize: number, tagName: string): void
+}>()
+</script>
+
+<template>
+  <el-pagination
+    v-model:currentPage="currentPage"
+    :page-sizes="pageSizes"
+    :page-size="pageSize"
+    layout="total, sizes, prev, pager, next, jumper"
+    :total="total"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+  >
+  </el-pagination>
+</template>
+<script setup lang="ts">
+  import {ref, reactive} from 'vue'
+  const count = ref(100)
+  const obj = reactive({
+    name: 'Tom',
+    age: 15,
+    addr: 'Beijing',
+  })
+  interface Props {
+    maxSize?: number,
+    limit?: boolean,
+    collections?: string[],
+    title: string
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    maxSize: 500,
+    limit: false,
+    collections: () => ['邮票', '唱片'],
+    title: ''
+  });
+
+
+
+  const singleFunc = () => {
+    console.log('组件中的单独一个方法')
+  }
+  const addCount = () => {
+    count.value = count.value + 19
+  }
+  // 把该组件内的数据、函数等暴露给上级页面
+  defineExpose({
+    count,
+    addCount,
+    singleFunc
+  });
+
+  const emitFunc = () => {
+    console.log('专门用来emit的方法')
+    emit('emitFunc', count.value)
+  }
+  const emit= defineEmits<{
+    (e: 'emitFunc', str: number): void,
+    (e: 'update:title', str: number | string): void,
+  }>()
+</script>
+
+<template>
+  <div style="background-color: cyan; padding: 10px;" @click="emitFunc">
+    <p>这是一个组件的内部</p>
+    <div style="background-color: pink">
+      <p>粉色div里面展示的是组件内的数据data</p>
+      <p>{{count}}</p>
+      <p>{{obj.name}}</p>
+      <el-button type="primary" @click="singleFunc">组建中单独方法</el-button>
+    </div>
+
+    <div style="background-color: gold" @click="$emit('update:title', props.title)">
+      <p>金色div里面展示的是组件内的属性prop</p>
+      <p>{{props.limit}}</p>
+      <p>{{props.collections}}</p>
+      <p>{{props.maxSize}}</p>
+      <p>{{props.title}}</p>
+      <el-input v-model="title" @change="$emit('update:title', $event)"></el-input>
+    </div>
+  </div>
+</template>
 \ No newline at end of file
@@ -5,6 +5,7 @@ import promise from &#39;es6-promise&#39;
 // import store from '@/store/index'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import zhCn from 'element-plus/es/locale/lang/zh-cn' // elementUI配置中文环境
 import '@/utils/progress'
 import '@/style/reset.scss'
 import { createPinia } from 'pinia'
@@ -26,5 +27,7 @@ createApp(App)
 .use(router)
 // .use(store)
 .use(pinia)
-.use(ElementPlus)
+.use(ElementPlus, {
+  locale: zhCn,
+})
 .mount('#app')
 \ No newline at end of file
 <script setup lang="ts">
+  import {ref, onMounted, reactive} from 'vue'
+  import Test from '@/components/Test/index.vue'
+  import Pagination from '@/components/Pagination/index.vue'
+  // import { onMounted, reactive, ref } from 'vue'
+  // const pageSizes = reactive([10, 20, 40, 30])
+  // const pageSize = ref(5)
+  // const currentPage = ref(1)
+  // const getSizeChange = (size) => {
+  //   console.log('size change')
+  //   console.log(size)
+  //   console.log(pageSize.value)
+  //   pageSize.value = size
+  // }
+  // const getCurrentChange = (cur) => {
+  //   console.log('cur change')
+  //   console.log(cur)
+  //   console.log(currentPage.value)
+  //   currentPage.value = cur
+  // }
+
+  // 上级页面和下级组件中的函数、数据交互，组件视图上加ref
+  const testExpose = ref(null)
+  onMounted(() => {
+    console.log(testExpose.value)
+    console.log(testExpose.value.count)
+    testExpose.value.singleFunc()
+  })
+  const changeCount = () => {
+    testExpose.value.addCount()
+    console.log(testExpose.value.count)
+  }
+  const acceptEmit = (value) => {
+    console.log('页面中监听组件的事件')
+    console.log(value)
+  }
+  const getTitle = (v) => {
+    console.log('新的回调监听')
+    console.log(v)
+  }
+  const data = reactive({
+    limit: true,
+    maxSize: 10010,
+    collections: ['苹果', '胡椒'],
+    title: ''
+  })
+  const pageData = reactive({
+    total: 108,
+    page: 1,
+    pageSize: 10
+  })
+  const pageDataStore = reactive({
+    total: 178,
+    page: 1,
+    pageSize: 10
+  })
+  const handlePageChange = (page, size, tagName) => {
+    console.log('分页的回调')
+    console.log(page)
+    console.log(size)
+    console.log(tagName)
+    pageData.page = page
+    pageData.pageSize = size
+  }
+  const test = (page, size, tagName) => {
+    console.log('分页的回调')
+    console.log(page)
+    console.log(size)
+    console.log(tagName)
+    pageDataStore.page = page
+    pageDataStore.pageSize = size
+  }
 </script>
 <template>
-  <p>Tengxi Test Page</p>
+  <div style="background-color: lightgreen; padding: 20px;">
+    <p>这是组件外的上级页面</p>
+    <el-button type="warning" @click="changeCount">改组件里的count</el-button>
+    <!-- <Test ref="testExpose" :maxSize="10086" :limit="true" :collections="['厕所', '阳台']" @emitFunc="acceptEmit"></Test> -->
+    <Test ref="testExpose" v-model:title="data.title" @update:title="getTitle"></Test>
+    <!-- <Test ref="testExpose" :maxSize="data.maxSize" :limit="data.limit" :collections="data.collections" @emitFunc="
+    acceptEmit"></Test> -->
+  </div>
+  <!-- {{pageSize}} |||| {{currentPage}} -->
+  <!-- {{hello.total}} -->
+  <Pagination tagName="first" :total="pageData.total" :currentPage="pageData.page" :pageSize="pageData.pageSize" @pageChange="handlePageChange"></Pagination>
+  <Pagination tagName="second" :total="pageDataStore.total" :currentPage="pageDataStore.page" :pageSize="pageDataStore.pageSize" @pageChange="test"></Pagination>
+  <!-- <Pagination :total="100" :pageSize="pageSize" :currentPage:update="currentPage" :pageSizes="pageSizes" @handleSizeChange="getSizeChange" @handleCurrentChange="getCurrentChange"></Pagination> -->
 </template>