vue3 setup语法 Arco Design 组件二次封装

在 Vue 3 中,<script setup> 提供了一种简洁的方式来定义组件。结合 Element Plus 库,我们可以轻松地二次封装组件,提升代码的复用性和可维护性。本文将演示如何使用 <script setup> 语法封装一个自定义的 Element Plus Input 组件。1. 前提条件
确保你的项目已经安装了 Vue 3 和 Element Plus。
已有基本的 Vue 3 和 Element Plus 的使用经验。
2. 创建自定义的 Input 组件
我们将基于 Arco Design 的 select 组件进行二次封装。下面是完整的代码示例:

<template>
  <a-select
    v-model="valueComp"
    v-bind="$attrs"
    :loading="loading"
    allow-search
    value-key="id"
    :filter-option="false"
    placeholder="请选择"
    @change="handleChange"
    @search="handleSearch"
    @input-value-change="handleInputChange"
    @popup-visible-change="handleVisibleChange"
  >
    <a-option v-for="item in options" :key="item.code" :value="item.id">
      <a-tooltip :content="`${item.code} / ${item.name}`">
        <span>{{ `${item.name}` }}</span>
      </a-tooltip>
    </a-option>
  </a-select>
</template>

<script setup lang="ts">
  import { apiGetPage } from '@/api/capacityManagement/driver';
  import useLoading from '@/hooks/loading';
  import { PropType, ref, watchEffect, watch } from 'vue';

  const props = defineProps({
    value: {
      type: [String, Array] as PropType<any>,
    },
    id: {
      type: String,
      default: '',
    },
    carrierId: {
      type: String,
    },
    carrierAttribute: {
      type: [String] as PropType<any>,
    },
    queryParam: {
      type: Object as PropType<any>,
      default() {
        return {};
      },
    },
    autoSearch: {
      type: Boolean,
      default: true,
    },
  });
  const emits = defineEmits([
    'update:value',
    'update:mobile',
    'update:name',
    'update:coldFlag',
    'update:id',
    'onChange',
  ]);
  const { loading, setLoading } = useLoading();
  const valueComp = ref('');
  watchEffect(() => {
    // 数据库默认为0,接口返回'0'
    valueComp.value = ['0', 0].includes(props.value) ? undefined : props.value;
  });
  interface vehicleType {
    id: string;
    code: string;
    name: string;
    mobile: string;
    status: number;
    coldFlag: number;
  }
  const options = ref<vehicleType[]>([]);
  async function fetchOptions(keywords: string) {
    const { carrierId } = props;
    setLoading(true);
    try {
      const req = {
        current: 1,
        size: 99,
        keywords,
        carrierId,
        ...props.queryParam,
      };
      const { data } = await apiGetPage(req);
      options.value = data.records;
    } catch (error) {
      /* empty */
    } finally {
      setLoading(false);
    }
  }
  if (props.autoSearch) {
    fetchOptions(props.value);
  }
  function handleSearch(value: string) {
    fetchOptions(value);
  }
  function handleChange(value: any) {
    const target = options.value?.find((i: { id: string }) => i.id === value);
    emits('update:value', target?.name || value);
    emits('update:mobile', target?.mobile);
    emits('update:id', target?.id);
    emits('update:coldFlag', target?.coldFlag);
    emits('onChange', target);
  }
  function handleInputChange(value: any) {
    if (value) {
      handleChange(value);
    }
  }
  function handleVisibleChange(visible: boolean) {
    if (visible) {
      fetchOptions('');
    }
  }
  watch(
    // 根据其他条件联动查询
    () => props.carrierId,
    () => {
      fetchOptions('');
    }
  );
</script>

3. 在父组件中使用自定义的组件

我们可以在父组件中使用这个自定义的组件:

<template>
<autoDriverList
 v-model:value="editItem.driverName"
 v-model:id="editItem.driverId"
 v-model:mobile="editItem.driverMobile"
 :carrier-attribute="CARRIER_ATTRIBUTE.THIRD_PARTY"
 :carrier-id="editItem.carrierId"
 allow-clear
 />
</template>
 
<script setup>
import { ref } from 'vue';
import autoDriverListfrom './autoDriverList.vue';
 
const editItem= ref({driverName:'',driverId:'',driverMobile:'',carrierId:''});
</script>

4. 总结
使用 Vue 3 的 <script setup> 语法,我们可以更简洁地封装组件,提高代码的复用性和可维护性。通过这个自定义的 Element Plus Input 组件的示例,你可以学习到如何高效地封装和管理组件逻辑。希望这篇文章对你理解和使用 Vue 3 的 <script setup> 语法封装组件有所帮助!如果有任何问题,欢迎随时提问。
以下是关于vue3二次封装elment-ui组件的文章,也可以使用类似方法进行封装 https://blog.csdn.net/weixin_65644264/article/details/139801203

  • 9
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我会尽力回答你关于 arco design vue 二次封装 a-upload 的问题。a-upload 是 arco design vue 中的一个上传组件,可以用于上传文件和图片。在二次封装 a-upload 时,你可以根据自己的需求对其进行定制。 一般来说,二次封装 a-upload 的步骤如下: 1. 引入 a-upload 组件 在你的组件中,首先需要引入 a-upload 组件。可以使用以下代码: ```javascript import { AUpload } from 'arco-design-vue' ``` 2. 编写自定义上传组件 然后,你需要编写自定义上传组件,并在其中使用 a-upload 组件。在上传前可以添加自己的逻辑,例如判断文件类型、大小等,并通过 a-upload 的 before-upload 属性实现。代码如下: ```html <template> <div> <a-upload :before-upload="beforeUpload" :on-success="onSuccess" :on-error="onError" :on-progress="onProgress" > <a-button type="primary">上传文件</a-button> </a-upload> </div> </template> <script> import { AUpload, AButton } from 'arco-design-vue' export default { name: 'CustomUpload', components: { AUpload, AButton }, methods: { beforeUpload(file) { // 自定义逻辑,例如判断文件类型、大小等 console.log('beforeUpload', file) return true }, onSuccess(response, file) { console.log('onSuccess', response, file) }, onError(error, response, file) { console.log('onError', error, response, file) }, onProgress(event, file, fileList) { console.log('onProgress', event, file, fileList) } } } </script> ``` 3. 使用自定义上传组件 最后,在需要使用上传组件的地方,你可以直接使用自定义上传组件。例如: ```html <template> <div> <custom-upload></custom-upload> </div> </template> <script> import CustomUpload from './CustomUpload.vue' export default { name: 'App', components: { CustomUpload } } </script> ``` 这样,你就完成了 arco design vue 二次封装 a-upload 组件的过程。希望我的回答能够对你有所帮助。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值