首页 > 其他 > 详细

uview常用标签

时间:2020-11-11 18:00:06      阅读:955      评论:0      收藏:0      [点我收藏+]

<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 用于
    组件,点击分别会触发 组件的 submit/reset 事件
  • @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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!