123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235 |
- <template>
- <view class="u-form-item">
- <view
- class="u-form-item__body"
- @tap="clickHandler"
- :style="[$u.addStyle(customStyle), {
- flexDirection: (labelPosition || parentData.labelPosition) === 'left' ? 'row' : 'column'
- }]"
- >
-
- <slot name="label">
- {{required}}
- <view
- class="u-form-item__body__left"
- v-if="required || leftIcon || label"
- :style="{
- width: $u.addUnit(labelWidth || parentData.labelWidth),
- marginBottom: parentData.labelPosition === 'left' ? 0 : '5px',
- }"
- >
-
- <view class="u-form-item__body__left__content">
-
- <text
- v-if="required"
- class="u-form-item__body__left__content__required"
- >*</text>
- <view
- class="u-form-item__body__left__content__icon"
- v-if="leftIcon"
- >
- <u-icon
- :name="leftIcon"
- :custom-style="leftIconStyle"
- ></u-icon>
- </view>
- <text
- class="u-form-item__body__left__content__label"
- :style="[parentData.labelStyle, {
- justifyContent: parentData.labelAlign === 'left' ? 'flex-start' : parentData.labelAlign === 'center' ? 'center' : 'flex-end'
- }]"
- >{{ label }}</text>
- </view>
- </view>
- </slot>
- <view class="u-form-item__body__right">
- <view class="u-form-item__body__right__content">
- <view class="u-form-item__body__right__content__slot">
- <slot />
- </view>
- <view
- class="item__body__right__content__icon"
- v-if="$slots.right"
- >
- <slot name="right" />
- </view>
- </view>
- </view>
- </view>
- <slot name="error">
- <text
- v-if="!!message && parentData.errorType === 'message'"
- class="u-form-item__body__right__message"
- :style="{
- marginLeft: $u.addUnit(parentData.labelPosition === 'top' ? 0 : (labelWidth || parentData.labelWidth))
- }"
- >{{ message }}</text>
- </slot>
- <u-line
- v-if="borderBottom"
- :color="message && parentData.errorType === 'border-bottom' ? $u.color.error : propsLine.color"
- :customStyle="`margin-top: ${message && parentData.errorType === 'message' ? '5px' : 0}`"
- ></u-line>
- </view>
- </template>
- <script>
- import props from './props.js';
-
- export default {
- name: 'u-form-item',
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
- data() {
- return {
-
- message: '',
- parentData: {
-
- labelPosition: 'left',
-
- labelAlign: 'left',
-
- labelStyle: {},
-
- labelWidth: 45,
-
- errorType: 'message'
- }
- }
- },
-
- computed: {
- propsLine() {
- return uni.$u.props.line
- }
- },
- mounted() {
- this.init()
- },
- methods: {
- init() {
-
- this.updateParentData()
- if (!this.parent) {
- uni.$u.error('u-form-item需要结合u-form组件使用')
- }
- },
-
- updateParentData() {
-
- this.getParentData('u-form');
- },
-
- clearValidate() {
- this.message = null
- },
-
- resetField() {
-
- const value = uni.$u.getProperty(this.parent.originalModel, this.prop)
-
- uni.$u.setProperty(this.parent.model, this.prop, value)
-
- this.message = null
- },
-
- clickHandler() {
- this.$emit('click')
- }
- },
- }
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- .u-form-item {
- @include flex(column);
- font-size: 14px;
- color: $u-main-color;
- &__body {
- @include flex;
- padding: 10px 0;
- &__left {
- @include flex;
- align-items: center;
- &__content {
- position: relative;
- @include flex;
- align-items: center;
- padding-right: 10rpx;
- flex: 1;
- &__icon {
- margin-right: 8rpx;
- }
- &__required {
- position: absolute;
- left: -9px;
- color: $u-error;
- line-height: 20px;
- font-size: 20px;
- top: 3px;
- }
- &__label {
- @include flex;
- align-items: center;
- flex: 1;
- color: $u-main-color;
- font-size: 15px;
- }
- }
- }
- &__right {
- flex: 1;
- &__content {
- @include flex;
- align-items: center;
- flex: 1;
- &__slot {
- flex: 1;
- /* #ifndef MP */
- @include flex;
- align-items: center;
- /* #endif */
- }
- &__icon {
- margin-left: 10rpx;
- color: $u-light-color;
- font-size: 30rpx;
- }
- }
- &__message {
- font-size: 12px;
- line-height: 12px;
- color: $u-error;
- }
- }
- }
- }
- </style>
|