Tips 工具提示

使用指南

引入方式

import { Tips } from 'feart';

components: {
  'fe-tip': Tips,
}

代码示例

普通 tips

<fe-tips :placement="'topLeft'" :content="'我是content'">
  <button class="tips-test-btn">topLeft</button>
</fe-tips>

自定义右侧显示图标和显示关闭图标

<fe-tips
  :showCloseIcon="true"
  :placement="'topLeft'"
  :title="'注意哦'"
  :content="'如果组件的default slot为空，那内容相对屏幕定位'"
  :rightType="'icon'"
  :rightContent="'down'"
  @onVisibleChange="onVisibleChange"
>
</fe-tips>

自定义右侧显示按钮

<fe-tips
  :showCloseIcon="true"
  :placement="'topLeft'"
  :title="'注意哦'"
  :content="'如果组件的default slot为空，那内容相对屏幕定位'"
  :rightType="'button'"
  :rightContent="'知道了'"
  @onVisibleChange="onVisibleChange"
>
</fe-tips>

弹出层跟随页面滚动

<fe-tips
  :getPopupContainer="'.page-body'"
  :placement="'bottomRight'"
  :content="'我是content bottom right'"
>
  <button class="tips-test-btn">bottomRight弹出层内容跟随页面滚动</button>
</fe-tips>

自定义弹出层颜色

<fe-tips
  :placement="'bottomLeft'"
  :backgroundColor="'#fff'"
  :color="'#269df4'"
  :content="'我是content'"
>
  <button class="tips-test-btn">自定义颜色</button>
</fe-tips>

自定义弹出层样式

<fe-tips
  overlayClassName="custom-width"
  :placement="'bottom'"
  :content="'我是content bottom，自定义宽度为280px'"
>
  <button class="tips-test-btn">自定义class</button>
</fe-tips>

.custom-width {
  width: 280px;
}

Props

placement 可选值

Events

Slots