Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
 
 
 

150 řádky
4.1 KiB

  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. let that = this;
  88. // 监听on-form-item-add事件,将子组件添加到fields中
  89. this.$on('on-form-item-add', item => {
  90. if (item) {
  91. that.fields.push(item);
  92. }
  93. });
  94. // 删除当前有的实例
  95. this.$on('on-form-item-remove', item => {
  96. // 如果当前没有prop的话表示当前不要进行删除(因为没有注入)
  97. if (item.prop) {
  98. that.fields.splice(that.fields.indexOf(item), 1);
  99. }
  100. });
  101. },
  102. methods: {
  103. setRules(rules) {
  104. this.rules = rules;
  105. },
  106. // 清空所有u-form-item组件的内容,本质上是调用了u-form-item组件中的resetField()方法
  107. resetFields() {
  108. this.fields.map(field => {
  109. field.resetField();
  110. });
  111. },
  112. // 校验全部数据
  113. validate(callback) {
  114. return new Promise(resolve => {
  115. // 对所有的u-form-item进行校验
  116. let valid = true; // 默认通过
  117. let count = 0; // 用于标记是否检查完毕
  118. let errorArr = []; // 存放错误信息
  119. this.fields.map(field => {
  120. // 调用每一个u-form-item实例的validation的校验方法
  121. field.validation('', error => {
  122. // 如果任意一个u-form-item校验不通过,就意味着整个表单不通过
  123. if (error) {
  124. valid = false;
  125. errorArr.push(error);
  126. }
  127. // 当历遍了所有的u-form-item时,调用promise的then方法
  128. if (++count === this.fields.length) {
  129. resolve(valid); // 进入promise的then方法
  130. // 判断是否设置了toast的提示方式,只提示最前面的表单域的第一个错误信息
  131. if(this.errorType.indexOf('none') === -1 && this.errorType.indexOf('toast') >= 0 && errorArr.length) {
  132. this.$u.toast(errorArr[0]);
  133. }
  134. // 调用回调方法
  135. if (typeof callback == 'function') callback(valid);
  136. }
  137. });
  138. });
  139. });
  140. }
  141. }
  142. };
  143. </script>
  144. <style scoped lang="scss">
  145. @import "../../libs/css/style.components.scss";
  146. </style>