From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-form/u-form.vue | 134 ++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 134 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-form/u-form.vue b/uview-ui/components/u-form/u-form.vue
new file mode 100644
index 0000000..bdbafaf
--- /dev/null
+++ b/uview-ui/components/u-form/u-form.vue
@@ -0,0 +1,134 @@
+<template>
+ <view class="u-form"><slot /></view>
+</template>
+
+<script>
+ /**
+ * form 琛ㄥ崟
+ * @description 姝ょ粍浠朵竴鑸敤浜庤〃鍗曞満鏅紝鍙互閰嶇疆Input杈撳叆妗嗭紝Select寮瑰嚭妗嗭紝杩涜琛ㄥ崟楠岃瘉绛夈��
+ * @tutorial http://uviewui.com/components/form.html
+ * @property {Object} model 琛ㄥ崟鏁版嵁瀵硅薄
+ * @property {Boolean} border-bottom 鏄惁鏄剧ず琛ㄥ崟鍩熺殑涓嬪垝绾胯竟妗�
+ * @property {String} label-position 琛ㄥ崟鍩熸彁绀烘枃瀛楃殑浣嶇疆锛宭eft-宸︿晶锛宼op-涓婃柟
+ * @property {String Number} label-width 鎻愮ず鏂囧瓧鐨勫搴︼紝鍗曚綅rpx锛堥粯璁�90锛�
+ * @property {Object} label-style lable鐨勬牱寮忥紝瀵硅薄褰㈠紡
+ * @property {String} label-align lable鐨勫榻愭柟寮�
+ * @property {Object} rules 閫氳繃ref璁剧疆锛岃瀹樼綉璇存槑
+ * @property {Array} error-type 閿欒鐨勬彁绀烘柟寮忥紝鏁扮粍褰㈠紡锛岃涓婃柟璇存槑(榛樿['message'])
+ * @example <u-form :model="form" ref="uForm"></u-form>
+ */
+
+export default {
+ name: 'u-form',
+ props: {
+ // 褰撳墠form鐨勯渶瑕侀獙璇佸瓧娈电殑闆嗗悎
+ model: {
+ type: Object,
+ default() {
+ return {};
+ }
+ },
+ // 楠岃瘉瑙勫垯
+ // rules: {
+ // type: [Object, Function, Array],
+ // default() {
+ // return {};
+ // }
+ // },
+ // 鏈夐敊璇椂鐨勬彁绀烘柟寮忥紝message-鎻愮ず淇℃伅锛宐order-濡傛灉input璁剧疆浜嗚竟妗嗭紝鍙樻垚鍛堢孩鑹诧紝
+ // border-bottom-涓嬭竟妗嗗憟鐜扮孩鑹诧紝none-鏃犳彁绀�
+ errorType: {
+ type: Array,
+ default() {
+ return ['message', 'toast']
+ }
+ },
+ // 鏄惁鏄剧ず琛ㄥ崟鍩熺殑涓嬪垝绾胯竟妗�
+ borderBottom: {
+ type: Boolean,
+ default: true
+ },
+ // label鐨勪綅缃紝left-宸﹁竟锛宼op-涓婅竟
+ labelPosition: {
+ type: String,
+ default: 'left'
+ },
+ // label鐨勫搴︼紝鍗曚綅rpx
+ labelWidth: {
+ type: [String, Number],
+ default: 90
+ },
+ // lable瀛椾綋鐨勫榻愭柟寮�
+ labelAlign: {
+ type: String,
+ default: 'left'
+ },
+ // lable鐨勬牱寮忥紝瀵硅薄褰㈠紡
+ labelStyle: {
+ type: Object,
+ default() {
+ return {}
+ }
+ },
+ },
+ provide() {
+ return {
+ uForm: this
+ };
+ },
+ data() {
+ return {
+ rules: {}
+ };
+ },
+ created() {
+ // 瀛樺偍褰撳墠form涓嬬殑鎵�鏈塽-form-item鐨勫疄渚�
+ // 涓嶈兘瀹氫箟鍦╠ata涓紝鍚﹀垯寰俊灏忕▼搴忎細閫犳垚寰幆寮曠敤鑰屾姤閿�
+ this.fields = [];
+ },
+ methods: {
+ setRules(rules) {
+ this.rules = rules;
+ },
+ // 娓呯┖鎵�鏈塽-form-item缁勪欢鐨勫唴瀹癸紝鏈川涓婃槸璋冪敤浜唘-form-item缁勪欢涓殑resetField()鏂规硶
+ resetFields() {
+ this.fields.map(field => {
+ field.resetField();
+ });
+ },
+ // 鏍￠獙鍏ㄩ儴鏁版嵁
+ validate(callback) {
+ return new Promise(resolve => {
+ // 瀵规墍鏈夌殑u-form-item杩涜鏍￠獙
+ let valid = true; // 榛樿閫氳繃
+ let count = 0; // 鐢ㄤ簬鏍囪鏄惁妫�鏌ュ畬姣�
+ let errorArr = []; // 瀛樻斁閿欒淇℃伅
+ this.fields.map(field => {
+ // 璋冪敤姣忎竴涓猽-form-item瀹炰緥鐨剉alidation鐨勬牎楠屾柟娉�
+ field.validation('', error => {
+ // 濡傛灉浠绘剰涓�涓猽-form-item鏍￠獙涓嶉�氳繃锛屽氨鎰忓懗鐫�鏁翠釜琛ㄥ崟涓嶉�氳繃
+ if (error) {
+ valid = false;
+ errorArr.push(error);
+ }
+ // 褰撳巻閬嶄簡鎵�鏈夌殑u-form-item鏃讹紝璋冪敤promise鐨則hen鏂规硶
+ if (++count === this.fields.length) {
+ resolve(valid); // 杩涘叆promise鐨則hen鏂规硶
+ // 鍒ゆ柇鏄惁璁剧疆浜唗oast鐨勬彁绀烘柟寮忥紝鍙彁绀烘渶鍓嶉潰鐨勮〃鍗曞煙鐨勭涓�涓敊璇俊鎭�
+ if(this.errorType.indexOf('none') === -1 && this.errorType.indexOf('toast') >= 0 && errorArr.length) {
+ this.$u.toast(errorArr[0]);
+ }
+ // 璋冪敤鍥炶皟鏂规硶
+ if (typeof callback == 'function') callback(valid);
+ }
+ });
+ });
+ });
+ }
+ }
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../libs/css/style.components.scss";
+</style>
--
Gitblit v1.9.3