evan-form.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <template>
  2. <view class="evan-form-container">
  3. <slot></slot>
  4. </view>
  5. </template>
  6. <script>
  7. import utils from './utils.js'
  8. export default {
  9. name: 'EvanForm',
  10. props: {
  11. labelStyle: {
  12. type: Object,
  13. default: () => {
  14. return {}
  15. }
  16. },
  17. model: Object,
  18. hideRequiredAsterisk: {
  19. type: Boolean,
  20. default: false
  21. },
  22. showMessage: {
  23. type: Boolean,
  24. default: true
  25. },
  26. labelPosition: {
  27. validator: function(value) {
  28. return ['top', 'left'].indexOf(value) !== -1
  29. },
  30. default: 'left'
  31. },
  32. rules: {
  33. type: Object,
  34. default: () => {
  35. return {}
  36. }
  37. }
  38. },
  39. computed: {
  40. // 整个form是否有*号,为了保证label对齐,而不是和*号对齐
  41. hasRequiredAsterisk() {
  42. if (this.hideRequiredAsterisk) {
  43. return false
  44. }
  45. if (this.mRules) {
  46. const values = Object.values(this.mRules)
  47. if (values && values.length > 0) {
  48. for (let i = 0; i < values.length; i++) {
  49. const value = values[i]
  50. if (Array.isArray(value) && value.length > 0) {
  51. const requiredItem = value.find((v) => v.required === true)
  52. if (requiredItem) {
  53. return true
  54. }
  55. } else {
  56. if (value && value.required) {
  57. return true
  58. }
  59. }
  60. }
  61. }
  62. }
  63. return false
  64. }
  65. },
  66. watch: {
  67. rules: {
  68. immediate: true,
  69. deep: true,
  70. handler(value) {
  71. this.mRules = value || {}
  72. }
  73. }
  74. },
  75. data() {
  76. return {
  77. mRules: {}
  78. }
  79. },
  80. methods: {
  81. setRules(rules) {
  82. this.mRules = rules || {}
  83. },
  84. validate(callback) {
  85. utils.validate(this.model, this.mRules, callback, {
  86. showMessage: this.showMessage
  87. })
  88. },
  89. validateField(props, callback) {
  90. utils.validateField(this.model, this.mRules, props, callback, {
  91. showMessage: this.showMessage
  92. })
  93. }
  94. }
  95. }
  96. </script>
  97. <style lang="scss">
  98. .evan-form-container {}
  99. </style>