u-form.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <template>
  2. <view class="u-form"><slot /></view>
  3. </template>
  4. <script>
  5. /**
  6. * form 表单
  7. * @description 此组件一般用于表单场景,可以配置Input输入框,Select弹出框,进行表单验证等。
  8. * @tutorial http://uviewui.com/components/form.html
  9. * @property {Object} model 表单数据对象
  10. * @property {Boolean} border-bottom 是否显示表单域的下划线边框
  11. * @property {String} label-position 表单域提示文字的位置,left-左侧,top-上方
  12. * @property {String Number} label-width 提示文字的宽度,单位rpx(默认90)
  13. * @property {Object} label-style lable的样式,对象形式
  14. * @property {String} label-align lable的对齐方式
  15. * @property {Object} rules 通过ref设置,见官网说明
  16. * @property {Array} error-type 错误的提示方式,数组形式,见上方说明(默认['message'])
  17. * @example <u-form :model="form" ref="uForm"></u-form>
  18. */
  19. export default {
  20. name: 'u-form',
  21. props: {
  22. // 当前form的需要验证字段的集合
  23. model: {
  24. type: Object,
  25. default() {
  26. return {};
  27. }
  28. },
  29. // 验证规则
  30. // rules: {
  31. // type: [Object, Function, Array],
  32. // default() {
  33. // return {};
  34. // }
  35. // },
  36. // 有错误时的提示方式,message-提示信息,border-如果input设置了边框,变成呈红色,
  37. // border-bottom-下边框呈现红色,none-无提示
  38. errorType: {
  39. type: Array,
  40. default() {
  41. return ['message', 'toast']
  42. }
  43. },
  44. // 是否显示表单域的下划线边框
  45. borderBottom: {
  46. type: Boolean,
  47. default: true
  48. },
  49. // label的位置,left-左边,top-上边
  50. labelPosition: {
  51. type: String,
  52. default: 'left'
  53. },
  54. // label的宽度,单位rpx
  55. labelWidth: {
  56. type: [String, Number],
  57. default: 90
  58. },
  59. // lable字体的对齐方式
  60. labelAlign: {
  61. type: String,
  62. default: 'left'
  63. },
  64. // lable的样式,对象形式
  65. labelStyle: {
  66. type: Object,
  67. default() {
  68. return {}
  69. }
  70. },
  71. },
  72. provide() {
  73. return {
  74. uForm: this
  75. };
  76. },
  77. data() {
  78. return {
  79. rules: {}
  80. };
  81. },
  82. created() {
  83. // 存储当前form下的所有u-form-item的实例
  84. // 不能定义在data中,否则微信小程序会造成循环引用而报错
  85. this.fields = [];
  86. },
  87. methods: {
  88. setRules(rules) {
  89. this.rules = rules;
  90. },
  91. // 清空所有u-form-item组件的内容,本质上是调用了u-form-item组件中的resetField()方法
  92. resetFields() {
  93. this.fields.map(field => {
  94. field.resetField();
  95. });
  96. },
  97. // 校验全部数据
  98. validate(callback) {
  99. return new Promise(resolve => {
  100. // 对所有的u-form-item进行校验
  101. let valid = true; // 默认通过
  102. let count = 0; // 用于标记是否检查完毕
  103. let errorArr = []; // 存放错误信息
  104. this.fields.map(field => {
  105. // 调用每一个u-form-item实例的validation的校验方法
  106. field.validation('', error => {
  107. // 如果任意一个u-form-item校验不通过,就意味着整个表单不通过
  108. if (error) {
  109. valid = false;
  110. errorArr.push(error);
  111. }
  112. // 当历遍了所有的u-form-item时,调用promise的then方法
  113. if (++count === this.fields.length) {
  114. resolve(valid); // 进入promise的then方法
  115. // 判断是否设置了toast的提示方式,只提示最前面的表单域的第一个错误信息
  116. if(this.errorType.indexOf('none') === -1 && this.errorType.indexOf('toast') >= 0 && errorArr.length) {
  117. this.$u.toast(errorArr[0]);
  118. }
  119. // 调用回调方法
  120. if (typeof callback == 'function') callback(valid);
  121. }
  122. });
  123. });
  124. });
  125. }
  126. }
  127. };
  128. </script>
  129. <style scoped lang="scss">
  130. @import "../../libs/css/style.components.scss";
  131. </style>