ソースを参照

fix(formitem): add index.taro.vue

eiinu 3 年 前
コミット
cdfd9c3ed1

+ 108 - 0
src/packages/__VUE/formitem/index.taro.vue

@@ -0,0 +1,108 @@
+<template>
+  <nut-cell
+    class="nut-form-item"
+    :class="[{ error: parent[prop], line: showErrorLine }, $attrs.class]"
+    :style="$attrs.style"
+  >
+    <view
+      class="nut-cell__title nut-form-item__label"
+      :style="labelStyle"
+      v-if="label || getSlots('label')"
+      :class="{ required: required }"
+    >
+      <slot name="label">{{ label }}</slot>
+    </view>
+    <view class="nut-cell__value nut-form-item__body">
+      <view class="nut-form-item__body__slots" :style="bodyStyle">
+        <slot></slot>
+      </view>
+      <view class="nut-form-item__body__tips" :style="errorMessageStyle" v-if="parent[prop] && showErrorMessage">
+        {{ parent[prop] }}</view
+      >
+    </view>
+  </nut-cell>
+</template>
+<script lang="ts">
+import { pxCheck } from '@/packages/utils/pxCheck';
+import { computed, inject, provide, PropType, ref, CSSProperties } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+import Cell from '../cell/index.taro.vue';
+const { componentName, create } = createComponent('form-item');
+export default create({
+  inheritAttrs: false,
+  props: {
+    prop: {
+      type: String,
+      default: ''
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    rules: {
+      type: Array as PropType<import('./types').FormItemRule[]>,
+      default: () => {
+        return [];
+      }
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    showErrorMessage: {
+      type: Boolean,
+      default: true
+    },
+    showErrorLine: {
+      type: Boolean,
+      default: true
+    },
+    labelWidth: {
+      type: [String, Number],
+      default: ''
+    },
+    labelAlign: {
+      type: String,
+      default: ''
+    },
+    errorMessageAlign: {
+      type: String,
+      default: ''
+    },
+    bodyAlign: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {
+    [Cell.name]: Cell
+  },
+  emits: [''],
+
+  setup(props, { emit, slots }) {
+    const parent = inject('formErrorTip') as any;
+    provide('form', {
+      props
+    });
+
+    const labelStyle = computed(() => {
+      return {
+        width: pxCheck(props.labelWidth),
+        textAlign: props.labelAlign
+      } as CSSProperties;
+    });
+    const bodyStyle = computed(() => {
+      return {
+        textAlign: props.bodyAlign
+      } as CSSProperties;
+    });
+    const errorMessageStyle = computed(() => {
+      return {
+        textAlign: props.errorMessageAlign
+      } as CSSProperties;
+    });
+    const getSlots = (name: string) => slots[name];
+    return { parent, labelStyle, bodyStyle, errorMessageStyle, getSlots };
+  }
+});
+</script>

+ 4 - 1
src/packages/__VUE/formitem/index.vue

@@ -26,6 +26,7 @@
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { computed, inject, provide, PropType, ref, CSSProperties } from 'vue';
 import { computed, inject, provide, PropType, ref, CSSProperties } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { createComponent } from '@/packages/utils/create';
+import Cell from '../cell/index.vue';
 const { componentName, create } = createComponent('form-item');
 const { componentName, create } = createComponent('form-item');
 export default create({
 export default create({
   inheritAttrs: false,
   inheritAttrs: false,
@@ -73,7 +74,9 @@ export default create({
       default: ''
       default: ''
     }
     }
   },
   },
-  components: {},
+  components: {
+    [Cell.name]: Cell
+  },
   emits: [''],
   emits: [''],
 
 
   setup(props, { emit, slots }) {
   setup(props, { emit, slots }) {