el-tooltip和el-popover的入门学习

最新推荐文章于 2024-06-04 09:43:42 发布

自律最差的编程狗

最新推荐文章于 2024-06-04 09:43:42 发布

阅读量7.5k

点赞数 1

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

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

版权

element-ui 专栏收录该内容

43 篇文章 21 订阅

订阅专栏

el-tooltip和el-popover的入门学习

适用场景

el-tooltip用于hover方式的提示信息
el-popver相比于el-tooltip，有共同的属性content，placement，不同的是，可以设置标题，el-tooltip一般为hover方式触发，el-popover一般为click，可以说是自定义更多的提示信息框

知识点

el-tooltip

content设置提示内容
placement设置方向和对齐方式，默认为bottom
effect设置主题，默认为dark
div标签属性slot='content'，自定义设置提示内容

el-popover

title设置标题
trigger设置触发方式，默认为click，可以设置hover,focus,manual
v-model设置弹框的显隐
可以在el-popover的标签夹中自定义content内容，此时content属性失效

效果图

el-tooltip效果图

在这里插入图片描述

el-popover效果图

在这里插入图片描述

代码

el-tooltip代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
    <title>Document</title>
</head>
<body>
    <div id='app' style='margin-top: 100px;'>
        <el-tooltip effect='dark' content='右上信息' placement='right-start'>
            <el-button>右上</el-button>
        </el-tooltip>
        <el-tooltip effect='dark' content='右中信息' placement='right'>
            <el-button>右中</el-button>
        </el-tooltip>
        <el-tooltip effect='dark' content='右下信息' placement='right-end'>
            <el-button>右下</el-button>
        </el-tooltip>
        <el-tooltip effect='light' content='左上信息' placement='left-start'>
            <el-button>左上</el-button>
        </el-tooltip>
        <el-tooltip effect='light' content='左中信息' placement='left'>
            <el-button>左中</el-button>
        </el-tooltip>
        <el-tooltip effect='light' content='左下信息' placement='left-end'>
            <el-button>左下</el-button>
        </el-tooltip>
        <el-tooltip placement='top-start'>
            <div slot='content'>上左信息qqqqqqqqqq</div>
            <el-button>上左</el-button>
        </el-tooltip>
        <el-tooltip placement='top'>
            <div slot='content'>上中信息qqqqqqqqqq</div>
            <el-button>上中</el-button>
        </el-tooltip>
        <el-tooltip placement='top-end'>
            <div slot='content'>上右信息qqqqqqqqqq</div>
            <el-button>上右</el-button>
        </el-tooltip>
        <el-tooltip effect='light' placement='bottom-start'>
            <div slot='content'>下左信息qqqqqqqqqq</div>
            <el-button>下左</el-button>
        </el-tooltip>
        <el-tooltip effect='light' placement='bottom'>
            <div slot='content'>下中信息qqqqqqqqqq</div>
            <el-button>下中</el-button>
        </el-tooltip>
        <el-tooltip effect='light' placement='bottom-end'>
            <div slot='content'>下右信息qqqqqqqqqq</div>
            <el-button>下右</el-button>
        </el-tooltip>
    </div>
</body>
</html>

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

el-popover代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
    <title>Document</title>
</head>

<body>
    <div id='app' style='margin-top: 100px; margin-left: 150px;'>
        <el-popover title='弹框标题' content='确认删除？' triggle='click' placement='bottom-end' v-model='visibled'>
            <div style='text-align:right;margin:0'>
                <el-button type='text' size='mini' @click='visibled=false'>取消</el-button>
                <el-button type='priamry' size='mini' @click='visibled=false'>确认</el-button>
            </div>
            <el-button slot='reference'>show Popover</el-button>
        </el-popover>
    </div>
</body>

</html>

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

        }
    })
</script>