E-DataV

Appearance

On this page

Loading加载 ​

基本示例 ​

组件默认在父元素内居中显示

点击查看代码
js
<template>
    <div>
        <e-loading>
            加载中...
        </e-loading>
    </div>
</template>
js
<template>
    <div>
        <e-loading>
            加载中...
        </e-loading>
    </div>
</template>
<script setup>
import { ELoading } from 'e-datav-vue3';
</script>
js
import { Loading } from 'e-datav-react';

function Page() {
  return (
    <Loading>
        加载中...
    </Loading>
  )
}

export default Page

自定义属性 ​

若需要在屏幕居中显示，请在样式中添绝对定位position:absolute，如下例子所示

点击查看代码
js
<template>
    <div>
        <e-loading border-color="#f53f3f" :size="80" style="position:absolute;font-size:12px;color:#ff9797;">
            加载中...
        </e-loading>
    </div>
</template>
js
<template>
    <div>
        <e-loading border-color="#f53f3f" :size="80" style="position:absolute;font-size:12px;color:#ff9797;">
            加载中
        </e-loading>
    </div>
</template>
<script setup>
import { ELoading } from 'e-datav-vue3';
</script>
js
import { Loading } from 'e-datav-react';

function Page() {
  return (
    <Loading borderColor='#f53f3f' size={80} style={{ position: 'absolute', fontSize: 12, color: '#ff9797' }}>
        加载中...
    </Loading>
  )
}

export default Page

属性 ​

字段类型
备注
borderColorstring边框颜色，默认#1e80ff
sizenumber尺寸，即宽高，默认120