npm 包 timeui 使用教程

阅读时长 7 分钟读完

简介

timeui 是一款应用于前端开发的轻量级 UI 组件库,该组件库可用于样式、日期、选择器等方面的操作。并且 timeui 是一个基于 Vue.js 开发的组件库,因此,你需要在你的项目中使用 Vue.js 来正常运行这个库。

安装

使用 npm 进行安装:

开始使用

  1. 引入 CSS 文件

安装完成 timeui 库之后,你需要在 HTML 文件中引入 timeui 样式文件。timeui 样式文件在安装 timeui 的过程中会被自动地安装在你的项目里。你只需要在你的 HTML 文件中使用以下代码即可引用:

或者使用相对路径的方式引用:

  1. 导入组件

在你的代码中导入 timeui 的组件,例如下面我们需要使用 button 组件,那么在你的代码中你需要这样进行导入:

注意,一定要先引入 CSS 文件,否则样式不会生效。

  1. 使用组件

在完成导入组件后,你就可以在代码中使用 button 组件了。

-- -------------------- ---- -------
----------
  -----
    ------------- --------------------------------------------
  ------
-----------

--------
------ - ------------ - ---- --------
------ ----------------------------

------ ------- -
  ----------- -
    ------------
  --
  -------- -
    ------------- -
      ------------ --------
    -
  -
-
---------

组件列表

timeui 包含以下组件:

  • button
  • input
  • textarea
  • select
  • datepicker
  • timepicker

示例代码

Button

-- -------------------- ---- -------
----------
  -----
    ------------- -------------- ---------------------------------------------
    ------------- -------------- ---------------------------------------------
    ------------- -------------- ---------------------------------------------
    ------------- ------------- --------------------------------------------
  ------
-----------

--------
------ - ------------ - ---- --------
------ ----------------------------

------ ------- -
  ----------- -
    ------------
  --
  -------- -
    ------------- -
      ------------ --------
    -
  -
-
---------

Input

-- -------------------- ---- -------
----------
  -----
    ------------ ------------------ -------------------------
  ------
-----------

--------
------ - ----------- - ---- --------
------ ----------------------------

------ ------- -
  ----------- -
    -----------
  -
-
---------

Textarea

-- -------------------- ---- -------
----------
  -----
    ---------------------------------
  ------
-----------

--------
------ - -------------- - ---- --------
------ ----------------------------

------ ------- -
  ----------- -
    --------------
  -
-
---------

Select

-- -------------------- ---- -------
----------
  -----
    ------------- ------------------ --------------------------------------
  ------
-----------

--------
------ - ------------ - ---- --------
------ ----------------------------

------ ------- -
  ----------- -
    ------------
  --
  ------ -
    ------ -
      -------- -
        - ------ ------- ----- ------ --
        - ------ ------------- ----- ------------ --
        - ------ --------- ----- -------- -
      -
    -
  --
  -------- -
    ------------------- -
      ---------------------- ----------
    -
  -
-
---------

Datepicker

-- -------------------- ---- -------
----------
  -----
    ----------------- ----------------------------------
  ------
-----------

--------
------ - ---------------- - ---- --------
------ ----------------------------

------ ------- -
  ----------- -
    ----------------
  --
  ------ -
    ------ -
      ----- --
    -
  -
-
---------

Timepicker

-- -------------------- ---- -------
----------
  -----
    ----------------- ----------------------------------
  ------
-----------

--------
------ - ---------------- - ---- --------
------ ----------------------------

------ ------- -
  ----------- -
    ----------------
  --
  ------ -
    ------ -
      ----- --
    -
  -
-
---------

总结

除了这些组件,timeui 包含了更多的组件和功能,你可以在 timeui 的官方文档中查看。使用 timeui,你可以省去编写大量的样式和 HTML 的工作,而时间可以更多地用于业务逻辑的实现。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055cb381e8991b448da1ae

纠错
反馈