el-result入门学习

最新推荐文章于 2024-04-02 23:25:52 发布

自律最差的编程狗

最新推荐文章于 2024-04-02 23:25:52 发布

阅读量1.5k

点赞数

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

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

版权

element-ui 专栏收录该内容

43 篇文章 20 订阅

订阅专栏

el-result的入门学习

知识点

icon设置显示图标，自定义图片，需要使用slot='icon'
title设置标题
sub-title设置子标题
extra自定义设置额外部分

效果图

在这里插入图片描述

代码

<!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-result icon='success' title='成功提示' sub-title='请根据提示进行操作'>
            <template slot='extra'>
                <el-button type='primary' size='medium'>返回</el-button>
            </template>
        </el-result>
        <el-result icon='warning' title='警告提示' sub-title='请根据提示进行操作'>
            <template slot='extra'>
                <el-button type='primary' size='medium'>返回</el-button>
            </template>
        </el-result>
        <el-result icon='info' title='信息提示' sub-title='请根据提示进行操作'>
            <template slot='extra'>
            <el-button type='primary' size='medium'>返回</el-button>
            </template>
        </el-result>
        <el-result icon='error' title='错误提示' sub-title='请根据提示进行操作'>
            <template slot='extra'>
                <el-button type='primary' size='medium'>返回</el-button>
            </template>
        </el-result>
        <el-result title='404' sub-title='抱歉，请求错误'>
            <template slot='icon'>
                <el-image src='https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'></el-image>
            </template>
            <template slot='extra'>
                <el-button type='primary' size='medium'>返回</el-button>
            </template>
        </el-result>
        
    </div>
</body>
</html>

<script>
    new Vue({
        el:'#app',
        data(){
            return{
                
            }
        },
        methods:{

        }
    })
</script>