create-uniapps 1.0.0

package/template/src/uni_modules/uview-plus/components/u-number-keyboard/u-number-keyboard.vue

@@ -0,0 +1,198 @@
+<template>
+	<view
+		class="u-keyboard"
+		@touchmove.stop.prevent="noop"
+	>
+		<view
+			class="u-keyboard__button-wrapper"
+			v-for="(item, index) in numList"
+			:key="index"
+		>
+			<view
+				class="u-keyboard__button-wrapper__button"
+				:style="[itemStyle(index)]"
+				@tap="keyboardClick(item)"
+				hover-class="u-hover-class"
+				:hover-stay-time="200"
+			>
+				<text class="u-keyboard__button-wrapper__button__text">{{ item }}</text>
+			</view>
+		</view>
+		<view
+			class="u-keyboard__button-wrapper"
+		>
+			<view
+				class="u-keyboard__button-wrapper__button u-keyboard__button-wrapper__button--gray"
+				hover-class="u-hover-class"
+				:hover-stay-time="200"
+				@touchstart.stop="backspaceClick"
+				@touchend="clearTimer"
+			>
+				<u-icon
+					name="backspace"
+					color="#303133"
+					size="28"
+				></u-icon>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { randomArray } from '../../libs/function/index';
+	/**
+	 * keyboard 键盘组件
+	 * @description
+	 * @tutorial
+	 * @property {String}	mode		键盘的类型，number-数字键盘，card-身份证键盘
+	 * @property {Boolean}	dotDisabled	是否显示键盘的"."符号
+	 * @property {Boolean}	random		是否打乱键盘按键的顺序
+	 * @event {Function} change		点击键盘触发
+	 * @event {Function} backspace	点击退格键触发
+	 * @example
+	 */
+	export default {
+		name: 'u-number-keyboard',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				backspace: 'backspace', // 退格键内容
+				dot: '.', // 点
+				timer: null, // 长按多次删除的事件监听
+				cardX: 'X' // 身份证的X符号
+			};
+		},
+		computed: {
+			// 键盘需要显示的内容
+			numList() {
+				let tmp = [];
+				if (this.dotDisabled && this.mode == 'number') {
+					if (!this.random) {
+						return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
+					} else {
+						return randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
+					}
+				} else if (!this.dotDisabled && this.mode == 'number') {
+					if (!this.random) {
+						return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0];
+					} else {
+						return randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]);
+					}
+				} else if (this.mode == 'card') {
+					if (!this.random) {
+						return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0];
+					} else {
+						return randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]);
+					}
+				}
+			},
+			// 按键的样式，在非乱序&&数字键盘&&不显示点按钮时，index为9时，按键占位两个空间
+			itemStyle() {
+				return index => {
+					let style = {};
+					if (this.mode == 'number' && this.dotDisabled && index == 9) style.width = '464rpx';
+					return style;
+				};
+			},
+			// 是否让按键显示灰色，只在非乱序&&数字键盘&&且允许点按键的时候
+			btnBgGray() {
+				return index => {
+					if (!this.random && index == 9 && (this.mode != 'number' || (this.mode == 'number' && !this
+							.dotDisabled))) return true;
+					else return false;
+				};
+			},
+		},
+		created() {
+		},
+		emits: ["backspace", "change"],
+		methods: {
+			// 点击退格键
+			backspaceClick() {
+				this.$emit('backspace');
+				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
+				this.timer = null;
+				this.timer = setInterval(() => {
+					this.$emit('backspace');
+				}, 250);
+			},
+			clearTimer() {
+				clearInterval(this.timer);
+				this.timer = null;
+			},
+			// 获取键盘显示的内容
+			keyboardClick(val) {
+				// 允许键盘显示点模式和触发非点按键时，将内容转为数字类型
+				if (!this.dotDisabled && val != this.dot && val != this.cardX) val = Number(val);
+				this.$emit('change', val);
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	$u-number-keyboard-background-color:rgb(224, 228, 230) !default;
+	$u-number-keyboard-padding:8px 10rpx 8px 10rpx !default;
+	$u-number-keyboard-button-width:222rpx !default;
+	$u-number-keyboard-button-margin:4px 6rpx !default;
+	$u-number-keyboard-button-border-top-left-radius:4px !default;
+	$u-number-keyboard-button-border-top-right-radius:4px !default;
+	$u-number-keyboard-button-border-bottom-left-radius:4px !default;
+	$u-number-keyboard-button-border-bottom-right-radius:4px !default;
+	$u-number-keyboard-button-height: 90rpx!default;
+	$u-number-keyboard-button-background-color:#FFFFFF !default;
+	$u-number-keyboard-button-box-shadow:0 2px 0px #BBBCBE !default;
+	$u-number-keyboard-text-font-size:20px !default;
+	$u-number-keyboard-text-font-weight:500 !default;
+	$u-number-keyboard-text-color:$u-main-color !default;
+	$u-number-keyboard-gray-background-color:rgb(200, 202, 210) !default;
+	$u-number-keyboard-u-hover-class-background-color: #BBBCC6 !default;
+
+	.u-keyboard {
+		@include flex;
+		flex-direction: row;
+		justify-content: space-around;
+		background-color: $u-number-keyboard-background-color;
+		flex-wrap: wrap;
+		padding: $u-number-keyboard-padding;
+
+		&__button-wrapper {
+			box-shadow: $u-number-keyboard-button-box-shadow;
+			margin: $u-number-keyboard-button-margin;
+			border-top-left-radius: $u-number-keyboard-button-border-top-left-radius;
+			border-top-right-radius: $u-number-keyboard-button-border-top-right-radius;
+			border-bottom-left-radius: $u-number-keyboard-button-border-bottom-left-radius;
+			border-bottom-right-radius: $u-number-keyboard-button-border-bottom-right-radius;
+
+			&__button {
+				width: $u-number-keyboard-button-width;
+				height: $u-number-keyboard-button-height;
+				background-color: $u-number-keyboard-button-background-color;
+				@include flex;
+				justify-content: center;
+				align-items: center;
+				border-top-left-radius: $u-number-keyboard-button-border-top-left-radius;
+				border-top-right-radius: $u-number-keyboard-button-border-top-right-radius;
+				border-bottom-left-radius: $u-number-keyboard-button-border-bottom-left-radius;
+				border-bottom-right-radius: $u-number-keyboard-button-border-bottom-right-radius;
+
+				&__text {
+					font-size: $u-number-keyboard-text-font-size;
+					font-weight: $u-number-keyboard-text-font-weight;
+					color: $u-number-keyboard-text-color;
+				}
+
+				&--gray {
+					background-color: $u-number-keyboard-gray-background-color;
+				}
+			}
+		}
+	}
+
+	.u-hover-class {
+		background-color: $u-number-keyboard-u-hover-class-background-color;
+	}
+</style>

package/template/src/uni_modules/uview-plus/components/u-overlay/overlay.js

@@ -0,0 +1,18 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:06:50
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/overlay.js
+ */
+export default {
+    // overlay组件
+    overlay: {
+        show: false,
+        zIndex: 10070,
+        duration: 300,
+        opacity: 0.5
+    }
+}

package/template/src/uni_modules/uview-plus/components/u-overlay/props.js

@@ -0,0 +1,26 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 是否显示遮罩
+        show: {
+            type: Boolean,
+            default: () => defProps.overlay.show
+        },
+        // 层级z-index
+        zIndex: {
+            type: [String, Number],
+            default: () => defProps.overlay.zIndex
+        },
+        // 遮罩的过渡时间，单位为ms
+        duration: {
+            type: [String, Number],
+            default: () => defProps.overlay.duration
+        },
+        // 不透明度值，当做rgba的第四个参数
+        opacity: {
+            type: [String, Number],
+            default: () => defProps.overlay.opacity
+        }
+    }
+})

package/template/src/uni_modules/uview-plus/components/u-overlay/u-overlay.vue

@@ -0,0 +1,71 @@
+<template>
+	<u-transition
+	    :show="show"
+	    custom-class="u-overlay"
+	    :duration="duration"
+	    :custom-style="overlayStyle"
+	    @click="clickHandler"
+		@touchmove.stop.prevent="noop"
+	>
+		<slot />
+	</u-transition>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addStyle, deepMerge } from '../../libs/function/index';
+	/**
+	 * overlay 遮罩
+	 * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+	 * @tutorial https://ijry.github.io/uview-plus/components/overlay.html
+	 * @property {Boolean}			show		是否显示遮罩（默认 false ）
+	 * @property {String | Number}	zIndex		zIndex 层级（默认 10070 ）
+	 * @property {String | Number}	duration	动画时长，单位毫秒（默认 300 ）
+	 * @property {String | Number}	opacity		不透明度值，当做rgba的第四个参数 （默认 0.5 ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @event {Function} click 点击遮罩发送事件
+	 * @example <u-overlay :show="show" @click="show = false"></u-overlay>
+	 */
+	export default {
+		name: "u-overlay",
+		mixins: [mpMixin, mixin,props],
+		computed: {
+			overlayStyle() {
+				const style = {
+					position: 'fixed',
+					top: 0,
+					left: 0,
+					right: 0,
+					zIndex: this.zIndex,
+					bottom: 0,
+					'background-color': `rgba(0, 0, 0, ${this.opacity})`
+				}
+				return deepMerge(style, addStyle(this.customStyle))
+			}
+		},
+		emits: ["click"],
+		methods: {
+			clickHandler() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+     $u-overlay-top:0 !default;
+     $u-overlay-left:0 !default;
+     $u-overlay-width:100% !default;
+     $u-overlay-height:100% !default;
+     $u-overlay-background-color:rgba(0, 0, 0, .7) !default;
+	.u-overlay {
+		position: fixed;
+		top:$u-overlay-top;
+		left:$u-overlay-left;
+		width: $u-overlay-width;
+		height:$u-overlay-height;
+		background-color:$u-overlay-background-color;
+	}
+</style>

package/template/src/uni_modules/uview-plus/components/u-pagination/u-pagination.vue

@@ -0,0 +1,283 @@
+<template>
+  <view class="u-pagination">
+    <!-- 上一页按钮 -->
+    <view
+      :class="[
+        'u-pagination-btn',
+        { disabled: currentPage === 1 }
+      ]"
+      :style="{ backgroundColor: buttonBgColor, borderColor: buttonBorderColor }"
+      @click="prev"
+    >
+      <template v-if="prevText">
+        {{ prevText }}
+      </template>
+      <up-icon v-else name="arrow-left"></up-icon>
+    </view>
+
+    <!-- 页码列表 -->
+    <block v-for="page in displayedPages" :key="page" v-if="layout.includes('pager')">
+      <view
+        :class="[
+          'u-pagination-item',
+          { active: page === currentPage }
+        ]"
+        @click="goTo(page)"
+      >
+        {{ page }}
+      </view>
+    </block>
+
+    <!-- 总数显示 -->
+    <view v-if="total > 0 && layout.includes('total')" class="u-pagination-total">
+        {{ currentPage }} / {{ totalPages }}
+    </view>
+
+    <!-- 每页数量选择器 -->
+    <!-- <picker
+      v-if="layout.includes('sizes')"
+      mode="selector"
+      :range="pageSizes"
+      range-key="label"
+      :value="pageSizeIndex"
+      @change="handleSizeChange"
+      class="u-pagination-sizes"
+    >
+      <view>{{ pageSizeLabel }}</view>
+    </picker> -->
+
+    <!-- 下一页按钮 -->
+    <view
+      :class="[
+        'u-pagination-btn',
+        { disabled: currentPage === totalPages }
+      ]"
+      :style="{ backgroundColor: buttonBgColor, borderColor: buttonBorderColor }"
+      @click="next"
+    >
+      <template v-if="nextText">
+        下一页
+      </template>
+      <up-icon v-else name="arrow-right"></up-icon>
+    </view>
+
+    <!-- 跳转输入框 -->
+    <!-- <view v-if="layout.includes('jumper')">
+      <text>前往</text>
+      <input
+        type="number"
+        class="u-pagination-jumper"
+        :value="currentPageInput"
+        @input="onInputPage"
+        @confirm="onConfirmPage"
+      />
+      <text>页</text>
+    </view> -->
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'u-pagination',
+  props: {
+    // 当前页码
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    // 每页条目数
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    // 总数据条目数
+    total: {
+      type: Number,
+      default: 0
+    },
+    // 上一页按钮文案
+    prevText: {
+      type: String,
+      default: ''
+    },
+    // 下一页按钮文案
+    nextText: {
+      type: String,
+      default: ''
+    },
+    buttonBgColor: {
+      type: String,
+      default: '#f5f7fa'
+    },
+    buttonBorderColor: {
+      type: String,
+      default: '#dcdfe6'
+    },
+    // 可选的每页条目数
+    pageSizes: {
+      type: Array,
+      default: () => [10, 20, 30, 40, 50]
+    },
+    // 布局方式（类似 el-pagination）
+    layout: {
+      type: String,
+      default: 'prev, pager, next'
+    },
+    // 是否隐藏只有一个页面时的分页控件
+    hideOnSinglePage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:currentPage', 'update:pageSize', 'current-change', 'size-change'],
+  data() {
+    return {
+      currentPageInput: this.currentPage + ''
+    };
+  },
+  computed: {
+    totalPages() {
+      return Math.max(1, Math.ceil(this.total / this.pageSize));
+    },
+    pageSizeIndex() {
+      const index = this.pageSizes.findIndex(size => size.value === this.pageSize);
+      return index >= 0 ? index : 0;
+    },
+    pageSizeLabel() {
+      const found = this.pageSizes.find(size => size.value === this.pageSize);
+      return found?.label || this.pageSize;
+    },
+    displayedPages() {
+        const total = this.totalPages;
+        const current = this.currentPage;
+
+        if (total <= 4) {
+            return Array.from({ length: total }, (_, i) => i + 1);
+        }
+
+        const pages = [];
+
+        // 当前页靠近头部
+        if (current <= 2) {
+            for (let i = 1; i <= 4; i++) {
+            pages.push(i);
+            }
+            pages.push('...');
+            pages.push(total);
+        }
+        // 当前页在尾部附近
+        else if (current >= total - 1) {
+            pages.push(1);
+            pages.push('...');
+            for (let i = total - 3; i <= total; i++) {
+            pages.push(i);
+            }
+        }
+        // 中间情况
+        else {
+            pages.push(1);
+            pages.push('...');
+            pages.push(current - 1);
+            pages.push(current);
+            pages.push(current + 1);
+            pages.push('...');
+            pages.push(total);
+        }
+
+        return pages;
+    }
+    // 控制是否隐藏
+  },
+  watch: {
+    currentPage(val) {
+      this.currentPageInput = val + '';
+    }
+  },
+  methods: {
+    handleSizeChange(e) {
+      const selected = e.detail.value;
+      const size = this.pageSizes[selected]?.value || this.pageSizes[0].value;
+      this.$emit('update:pageSize', size);
+      this.$emit('size-change', size);
+    },
+    prev() {
+      if (this.currentPage > 1) {
+        this.goTo(this.currentPage - 1);
+      }
+    },
+    next() {
+      if (this.currentPage < this.totalPages) {
+        this.goTo(this.currentPage + 1);
+      }
+    },
+    goTo(page) {
+      if (page === '...' || page === this.currentPage) return;
+      this.$emit('update:currentPage', page);
+      this.$emit('current-change', page);
+    },
+    onInputPage(e) {
+      this.currentPageInput = e.detail.value;
+    },
+    onConfirmPage(e) {
+      const num = parseInt(e.detail.value);
+      if (!isNaN(num) && num >= 1 && num <= this.totalPages) {
+        this.goTo(num);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.u-pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  font-size: 14px;
+  color: #606266;
+
+  .u-pagination-total {
+    margin-right: 10px;
+  }
+
+  .u-pagination-sizes {
+    margin-right: 10px;
+    padding: 4px 4px;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 4px;
+  }
+
+  .u-pagination-btn {
+    margin: 0 3px;
+    padding: 4px 4px;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 4px;
+    background-color: #f5f7fa;
+    &.disabled {
+      opacity: 0.5;
+    }
+  }
+
+  .u-pagination-item {
+    margin: 0 2px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    &.active {
+      background-color: #409eff;
+      color: white;
+    }
+  }
+
+  .u-pagination-jumper {
+    width: 40px;
+    height: 28px;
+    margin: 0 5px;
+    padding: 0 5px;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+}
+</style>