c-tip

提示

属性

属性名类型必填默认值说明
showBoolean否false提示框是否显示
directionString否top提示框所在位置，可选值top/right/bottom/left
offset-leftNumber否小三角之Tip左边距离
offset-topNumber否小三角之Tip顶部距离
offset-rightNumber否小三角之Tip右边距离
offset-bottomNumber否小三角之Tip底部距离
c-bind:closeEventHandle点击关闭按钮触发
注意：Tip小三角默认是居中显示的，当direction值为top或bottom时，如果offset-left或offset-right有值且不是NaN，则小三角的距离为传入值

示例

  1. <template>
  2. <view class="container">
  3.   <c-tip show="{{true}}" direction="top" style="position:absolute;top:0;left:0;">
  4.     <text style="font-size: 24cpx;color: #fff">Tip</text>
  5.   </c-tip>
  7.   <c-tip show="{{true}}" direction="left" style="postions: absolute;top: 200cpx;left: 0;">
  8.     <text style="font-size: 24cpx;color: #fff">Awesome!</text>
  9.   </c-tip>
  10. </view>
  11. </template>
  12. <script>
  13. class CTip {
  14. }
  16. export default new CTip();
  17. </script>
  18. <script cml-type="json">
  19. {
  20.   "base": {
  21.       "usingComponents": {
  22.           "c-tip": "cml-ui/components/c-tip/c-tip"
  23.       }
  24.   }
  25. }
  26. </script>

c-tip - 图1wx

c-tip - 图2web

c-tip - 图3native

查看完整示例