v1.0.0-beta 源码正式开源

tm-vuetify/components/tm-pagination/tm-pagination.vue

@@ -0,0 +1,230 @@
+<template>
+	<view class="tm-pagination flex-center">
+		<view v-if="tal" class="flex-start flex-wrap flex-between fulled">
+
+			<tm-button :fllowTheme="false" :shadow="4" :icon-size="24"
+				:font-color="nowIndex==1||disabled?'grey':color_tmeme" :black="black_tmeme" @click="tv_pre"
+				:disabled="nowIndex==1||disabled" theme="white" :item-class="round?'rounded':''" block height="64" width="64"
+				icon="icon-angle-left"></tm-button>
+
+
+			<block v-for="(item,index) in items  " :key="index">
+
+				<tm-button :fllowTheme="false" :shadow="4" :disabled="disabled" :black="black_tmeme"
+					:theme="item==nowIndex?color_tmeme:'white'" @click="clicPages(item)" block
+					:item-class="round?'rounded':''" height="64" width="64">
+					{{item}}
+				</tm-button>
+			</block>
+
+
+			<tm-button :fllowTheme="false" :shadow="4" :icon-size="24"
+				:font-color="nowIndex==tal||disabled?'grey':color_tmeme" :black="black_tmeme" theme="white"
+				@click="tv_next" :disabled="nowIndex==tal||disabled?true:false" :item-class="round?'rounded':''" block
+				height="64" width="64" icon="icon-angle-right">
+			</tm-button>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * 分页
+	 * @property {Function} change 页面改变时触发。
+	 * @property {Number} page = [] 默认：1当前页码，必须使用page.sync
+	 * @property {Number} total-visible = [] 默认：5最大可见页数
+	 * @property {Number} total = [] 默认：0总条数。
+	 * @property {Number} size = [] 默认：8每页的数量。
+	 * @property {Boolean} round = [] 默认：false,是否圆形按钮。
+	 * @property {Boolean} black = [] 默认：false,是否暗黑模式
+	 * @property {Boolean} disabled = [] 默认：false,禁用
+	 * @property {String} color = [] 默认：primary,选中的主题色
+	 * @example <tm-pagination :page.sync="page" :total="100"></tm-pagination>
+	 */
+	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
+	export default {
+		components: {
+			tmButton
+		},
+		name: "tm-pagination",
+		props: {
+			total: {
+				type: Number,
+				default: 0
+			},
+			// 最大可见按钮数量。
+			totalVisible: {
+				type: Number,
+				default: 5
+			},
+			// 当前页码。需要page.sync同步。
+			page: {
+				type: Number,
+				default: 1
+			},
+			// 每页的数量 。
+			size: {
+				type: Number,
+				default: 10
+			},
+			// 是否圆形按钮。
+			round: {
+				type: Boolean,
+				default: false
+			},
+			// 是否暗黑模式
+			black: {
+				type: Boolean | String,
+				default: null
+			},
+			// 主题色
+			color: {
+				type: String,
+				default: 'primary'
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// 跟随主题色的改变而改变。
+			fllowTheme: {
+				type: Boolean | String,
+				default: true
+			}
+		},
+		watch: {
+			page: function(val) {
+				this.init()
+			}
+		},
+		computed: {
+			black_tmeme: function() {
+				if (this.black !== null) return this.black;
+				return this.$tm.vx.state().tmVuetify.black;
+			},
+			color_tmeme: function() {
+				if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this
+					.fllowTheme) {
+					return this.$tm.vx.state().tmVuetify.color;
+				}
+				return this.color;
+			},
+			//总共的页码。
+			tal: function() {
+				if (this.total <= this.size) return 1;
+				let isInt = this.total % this.size;
+				let ds = this.total / this.size;
+
+				return isInt == 0 ? Math.floor(ds) : Math.floor(ds) + 1;
+			},
+			items: function() {
+				
+				const totalVisible = parseInt(this.totalVisible, 10)<=5?5:parseInt(this.totalVisible, 10);
+				if(this.tal<=totalVisible){
+					return this.range(1, this.tal)
+				}
+				if (totalVisible === 0) {
+					return []
+				}
+
+				const maxLength = Math.min(
+					Math.max(0, totalVisible) || this.tal,
+					Math.max(0, this.maxButtons) || this.tal,
+					this.tal
+				)
+
+				if (this.tal <= maxLength) {
+					return this.range(1, this.tal)
+				}
+
+				const even = maxLength % 2 === 0 ? 1 : 0
+				const left = Math.floor(maxLength / 2)
+				const right = this.tal - left + 1 + even
+
+				if (this.page > left && this.page < right) {
+					const firstItem = 1
+					const lastItem = this.tal
+					const start = this.page - left + 2
+					const end = this.page + left - 2 - even
+					const secondItem = start - 1 === firstItem + 1 ? 2 : '...'
+					const beforeLastItem = end + 1 === lastItem - 1 ? end + 1 : '...'
+
+					return [1, secondItem, ...this.range(start, end), beforeLastItem, this.tal]
+				} else if (this.page === left) {
+					const end = this.page + left - 1 - even
+					return [...this.range(1, end), '...', this.tal]
+				} else if (this.page === right) {
+					const start = this.page - left + 1
+					return [1, '...', ...this.range(start, this.tal)]
+				} else {
+					return [
+						...this.range(1, left),
+						'...',
+						...this.range(right, this.tal),
+					]
+				}
+			},
+		},
+		data() {
+			return {
+				nowIndex: 1,
+				maxButtons: 0,
+			};
+		},
+		mounted() {
+			let t = this;
+
+			this.$Querey('.tm-pagination').then(res => {
+				let w = res[0].width;
+				t.maxButtons = Math.floor((w - uni.upx2px(20)) / uni.upx2px(64))
+
+			})
+		},
+		methods: {
+			clicPages(index) {
+				if (index == '...') return;
+				this.$emit('input', index)
+				this.$emit('update:page', index)
+				this.$emit('prev')
+				this.$emit('change',index)
+
+			},
+			tv_pre() {
+				this.$emit('input', this.page - 1)
+				this.$emit('update:page', this.page - 1)
+				this.$emit('prev')
+				this.$emit('change',this.page - 1)
+				
+			},
+			tv_next() {
+				this.$emit('input', this.page + 1)
+				this.$emit('update:page', this.page + 1)
+				this.$emit('next')
+				this.$emit('change',this.page + 1)
+				
+			},
+
+			range(from = 1, to) {
+				const range = []
+
+				from = from > 0 ? from : 1
+
+				for (let i = from; i <= to; i++) {
+					range.push(i)
+				}
+
+				return range
+			},
+
+			init() {
+				this.nowIndex = null;
+				uni.$tm.sleep(100).then(() => (this.nowIndex = this.page))
+			},
+
+		},
+	}
+</script>
+
+<style lang="scss">
+
+</style>