element-ui plus中如何单独出发el-upload提交

Posted 2023-03-31 盘思动

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了element-ui plus中如何单独出发el-upload提交相关的知识，希望对你有一定的参考价值。

因为单独提交才好触发el-upload中的on-success函数
在 Vue 3 中，可以通过 ref 引用指向 upload 组件，然后使用该引用调用 upload 的 submit 方法来触发上传操作。具体实现如下：

<template>
  <el-upload ref="uploadRef" action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
    <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
import  ref  from \'vue\';

export default 
  setup() 
    const uploadRef = ref(null);

    const handleSubmit = () => 
      // 在这里编写提交动作的代码
      uploadRef.value.submit();
    ;

    return 
      uploadRef,
      handleSubmit,
    ;
  ,
;
</script>

在上述例子中，我们通过 ref 创建了一个名为 uploadRef 的引用，指向了组件。
然后，在 handleSubmit 方法中，我们通过调用 uploadRef.value.submit() 来触发上传操作。

注意:由于 Vue 3 中的组件实例是在 setup 阶段创建的，因此无法在模板中直接使用 $refs 来访问组件实例。而是需要通过 ref 引用来进行访问和操作。

最简便方法element-plus/element-ui走马灯配置图片以及图片自适应

首先展示官网给的模板

<template>
  <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="item in 6" :key="item">
      <h3 text="2xl" justify="center"> item </h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style scoped>
.el-carousel__item h3 
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;


.el-carousel__item:nth-child(2n) 
  background-color: #99a9bf;


.el-carousel__item:nth-child(2n + 1) 
  background-color: #d3dce6;

</style>