123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509 |
- <template>
- <view class="u-form-item" :class="{'u-border-bottom': elBorderBottom, 'u-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom')}">
- <view class="u-form-item__body" :style="{
- flexDirection: elLabelPosition == 'left' ? 'row' : 'column'
- }">
-
- <view class="u-form-item--left" :style="{
- width: uLabelWidth,
- flex: `0 0 ${uLabelWidth}`,
- marginBottom: elLabelPosition == 'left' ? 0 : '10rpx',
- }">
-
- <view class="u-form-item--left__content" v-if="required || leftIcon || label">
-
- <text v-if="required" class="u-form-item--left__content--required">*</text>
- <view class="u-form-item--left__content__icon" v-if="leftIcon">
- <u-icon :name="leftIcon" :custom-style="leftIconStyle"></u-icon>
- </view>
- <view class="u-form-item--left__content__label" :style="[elLabelStyle, {
- 'justify-content': elLabelAlign == 'left' ? 'flex-start' : elLabelAlign == 'center' ? 'center' : 'flex-end'
- }]">
- {{label}}
- </view>
- </view>
- </view>
- <view class="u-form-item--right u-flex">
- <view class="u-form-item--right__content">
- <view class="u-form-item--right__content__slot" :style="elLabelPosition == 'left' && elInputAlign == 'right' ? 'text-align:right;display: inline-block;line-height:initial;' : ''">
- <slot />
- </view>
- <view class="u-form-item--right__content__icon u-flex" v-if="$slots.right || rightIcon">
- <u-icon :custom-style="rightIconStyle" v-if="rightIcon" :name="rightIcon"></u-icon>
- <slot name="right" />
- </view>
- </view>
- </view>
- </view>
- <view class="u-form-item__message" v-if="validateState === 'error' && showError('message')" :style="{
- paddingLeft: elLabelPosition == 'left' ? $u.addUnit(elLabelWidth) : '0',
- textAlign: elInputAlign == 'right' ? 'right' : 'left'
- }">{{validateMessage}}</view>
- </view>
- </template>
- <script>
- import Emitter from '../../libs/util/emitter.js';
- import schema from '../../libs/util/async-validator';
-
- schema.warning = function() {};
-
- export default {
- name: 'u-form-item',
- mixins: [Emitter],
- inject: {
- uForm: {
- default () {
- return null
- }
- }
- },
- props: {
-
- label: {
- type: String,
- default: ''
- },
-
- prop: {
- type: String,
- default: ''
- },
-
- borderBottom: {
- type: [String, Boolean],
- default: ''
- },
-
- labelPosition: {
- type: String,
- default: ''
- },
-
- labelWidth: {
- type: [String, Number],
- default: ''
- },
-
- labelStyle: {
- type: Object,
- default () {
- return {}
- }
- },
-
- labelAlign: {
- type: String,
- default: ''
- },
-
- rightIcon: {
- type: String,
- default: ''
- },
-
- leftIcon: {
- type: String,
- default: ''
- },
-
- leftIconStyle: {
- type: Object,
- default () {
- return {}
- }
- },
-
- rightIconStyle: {
- type: Object,
- default () {
- return {}
- }
- },
-
- required: {
- type: Boolean,
- default: false
- },
- inputAlign:{
- type: String,
- default: ''
- },
- },
- data() {
- return {
- initialValue: '',
-
- validateState: '',
- validateMessage: '',
-
- errorType: ['message'],
- fieldValue: '',
-
- parentData: {
- borderBottom: true,
- labelWidth: 90,
- labelPosition: 'left',
- labelStyle: {},
- labelAlign: 'left',
- inputAlign: 'left',
- }
- };
- },
- watch: {
- validateState(val) {
- this.broadcastInputError();
- },
-
- "uForm.errorType"(val) {
- this.errorType = val;
- this.broadcastInputError();
- },
- },
- computed: {
-
- uLabelWidth() {
-
- return this.elLabelPosition == 'left' ? (this.label === 'true' || this.label === '' ? 'auto' : this.$u.addUnit(this
- .elLabelWidth)) : '100%';
- },
- showError() {
- return type => {
-
- if (this.errorType.indexOf('none') >= 0) return false;
- else if (this.errorType.indexOf(type) >= 0) return true;
- else return false;
- }
- },
-
- elLabelWidth() {
-
- return (this.labelWidth != 0 || this.labelWidth != '') ? this.labelWidth : (this.parentData.labelWidth ? this.parentData
- .labelWidth :
- 90);
- },
-
- elLabelStyle() {
- return Object.keys(this.labelStyle).length ? this.labelStyle : (this.parentData.labelStyle ? this.parentData.labelStyle :
- {});
- },
-
- elLabelPosition() {
- return this.labelPosition ? this.labelPosition : (this.parentData.labelPosition ? this.parentData.labelPosition :
- 'left');
- },
-
- elLabelAlign() {
- return this.labelAlign ? this.labelAlign : (this.parentData.labelAlign ? this.parentData.labelAlign : 'left');
- },
-
- elBorderBottom() {
-
- return this.borderBottom !== '' ? this.borderBottom : this.parentData.borderBottom ? this.parentData.borderBottom :
- true;
- },
- elInputAlign() {
- return this.inputAlign ? this.inputAlign : (this.parentData.inputAlign ? this.parentData.inputAlign : 'left');
- },
- },
- methods: {
- broadcastInputError() {
-
- this.broadcast('u-input', 'onFormItemError', this.validateState === 'error' && this.showError('border'));
- },
-
- setRules() {
- let that = this;
-
-
-
-
-
-
-
-
-
-
-
- this.$on('onFieldBlur', that.onFieldBlur);
-
- this.$on('onFieldChange', that.onFieldChange);
-
-
-
- },
-
- getRules() {
-
- let rules = this.parent.rules;
- rules = rules ? rules[this.prop] : [];
-
- return [].concat(rules || []);
- },
-
- onFieldBlur() {
- this.validation('blur');
- },
-
- onFieldChange() {
- this.validation('change');
- },
-
- getFilteredRule(triggerType = '') {
- let rules = this.getRules();
-
- if (!triggerType) return rules;
-
-
-
- return rules.filter(res => res.trigger && res.trigger.indexOf(triggerType) !== -1);
- },
- getData(dataObj, name, defaultValue) {
- let newDataObj;
- if (dataObj) {
- newDataObj = JSON.parse(JSON.stringify(dataObj));
- let k = "",
- d = ".",
- l = "[",
- r = "]";
- name = name.replace(/\s+/g, k) + d;
- let tstr = k;
- for (let i = 0; i < name.length; i++) {
- let theChar = name.charAt(i);
- if (theChar != d && theChar != l && theChar != r) {
- tstr += theChar;
- } else if (newDataObj) {
- if (tstr != k) newDataObj = newDataObj[tstr];
- tstr = k;
- }
- }
- }
- if (typeof newDataObj === "undefined" && typeof defaultValue !== "undefined") newDataObj = defaultValue;
- return newDataObj;
- },
- setData(dataObj, name, value) {
-
- let dataValue;
- if (typeof value === "object") {
- dataValue = JSON.parse(JSON.stringify(value));
- } else {
- dataValue = value;
- }
- let regExp = new RegExp("([\\w$]+)|\\[(:\\d)\\]", "g");
- const patten = name.match(regExp);
-
- for (let i = 0; i < patten.length - 1; i++) {
- let keyName = patten[i];
- if (typeof dataObj[keyName] !== "object") dataObj[keyName] = {};
- dataObj = dataObj[keyName];
- }
-
- dataObj[patten[patten.length - 1]] = dataValue;
- },
-
- validation(trigger, callback = () => {}) {
-
-
-
- this.fieldValue = this.getData(this.parent.model,this.prop);
-
- let rules = this.getFilteredRule(trigger);
-
-
- if (!rules || rules.length === 0) {
- return callback('');
- }
-
- this.validateState = 'validating';
-
- let validator = new schema({
- [this.prop]: rules
- });
- validator.validate({
- [this.prop]: this.fieldValue
- }, {
- firstFields: true
- }, (errors, fields) => {
-
- this.validateState = !errors ? 'success' : 'error';
- this.validateMessage = errors ? errors[0].message : '';
- let field = errors ? errors[0].field : '';
-
- callback(this.validateMessage, {
- state: this.validateState,
- key: field,
- msg: this.validateMessage
- });
- });
- },
-
- resetField() {
-
- this.setData(this.parent.model,this.prop,this.initialValue);
-
- this.validateState = 'success';
- }
- },
-
- mounted() {
-
- this.parent = this.$u.$parent.call(this, 'u-form');
- if (this.parent) {
-
- Object.keys(this.parentData).map(key => {
- this.parentData[key] = this.parent[key];
- });
-
- if (this.prop) {
-
- this.parent.fields.push(this);
- this.errorType = this.parent.errorType;
-
- this.initialValue = this.fieldValue;
-
-
- this.$nextTick(() => {
- this.setRules();
- })
- }
- }
- },
-
-
- beforeDestroy() {
-
- if (this.parent && this.prop) {
- this.parent.fields.map((item, index) => {
- if (item === this) this.parent.fields.splice(index, 1);
- })
- }
- },
-
-
- beforeUnmount() {
-
- if (this.parent && this.prop) {
- this.parent.fields.map((item, index) => {
- if (item === this) this.parent.fields.splice(index, 1);
- })
- }
- },
-
- };
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/style.components.scss";
- .u-form-item {
- @include vue-flex;
- // align-items: flex-start;
- padding: 20rpx 0;
- font-size: 28rpx;
- color: $u-main-color;
- box-sizing: border-box;
- line-height: $u-form-item-height;
- flex-direction: column;
- &__border-bottom--error:after {
- border-color: $u-type-error;
- }
- &__body {
- @include vue-flex;
- }
- &--left {
- @include vue-flex;
- align-items: center;
- &__content {
- position: relative;
- @include vue-flex;
- align-items: center;
- padding-right: 10rpx;
- flex: 1;
- &__icon {
- margin-right: 8rpx;
- }
- &--required {
- position: absolute;
- left: -16rpx;
- vertical-align: middle;
- color: $u-type-error;
- padding-top: 6rpx;
- }
- &__label {
- @include vue-flex;
- align-items: center;
- flex: 1;
- }
- }
- }
- &--right {
- flex: 1;
- &__content {
- @include vue-flex;
- align-items: center;
- flex: 1;
- &__slot {
- flex: 1;
- /* #ifndef MP */
- @include vue-flex;
- align-items: center;
- /* #endif */
- }
- &__icon {
- margin-left: 10rpx;
- color: $u-light-color;
- font-size: 30rpx;
- }
- }
- }
- &__message {
- font-size: 24rpx;
- line-height: 24rpx;
- color: $u-type-error;
- margin-top: 12rpx;
- }
- }
- </style>
|