最近写代码用到popover,但是我需要popover的内容content是动态变化的,查看popover定义的相关参数,提到了content
官方说明是:
content 显示的内容,也可以通过 slot 传入 DOM String
我一看到slot就害怕,然后找到了这篇文章链接: https://www.jianshu/p/d4f36ee0598d.
写的很详细,主要是有实例,就算不懂slot,也可以套,开心!
我对slot其实还是很迷糊–——就先简单先认为他是一个占位符
按着别人的叙述做几个例子叭
创建使用组件的方式
使用slot涉及到组件的使用,简单的列出了三种方式。
//script代码
//方式一如下
var kun = Vue.extend({template: `<el-button type="success">伤心</el-button>`})
Vueponent("kun",kun)
//方式二如下
Vueponent("yang",{template:'#template-second'})
//方式三如下
Vueponent("meili", Vue.extend({
template: `<el-button type="success">快乐</el-button>`
}))
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
}
})
//方式二的html代码,注意template不要放在你vue对象中,我创建的vue对象是app,那么我的template就不会放在app中,
<body>
<div id="app">
<yang></yang>
//.........
</div>
<template id="template-second">
<div>
<ul>
<li>汉堡</li>
<li>牛奶</li>
<li>甜甜圈</li>
</ul>
</div>
</template>
</body>
popover的使用
popover也属于一个组件,只是官方给封装好了,引入之后,直接使用就好,不需要再注册了。也就是说上面的那几种方式自定义组件需要用到,我们用ui组件库是不需要的啦!
<el-popover
placement="top-start"
title="标题"
width="200"
trigger="hover"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
<el-button slot="reference">hover 激活</el-button>
</el-popover>
content内容是写死的,我的需求是content内容动态变化的,这里就需要使用插槽。官方说content可以通过slot传入dom,这个slot咋用啊,我的天
源码
<template>
<span>
<transition
:name="transition"
@after-enter="handleAfterEnter"
@after-leave="handleAfterLeave">
<div
class="el-popover el-popper"
:class="[popperClass, content && 'el-popover--plain']"
ref="popper"
v-show="!disabled && showPopper"
:style="{ width: width + 'px' }"
role="tooltip"
:id="tooltipId"
:aria-hidden="(disabled || !showPopper) ? 'true' : 'false'"
>
<div class="el-popover__title" v-if="title" v-text="title"></div>
<slot>{{ content }}</slot>
</div>
</transition>
<slot name="reference"></slot>
</span>
</template>
使用slot
<el-popover
placement="top-start"
title="我想吃"
width="400"
trigger="hover"
>
//slot插入
<ul>
<li>
{{message}}//可以动态变化了
</li>
</ul>
//插入结束
<el-button slot="reference">
点一个
</el-button>
</el-popover>
神奇!
更多推荐
vue element-ui中popover弹出框 内容content使用slot实现
发布评论