vue3+elementUI 动态修改Loading中提示文字

在Vue 3和Element UI中，可以通过修改组件的loading.text属性来动态修改Loading的提示文字。以下是一个简单的示例：

首先，确保你已经在项目中安装并使用了Element UI。

然后，在你的Vue组件中，你可以这样使用Loading指令：

<template>
  <el-button
    :loading="loading"
    type="primary"
    @click="loadData"
  >
    {{ loading ? loadingText : '点击加载' }}
  </el-button>
</template>
 
<script setup>
import { ref } from 'vue';
 
const loading = ref(false);
const loadingText = ref('数据正在加载中...');
 
const loadData = async () => {
  loading.value = true;
  // 模拟异步加载数据
  await new Promise(resolve => setTimeout(resolve, 3000));
  // 数据加载完毕，关闭loading，并可以修改loading文字
  loading.value = false;
  loadingText.value = '数据加载完成';
};
</script>

在这个例子中，我们使用了一个el-button作为触发加载的按钮，并通过一个响应式变量loading来控制Loading效果的显示与隐藏。当用户点击按钮时，调用loadData函数，该函数将loading设置为true，并开始异步操作（例如数据加载）。异步操作完成后，将loading设置为false，并更新loadingText来改变Loading的提示文字。