<u-modal
/**
* modal 模态框
* @description 弹出模态框,常用于消息提示、消息确认、在当前页面内完成特定的交互操作
* @tutorial https://www.uviewui.com/components/modal.html
* @property {Boolean} value 是否显示模态框
* @property {String | Number} z-index 层级
* @property {String} title 模态框标题(默认"提示")
* @property {String | Number} width 模态框宽度(默认600)
* @property {String} content 模态框内容(默认"内容")
* @property {Boolean} show-title 是否显示标题(默认true)
* @property {Boolean} async-close 是否异步关闭,只对确定按钮有效(默认false)
* @property {Boolean} show-confirm-button 是否显示确认按钮(默认true)
* @property {Stringr | Number} negative-top modal往上偏移的值
* @property {Boolean} show-cancel-button 是否显示取消按钮(默认false)
* @property {Boolean} mask-close-able 是否允许点击遮罩关闭modal(默认false)
* @property {String} confirm-text 确认按钮的文字内容(默认"确认")
* @property {String} cancel-text 取消按钮的文字内容(默认"取消")
* @property {String} cancel-color 取消按钮的颜色(默认"#606266")
* @property {String} confirm-color 确认按钮的文字内容(默认"#2979ff")
* @property {String | Number} border-radius 模态框圆角值,单位rpx(默认16)
* @property {Object} title-style 自定义标题样式,对象形式
* @property {Object} content-style 自定义内容样式,对象形式
* @property {Object} cancel-style 自定义取消按钮样式,对象形式
* @property {Object} confirm-style 自定义确认按钮样式,对象形式
* @property {Boolean} zoom 是否开启缩放模式(默认true)
* @event {Function} confirm 确认按钮被点击
* @event {Function} cancel 取消按钮被点击
* @example
/
<u-navbar
/*
* navbar 自定义导航栏
* @description 此组件一般用于在特殊情况下,需要自定义导航栏的时候用到,一般建议使用uniapp自带的导航栏。
* @tutorial https://www.uviewui.com/components/navbar.html
* @property {String Number} height 导航栏高度(不包括状态栏高度在内,内部自动加上),注意这里的单位是px(默认44)
* @property {String} back-icon-color 左边返回图标的颜色(默认#606266)
* @property {String} back-icon-name 左边返回图标的名称,只能为uView自带的图标(默认arrow-left)
* @property {String Number} back-icon-size 左边返回图标的大小,单位rpx(默认30)
* @property {String} back-text 返回图标右边的辅助提示文字
* @property {Object} back-text-style 返回图标右边的辅助提示文字的样式,对象形式(默认{ color: ‘#606266‘ })
* @property {String} title 导航栏标题,如设置为空字符,将会隐藏标题占位区域
* @property {String Number} title-width 导航栏标题的最大宽度,内容超出会以省略号隐藏,单位rpx(默认250)
* @property {String} title-color 标题的颜色(默认#606266)
* @property {String Number} title-size 导航栏标题字体大小,单位rpx(默认32)
* @property {Function} custom-back 自定义返回逻辑方法
* @property {String Number} z-index 固定在顶部时的z-index值(默认980)
* @property {Boolean} is-back 是否显示导航栏左边返回图标和辅助文字(默认true)
* @property {Object} background 导航栏背景设置,见官网说明(默认{ background: ‘#ffffff‘ })
* @property {Boolean} is-fixed 导航栏是否固定在顶部(默认true)
* @property {Boolean} immersive 沉浸式,允许fixed定位后导航栏塌陷,仅fixed定位下生效(默认false)
* @property {Boolean} border-bottom 导航栏底部是否显示下边框,如定义了较深的背景颜色,可取消此值(默认true)
* @example
*/
<u-image
/**
- Image 图片
- @description 此组件为uni-app的image组件的加强版,在继承了原有功能外,还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
- @tutorial https://uviewui.com/components/image.html
- @property {String} src 图片地址
- @property {String} mode 裁剪模式,见官网说明
- @property {String | Number} width 宽度,单位任意,如果为数值,则为rpx单位(默认100%)
- @property {String | Number} height 高度,单位任意,如果为数值,则为rpx单位(默认 auto)
- @property {String} shape 图片形状,circle-圆形,square-方形(默认square)
- @property {String | Number} border-radius 圆角值,单位任意,如果为数值,则为rpx单位(默认 0)
- @property {Boolean} lazy-load 是否懒加载,仅微信小程序、App、百度小程序、字节跳动小程序有效(默认 true)
- @property {Boolean} show-menu-by-longpress 是否开启长按图片显示识别小程序码菜单,仅微信小程序有效(默认 false)
- @property {String} loading-icon 加载中的图标,或者小图片(默认 photo)
- @property {String} error-icon 加载失败的图标,或者小图片(默认 error-circle)
- @property {Boolean} show-loading 是否显示加载中的图标或者自定义的slot(默认 true)
- @property {Boolean} show-error 是否显示加载错误的图标或者自定义的slot(默认 true)
- @property {Boolean} fade 是否需要淡入效果(默认 true)
- @property {String Number} width 传入图片路径时图片的宽度
- @property {String Number} height 传入图片路径时图片的高度
- @property {Boolean} webp 只支持网络资源,只对微信小程序有效(默认 false)
- @property {String | Number} duration 搭配fade参数的过渡时间,单位ms(默认 500)
- @event {Function} click 点击图片时触发
- @event {Function} error 图片加载失败时触发
- @event {Function} load 图片加载成功时触发
- @example
/
<u-form
/*
- form 表单
- @description 此组件一般用于表单场景,可以配置Input输入框,Select弹出框,进行表单验证等。
- @tutorial http://uviewui.com/components/form.html
- @property {Object} model 表单数据对象
- @property {Boolean} border-bottom 是否显示表单域的下划线边框
- @property {String} label-position 表单域提示文字的位置,left-左侧,top-上方
- @property {String Number} label-width 提示文字的宽度,单位rpx(默认90)
- @property {Object} label-style lable的样式,对象形式
- @property {String} label-align lable的对齐方式
- @property {Object} rules 通过ref设置,见官网说明
- @property {Array} error-type 错误的提示方式,数组形式,见上方说明(默认[‘message‘])
- @example
/
<u-row
/*
- row 行布局
- @description 通过基础的 12 分栏,迅速简便地创建布局。
- @tutorial https://www.uviewui.com/components/layout.html#row-props
- @property {String Number} gutter 栅格间隔,左右各为此值的一半,单位rpx(默认0)
- @property {String} justify 水平排列方式(微信小程序暂不支持)默认(start(或flex-start))
- @property {String} align 垂直排列方式(默认center)
- @example
/
<u-col
/*
- col 布局单元格
- @description 通过基础的 12 分栏,迅速简便地创建布局(搭配使用)
- @tutorial https://www.uviewui.com/components/layout.html
- @property {String Number} span 栅格占据的列数,总12等分(默认0)
- @property {String} text-align 文字水平对齐方式(默认left)
- @property {String Number} offset 分栏左边偏移,计算方式与span相同(默认0)
- @example
/
<u-form-item
/*
- form-item 表单item
- @description 此组件一般用于表单场景,可以配置Input输入框,Select弹出框,进行表单验证等。
- @tutorial http://uviewui.com/components/form.html
- @property {String} label 左侧提示文字
- @property {Object} prop 表单域model对象的属性名,在使用 validate、resetFields 方法的情况下,该属性是必填的
- @property {Boolean} border-bottom 是否显示表单域的下划线边框
- @property {String} label-position 表单域提示文字的位置,left-左侧,top-上方
- @property {String Number} label-width 提示文字的宽度,单位rpx(默认90)
- @property {Object} label-style lable的样式,对象形式
- @property {String} label-align lable的对齐方式
- @property {String} right-icon 右侧自定义字体图标(限uView内置图标)或图片地址
- @property {String} left-icon 左侧自定义字体图标(限uView内置图标)或图片地址
- @property {Object} left-icon-style 左侧图标的样式,对象形式
- @property {Object} right-icon-style 右侧图标的样式,对象形式
- @property {Boolean} required 是否显示左边的"*"号,这里仅起展示作用,如需校验必填,请通过rules配置必填规则(默认false)
- @example
/
<u-input
/*
- input 输入框
- @description 此组件为一个输入框,默认没有边框和样式,是专门为配合表单组件u-form而设计的,利用它可以快速实现表单验证,输入内容,下拉选择等功能。
- @tutorial http://uviewui.com/components/input.html
- @property {String} type 模式选择,见官网说明
- @property {Boolean} clearable 是否显示右侧的清除图标(默认true)
- @property {} v-model 用于双向绑定输入框的值
- @property {String} input-align 输入框文字的对齐方式(默认left)
- @property {String} placeholder placeholder显示值(默认 ‘请输入内容‘)
- @property {Boolean} disabled 是否禁用输入框(默认false)
- @property {String Number} maxlength 输入框的最大可输入长度(默认140)
- @property {String Number} selection-start 光标起始位置,自动聚焦时有效,需与selection-end搭配使用(默认-1)
- @property {String Number} maxlength 光标结束位置,自动聚焦时有效,需与selection-start搭配使用(默认-1)
- @property {String Number} cursor-spacing 指定光标与键盘的距离,单位px(默认0)
- @property {String} placeholderStyle placeholder的样式,字符串形式,如"color: red;"(默认 "color: #c0c4cc;")
- @property {String} confirm-type 设置键盘右下角按钮的文字,仅在type为text时生效(默认done)
- @property {Object} custom-style 自定义输入框的样式,对象形式
- @property {Boolean} focus 是否自动获得焦点(默认false)
- @property {Boolean} fixed 如果type为textarea,且在一个"position:fixed"的区域,需要指明为true(默认false)
- @property {Boolean} password-icon type为password时,是否显示右侧的密码查看图标(默认true)
- @property {Boolean} border 是否显示边框(默认false)
- @property {String} border-color 输入框的边框颜色(默认#dcdfe6)
- @property {Boolean} auto-height 是否自动增高输入区域,type为textarea时有效(默认true)
- @property {String Number} height 高度,单位rpx(text类型时为70,textarea时为100)
- @example
/
<u-button
/*
- button 按钮
- @description Button 按钮
- @tutorial https://www.uviewui.com/components/button.html
- @property {String} size 按钮的大小
- @property {Boolean} ripple 是否开启点击水波纹效果
- @property {String} ripple-bg-color 水波纹的背景色,ripple为true时有效
- @property {String} type 按钮的样式类型
- @property {Boolean} plain 按钮是否镂空,背景色透明
- @property {Boolean} disabled 是否禁用
- @property {Boolean} hair-line 是否显示按钮的细边框(默认true)
- @property {Boolean} shape 按钮外观形状,见文档说明
- @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台,在 ios 上为雪花,Android上为圆圈)
- @property {String} form-type 用于
- @property {String} open-type 开放能力
- @property {String} data-name 额外传参参数,用于小程序的data-xxx属性,通过target.dataset.name获取
- @property {String} hover-class 指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果(App-nvue 平台暂不支持)
- @property {Number} hover-start-time 按住后多久出现点击态,单位毫秒
- @property {Number} hover-stay-time 手指松开后点击态保留时间,单位毫秒
- @property {Object} custom-style 对按钮的自定义样式,对象形式,见文档说明
- @event {Function} click 按钮点击
- @event {Function} getphonenumber open-type="getPhoneNumber"时有效
- @event {Function} getuserinfo 用户点击该按钮时,会返回获取到的用户信息,从返回参数的detail中获取到的值同uni.getUserInfo
- @event {Function} error 当使用开放能力时,发生错误的回调
- @event {Function} opensetting 在打开授权设置页并关闭后回调
- @event {Function} launchapp 打开 APP 成功的回调
- @example 月落
/
<u-notice-bar
/*
- noticeBar 滚动通知
- @description 该组件用于滚动通告场景,有多种模式可供选择
- @tutorial https://www.uviewui.com/components/noticeBar.html
- @property {Array} list 滚动内容,数组形式,见上方说明
- @property {String} type 显示的主题(默认warning)
- @property {Boolean} volume-icon 是否显示小喇叭图标(默认true)
- @property {Boolean} more-icon 是否显示右边的向右箭头(默认false)
- @property {Boolean} close-icon 是否显示关闭图标(默认false)
- @property {Boolean} autoplay 是否自动播放(默认true)
- @property {String} color 文字颜色
- @property {String Number} bg-color 背景颜色
- @property {String} mode 滚动模式(默认horizontal)
- @property {Boolean} show 是否显示(默认true)
- @property {String Number} font-size 字体大小,单位rpx(默认28)
- @property {String Number} volume-size 左边喇叭的大小(默认34)
- @property {String Number} duration 滚动周期时长,只对步进模式有效,横向衔接模式无效,单位ms(默认2000)
- @property {String Number} speed 水平滚动时的滚动速度,即每秒移动多少距离,只对水平衔接方式有效,单位rpx(默认160)
- @property {String Number} font-size 字体大小,单位rpx(默认28)
- @property {Boolean} is-circular mode为horizontal时,指明是否水平衔接滚动(默认true)
- @property {String} play-state 播放状态,play - 播放,paused - 暂停(默认play)
- @property {String Nubmer} border-radius 通知栏圆角(默认为0)
- @property {String Nubmer} padding 内边距,字符串,与普通的内边距css写法一直(默认"18rpx 24rpx")
- @property {Boolean} no-list-hidden 列表为空时,是否显示组件(默认false)
- @property {Boolean} disable-touch 是否禁止通过手动滑动切换通知,只有mode = vertical,或者mode = horizontal且is-circular = false时有效(默认true)
- @event {Function} click 点击通告文字触发,只有mode = vertical,或者mode = horizontal且is-circular = false时有效
- @event {Function} close 点击右侧关闭图标触发
- @event {Function} getMore 点击右侧向右图标触发
- @event {Function} end 列表的消息每次被播放一个周期时触发,只有mode = vertical,或者mode = horizontal且is-circular = false时有效
- @example
/
<u-swiper
/*
- swiper 轮播图
- @description 该组件一般用于导航轮播,广告展示等场景,可开箱即用
- @tutorial https://www.uviewui.com/components/swiper.html
- @property {Array} list 轮播图数据,见官网"基本使用"说明
- @property {Boolean} title 是否显示标题文字,需要配合list参数,见官网说明(默认false)
- @property {String} mode 指示器模式,见官网说明(默认round)
- @property {String Number} height 轮播图组件高度,单位rpx(默认250)
- @property {String} indicator-pos 指示器的位置(默认bottomCenter)
- @property {Boolean} effect3d 是否开启3D效果(默认false)
- @property {Boolean} autoplay 是否自动播放(默认true)
- @property {String Number} interval 自动轮播时间间隔,单位ms(默认2500)
- @property {Boolean} circular 是否衔接播放,见官网说明(默认true)
- @property {String} bg-color 背景颜色(默认#f3f4f6)
- @property {String Number} border-radius 轮播图圆角值,单位rpx(默认8)
- @property {Object} title-style 自定义标题样式
- @property {String Number} effect3d-previous-margin mode = true模式的情况下,激活项与前后项之间的距离,单位rpx(默认50)
- @property {String} img-mode 图片的裁剪模式,详见image组件裁剪模式(默认aspectFill)
- @event {Function} click 点击轮播图时触发
- @example
/
<u-cell-group
/*
- cellGroup 单元格父组件Group
- @description cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。搭配u-cell-item
- @tutorial https://www.uviewui.com/components/cell.html
- @property {String} title 分组标题
- @property {Boolean} border 是否显示外边框(默认true)
- @property {Object} title-style 分组标题的的样式,对象形式,如{‘font-size‘: ‘24rpx‘} 或 {‘fontSize‘: ‘24rpx‘}
- @example
/
<u-cell-item
/*
- cellItem 单元格Item
- @description cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。搭配u-cell-group使用
- @tutorial https://www.uviewui.com/components/cell.html
- @property {String} title 左侧标题
- @property {String} icon 左侧图标名,只支持uView内置图标,见Icon 图标
- @property {Object} icon-style 左边图标的样式,对象形式
- @property {String} value 右侧内容
- @property {String} label 标题下方的描述信息
- @property {Boolean} border-bottom 是否显示cell的下边框(默认true)
- @property {Boolean} border-top 是否显示cell的上边框(默认false)
- @property {Boolean} center 是否使内容垂直居中(默认false)
- @property {String} hover-class 是否开启点击反馈,none为无效果(默认true)
- // @property {Boolean} border-gap border-bottom为true时,Cell列表中间的条目的下边框是否与左边有一个间隔(默认true)
- @property {Boolean} arrow 是否显示右侧箭头(默认true)
- @property {Boolean} required 箭头方向,可选值(默认right)
- @property {Boolean} arrow-direction 是否显示左边表示必填的星号(默认false)
- @property {Object} title-style 标题样式,对象形式
- @property {Object} value-style 右侧内容样式,对象形式
- @property {Object} label-style 标题下方描述信息的样式,对象形式
- @property {String} bg-color 背景颜色(默认transparent)
- @property {String Number} index 用于在click事件回调中返回,标识当前是第几个Item
- @property {String Number} title-width 标题的宽度,单位rpx
- @example
/
<u-toast
/*
- toast 消息提示
- @description 此组件表现形式类似uni的uni.showToastAPI,但也有不同的地方。
- @tutorial https://www.uviewui.com/components/toast.html
- @property {String} z-index toast展示时的z-index值
- @event {Function} show 显示toast,如需一进入页面就显示toast,请在onReady生命周期调用
- @example
/
<u-empty
/*
- empty 内容为空
- @description 该组件用于需要加载内容,但是加载的第一页数据就为空,提示一个"没有内容"的场景, 我们精心挑选了十几个场景的图标,方便您使用。
- @tutorial https://www.uviewui.com/components/empty.html
- @property {String} color 文字颜色(默认#c0c4cc)
- @property {String} text 文字提示(默认“无内容”)
- @property {String} src 自定义图标路径,如定义,mode参数会失效
- @property {String Number} font-size 提示文字的大小,单位rpx(默认28)
- @property {String} mode 内置的图标,见官网说明(默认data)
- @property {String Number} img-width 图标的宽度,单位rpx(默认240)
- @property {String} img-height 图标的高度,单位rpx(默认auto)
- @property {String Number} margin-top 组件距离上一个元素之间的距离(默认0)
- @property {Boolean} show 是否显示组件(默认true)
- @event {Function} click 点击组件时触发
- @event {Function} close 点击关闭按钮时触发
- @example
/
<u-icon
/*
- icon 图标
- @description 基于字体的图标集,包含了大多数常见场景的图标。
- @tutorial https://www.uviewui.com/components/icon.html
- @property {String} name 图标名称,见示例图标集
- @property {String} color 图标颜色(默认inherit)
- @property {String | Number} size 图标字体大小,单位rpx(默认32)
- @property {String | Number} label-size label字体大小,单位rpx(默认28)
- @property {String} label 图标右侧的label文字(默认28)
- @property {String} label-pos label文字相对于图标的位置,只能right或bottom(默认right)
- @property {String} label-color label字体颜色(默认#606266)
- @property {Object} custom-style icon的样式,对象形式
- @property {String} custom-prefix 自定义字体图标库时,需要写上此值
- @property {String | Number} margin-left label在右侧时与图标的距离,单位rpx(默认6)
- @property {String | Number} margin-top label在下方时与图标的距离,单位rpx(默认6)
- @property {String | Number} margin-bottom label在上方时与图标的距离,单位rpx(默认6)
- @property {String | Number} margin-right label在左侧时与图标的距离,单位rpx(默认6)
- @property {String} label-pos label相对于图标的位置,只能right或bottom(默认right)
- @property {String} index 一个用于区分多个图标的值,点击图标时通过click事件传出
- @property {String} hover-class 图标按下去的样式类,用法同uni的view组件的hover-class参数,详情见官网
- @property {String} width 显示图片小图标时的宽度
- @property {String} height 显示图片小图标时的高度
- @property {String} top 图标在垂直方向上的定位
- @event {Function} click 点击图标时触发
- @example
/
<u-calendar
/*
- calendar 日历
- @description 此组件用于单个选择日期,范围选择日期等,日历被包裹在底部弹起的容器中。
- @tutorial http://uviewui.com/components/calendar.html
- @property {String} mode 选择日期的模式,date-为单个日期,range-为选择日期范围
- @property {Boolean} v-model 布尔值变量,用于控制日历的弹出与收起
- @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
- @property {Boolean} change-year 是否显示顶部的切换年份方向的按钮(默认true)
- @property {Boolean} change-month 是否显示顶部的切换月份方向的按钮(默认true)
- @property {String Number} max-year 可切换的最大年份(默认2050)
- @property {String Number} min-year 最小可选日期(默认1950)
- @property {String Number} min-date 可切换的最小年份(默认1950-01-01)
- @property {String Number} max-date 最大可选日期(默认当前日期)
- @property {String Number} 弹窗顶部左右两边的圆角值,单位rpx(默认20)
- @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭日历(默认true)
- @property {String} month-arrow-color 月份切换按钮箭头颜色(默认#606266)
- @property {String} year-arrow-color 年份切换按钮箭头颜色(默认#909399)
- @property {String} color 日期字体的默认颜色(默认#303133)
- @property {String} active-bg-color 起始/结束日期按钮的背景色(默认#2979ff)
- @property {String Number} z-index 弹出时的z-index值(默认10075)
- @property {String} active-color 起始/结束日期按钮的字体颜色(默认#ffffff)
- @property {String} range-bg-color 起始/结束日期之间的区域的背景颜色(默认rgba(41,121,255,0.13))
- @property {String} range-color 选择范围内字体颜色(默认#2979ff)
- @property {String} start-text 起始日期底部的提示文字(默认 ‘开始‘)
- @property {String} end-text 结束日期底部的提示文字(默认 ‘结束‘)
- @property {String} btn-type 底部确定按钮的主题(默认 ‘primary‘)
- @property {String} toolTip 顶部提示文字,如设置名为tooltip的slot,此参数将失效(默认 ‘选择日期‘)
- @property {Boolean} closeable 是否显示右上角的关闭图标(默认true)
- @example
*/
<u-select
/**
* select 列选择器
* @description 此选择器用于单列,多列,多列联动的选择场景。(从1.3.0版本起,不建议使用Picker组件的单列和多列模式,Select组件是专门为列选择而构造的组件,更简单易用。)
* @tutorial http://uviewui.com/components/select.html
* @property {String} mode 模式选择,"single-column"-单列模式,"mutil-column"-多列模式,"mutil-column-auto"-多列联动模式
* @property {Array} list 列数据,数组形式,见官网说明
* @property {Boolean} v-model 布尔值变量,用于控制选择器的弹出与收起
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
* @property {String} cancel-color 取消按钮的颜色(默认#606266)
* @property {String} confirm-color 确认按钮的颜色(默认#2979ff)
* @property {String} confirm-text 确认按钮的文字
* @property {String} cancel-text 取消按钮的文字
* @property {String} default-value 提供的默认选中的下标,见官网说明
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker(默认true)
* @property {String Number} z-index 弹出时的z-index值(默认10075)
* @property {String} value-name 自定义list数据的value属性名 1.3.6
* @property {String} label-name 自定义list数据的label属性名 1.3.6
* @property {String} child-name 自定义list数据的children属性名,只对多列联动模式有效 1.3.7
* @event {Function} confirm 点击确定按钮,返回当前选择的值
* @example
/
<u-swipe-action
/*
- swipeAction 左滑单元格
- @description 该组件一般用于左滑唤出操作菜单的场景,用的最多的是左滑删除操作。
- @tutorial https://www.uviewui.com/components/swipeAction.html
- @property {String} bg-color 整个组件背景颜色(默认#ffffff)
- @property {Array} options 数组形式,可以配置背景颜色和文字
- @property {String Number} index 标识符,点击时候用于区分点击了哪一个,用v-for循环时的index即可
- @property {String Number} btn-width 按钮宽度,单位rpx(默认180)
- @property {Boolean} disabled 是否禁止某个swipeAction滑动(默认false)
- @property {Boolean} show 打开或者关闭某个组件(默认false)
- @event {Function} click 点击组件时触发
- @event {Function} close 组件触发关闭状态时
- @event {Function} content-click 点击内容时触发
- @event {Function} open 组件触发打开状态时
- @example ...
/
<u-tr
/*
- table 表格
- @description 表格组件一般用于展示大量结构化数据的场景
- @tutorial https://www.uviewui.com/components/table.html
- @property {String} border-color 表格边框的颜色(默认#e4e7ed)
- @property {String} bg-color 表格的背景颜色(默认#ffffff)
- @property {String} align 单元格的内容对齐方式,作用类似css的text-align(默认center)
- @property {String} padding 单元格的内边距,同css的padding写法(默认10rpx 0)
- @property {String Number} font-size 单元格字体大小,单位rpx(默认28)
- @property {String} color 单元格字体颜色(默认#606266)
- @property {Object} th-style th单元格的样式,对象形式(将th所需参数放在table组件,是为了避免每一个th组件要写一遍)
- @event {Function} click 点击组件时触发
- @event {Function} close 点击关闭按钮时触发
- @example
/
/*
- tr 表格行标签
- @description 表格组件一般用于展示大量结构化数据的场景(搭配使用)
- @tutorial https://www.uviewui.com/components/table.html
- @example
/
/*
- td td单元格
- @description 表格组件一般用于展示大量结构化数据的场景(搭配u-table使用)
- @tutorial https://www.uviewui.com/components/table.html#td-props
- @property {String Number} width 单元格宽度百分比或者具体带单位的值,如30%, 200rpx等,一般使用百分比,单元格宽度默认为均分tr的长度(默认auto)
- @example 二年级
/
<u-card
/*
- card 卡片
- @description 卡片组件一般用于多个列表条目,且风格统一的场景
- @tutorial https://www.uviewui.com/components/line.html
- @property {Boolean} full 卡片与屏幕两侧是否留空隙(默认false)
- @property {String} title 头部左边的标题
- @property {String} title-color 标题颜色(默认#303133)
- @property {String | Number} title-size 标题字体大小,单位rpx(默认30)
- @property {String} sub-title 头部右边的副标题
- @property {String} sub-title-color 副标题颜色(默认#909399)
- @property {String | Number} sub-title-size 副标题字体大小(默认26)
- @property {Boolean} border 是否显示边框(默认true)
- @property {String | Number} index 用于标识点击了第几个卡片
- @property {String} box-shadow 卡片外围阴影,字符串形式(默认none)
- @property {String} margin 卡片与屏幕两边和上下元素的间距,需带单位,如"30rpx 20rpx"(默认30rpx)
- @property {String | Number} border-radius 卡片整体的圆角值,单位rpx(默认16)
- @property {Object} head-style 头部自定义样式,对象形式
- @property {Object} body-style 中部自定义样式,对象形式
- @property {Object} foot-style 底部自定义样式,对象形式
- @property {Boolean} head-border-bottom 是否显示头部的下边框(默认true)
- @property {Boolean} foot-border-top 是否显示底部的上边框(默认true)
- @property {Boolean} show-head 是否显示头部(默认true)
- @property {Boolean} show-head 是否显示尾部(默认true)
- @property {String} thumb 缩略图路径,如设置将显示在标题的左边,不建议使用相对路径
- @property {String | Number} thumb-width 缩略图的宽度,高等于宽,单位rpx(默认60)
- @property {Boolean} thumb-circle 缩略图是否为圆形(默认false)
- @event {Function} click 整个卡片任意位置被点击时触发
- @event {Function} head-click 卡片头部被点击时触发
- @event {Function} body-click 卡片主体部分被点击时触发
- @event {Function} foot-click 卡片底部部分被点击时触发
- @example
*/
uview常用标签
原文:https://www.cnblogs.com/sjj33sda/p/13959232.html