Skip to content

Latest commit

 

History

History
553 lines (516 loc) · 11.6 KB

README.md

File metadata and controls

553 lines (516 loc) · 11.6 KB

vue-t-component

VUE自定义组件，方便工作使用 Demo: https://ataotao.github.io/vue-t-component

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

运行 localhost:8080

使用方式

// 组件依赖bootstrap3样式
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

// 全部引入
import tComponents from '@/packages/index';
Vue.use(tComponents);

// 或单个引入
import { Pagenation，Msgbox } from '@/packages/index';
Vue.use(Pagenation);
Vue.prototype.$msgbox = Msgbox;

参数说明

t-pagination

参数
参数 说明 类型 是否必选 默认值
total 总条目数 Number true ----
mode 分页控件模式 String false full(full, mini)
currentPage 当前页数 Number false 1
styleSize 分页样式 String false sm (sm, md, lg)三种样式
pageNum 每页显示条目数 Number false 20
pageNums 每页显示数选择设置 Array false [20, 40, 60]
事件
参数 说明 类型 回调参数
setCurrentFn 当前页改变时触发 Function 回调参数 当前页码
setNumsFn 每页显示设置改变触发(mode为full时为必填项) Function 回调参数 每页设置条数

t-message

参数
参数 说明 类型 是否必选 默认值
msg 通知文字 string | html true 无默认值，可支持HTML
isIcon 是否显示图标 Boolean false false (true | false)
icon 图标样式 String false 'iconfont icon-point'
duration 持续时长 Number false 2000
事件
参数 说明 类型 回调参数
onClose 通知关闭后回调 Function -----

t-msgbox

参数
只有msg为必填参数 ，如果没有其他后续操作，简单使用方式，可以this.$msgbox('清楚该提示了吗');
参数 说明 类型 是否必选 默认值
title 标题 string false '提示'
msg 内容（必填项） string | html true isHtml为true才能传入html标签，否则将按照text处理
showCloseBtn 是否显示关闭按钮 Boolean false true
showConfirmBtn 是否显示确定按钮 Boolean false true
showCancelBtn 是否显示取消按钮 Boolean false false
confirmBtnText 确定按钮文字 String false 取消
cancelBtnText 取消按钮文字 String false 确定
closeOnBackdrop 点击遮罩是否关闭 Boolean false false
isHtml 是否为html标签 Boolean false false
isTitle 是否有标题 Boolean false true
事件
参数 说明 类型 回调参数
onConfirm 确定后回调函数 Function -----
onCancel： 关闭后回调函数 Function -----

t-nodata

参数

支持通过slot写入其他自定义内容，例如：

  <t-nodata msg="自定义无数据内容" icon="glyphicon glyphicon-floppy-remove" iconSize="50px" color="black">
  这是我想放入的其他内容
  </t-nodata>
参数 说明 类型 是否必选 默认值
msg 无数据时的提示内容 string false '暂未有相关数据'
icon 显示图标 string false 'iconfont icon-weifabushangpin'
iconSize 图标尺寸 string false '160px'
fontSize 文字尺寸 string false '24px'
color 控件显示颜色 string false '#DDD'

t-pageloading 页面加载

两种使用方式：

  <!-- 直接调用 -->
  this.$pageloading.open();
    setTimeout(() => {
    this.$pageloading.close();
  }, 2000);

  <!-- 赋值调用 -->
  let loading = this.$pageloading.open();
  setTimeout(() => {
    loading.close();
  }, 500);

t-loading

局部加载(指令方式 v-t-loading) 两种使用方式：

  <!-- 默认调用 -->
  <div class="loadingbox" v-t-loading='loading'>
      默认调用
  </div>

  <!-- 带参数调用 -->
  <div class="loadingbox" v-t-loading='loading' text='加载中' color="white" background="rgba(0, 0, 0, 0.9)">
      带参数调用
  </div>
参数
参数 说明 类型 是否必选 默认值
text 加载文字提示 string false 'loading...'
color 加载文字及图标颜色 string false '#666'
background 加载背景遮罩 string false 'rgba(255, 255, 255, 0.9)'

t-modal

参数
参数 说明 类型 是否必选 默认值
visible 模态框显示状态，需要添加.sync 修饰符 Boolean true false
title 模态框标题 String false 提示
isTitle 是否有标题 Boolean false true
showCloseBtn 是否显示关闭按钮 Boolean false true
showConfirmBtn 是否显示确定按钮 Boolean false true
showCancelBtn 是否显示取消按钮 Boolean false true
confirmBtnText 确定按钮文字 String false 取消
cancelBtnText 取消按钮文字 String false 确定
closeOnBackdrop 点击遮罩是否关闭 Boolean false false
size 模态框尺寸 String false lg (lg | md | sm)
事件
参数 说明 类型 回调参数
onConfirm 确定后回调函数 Function close,当确定后，根据当前的操作情况，调用close(true | false)来识别是否关闭模态框
onClose： 关闭后回调函数 Function -----