【报Bug】uniapp 微信小程序 动态插槽 问题?

7***@tmp.dcloud.io (作者)

<template>  

 <up-form  

      ref="formRef"  

      :model="form"  

      :rules="rules"  

      borderBottom  

      labelPosition="left"  

      labelWidth="156rpx"  

    >  

      <template v-for="(item, index) in items" :key="index">  

        <up-form-item  

          :label="item.label"  

          :prop="item.prop"  

          :required="item.required"  

        >  

          <!-- 判断有没有对应的插槽内容 -->  

          <template v-if="$slots[item.prop]">  

            <slot :item="item" :model="form" :name="item.prop" />  

          </template>  



          <!-- 没有插槽时渲染默认表单控件 -->  

          <template v-else>  

            <up-input  

              v-if="item.type === 'input'"  

              v-model="form[item.prop]"  

              :placeholder="item.placeholder"  

              :shape="item.shape || 'circle'"  

              :type="item.inputType || 'text'"  

            />  



            <up-number-box  

              v-else-if="item.type === 'number'"  

              v-model="form[item.prop]"  

              :max="item.max || 999"  

              :min="item.min || 0"  

              :step="item.step || 1"  

            >  

              <template #minus>  

                <view class="icon-style">  

                  <uni-icons size="20" type="back" />  

                </view>  

              </template>  

              <template #plus>  

                <view class="icon-style">  

                  <uni-icons size="20" type="forward" />  

                </view>  

              </template>  

            </up-number-box>  

        </up-form-item>  

      </template>  

    </up-form>  

</template>  

<script setup>  

  import { ref } from 'vue';  



  const props = defineProps({  

    form: { type: Object, required: true },  

    items: { type: Array, required: true },  

    rules: { type: Object, default: () => ({}) },  

    title: { type: String, default: '角色' },  

    mode: { type: String, default: 'add' },  

    onSubmit: { type: Function },  

    onCancel: { type: Function },  

  });  

  const formRef = ref();  



  defineExpose({  

    validate: () => formRef.value?.validate(),  

  });  

</script>

现在只能通过具名插槽的方式实现

<template>  

    <CustomForm  

      ref="formRef"  

      :form="form"  

      :items="FORMITEMS"  

      :mode="mode"  

      :on-cancel="goBack"  

      :on-submit="submitForm"  

      :rules="rules"  

      title="展示功能"  

    >  

      <template #pageId>  

        <uni-combox  

          v-model="form.pageId"  

          :candidates="pages"  

          placeholder="请输入或选择页面"  

        >  

        </uni-combox>  

      </template>  

    </CustomForm>  

</template>  

<script setup>  



//模式  

const mode = ref("add");  



//用户  

const user = ref([]);  

//回显数据  

const _user = ref([]);  



const pages = ref([]);  

const _pages = ref([]);  

//应用表单  

const form = reactive({  

  checkShow: "1",  

  pageId: "",  

  show: "1",  

  userId: "",  

});  



//表单  

const formRef = ref(null);  



const rules = {  

  pageId: [{ required: true, message: "请输入应用名称" }],  

};  



const FORMITEMS = computed(() => [  

  {  

    label: "页面",  

    prop: "pageId",  

    required: true,  

    type: "input",  

    placeholder: "请输入或选择页面",  

    shape: "circle",  

  },  

]);  

</script>

比如我使用这个组件，但是我想实现其他的功能，或者ui，使用动态插槽<template #imei="{ item, model }">

{{ item }}

</template> 的情况下 好像支持不是很好

2025-08-08 09:46