Skip to content
目录

tips

文字提示气泡框。类似于元素属性title

使用方式

html
<!-- 引入 -->
<script type="module">
    import '../components/tips/index.js';
</script>
<!-- 使用 -->
<xy-tips tips="this is a tip">
    <xy-button>button</xy-button>
</xy-tips>

TIP

xy-tips标签不包含任何样式,也不会影响页面布局,你可以当做这层标签不存在

提示tips

提示文字。如果不设置则不显示提示。

鼠标放上来试试~改变tips
html
<xy-tips tips="this is a tip">
    <p>鼠标放上来试试~</p>
</xy-tips>

JavaScript操作getset

js
tips.tips;
tips.tips = 'some tips';
//原生属性操作
tips.getAttribute('tips');
tips.setAttribute('tips','some tips');

方向dir

通过dir可以设置气泡框方向,默认为top,可以取值toprightbottomleftTLTRRTRBBLBRLTLB

TLtopTRLTRTleftrightLBRBBLbottomBR
html
<xy-tips dir="top" tips="some tips">
  <xy-button>top</xy-button>
</xy-tips>

JavaScript操作getset

js
tips.dir;
tips.dir = 'right';
//原生属性操作
tips.getAttribute('dir');
tips.setAttribute('dir','right');

除了上述 12 个方位外,还可以设置两个值,以逗号分隔,比如top,bottom,可以自动根据位置来选择一个合适的方向。

top,bottom
html
<xy-tips tips="some tips" dir="top,bottom">
  <xy-button>top,bottom</xy-button>
</xy-tips>

类型type

可以通过type设置提示框的颜色,有三种类型successerrorwarning

successwarningerror
html
<xy-tips tips="success tips" type="success">
  <xy-button>success</xy-button>
</xy-tips>
<xy-tips tips="warning tips" type="warning">
  <xy-button>warning</xy-button>
</xy-tips>
<xy-tips tips="error tips" type="error">
  <xy-button>error</xy-button>
</xy-tips>

JavaScript操作getset

js
tips.type;
tips.type = 'success';
//原生属性操作
tips.getAttribute('type');
tips.setAttribute('type','success');

颜色color

通过color可以设置提示框为任意颜色,优先级高于type

custom color
html
<xy-tips tips="some tips" color="royalblue">
  <xy-button>custom color</xy-button>
</xy-tips>

JavaScript操作getset

js
tips.color;
tips.color = 'red';
//原生属性操作
tips.getAttribute('color');
tips.setAttribute('color','red');

触发方式trigger

还可以通过trigger属性定义触发方式,默认为hover,focus,还可以设置为click,也可任意组合

TIP

仅用于初始化,后续修改无效。

hoverfocusclick
html
<xy-tips tips="some tips" trigger="hover">
  <xy-button>hover</xy-button>
</xy-tips>
<xy-tips tips="some tips" trigger="focus">
  <xy-button>focus</xy-button>
</xy-tips>
<xy-tips tips="some tips" trigger="click">
  <xy-button>click</xy-button>
</xy-tips>

显示open

可以设置触发方式triggernone,或者open默认存在,可以通过open属性可以主动控制提示框的出现时机,不再跟随hover,focus

适用于表单错误信息描述。

tips is show
html
<xy-tips tips="some tips" trigger="none" open>
  <xy-button>tips is open</xy-button>
</xy-tips>

JavaScript操作set

js
tips.open = true;
tips.open = false;
//原生属性操作
tips.setAttribute('open',true);

命令式静态方法tips.init()

除了使用<xy-tips></xy-tips>标签外,还可以通过命令式方式进行初始化,参数和前面保持一致

js
import tips from '../components/tips/index.js'

const tip = tips.init(el, {
  tips : '提示', // 提示文字
  dir : 'top,bottom', // 方向
  trigger : ['hover'], // 触发方式
  ...
})

适用于更加灵活的业务场景(原生环境)。例如,点击一个按钮,让其他元素出现tips

这是一段文本点击我出现 tips~

使用tips.init创建,然后通过open属性控制显示

js
const tip = tips.init(el, {
  tips : '这是通过new Tip生成的提示',
  trigger: 'none',
  open: false,
  type: 'error'
})
button.onclick = () => {
  tip.open = !tip.open
}

MIT License.