简介
tiktok 是一款基于 Vue2.x 的 UI 组件库，按照 Tiktok 抖音的视觉设计风格制作，目前支持常用的组件与自定义主题。
安装
使用 npm 进行安装：
npm install tiktok --save
使用方法
方式一：全局引入
在 main.js 中引入 tiktok
import Vue from 'vue'; import Tiktok from 'tiktok'; import 'tiktok/dist/tiktok.css'; Vue.use(Tiktok);
方式二：按需引入
在需要使用的组件中按需引入即可
import { TiktokButton, TiktokAvatar } from 'tiktok';
export default {
components: {
TiktokButton,
TiktokAvatar,
},
};使用自定义主题
tiktok 支持使用自定义主题，手动定义三种颜色变量即可
:root {
--tiktok-primary-color: #ff2d5a;
--tiktok-success-color: #4cd964;
--tiktok-warning-color: #ffcc00;
}组件列表
以下是 tiktok 支持的组件列表以及简介：
Button
常规按钮，支持加载状态、禁用状态、多种颜色
<tiktok-button type="primary">按钮</tiktok-button> <tiktok-button type="success">按钮</tiktok-button> <tiktok-button type="warning">按钮</tiktok-button> <tiktok-button disabled>按钮</tiktok-button> <tiktok-button loading>按钮</tiktok-button>
Input
输入框，支持多种类型、自定义图标、限制输入等
<tiktok-input type="text" placeholder="文本输入框"></tiktok-input> <tiktok-input type="password" placeholder="密码输入框"></tiktok-input> <tiktok-input type="number" placeholder="数字输入框"></tiktok-input> <tiktok-input type="textarea" placeholder="多行输入框"></tiktok-input> <tiktok-input prepend-icon="el-icon-search"></tiktok-input> <tiktok-input append-icon="el-icon-close"></tiktok-input> <tiktok-input pattern="[0-9]" placeholder="只能输入数字"></tiktok-input>
Avatar
头像组件，支持设定大小、预设图片、自定义图片、可点击
-- -------------------- ---- ------- -------------- ---------- --------------------------------------------------------------------------------- -------------- ---------- ---------------------------------------------------------------- ------------------- ------------------ --------------- ---------------- -------------- ---------- ------------------- ------------------ -------------- --------------------- -- ------------------------- ----------------
Loading
加载中状态组件，支持自定义颜色
<tiktok-loading :size="48" color="#ff2d5a"></tiktok-loading>
Dialog
模态框组件，支持多种类型、自定义按钮文字、自定义标题、嵌入内容等
-- -------------------- ---- -------
-------------- ------------------------
--------- --------
-----------
-----------
---------------
--------- --------
-------------- --------------------- - -------------------------
-------------- -------------- --------------------- - -------------------------
-----------
----------------Tab
选项卡组件，支持多种类型、自定义标签、自定义内容等
<tiktok-tab v-model="tabActiveName"> <tiktok-tab-pane label="Tab 1" name="1">选项卡一</tiktok-tab-pane> <tiktok-tab-pane label="Tab 2" name="2">选项卡二</tiktok-tab-pane> <tiktok-tab-pane label="Tab 3" name="3">选项卡三</tiktok-tab-pane> </tiktok-tab>
后记
tiktok 组件库具有良好的可扩展性和自定义性，建议自行根据项目需求进行定制化开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568b981e8991b448e486c