0.1.1 • Published 5 years ago
tcdian_wheel v0.1.1
tcdian_wheel
vue wheel
介绍
开始使用
- 1.安装
使用本框架, 需在 css 中开启 border-box
*{box-sizing: border-box;}
- 2.安装 tcdian_wheel
npm i --save tcdian_wheel
- 3.引入 tcidn_wheel
import {Icon, Button, ButtonGroup, Input, Col, Row, Layout, Header, Footer, Content, Slider, Toast, plugin, Tabs, TabsNav, TabsItem, TabsBody, TabsPanel} from 'tcdian_wheel'
import 'tcdian_wheel/dist/index.css'
Vue.use(plugin)
export default {
components: {
'tcButton': Button,
'tcIcon': Icon,
'tcButtonGroup': ButtonGroup,
'tcInput': Input,
'tcCol': Col,
'tcRow': Row,
'tcLayout': Layout,
'tcHeader': Header,
'tcFooter': Footer,
'tcContent': Content,
'tcSlider': Slider,
'tcToast': Toast,
'tc-tabs': Tabs,
'tc-tabs-nav': TabsNav,
'tc-tabs-item': TabsItem,
'tc-tabs-body': TabsBody,
'tc-tabs-panel': TabsPanel
}
}
文档
说明
参数中双引号表示默认值, 后面单引号为可选值
- 1.tcIcon 组件
name: svg 图片名称
名称参考:
http://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=31
- 2.tcButton 组件
content: 按钮文字
icon: svg图片名称
button-shape: 按钮形状 -> "squre" 'round'
icon-position: 按钮中icon位置 -> 'left' 'right'
loading: icon变为旋转loading状态
其他按钮自带属性
- 3.tcButtonGroup 组件
slot接收 tcButton组件, 将其连成一批连续按button按钮
- 4.tcInput 组件
input自带属性:type disabled readonly name value placeholder autofocus (后续待添加)
input自带事件: input change focus blur (参数为$event.target.value) (后续待添加)
info: 文字提示信息
info-status: 问题提示Status -> "success" 'error'
info-position: info信息位置 -> "right" 'bottom'
- 5.tcCol 和 tcRow 组件 (grid 布局)
24栅格布局
使用示例:
<tc-row>
<tc-col span="12"> ... </tc-col>
<tc-col span="12"> ... </tc-col>
</tc-row>
tc-row 配置参数
align: 垂直对其方式 -> "top" 'middle' 'bottom'
gutter: 栅格间隔 单位px
justify: 水平对齐方式 -> "start" 'end' 'center' 'space-around' 'space-between'
wrap: 栅格数超过24 时是否换行 -> "nowrap" 'wrap'
tc-col 配置参数
响应式栅格: {
normal: 'min-width: 0px',
xs: 'max-width: 576px',
sm: 'min-width: 576px',
md: 'min-width: 768px',
lg: 'min-width: 992px',
xl: 'min-width: 1200px',
xxl: 'min-width: 1600px'
}
offset: 栅格左侧的间隔数
span: 栅格占位数
- 6.layout 组件
使用示例:
<tc-layout>
<tc-header>header</tc-header>
<tc-layout>
<tc-slider>slider</tc-slider>
<tc-content>content</tc-content>
</tc-layout>
<tc-footer>footer</tc-footer>
</tc-layout>
tc-layout:布局容器,其下可嵌套 tc-header tc-slider tc-content tc-footer 或 tc-layout 本身,可以放在任何父容器中。
tc-header:顶部布局,自带默认样式,其下可嵌套任何元素,只能放在 tc-layout 中。
tc-slider:侧边栏,自带默认样式及基本功能,其下可嵌套任何元素,只能放在 tc-layout 中。
tc-content:内容部分,自带默认样式,其下可嵌套任何元素,只能放在 tc-layout 中。
tc-footer:底部布局,自带默认样式,其下可嵌套任何元素,只能放在 tc-layout 中。
- 7.toast 组件
使用 Vue.use(plugin) 在Vue.prototype上添加 $toast 方法
调用 vm.$toast() 方法, 生成一个 toast组件实例
$toast方法接收两个参数:
promptMessage: toast组件的promptMessage 文字
toastOptions : 配置参数, 可配置如下属:
autoClose: toast 实例是否自动关闭
autoCloseDelay: toast 实例自动关闭延迟时间
closeButton: toast实例关闭按钮配置 , 接收一个Object,可配置两个属性:
text: 关闭按钮的文字, callback:点击关闭按钮后的回调函数,函数接收一个参数,即当前toast实例
position: toast 实例显示的位置 -> "top" 'middle' 'bottom'
- 8.tabs 组件
使用示例:
<tc-tabs :selected.sync="默认显示的item name">
<!-- <tc-tabs :selected="默认显示的item name" @update:selected="默认显示的item name = $event"> -->
<tc-tabs-nav>
<tc-tabs-item name="news"> <tc-icon name="earth"></tc-icon> 新闻</tc-tabs-item>
<tc-tabs-item name="entertainment" disabled> <tc-icon name="pic"></tc-icon> 娱乐</tc-tabs-item>
<tc-tabs-item name="finances">财经</tc-tabs-item>
</tc-tabs-nav>
<tc-tabs-body>
<tc-tabs-panel name="news">新闻内容</tc-tabs-panel>
<tc-tabs-panel name="entertainment">娱乐内容</tc-tabs-panel>
<tc-tabs-panel name="finances">财经内容</tc-tabs-panel>
</tc-tabs-body>
</tc-tabs>
注意: 对应的item 和panel需要有相同的name属性.
tabs-item 配置参数
disabled: 是否禁用item -> "false" 'true'