tudouUi —— UI组件库

# Button 按钮

# 引入

import { Button } from 'tudou-ui'
Vue.use(Button)

# 基础用法

<tudou-button>默认按钮</tudou-button>

# 按钮尺寸

<tudou-button size="large" block>block按钮</tudou-button>
<tudou-button size="large">大按钮</tudou-button>
<tudou-button size="medium">中按钮</tudou-button>
<tudou-button size="small">小按钮</tudou-button>

# 按钮形状

<tudou-button shape="rect">方形按钮</tudou-button>
<tudou-button shape="round">圆形按钮</tudou-button>

# 幽灵按钮

<tudou-button ghost>幽灵按钮</tudou-button>

# 按钮状态

<tudou-button>可用按钮</tudou-button>
<tudou-button disabled>禁用按钮</tudou-button>
<tudou-button loading></tudou-button>

# 点击事件

<tudou-button @click="btnClick">点击按钮</tudou-button>

# API

通过设置 Button 的属性来产生不同的按钮样式。

按钮属性说明如下：

属性 类型 默认值 说明
size String default 设置按钮大小，可选值large、medium、default、small或者不设
block Boolean false 将按钮宽度调整为其父元素宽度的选项
shape String round 设置按钮形状，可选值round、rect或者不设
ghost Boolean false 幽灵属性，使按钮背景透明
loading Boolean false 设置按钮载入状态
disabled Boolean false 设置按钮失效状态
@click Function 无 设置按钮的点击事件

# Icon 图标

# 引入

import { Icon } from 'tudou-ui'
Vue.use(Icon)

# 基础用法

<tudou-icon name="left"/>

# 设置颜色

<tudou-icon name="left" color="purple" />

# 设置尺寸

<tudou-icon name="left" size="2em" />

# API

属性 类型 默认值 说明
name String 无 必传，设置Icon名称
size String '1em' 设置Icon尺寸，支持px、em、rem、vw、vw等单位
color String 'currentColor' 设置Icon颜色，支持HEX、RGBA、英文，默认继承父元素的color

# Loading 加载中

# 引入

import { Loading } from 'tudou-ui'
Vue.use(Loading)

# 基础用法

<tudou-loading/>

# 类型

<tudou-loading type="spinners"/>
<tudou-loading type="dots"/>

# loading尺寸

<tudou-loading size="20"/>
<tudou-loading size="30"/>
<tudou-loading size="40"/>
<tudou-loading type="dots" size="10"/>
<tudou-loading type="dots" size="15"/>

# 带文字

<tudou-loading size="30">loading...</tudou-loading>

# API

属性 类型 默认值 说明
size String 24 | 8 设置loading大小：当type为spinners时，默认值为24；当type为dots时，默认值为8
type String spinners 设置loading的类型，可选值spinners、dots或者不设