el-skeleton和el-empty的渐入学习

最新推荐文章于 2024-06-13 11:32:51 发布

自律最差的编程狗

最新推荐文章于 2024-06-13 11:32:51 发布

阅读量2.1k

点赞数 1

分类专栏： element-ui 文章标签：学习 elementui

本文链接：https://blog.csdn.net/qq_40765784/article/details/125333994

版权

element-ui 专栏收录该内容

43 篇文章 21 订阅

订阅专栏

el-skeleton和el-empty的渐入学习

知识点

el-skeleton中设置rows属性,改变行数，第一行为33%
el-skeleton中设置animated属性，设置加载的动画效果
el-skeletion的自定义使用参考element-ui官网
el-empty中设置image属性，改变默认的空图样式
el-empty中设置description属性，改变默认空文字样式
el-empty中设置image-size属性，改变默认图片大小

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id='app'>
        <el-skeleton :rows='8' animated></el-skeleton>
        <el-empty image-size='200' image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" description='描述文字编辑'>
            <el-button type='primary'>按钮</el-button>
        </el-empty>
    </div>
</body>
</html>

<script>
    new Vue({
        el:"#app",
        data(){
            return{

            }
        },
        methods:{

        }
    })
</script>