@ecolovo/uniapp-components 1.0.0

package/components/form-item/form-item.vue

@@ -0,0 +1,141 @@
+<template>
+	<view
+		:class="[
+			componentClassNames,
+			{
+				[$style['FormItem--line']]: usingType === 'line',
+				[$style['FormItem--next']]: usingType === 'next',
+				[$style['FormItem--block']]: usingType === 'block',
+			},
+		]"
+	>
+		<view :class="$style['FormItem--label']">
+			<text :class="{ [$style['FormItem--required']]: !isFormReadonly && required }">{{ label }}</text>
+			<text v-if="subLabel" :class="$style['FormItem--sub-label']">{{ subLabel }}</text>
+		</view>
+		<view :class="$style['FormItem--content']">
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import { isFormReadonly } from '../form/mixin';
+
+export default {
+	name: 'AppFormItem',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	mixins: [componentName, isFormReadonly],
+	props: {
+		/** 标签文本 */
+		label: {
+			type: String,
+			default: '',
+		},
+		/** 副标签文本 */
+		subLabel: {
+			type: String,
+			default: '',
+		},
+		/** 是否必填 */
+		required: {
+			type: Boolean,
+			default: false,
+		},
+		/** 显示类型 */
+		type: {
+			type: String,
+			validator: (val) => !val || ['line', 'next', 'block'].includes(val),
+			default: '',
+		},
+	},
+	computed: {
+		usingType() {
+			return this.type || this.formProps.type || 'line';
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'form-item';
+$component-vars: $form-item;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+.FormItem {
+	@extend %external-vars;
+	position: relative;
+
+	.FormItem--required::after {
+		position: absolute;
+		content: '*';
+		color: #f00;
+	}
+
+	.FormItem--label {
+		color: #999;
+	}
+
+	&.FormItem--line {
+		display: flex;
+
+		.FormItem--label {
+			flex: none;
+			width: UTILS__LOCAL_VAR(label-width);
+			margin-right: 30rpx;
+			height: UTILS__LOCAL_VAR(height);
+			line-height: UTILS__LOCAL_VAR(height);
+		}
+		.FormItem--sub-label {
+			display: none;
+		}
+		.FormItem--content {
+			flex: 1;
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	&.FormItem--next {
+		.FormItem--label {
+			margin-top: 20rpx;
+			margin-bottom: 12rpx;
+		}
+		.FormItem--sub-label {
+			margin-left: 30rpx;
+			font-size: UTILS__GLOBAL_VAR(font-size, small);
+			font-weight: 400;
+			color: #999;
+		}
+		.FormItem--content {
+			min-height: UTILS__LOCAL_VAR(height);
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	&.FormItem--block {
+		@extend .FormItem--next;
+
+		.FormItem--label {
+			font-size: UTILS__GLOBAL_VAR(font-size, large);
+			font-weight: 600;
+		}
+		.FormItem--content {
+			padding: 0 20rpx;
+			background: UTILS__GLOBAL_VAR(color, background);
+			border-radius: 12rpx;
+			height: 104rpx;
+		}
+	}
+}
+</style>

package/components/icon/icon.vue

@@ -0,0 +1,114 @@
+<template>
+	<text
+		:class="[componentClassNames, iconClass, loadingAnimation, { [$style['Icon--expand-tap-size']]: tapSize }]"
+		:style="styleStr"
+		@click="$emit('click')"
+	>
+	</text>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import { iconMap } from '../../configs';
+
+const iconListStr = iconMap.keys().toArray().sort().join('\n');
+
+export default {
+	name: 'AppIcon',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	mixins: [componentName],
+	props: {
+		/** 图标名 */
+		icon: {
+			type: String,
+			default: '',
+		},
+		/** 点击范围 */
+		tapSize: {
+			type: String,
+			default: '',
+		},
+	},
+	computed: {
+		iconClass() {
+			const iconInfo = iconMap.get(this.icon);
+			if (!iconInfo) {
+				/* eslint-disable no-console */
+				console.error(`${this.componentClass} Error: 找不到图标 "${this.icon}"`);
+				if (process.env.NODE_ENV === 'development') {
+					console.groupCollapsed(`%c查看解决方法`, 'color: orange');
+					console.warn(
+						[
+							'请检查是否在 `main.js` 文件中调用了组件库的 `init` 方法，并传入了图标文件的 json 文件',
+							'例：',
+							'```',
+							'// main.js',
+							"import init from '@ecolovo/ec-ui/init';",
+							"init({ iconfont: require('@/resources/iconfont/some_icon/iconfont.json') });",
+							'\n// App.vue -> <style>',
+							"@import '@/resources/iconfont/iconfont.css';",
+							'```',
+							`\n当前可用图标: `,
+							iconListStr,
+						].join('\n')
+					);
+					console.groupEnd();
+				}
+				/* eslint-enable no-console */
+				return [];
+			}
+			return [iconInfo.fontFamily, iconInfo.prefix + iconInfo.name];
+		},
+		loadingAnimation() {
+			return /(?<![a-zA-Z])loading(?![a-zA-Z])/.test(this.icon) ? this.$style['Icon--spinner'] : '';
+		},
+		styleStr() {
+			return `--tap-size: ${this.tapSize || '100%'};`;
+		},
+	},
+};
+</script>
+
+<style lang="scss">
+@import '../../resources/iconfont/uniapp_ui_icon/iconfont.css';
+
+.uniapp_ui_icon {
+	font-size: inherit;
+	line-height: inherit;
+}
+</style>
+
+<style lang="scss" module>
+.Icon {
+	display: inline-block;
+	font-size: inherit;
+	color: inherit;
+}
+.Icon--expand-tap-size {
+	position: relative;
+	&::after {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: var(--tap-size, 100%);
+		height: var(--tap-size, 100%);
+		transform: translate(-50%, -50%);
+	}
+}
+.Icon--spinner {
+	animation: circle var(--animation-duration, 0.75s) linear infinite;
+
+	@keyframes circle {
+		0% {
+			rotate: 0deg;
+		}
+		100% {
+			rotate: 360deg;
+		}
+	}
+}
+</style>

package/components/image/image.vue

@@ -0,0 +1,61 @@
+<template>
+	<image
+		:src="src || ''"
+		:preview-list="previewList"
+		:class="componentClassNames"
+		:mode="mode"
+		@click="preview"
+	></image>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+
+export default {
+	name: 'AppImage',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	mixins: [componentName],
+	props: {
+		/** 图片地址 */
+		src: {
+			type: String,
+			default: '',
+		},
+		/** 图片显示模式 */
+		mode: {
+			type: String,
+			default: '',
+		},
+		/** 预览列表 */
+		previewList: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	methods: {
+		preview() {
+			if (this.previewList.length > 0) {
+				uni.previewImage({
+					current: this.src,
+					urls: this.previewList,
+				});
+				return;
+			}
+			uni.previewImage({
+				current: this.src,
+				urls: [this.src],
+			});
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+.Image {
+	width: 100%;
+	height: 100%;
+}
+</style>

package/components/input/input.vue

@@ -0,0 +1,154 @@
+<template>
+	<view :class="componentClassNames" @click="setFocus">
+		<view
+			v-if="isReadonly || (useText && value && !focused)"
+			:class="[$style['Input--text'], { [$style['Input--ellipsis']]: ellipsis }]"
+		>
+			{{ value }}
+		</view>
+		<input
+			v-else
+			:value="value"
+			:type="type"
+			:disabled="disabled"
+			:maxlength="maxlength"
+			:placeholder="placeholder"
+			:focus="focused"
+			always-embed
+			:class="$style['Input--input']"
+			:placeholder-class="$style['Input--input-placeholder']"
+			@input="$emit('input', $event.detail.value)"
+			@confirm="focused = false"
+			@blur="focused = false"
+		/>
+		<icon-cpn
+			v-if="!isReadonly && clearable && value"
+			icon="close-circle-filled"
+			:class="$style['Input--icon']"
+			tap-size="80rpx"
+			@click="$emit('input', '')"
+		>
+		</icon-cpn>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import { isFormReadonly } from '../form/mixin';
+import IconCpn from '../icon/icon.vue';
+
+export default {
+	name: 'AppInput',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { IconCpn },
+	mixins: [componentName, isFormReadonly],
+	props: {
+		/** 绑定值 */
+		value: {
+			type: String,
+			default: '',
+		},
+		/** 键盘类型 */
+		type: {
+			type: String,
+			default: 'text',
+		},
+		/** 是否添加清空图标 */
+		clearable: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否禁用 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否只读 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		/** 文本超长时是否省略 */
+		ellipsis: {
+			type: Boolean,
+			default: false,
+		},
+		/** 最大输入长度 */
+		maxlength: {
+			type: Number,
+			default: 140,
+		},
+		/** 占位文本 */
+		placeholder: {
+			type: String,
+			default: '请输入',
+		},
+		/** 当不聚焦时是否使用文本替换 input */
+		useText: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			/** 是否聚焦 */
+			focused: false,
+		};
+	},
+	computed: {
+		isReadonly() {
+			return this.readonly || this.isFormReadonly;
+		},
+	},
+	methods: {
+		/** 设置焦点 */
+		setFocus() {
+			if (this.disabled || this.isReadonly) return;
+
+			this.focused = true;
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+.Input {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+
+	.Input--text {
+		flex: 1;
+		width: 100%;
+		pointer-events: none;
+	}
+	.Input--ellipsis {
+		overflow-x: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.Input--input {
+		flex: 1;
+		width: 100%;
+		height: 100%;
+		min-height: 1em;
+		padding: 0;
+		margin: 0;
+	}
+	.Input--input-placeholder {
+		color: UTILS__GLOBAL_VAR(color, placeholder);
+	}
+	.Input--icon {
+		flex: none;
+		font-size: 40rpx;
+		color: #999;
+		margin-left: 20rpx;
+	}
+}
+</style>

package/components/input/password-input.vue

@@ -0,0 +1,95 @@
+<template>
+	<view :class="componentClassNames">
+		<input
+			:value="value"
+			:disabled="disabled"
+			:maxlength="maxlength"
+			:password="!isShowPassword"
+			:placeholder="placeholder"
+			always-embed
+			:class="$style['PasswordInput--input']"
+			:placeholder-class="$style['PasswordInput--input-placeholder']"
+			@input="$emit('input', $event.detail.value)"
+		/>
+		<icon-cpn
+			:icon="isShowPassword ? 'password-show' : 'password-hide'"
+			:class="$style['PasswordInput--icon']"
+			expand-tap-area
+			@click="isShowPassword = !isShowPassword"
+		></icon-cpn>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import IconCpn from '../icon/icon.vue';
+
+export default {
+	name: 'AppPasswordInput',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { IconCpn },
+	mixins: [componentName],
+	props: {
+		/** 绑定值 */
+		value: {
+			type: String,
+			default: '',
+		},
+		/** 是否禁用 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/** 最大输入长度 */
+		maxlength: {
+			type: Number,
+			default: 140,
+		},
+		/** 占位文本 */
+		placeholder: {
+			type: String,
+			default: '请输入密码',
+		},
+		/** 是否只读 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			/** 是否显示明文 */
+			isShowPassword: false,
+		};
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+.PasswordInput {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+
+	.PasswordInput--input {
+		width: 100%;
+		height: 100%;
+	}
+	.PasswordInput--input-placeholder {
+		color: UTILS__GLOBAL_VAR(color, placeholder);
+	}
+	.PasswordInput--icon {
+		flex: none;
+		font-size: 40rpx;
+		color: #999;
+		margin-left: 20rpx;
+		#{UTILS__VAR_NAME(tap-size, icon)}: 80rpx;
+	}
+}
+</style>

package/components/list-page/list-page.js

@@ -0,0 +1,10 @@
+const pulldownRefreshMixin = {
+	onPullDownRefresh() {
+		this.$refs.page.onRefresh();
+	},
+	onReachBottom() {
+		this.$refs.page.onLoadMore();
+	},
+};
+
+export { pulldownRefreshMixin };