前言

在前端页面开发中，我们经常会用到card 卡片，并在卡片中进行操作交互。例如：

这是一个常规的卡片，其中显示了icon，名称并通过了右上角的更多操作空间。

当右上角被点击时它将会展开，如下

而当多个卡片展示到一起，将会显示如下效果

在大部分的时间，用户并不会关注有右上角的操作功能。为了给用户更好的体验以及提升页面的交互性，我们可以整对这种通用操作提供更自然友好的交互方式。

rare-icon

rare 通过hover显示的基础，将帮助我们优化此类问题。如下示例展示：

我们可以通过rare轻松完成动态交互的icon按钮，它的底层通过gasp 和svg进行工作。

并在用户离开元素时，将会自动隐藏，提供完整的交互体验。

一个最基础的使用例子如下:


      <Close :color="'black'" :width="48" :height="48"         :parentDeep="3" :animation="true" hoverColor="red" />

在上面例子中我们使用了close图标可以指定hover 对象parentDeep 这个参数控制hover 事件注册在icon的第几层父元素上。 color 控制颜色， hoverColor 鼠标悬浮后的颜色。 animation 是否启用动画以及svg的宽高.

tray托盘

如上单纯的icon交互体验并不友好，为了完善体验，rare中支持了tray托盘组件，用于在hover时提供更自然的交互。

例如:

   <tray linecap="round" :duration="1">
      <Add :color="'black'" :width="48" :height="48" :parentDeep="3" :animation="true" hoverColor="#67C23A" />
    </tray>

在提供托盘后，元素hover和隐藏时会提供灵动的背景版，并可通过duration 单独赋予每个元素的动画时长, 通过linecap可以设置托盘为圆角.

select下拉选择

如最开始的例子，当卡片的操作较多时，我们通常会使用下拉来存放，例如编辑删除等。 rare中也提供了内置的select提供完成此类交互。

 <Select  :width="62" :height="62" :duration="1"  hover-color="red" :rotate="360" hover :animation="false">
      <tray linecap="round" :duration=".5">
        <Add :width="48" :height="48" :parentDeep="3" :animation="false" @click="clickAdd" hoverColor="green" />
      </tray>

      <tray linecap="round" :duration=".5">
        <Delete :parentDeep="3" :width="48" :height="48" hoverColor="red" :animation="false" />
      </tray>
    </Select>

使用效果如下:

在select组件中我们可以指定事件的触发方式，hover或click，以及旋转的角度和动画时间。通过animation可以控制是否执行hover动画，以及duration控制动画时间。

源码

rare 在github中提供所有源代码你可在此: github.com/rr13k/rare-… 地址进行访问

同时也发布在npm地址: www.npmjs.com/package/rar…

可以通过npm进行安装使用，支持es及TS和完善的代码提示。

rare-icon实现简单-优雅的常用交互组件

前言

rare-icon

tray托盘

select下拉选择

源码