0.1.1 • Published 3 years ago

tcdian_wheel v0.1.1

Weekly downloads
2
License
MIT
Repository
github
Last release
3 years ago

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'

提问

变更记录

联系方式

贡献代码

0.1.1

3 years ago

0.0.12

4 years ago

0.0.11

4 years ago

0.0.10

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago