Vue3+ts+NaiveUI自定义组件

最近接触个项目,有一部分区域有很高的相似度,所以想封装成共通。具体代码如下。

前提:有一个主页面,里面有多个相同区域(例如:

区域1=下拉列表+入力框+...+按钮。

区域2=下拉列表+入力框+...+按钮。

区域3=下拉列表+入力框+...+按钮。

需求,因为有大量相同代码,需要将【下拉列表+入力框+...+按钮。】封装成一个vue文件。

1. 定义共通组件内容

<template>
    <!-- 循环绑定的模型数据 -->
    <template v-for="(item, index) in model.plan" >
        <div class="">固定文言</div>
        <div class="">单位:{{model.unit}}</div>
        <div class=" style="">
            频度: {{model.frequency}}
        </div>
        <n-grid :cols="3">
            <n-gi :span="1" class="">
                <n-form-item
                    :key="index + '下拉列表'"
                    :label="'下拉列表'"
                    :path="`${model.checkPath}[${index}].methodSummary`"
                    :rule="{
                        required: true,
                        trigger: ['input', 'change']
                    }"
                >
                    <n-select
                        v-model:value="item.methodSummary"
                        class=""
                        clearable
                        placeholder=""
                        :options="model.summaryOptions"
                    />
                </n-form-item>
            </n-gi>
            <n-gi :span="1" class="">
                ...略
            </n-gi>
        </n-grid>
    </template>
</template>
<script lang="ts">
    export default {
        name: 'CommonInput'
    }
</script>

<script lang="ts" setup>
    // 接收主画面参数
    const props = defineProps([
        'title', // 标题
        'unit', // 单位
        'frequency', // 频度
        'summaryOptions',//下拉列表数据
        'monitoringPlan',//循环数据列表
        'checkPath'//必须入力check的固定文字
    ])

    // 定义数据模型
    const model = reactive({
        title: '',
        unit: '',
        frequency: '',
        summaryOptions: [],
        monitoringPlan: [
            {
                methodSummary: '',
                methodDetail: '',
                comment: ''
            }
        ],
        checkPath: ''
    })

    // 将接收的参数给模型赋值
    const handleInit = () => {
        model.title = props.title
        model.unit = props.unit
        model.frequency = props.frequency
        model.summaryOptions = props.summaryOptions
        model.monitoringPlan = props.monitoringPlan
        model.checkPath = props.checkPath
    }

    // 调用初期化方法
    handleInit()
</script>

2. 主页面嵌入自定义的共通组件

<template>
//第一次引用
<CommonInput
    :title="`标题1`"
    :unit="`/m3`"
    :frequency="`小标题1`"
    :summaryOptions="select1"
    :plan="planModel.plan1"
    :checkPath="`plan1`"
></CommonInput>

//第二次引用
<CommonInput
    :title="`标题2`"
    :unit="`/m2`"
    :frequency="`小标题2`"
    :summaryOptions="select2"
    :plan="planModel.plan2"
    :checkPath="`plan2`"
></CommonInput>

</template>
<script lang="ts" setup>
// 引入自定义组件
import CommonInput from '@/views/common/index.vue'

    // 定义模型数据
    const planModel = reactive({
        plan1: [
            {
                methodSummary: '',
                methodDetail: '',
                comment: ''
            }
        ],
        plan2: [
            {
                methodSummary: '',
                methodDetail: '',
                comment: ''
            }
        ]
    })
    // 定义下拉列表固定值
    const select1: any = reactive([
        { value: '001', label: '' },
        { value: '002', label: '值1' }
    ])
    const select2: any = reactive([
        { value: '101', label: '' },
        { value: '102', label: '内容1' },
        { value: '103', label: '内容2' }
    ])

    // 下记略
</script>

注意事项:无须指定返回值,主画面planModel可以自动取到,小画面更改的数据。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值