fs-form.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <view><slot></slot></view>
  3. </template>
  4. <script>
  5. /**
  6. * 表单组件
  7. * @description 表单组件
  8. * @property {String} labelWidth label宽度
  9. * @property {String} labelPosition = [left | top] label位置
  10. * @property {String} labelAlign = [left | center | right | justify] label对齐方式
  11. * @property {String} errorType = [toast | message] 错误提示类型
  12. * @property {Object} model 数据对象,表单校验时用
  13. */
  14. export default {
  15. name: 'fs-form'
  16. }
  17. </script>
  18. <script setup>
  19. import { provide } from 'vue'
  20. const props = defineProps({
  21. labelWidth: {
  22. type: String,
  23. default: '120rpx'
  24. },
  25. labelPosition: {
  26. type: String,
  27. default: 'left',
  28. validator(value) {
  29. return ['left', 'top'].includes(value)
  30. }
  31. },
  32. labelAlign: {
  33. type: String,
  34. default: 'left',
  35. validator(value) {
  36. return ['left', 'center', 'right', 'justify'].includes(value)
  37. }
  38. },
  39. errorType: {
  40. type: String,
  41. default: 'toast',
  42. validator(value) {
  43. return ['toast', 'message'].includes(value)
  44. }
  45. },
  46. model: Object
  47. })
  48. provide('form', props)
  49. defineExpose({
  50. model: props.model,
  51. errorType: props.errorType
  52. })
  53. </script>
  54. <style lang="scss"></style>