网站建设 任务分配表,WordPress图片无缝,网络优化大师手机版,一个好的网站怎么建设常用于展示鼠标 hover 时的提示信息。 1.如何使用#xff1f;
//使用content属性来决定hover时的提示信息。
//由placement属性决定展示效果#xff1a;placement属性值为#xff1a;方向-对齐位置#xff1b;
//四个方向#xff1a;top、left、right、bottom#xff1… 常用于展示鼠标 hover 时的提示信息。 1.如何使用
//使用content属性来决定hover时的提示信息。
//由placement属性决定展示效果placement属性值为方向-对齐位置
//四个方向top、left、right、bottom三种对齐位置start, end默认为空。
//如placementleft-end则提示信息出现在目标元素的左侧且提示信息的底部与目标元素的底部对齐。div classboxdiv classtopel-tooltip classitem effectdark contentTop Left 提示文字 placementtop-startel-button上左/el-button/el-tooltipel-tooltip classitem effectdark contentTop Center 提示文字 placementtopel-button上边/el-button/el-tooltipel-tooltip classitem effectdark contentTop Right 提示文字 placementtop-endel-button上右/el-button/el-tooltip/div/divstyle.box {width: 400px;.top {text-align: center;}.item {margin: 4px;}}
/style
2.主题
Tooltip 组件提供了两个不同的主题dark和light。
通过设置effect属性来改变主题默认为dark。el-tooltip contentTop center placementtopel-buttonDark/el-button
/el-tooltip
el-tooltip contentBottom center placementbottom effectlightel-buttonLight/el-button
/el-tooltip
3.更多 Content 展示多行文本或者是设置文本内容的格式
el-tooltip placementtopdiv slotcontent多行信息br/第二行信息/divel-buttonTop center/el-button
/el-tooltip
4.高级扩展
除了这些基本设置外还有一些属性可以让使用者更好的定制自己的效果
transition 属性可以定制显隐的动画效果默认为fade-in-linear。 如果需要关闭 tooltip 功能disabled 属性可以满足这个需求它接受一个Boolean设置为true即可。
templateel-tooltip :disableddisabled content点击关闭 tooltip 功能 placementbottom effectlightel-button clickdisabled !disabled点击{{disabled ? 开启 : 关闭}} tooltip 功能/el-button/el-tooltip
/template
scriptexport default {data() {return {disabled: false};}};
/script 关于tooltip组件的大体内容介绍完了想要深入浅出请前往文字提示
