ataotao / vue-t-component

VUE自定义组件，方便工作使用(分页pagination 通知message 模态框modal 对话框msgbox 局部加载 loading 暂无数据nodata

vue-t-component

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

• 分页： t-pagination
• 通知： t-message
• 模态框： t-modal
• MessageBox对话框： t-msgbox
• 页面加载: t-pageloading
• 局部加载： t-loading
• 暂无数据： t-nodata

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	-----