newtv-ui-3.0 0.0.1

package/packages/pagination/src/pagination.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="footer-pagination">
+    <el-pagination
+      :small="pageOptions['small']"
+      :background="pageOptions['background']"
+      :page-sizes="pageOptions['page-sizes']"
+      :page-size="pageOptions['page-size']"
+      :total="pageOptions['total']"
+      :pager-count="pageOptions['pager-count']"
+      :current-page="pageOptions['current-page']"
+      :layout="pageOptions['layout']"
+      :popper-class="pageOptions['popper-class']"
+      :prev-text="pageOptions['prev-text']"
+      :next-text="pageOptions['next-text']"
+      :disabled="pageOptions['disabled']"
+      :hide-on-single-page="pageOptions['hide-on-single-page']"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      @prev-click="handlePrevClick"
+      @next-click="handleNextClick"
+    >
+      <span
+        >共 {{ pageOptions['total'] }} 条记录 第 {{ pageOptions['current-page'] }} /{{
+          pageOptions['pageNo']
+        }}
+        页</span
+      >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { ref, toRefs, defineComponent, reactive, onMounted, watch } from 'vue'
+export default defineComponent({
+  name: 'fgPagination',
+  props: {
+    paginationOption: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  emits: ['size-change', 'current-change', 'prev-click', 'next-click'],
+  setup(props, ctx) {
+    const state = reactive({
+      pageOptions: {
+        small: false,
+        background: true,
+        'page-sizes': [10, 20, 50, 100],
+        'page-size': 10,
+        total: 0,
+        'pager-count': 7,
+        'current-page': 1,
+        layout: 'slot, prev, pager, next,sizes, jumper',
+        'popper-class': null,
+        'prev-text': null,
+        'next-text': null,
+        disabled: false,
+        'hide-on-single-page': false,
+        pageNo: 1,
+      },
+    })
+    onMounted(() => {
+      if (document.getElementsByClassName('el-pagination__jump')[0]) {
+        document.getElementsByClassName('el-pagination__jump')[0].childNodes[0].nodeValue = '跳至'
+      }
+      /* ? ? */
+      state.pageOptions = { ...state.pageOptions, ...props.paginationOption }
+      state.pageOptions['pageNo'] =
+        state.pageOptions['total'] % state.pageOptions['page-size'] === 0
+          ? state.pageOptions['total'] / state.pageOptions['page-size'] === 0
+          ? '1'
+          : state.pageOptions['total'] / state.pageOptions['page-size']
+          : Math.ceil(state.pageOptions['total'] / state.pageOptions['page-size'])
+
+
+    })
+    // 监听data的数据
+    // 监听从父组件传来的某一个参数
+    watch(
+      () => props.paginationOption,
+      (newVal, oldVal) => {
+        state.pageOptions = { ...state.pageOptions, ...newVal }
+        state.pageOptions['pageNo'] =
+          state.pageOptions['total'] % state.pageOptions['page-size'] === 0
+            ? state.pageOptions['total'] / state.pageOptions['page-size'] === 0
+              ? '1'
+              : state.pageOptions['total'] / state.pageOptions['page-size']
+            : Math.ceil(state.pageOptions['total'] / state.pageOptions['page-size'])
+      },
+    )
+    // const methods = {
+    // pageSize 改变时会触发
+    const handleSizeChange = (val) => {
+      state.pageOptions = {
+        ...state.pageOptions,
+        'current-page': 1,
+      }
+      ctx.emit('size-change', val)
+    }
+    // // currentPage 改变时会触发
+    const handleCurrentChange = (val) => {
+      ctx.emit('current-change', val)
+    }
+    // // 用户点击上一页按钮改变当前页后触发
+    const handlePrevClick = (val) => {
+      ctx.emit('prev-click', val)
+    }
+    // // 用户点击下一页按钮改变当前页后触发
+    const handleNextClick = (val) => {
+      ctx.emit('next-click', val)
+    }
+    // }
+    return {
+      ...toRefs(state),
+      handleSizeChange,
+      handleCurrentChange,
+      handlePrevClick,
+      handleNextClick,
+      // ...methods,
+    }
+  },
+})
+</script>
+
+<style lang="scss">
+.el-pagination__sizes {
+  margin: 0 0 0 16px !important;
+}
+/*.footer-pagination {*/
+/*padding:30px;*/
+/*float: right;*/
+
+/*}*/
+</style>

package/packages/table/index.js

@@ -0,0 +1,10 @@
+// 导入组件，组件必须声明 name
+import fgTable from './src/table.vue'
+
+// 为组件提供 install 安装方法，供按需引入
+fgTable.install = function (Vue) {
+  Vue.component(fgTable.name, fgTable)
+}
+
+// 默认导出组件
+export default fgTable