u-form-item.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <template>
  2. <view class="u-form-item">
  3. <view
  4. class="u-form-item__body"
  5. @tap="clickHandler"
  6. :style="[$u.addStyle(customStyle), {
  7. flexDirection: (labelPosition || parentData.labelPosition) === 'left' ? 'row' : 'column'
  8. }]"
  9. >
  10. <!-- 微信小程序中,将一个参数设置空字符串,结果会变成字符串"true" -->
  11. <slot name="label">
  12. <!-- {{required}} -->
  13. <view
  14. class="u-form-item__body__left"
  15. v-if="required || leftIcon || label"
  16. :style="{
  17. width: $u.addUnit(labelWidth || parentData.labelWidth),
  18. marginBottom: parentData.labelPosition === 'left' ? 0 : '5px',
  19. }"
  20. >
  21. <!-- 为了块对齐 -->
  22. <view class="u-form-item__body__left__content">
  23. <!-- nvue不支持伪元素before -->
  24. <text
  25. v-if="required"
  26. class="u-form-item__body__left__content__required"
  27. >*</text>
  28. <view
  29. class="u-form-item__body__left__content__icon"
  30. v-if="leftIcon"
  31. >
  32. <u-icon
  33. :name="leftIcon"
  34. :custom-style="leftIconStyle"
  35. ></u-icon>
  36. </view>
  37. <text
  38. class="u-form-item__body__left__content__label"
  39. :style="[parentData.labelStyle, {
  40. justifyContent: parentData.labelAlign === 'left' ? 'flex-start' : parentData.labelAlign === 'center' ? 'center' : 'flex-end'
  41. }]"
  42. >{{ label }}</text>
  43. </view>
  44. </view>
  45. </slot>
  46. <view class="u-form-item__body__right">
  47. <view class="u-form-item__body__right__content">
  48. <view class="u-form-item__body__right__content__slot">
  49. <slot />
  50. </view>
  51. <view
  52. class="item__body__right__content__icon"
  53. v-if="$slots.right"
  54. >
  55. <slot name="right" />
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. <slot name="error">
  61. <text
  62. v-if="!!message && parentData.errorType === 'message'"
  63. class="u-form-item__body__right__message"
  64. :style="{
  65. marginLeft: $u.addUnit(parentData.labelPosition === 'top' ? 0 : (labelWidth || parentData.labelWidth))
  66. }"
  67. >{{ message }}</text>
  68. </slot>
  69. <u-line
  70. v-if="borderBottom"
  71. :color="message && parentData.errorType === 'border-bottom' ? $u.color.error : propsLine.color"
  72. :customStyle="`margin-top: ${message && parentData.errorType === 'message' ? '5px' : 0}`"
  73. ></u-line>
  74. </view>
  75. </template>
  76. <script>
  77. import props from './props.js';
  78. /**
  79. * Form 表单
  80. * @description 此组件一般用于表单场景,可以配置Input输入框,Select弹出框,进行表单验证等。
  81. * @tutorial https://www.uviewui.com/components/form.html
  82. * @property {String} label input的label提示语
  83. * @property {String} prop 绑定的值
  84. * @property {String | Boolean} borderBottom 是否显示表单域的下划线边框
  85. * @property {String | Number} labelWidth label的宽度,单位px
  86. * @property {String} rightIcon 右侧图标
  87. * @property {String} leftIcon 左侧图标
  88. * @property {String | Object} leftIconStyle 左侧图标的样式
  89. * @property {Boolean} required 是否显示左边的必填星号,只作显示用,具体校验必填的逻辑,请在rules中配置 (默认 false )
  90. *
  91. * @example <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1"></u-form-item>
  92. */
  93. export default {
  94. name: 'u-form-item',
  95. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  96. data() {
  97. return {
  98. // 错误提示语
  99. message: '',
  100. parentData: {
  101. // 提示文本的位置
  102. labelPosition: 'left',
  103. // 提示文本对齐方式
  104. labelAlign: 'left',
  105. // 提示文本的样式
  106. labelStyle: {},
  107. // 提示文本的宽度
  108. labelWidth: 45,
  109. // 错误提示方式
  110. errorType: 'message'
  111. }
  112. }
  113. },
  114. // 组件创建完成时,将当前实例保存到u-form中
  115. computed: {
  116. propsLine() {
  117. return uni.$u.props.line
  118. }
  119. },
  120. mounted() {
  121. this.init()
  122. },
  123. methods: {
  124. init() {
  125. // 父组件的实例
  126. this.updateParentData()
  127. if (!this.parent) {
  128. uni.$u.error('u-form-item需要结合u-form组件使用')
  129. }
  130. },
  131. // 获取父组件的参数
  132. updateParentData() {
  133. // 此方法写在mixin中
  134. this.getParentData('u-form');
  135. },
  136. // 移除u-form-item的校验结果
  137. clearValidate() {
  138. this.message = null
  139. },
  140. // 清空当前的组件的校验结果,并重置为初始值
  141. resetField() {
  142. // 找到原始值
  143. const value = uni.$u.getProperty(this.parent.originalModel, this.prop)
  144. // 将u-form的model的prop属性链还原原始值
  145. uni.$u.setProperty(this.parent.model, this.prop, value)
  146. // 移除校验结果
  147. this.message = null
  148. },
  149. // 点击组件
  150. clickHandler() {
  151. this.$emit('click')
  152. }
  153. },
  154. }
  155. </script>
  156. <style lang="scss" scoped>
  157. @import "../../libs/css/components.scss";
  158. .u-form-item {
  159. @include flex(column);
  160. font-size: 14px;
  161. color: $u-main-color;
  162. &__body {
  163. @include flex;
  164. padding: 10px 0;
  165. &__left {
  166. @include flex;
  167. align-items: center;
  168. &__content {
  169. position: relative;
  170. @include flex;
  171. align-items: center;
  172. padding-right: 10rpx;
  173. flex: 1;
  174. &__icon {
  175. margin-right: 8rpx;
  176. }
  177. &__required {
  178. position: absolute;
  179. left: -9px;
  180. color: $u-error;
  181. line-height: 20px;
  182. font-size: 20px;
  183. top: 3px;
  184. }
  185. &__label {
  186. @include flex;
  187. align-items: center;
  188. flex: 1;
  189. color: $u-main-color;
  190. font-size: 15px;
  191. }
  192. }
  193. }
  194. &__right {
  195. flex: 1;
  196. &__content {
  197. @include flex;
  198. align-items: center;
  199. flex: 1;
  200. &__slot {
  201. flex: 1;
  202. /* #ifndef MP */
  203. @include flex;
  204. align-items: center;
  205. /* #endif */
  206. }
  207. &__icon {
  208. margin-left: 10rpx;
  209. color: $u-light-color;
  210. font-size: 30rpx;
  211. }
  212. }
  213. &__message {
  214. font-size: 12px;
  215. line-height: 12px;
  216. color: $u-error;
  217. }
  218. }
  219. }
  220. }
  221. </style>