提交 6cd08ba1 编写于 作者: DCloud_JSON's avatar DCloud_JSON

测试发布功能

上级 6d17755f
unpackage/
.hbuilderx
node_modules
.DS_Store
uni_modules_tools/copy
package-lock.json
uni_modules_tools
uni_modules.config.json
\ No newline at end of file
## 1.0.46(2021-08-05)
测试发布功能
## 1.0.45(2021-08-05)
默认首页为nvue页面+fast
## 1.0.44(2021-08-05)
......
{
"id": "uni-starter",
"displayName": "uni-starter",
"version": "1.0.45",
"version": "1.0.46",
"description": "云端一体应用快速开发基本项目模版",
"keywords": [
"login",
......
......@@ -393,17 +393,30 @@
/*修改边线粗细示例*/
/* #ifndef APP-NVUE */
.center-list ::v-deep .uni-list--border:after {
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
margin-left: 80rpx;
}
.center-list ::v-deep .uni-list--border-top,
.center-list ::v-deep .uni-list--border-bottom {
display: none;
}
/* #ifndef APP-NVUE */
/* #ifdef VUE2 */
.center-list ::v-deep .uni-list--border:after{
/* #endif */
/* #ifdef VUE3 */
.center-list :deep(.uni-list--border:after){
/* #endif */
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
margin-left: 80rpx;
}
/* #ifdef VUE2 */
.center-list ::v-deep .uni-list--border-top,
.center-list ::v-deep .uni-list--border-bottom{
/* #endif */
/* #ifdef VUE3 */
.center-list :deep(.uni-list--border-top),
.center-list :deep(.uni-list--border-bottom){
/* #endif */
display: none;
}
/* #endif */
.item-footer {
......
## 1.0.2(2021-05-20)
修复IOS提示不准确,无摄像头权限提示了无法访问相册
## 1.0.1(2021-05-20)
新增文档和示例代码
## 1.0.0(2021-05-20)
......
......@@ -31,8 +31,8 @@ export default function(){
console.log('e.errMsg === 2 ios无法拍照权限 ');
// 注:e.errCode === 8 ios无从相册选择图片的权限 api已内置无需自己用拦截器实现
uni.showModal({
title: "无法访问相册",
content: "当前无系统相册访问权限,建议前往设置",
title: "无法访问摄像头",
content: "当前无摄像头访问权限,建议前往设置",
confirmText: "前往设置",
success(e) {
if (e.confirm) {
......
{
"id": "json-interceptor-chooseImage",
"displayName": "拦截器应用示例:图片选择api时无权限,引导用户快捷打开系统设置",
"version": "1.0.1",
"description": "拦截器应用示例:图片选择api时无权限,引导用户快捷打开系统设置",
"displayName": "拦截器应用示例 — 图片选择",
"version": "1.0.2",
"description": "当选择图片遇到权限问题时引导用户快捷打开系统设置",
"keywords": [
"interceptor,拦截器,相册权限"
],
......
## 1.4.1(2021-08-05)
- 修复 弹出层被 tabbar 遮盖 bug
## 1.4.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.3.16(2021-05-12)
- 新增 组件示例地址
## 1.3.15(2021-02-04)
- 调整为uni_modules目录规范
## 1.3.16(2021-05-12)
- 新增 组件示例地址
## 1.3.15(2021-02-04)
- 调整为uni_modules目录规范
......@@ -344,7 +344,7 @@
.uni-calendar--fixed {
position: fixed;
bottom: 0;
bottom: calc(var(--window-bottom));
left: 0;
right: 0;
transition-property: transform;
......
{
"id": "uni-calendar",
"displayName": "uni-calendar 日历",
"version": "1.4.0",
"description": "日历组件",
"keywords": [
"uni-ui",
"uniui",
"日历",
"",
"打卡",
"日历选择"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
{
"id": "uni-calendar",
"displayName": "uni-calendar 日历",
"version": "1.4.1",
"description": "日历组件",
"keywords": [
"uni-ui",
"uniui",
"日历",
"",
"打卡",
"日历选择"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "u"
}
}
}
}
}
\ No newline at end of file
## 2.0.17(2021-08-04)
- 修复 范围选未正确显示当前值的 bug
- 修复 h5 平台(移动端)报错 'cale' of undefined 的 bug
## 2.0.16(2021-07-21)
- 新增 return-type 属性支持f返回 date 日期对象
- 新增 return-type 属性支持返回 date 日期对象
## 2.0.15(2021-07-14)
- 修复 单选日期类型,初始赋值后不在当前日历的 bug
- 新增 clearIcon 属性,显示框的清空按钮可配置显示隐藏(仅 pc 有效)
......
......@@ -221,6 +221,7 @@
date: {
immediate: true,
handler(newVal, oldVal) {
if (!this.range)
setTimeout(() => {
this.init(newVal)
}, 100)
......
......@@ -167,8 +167,8 @@
},
visible: false,
popup: false,
popover: null,
isEmitValue: false,
popover: null,
isEmitValue: false,
isPhone: false,
iconBase64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAACVklEQVRoge2Zv2vTQRTAP4oWJQQskmolBAnSQVMcSxbp4ubmIEWETu0oIjg5iIOgpLNunfQfMHToUgpOVgfRqRAL4q8WRLQVq4sOdyHPL9/7evfNJReS+8DB433v7r37fl/eu9xBJBKUB0BLt+uDaOOQZb8SUNXyuKuRftg46NeXcBww6M8AC0ANOAycAyb1s7e6+SbNxi/gBfAQ2HadcA7YB/4MUPsKzLos4jzwewAcNy3mhMnx5I/9BiqUAD4DDWAXmAfqWt8Enlq+GBfSbEwAt4AicAxYBO7aTPaGzhu4KvTLQn/Hh9cpmGzcFvqmaXAyaxWE/MGTg93yXsgFUyfbOrJCJ2s8y+tRP21s0fmMTlmih8zT8WnN1GloCmJWaF0CpvrlSAb1/3fJXshNT470hZEIrZeoahqaU8BZ10Exa4XGtiCaKKL+EIHaMX8U81ZEP7ntrwi7n4CfWi7p+UCFdFdh7Rpaps9+mn93rjY2THut0QqtoVlIkpi1QjNyCzEdnl0W+idCXxb6VmKudaGfsbBhRbcHdEWhf5eYt0o6FVR6BjhqYcOKoQkt2y/SAB5rWVbpVeCilmUl3hb6JNeAI1p+ZWEjFzH9hsY2tEwHdHX9DGATWNLyceCeGL/YhY+58LWhy9o0uhJDKw3T4dlr4L6WZab5JvRBGJqs9UPI5R44lQfpx56pUzK0NlA3R6AK1Engu1+/nGhfK7R5bjtwGnXdFfpSJ6190Quz5grqQCC048lFXMhy2nQZWkUVsRowZv8OvLOPCvdHwE5APyKRSMQzfwE22DtT3T5PPwAAAABJRU5ErkJggg=='
}
......@@ -217,10 +217,10 @@
disabled: {
type: [Boolean],
default: false
},
clearIcon: {
type: [Boolean],
default: true
},
clearIcon: {
type: [Boolean],
default: true
}
},
watch: {
......@@ -239,10 +239,10 @@
},
value: {
immediate: true,
handler(newVal, oldVal) {
if (this.isEmitValue) {
this.isEmitValue = false
return
handler(newVal, oldVal) {
if (this.isEmitValue) {
this.isEmitValue = false
return
}
this.initPicker(newVal)
}
......@@ -305,68 +305,70 @@
// todo
return this.isRange ? 653 : 301
}
},
mounted() {
this.platform()
},
methods: {
initPicker(newVal){
if (!newVal || Array.isArray(newVal) && !newVal.length) {
this.$nextTick(() => {
mounted() {
this.platform()
},
methods: {
initPicker(newVal) {
if (!newVal || Array.isArray(newVal) && !newVal.length) {
this.$nextTick(() => {
this.clear(false)
})
return
}
if (!Array.isArray(newVal) && !this.isRange) {
const {
defDate,
defTime
} = this.parseDate(newVal)
this.singleVal = defDate
this.tempSingleDate = defDate
this.defSingleDate = defDate
if (this.hasTime) {
this.singleVal = defDate + ' ' + defTime
this.time = defTime
}
} else {
const [before, after] = newVal
if (!before && !after) return
const defBefore = this.parseDate(before)
const defAfter = this.parseDate(after)
const startDate = defBefore.defDate
const endDate = defAfter.defDate
this.range.startDate = this.tempRange.startDate = startDate
this.range.endDate = this.tempRange.endDate = endDate
setTimeout(() => {
if (startDate && endDate) {
if (this.diffDate(startDate, endDate) < 30) {
this.$refs.right.next()
}
} else {
this.$refs.right.next()
this.$refs.right.cale.lastHover = false
}
}, 100)
if (this.hasTime) {
this.range.startDate = defBefore.defDate + ' ' + defBefore.defTime
this.range.endDate = defAfter.defDate + ' ' + defAfter.defTime
this.tempRange.startTime = defBefore.defTime
this.tempRange.endTime = defAfter.defTime
}
const defaultRange = {
before: defBefore.defDate,
after: defAfter.defDate
}
this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, defaultRange, {
which: 'right'
})
this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, defaultRange, {
which: 'left'
})
}
return
}
if (!Array.isArray(newVal) && !this.isRange) {
const {
defDate,
defTime
} = this.parseDate(newVal)
this.singleVal = defDate
this.tempSingleDate = defDate
this.defSingleDate = defDate
if (this.hasTime) {
this.singleVal = defDate + ' ' + defTime
this.time = defTime
}
} else {
const [before, after] = newVal
if (!before && !after) return
const defBefore = this.parseDate(before)
const defAfter = this.parseDate(after)
const startDate = defBefore.defDate
const endDate = defAfter.defDate
this.range.startDate = this.tempRange.startDate = startDate
this.range.endDate = this.tempRange.endDate = endDate
if (!this.isPhone) {
setTimeout(() => {
if (startDate && endDate) {
if (this.diffDate(startDate, endDate) < 30) {
this.$refs.right.next()
}
} else {
this.$refs.right.next()
this.$refs.right.cale.lastHover = false
}
}, 100)
}
if (this.hasTime) {
this.range.startDate = defBefore.defDate + ' ' + defBefore.defTime
this.range.endDate = defAfter.defDate + ' ' + defAfter.defTime
this.tempRange.startTime = defBefore.defTime
this.tempRange.endTime = defAfter.defTime
}
const defaultRange = {
before: defBefore.defDate,
after: defAfter.defDate
}
this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, defaultRange, {
which: 'right'
})
this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, defaultRange, {
which: 'left'
})
}
},
updateLeftCale(e) {
const left = this.$refs.left
......@@ -380,15 +382,15 @@
right.cale.setHoverMultiple(e.after)
right.setDate(this.$refs.right.nowDate.fullDate)
},
platform(){
const systemInfo = uni.getSystemInfoSync()
this.isPhone = systemInfo.windowWidth <= 500
this.windowWidth = systemInfo.windowWidth
platform() {
const systemInfo = uni.getSystemInfoSync()
this.isPhone = systemInfo.windowWidth <= 500
this.windowWidth = systemInfo.windowWidth
},
show(event) {
if (this.disabled) {
return
}
}
this.platform()
if (this.isPhone) {
this.$refs.mobile.open()
......@@ -402,43 +404,43 @@
if (this.windowWidth - rect.left < this.datePopupWidth) {
this.popover.right = 0
}
}).exec()
}).exec()
setTimeout(() => {
this.popup = !this.popup
this.popup = !this.popup
}, 20)
},
close() {
close() {
setTimeout(() => {
this.popup = false
this.$emit('maskClick', this.value)
}, 20)
},
setEmit(value) {
setEmit(value) {
if (this.returnType === "timestamp" || this.returnType === "date") {
if (!Array.isArray(value)) {
if (!this.hasTime) {
value = value + ' ' + '00:00:00'
}
value = this.createTimestamp(value)
if (this.returnType === "date") {
value = new Date(value)
}
value = this.createTimestamp(value)
if (this.returnType === "date") {
value = new Date(value)
}
} else {
if (!this.hasTime) {
value[0] = value[0] + ' ' + '00:00:00'
value[1] = value[1] + ' ' + '00:00:00'
}
value[0] = this.createTimestamp(value[0])
value[1] = this.createTimestamp(value[1])
if (this.returnType === "date") {
value[0] = new Date(value[0])
value[1] = new Date(value[1])
value[1] = this.createTimestamp(value[1])
if (this.returnType === "date") {
value[0] = new Date(value[0])
value[1] = new Date(value[1])
}
}
}
this.$emit('change', value)
this.$emit('input', value)
this.$emit('input', value)
this.isEmitValue = true
},
createTimestamp(date) {
......@@ -592,8 +594,12 @@
clear(needEmit = true) {
if (!this.isRange) {
this.singleVal = ''
this.$refs.pcSingle.calendar.fullDate = ''
this.$refs.pcSingle.setDate()
if (this.isPhone) {
this.defSingleDate = ''
} else {
this.$refs.pcSingle.calendar.fullDate = ''
this.$refs.pcSingle.setDate()
}
if (needEmit) {
this.$emit('change', '')
this.$emit('input', '')
......@@ -602,17 +608,28 @@
this.range.startDate = ''
this.range.endDate = ''
this.tempRange = {}
this.$refs.left.cale.multipleStatus.before = ''
this.$refs.left.cale.multipleStatus.after = ''
this.$refs.left.cale.multipleStatus.data = []
this.$refs.left.cale.lastHover = false
this.$refs.left.setDate()
this.$refs.right.cale.multipleStatus.before = ''
this.$refs.right.cale.multipleStatus.after = ''
this.$refs.right.cale.multipleStatus.data = []
this.$refs.right.cale.lastHover = false
this.$refs.right.setDate()
this.$refs.right.next()
if (this.isPhone) {
this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, {
before: '',
after: '',
data: [],
fulldate: ''
}, {
which: 'left'
})
} else {
this.$refs.left.cale.multipleStatus.before = ''
this.$refs.left.cale.multipleStatus.after = ''
this.$refs.left.cale.multipleStatus.data = []
this.$refs.left.cale.lastHover = false
this.$refs.left.setDate()
this.$refs.right.cale.multipleStatus.before = ''
this.$refs.right.cale.multipleStatus.after = ''
this.$refs.right.cale.multipleStatus.data = []
this.$refs.right.cale.lastHover = false
this.$refs.right.setDate()
this.$refs.right.next()
}
if (needEmit) {
this.$emit('change', [])
this.$emit('input', [])
......@@ -682,7 +699,7 @@
position: relative;
}
.uni-date-editor--x:hover .uni-date__icon-clear {
.uni-date-editor--x .uni-date__icon-clear {
position: absolute;
top: 5px;
right: 0;
......@@ -695,10 +712,6 @@
/* #endif */
}
.uni-date__icon-clear {
display: none;
}
.uni-date__input {
height: 40px;
width: 100%;
......
{
"id": "uni-datetime-picker",
"displayName": "uni-datetime-picker 日期选择器",
"version": "2.0.16",
"version": "2.0.17",
"description": "uni-datetime-picker 日期时间选择器,支持日历,支持范围选择",
"keywords": [
"uni-datetime-picker",
......@@ -78,6 +78,10 @@
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "u"
}
}
}
......
<template>
<view class="uni-field" :class="{ 'uni-border-top': borderTop, 'uni-border-bottom': borderBottom }" :style="[fieldStyle]">
<view class="uni-field-inner" :class="[type == 'textarea' ? 'uni-textarea-inner' : '', 'uni-label-postion-' + labelPos]">
<view :class="errorTop ? 'uni-error-in-label' : ''">
<view class="uni-field-label" :class="[required ? 'uni-required' : '']" :style="{
justifyContent: justifyContent,
width: labelWid + 'px',
marginBottom: labelMarginBottom
}">
<view class="uni-icon-wrap" v-if="leftIcon">
<uni-icons size="16" :type="leftIcon" :color="iconColor" />
</view>
<slot name="leftIcon"></slot>
<text class="uni-label-text" :class="[leftIcon ? 'uni-label-left-gap' : '']">{{ label }}</text>
</view>
<view v-if="errorTop" class="uni-error-message" :style="{ paddingLeft: '4px' }">{{ msg }}</view>
</view>
<view class="fild-body" :class="[inputBorder ? 'uni-input-border' : '']" :style="[borderEixstTextareaStyle]">
<view class="uni-flex-1 uni-flex" :style="[inputWrapStyle]">
<textarea v-if="type == 'textarea'" class="uni-flex-1 uni-textarea-class" :name="name" :value="value" :placeholder="placeholder"
:placeholderStyle="placeholderStyle" :disabled="disabled" :maxlength="inputMaxlength" :focus="focus" :autoHeight="autoHeight"
@input="onInput" @blur="onBlur" @focus="onFocus" @confirm="onConfirm" @tap="fieldClick" />
<input
v-else
:type="type"
class="uni-flex-1 uni-field__input-wrap"
:name="name"
:value="value"
:password="password || this.type === 'password'"
:placeholder="placeholder"
:placeholderStyle="placeholderStyle"
:disabled="disabled"
:maxlength="inputMaxlength"
:focus="focus"
:confirmType="confirmType"
@focus="onFocus"
@blur="onBlur"
@input="onInput"
@confirm="onConfirm"
@tap="fieldClick"
/>
<uni-icons :size="clearSize" v-if="clearable && value != ''" type="clear" color="#c0c4cc" @click="onClear" class="uni-clear-icon" />
</view>
<view class="uni-button-wrap"><slot name="right" /></view>
<uni-icons v-if="rightIcon" size="16" @click="rightIconClick" :type="rightIcon" color="#c0c4cc" :style="[rightIconStyle]" />
</view>
</view>
<view
v-if="errorBottom"
class="uni-error-message"
:style="{
paddingLeft: Number(labelWid) + 4 + 'px'
}"
>
{{ msg }}
</view>
</view>
</template>
<script>
/**
* Field 输入框
* @description 此组件可以实现表单的输入与校验,包括 "text" 和 "textarea" 类型。
* @tutorial https://ext.dcloud.net.cn/plugin?id=21001
* @property {String } type 输入框的类型(默认text)
* @property {Boolean} required 是否必填,左边您显示红色"*"号(默认false)
* @property {String } leftIcon label左边的图标,限uni-ui的图标名称
* @property {String } iconColor 左边通过icon配置的图标的颜色(默认#606266)
* @property {Boolean} rightIcon 输入框右边的图标名称,限uni-ui的图标名称(默认false)
* @property {String } label 输入框左边的文字提示
* @property {Number } labelWidth label的宽度,单位px(默认65)
* @property {String } labelAlign label的文字对齐方式(默认left)
* @property {String } labelPosition label的文字的位置(默认left)
* @property {Boolean} clearable 是否显示右侧清空内容的图标控件(输入框有内容,且获得焦点时才显示),点击可清空输入框内容(默认true)
* @property {String } placeholder 输入框的提示文字
* @property {String } placeholderStyle placeholder的样式(内联样式,字符串),如"color: #ddd"
* @property {Boolean} password 是否密码输入方式(用点替换文字),type为text时有效(默认false)
* @property {Boolean} focus 是否自动获得焦点(默认false)
* @property {Boolean} disabled 是否不可输入(默认false)
* @property {Number } maxlength 最大输入长度,设置为 -1 的时候不限制最大长度(默认140)
* @property {String } confirmType 设置键盘右下角按钮的文字,仅在type="text"时生效(默认done)
* @property {String } errorMessage 显示的错误提示内容,如果为空字符串或者false,则不显示错误信息
* @property {Number } clearSize 清除图标的大小,单位px(默认15)
* @property {Boolean} trim 是否自动去除两端的空格
* @property {String } name 表单域的属性名,在使用校验规则时必填
* @property {Array } rules 单行表单验证规则,接受一个数组
* @property {Boolean} inputBorder 是否显示input输入框的边框(默认false)
* @property {Boolean} border-bottom 是否显示field的下边框(默认true)
* @property {Boolean} border-top 是否显示field的上边框(默认false)
* @property {Boolean} auto-height 是否自动增高输入区域,type为textarea时有效(默认true)
* @event {Function} input 输入框内容发生变化时触发
* @event {Function} focus 输入框获得焦点时触发
* @event {Function} blur 输入框失去焦点时触发
* @event {Function} confirm 点击完成按钮时触发
* @event {Function} right-icon-click 通过right-icon生成的图标被点击时触发
* @event {Function} click 输入框被点击或者通过right-icon生成的图标被点击时触发,这样设计是考虑到传递右边的图标,一般都为需要弹出"picker"等操作时的场景,点击倒三角图标,理应发出此事件,见上方说明
* @example <uni-field v-model="mobile" label="手机号" required :error-message="errorMessage"></uni-field>
*/
export default {
name: 'uni-field',
props: {
// rules:{
// type:Array,
// default(){
// return []
// }
// },
trigger: {
type: String,
default: ''
},
leftIcon: String,
rightIcon: String,
required: Boolean,
label: String,
password: Boolean,
clearable: {
type: Boolean,
default: true
},
// 左边标题的宽度单位px
labelWidth: {
type: [Number, String],
default: ''
},
// 对齐方式,left|center|right
labelAlign: {
type: String,
default: ''
},
iconColor: {
type: String,
default: '#606266'
},
autoHeight: {
type: Boolean,
default: true
},
errorMessage: {
type: [String, Boolean],
default: ''
},
placeholder: String,
placeholderStyle: String,
focus: Boolean,
name: String,
value: [Number, String],
type: {
type: String,
default: 'text'
},
disabled: {
type: Boolean,
default: false
},
maxlength: {
type: [Number, String],
default: 140
},
confirmType: {
type: String,
default: 'done'
},
// lable的位置,可选为 left-左边,top-上边
labelPosition: {
type: String,
default: ''
},
// 清除按钮的大小
clearSize: {
type: [Number, String],
default: 15
},
// 是否显示 input 边框
inputBorder: {
type: Boolean,
default: false
},
// 是否显示上边框
borderTop: {
type: Boolean,
default: false
},
// 是否显示下边框
borderBottom: {
type: Boolean,
default: true
},
// 是否自动去除两端的空格
trim: {
type: Boolean,
default: true
}
},
data() {
return {
focused: false,
itemIndex: 0,
errorTop: false,
errorBottom: false,
labelMarginBottom: '',
errorWidth: '',
errMsg: '',
errorBorderColor: false,
val: '',
labelPos: '',
labelWid: '',
labelAli: ''
};
},
computed: {
msg() {
return this.errorMessage || this.errMsg;
},
fieldStyle() {
let style = {};
if (this.labelPos === 'top') {
style.padding = '10px 14px';
this.labelMarginBottom = '6px';
}
if (this.labelPos === 'left' && this.msg !== false && this.msg !== '') {
style.paddingBottom = '0px';
this.errorBottom = true;
this.errorTop = false;
} else if (this.labelPos === 'top' && this.msg !== false && this.msg !== '') {
this.errorBottom = false;
this.errorTop = true;
} else {
// style.paddingBottom = ''
this.errorTop = false;
this.errorBottom = false;
}
return style;
},
borderEixstTextareaStyle() {
let style = {};
if (this.inputBorder) {
if (this.type === 'textarea') {
style.minHeight = '60px';
}
if (this.msg !== false && this.msg != '') {
style.borderColor = '#dd524d';
}
}
return style;
},
inputWrapStyle() {
let style = {};
// 判断lable的位置,如果是left的话,让input左边两边有间隙
if (this.labelPos == 'left') {
style.margin = `0 4px`;
} else {
// 如果lable是top的,input的左边就没必要有间隙了
style.marginRight = `4px`;
// this.fieldStyle.style.padding = '10px 14px'
}
return style;
},
rightIconStyle() {
let style = {};
if (this.arrowDirection == 'top') style.transform = 'roate(-90deg)';
if (this.arrowDirection == 'bottom') style.transform = 'roate(90deg)';
else style.transform = 'roate(0deg)';
return style;
},
labelStyle() {
let style = {};
if (this.labelAli == 'left') style.justifyContent = 'flext-start';
if (this.labelAli == 'center') style.justifyContent = 'center';
if (this.labelAli == 'right') style.justifyContent = 'flext-end';
return style;
},
// uni不支持在computed中写style.justifyContent = 'center'的形式,故用此方法
justifyContent() {
if (this.labelAli == 'left') return 'flex-start';
if (this.labelAli == 'center') return 'center';
if (this.labelAli == 'right') return 'flex-end';
},
// 因为uniapp的input组件的maxlength组件必须要数值,这里转为数值,给用户可以传入字符串数值
inputMaxlength() {
return Number(this.maxlength);
},
// label的位置
fieldInnerStyle() {
let style = {};
if (this.labelPos == 'left') {
style.flexDirection = 'row';
} else {
style.flexDirection = 'column';
}
return style;
}
},
watch: {
trigger(trigger) {
this.formTrigger = trigger;
}
},
created() {
this.form = this.getForm();
this.formRules = [];
this.formTrigger = this.trigger;
this.init();
},
methods: {
/**
* 初始化变量值
*/
init() {
if (this.form) {
this.form.childrens.push(this);
this.labelPos = this.labelPosition ? this.labelPosition : this.form.labelPosition;
this.labelWid = this.labelWidth ? this.labelWidth : this.form.labelWidth;
this.labelAli = this.labelAlign ? this.labelAlign : this.form.labelAlign;
if (this.form.formRules) {
this.formRules = this.form.formRules[this.name];
}
this.validator = this.form.validator;
if(this.name){
this.form.formData[this.name] = this.value || '';
}
} else {
this.labelPos = this.labelPosition || 'left';
this.labelWid = this.labelWidth || 65;
this.labelAli = this.labelAlign || 'left';
}
},
/**
* 获取父元素实例
*/
getForm() {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== 'uniForms') {
parent = parent.$parent;
if (!parent) return false;
parentName = parent.$options.name;
}
return parent;
},
/**
* 移除该表单项的校验结果
*/
clearValidate() {
this.errMsg = '';
},
/**
* 父组件处理函数
* @param {Object} callback
*/
parentVal(callback) {
if (this.type === 'number') {
this.val = this.val === '' ? this.val : Number(this.val);
}
typeof callback === 'function' &&
callback(
{
[this.name]: this.val
},
this.name
);
},
/**
* 触发校验
* @param {Object} trigger
* @param {Object} value
*/
triggerValidator(trigger, value) {
let isValid = false;
// 如果 name 不存在,则不开启校验
this.formRules &&
this.formRules.rules &&
this.formRules.rules.forEach(item => {
item.trigger = this.isTrigger(this.form.formTrigger, this.formTrigger, item.trigger);
if (item.trigger !== trigger || item.trigger === 'submit') return;
isValid = true;
});
isValid && this.triggerCheck(value);
},
/**
* 校验规则
* @param {Object} value
*/
triggerCheck(value, item) {
// 输入值为 number
if (this.type === 'number') {
value = value === '' ? value : Number(value);
}
const result = this.validator.validateUpdate({
[this.name]: value
});
this.errMsg = !result ? '' : result.errorMessage;
this.form.validateCheck(result);
},
/**
* 触发时机
* @param {Object} event
*/
isTrigger(parentRule, itemRlue, rule) {
let rl = 'none';
if (rule) {
rl = rule;
} else if (itemRlue) {
rl = itemRlue;
} else if (parentRule) {
rl = parentRule;
} else {
rl = 'blur';
}
return rl;
},
onInput(event) {
let value = event.detail.value;
// 判断是否去除空格
if (this.trim) value = this.trimStr(value);
this.form.formData[this.name] = value || '';
this.val = value;
this.$emit('input', value);
// 校验输入
this.triggerValidator('change', value);
},
onFocus(event) {
this.focused = true;
this.$emit('focus', event);
},
onBlur(event) {
let value = event.detail.value;
// 最开始使用的是监听图标@touchstart事件,自从hx2.8.4后,此方法在微信小程序出错
// 这里改为监听点击事件,手点击清除图标时,同时也发生了@blur事件,导致图标消失而无法点击,这里做一个延时
setTimeout(() => {
this.focused = false;
}, 100);
this.$emit('blur', event);
// 校验输入
this.triggerValidator('blur', value);
},
onConfirm(e) {
this.$emit('confirm', e.detail.value);
},
onClear(event) {
this.val = '';
this.$emit('input', '');
this.clearValidate();
},
rightIconClick() {
this.$emit('right-icon-click');
this.$emit('click');
},
fieldClick() {
this.$emit('click');
},
trimStr(str, pos = 'both') {
if (pos == 'both') {
return str.replace(/^\s+|\s+$/g, '');
} else if (pos == 'left') {
return str.replace(/^\s*/, '');
} else if (pos == 'right') {
return str.replace(/(\s*$)/g, '');
} else if (pos == 'all') {
return str.replace(/\s+/g, '');
} else {
return str;
}
}
}
};
</script>
<style lang="scss" scoped>
.uni-field {
padding: 16px 14px;
text-align: left;
color: #333;
font-size: 14px;
background-color: #fff;
}
.uni-field-inner {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
}
.uni-textarea-inner {
align-items: flex-start;
}
.uni-textarea-class {
/* #ifndef APP-NVUE */
min-height: 48px;
width: auto;
/* #endif */
font-size: 14px;
}
.fild-body {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
width: 100%;
flex: 1;
align-items: center;
}
.uni-arror-right {
margin-left: 4px;
}
.uni-label-text {
/* #ifndef APP-NVUE */
display: inline-block;
/* #endif */
}
.uni-label-left-gap {
margin-left: 3px;
}
.uni-label-postion-top {
flex-direction: column;
align-items: flex-start;
flex: 1;
}
.uni-field-label {
width: 65px;
/* #ifndef APP-NVUE */
display: flex;
flex: 1 1 65px;
/* #endif */
text-align: left;
position: relative;
align-items: center;
}
.uni-required::before {
/* #ifndef APP-NVUE */
content: '*';
/* #endif */
position: absolute;
left: -8px;
font-size: 14px;
color: $uni-color-error;
height: 9px;
line-height: 1;
}
.uni-field__input-wrap {
position: relative;
overflow: hidden;
font-size: 14px;
height: 24px;
flex: 1;
/* #ifndef APP-NVUE */
width: auto;
/* #endif */
}
.uni-clear-icon {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
}
.uni-error-message {
line-height: 12px;
padding-top: 2px;
padding-bottom: 2px;
color: $uni-color-error;
font-size: 12px;
text-align: left;
}
.uni-input-error-border {
border-color: $uni-color-error;
}
.placeholder-style {
color: rgb(150, 151, 153);
}
.uni-input-class {
font-size: 14px;
}
.uni-button-wrap {
margin-left: 4px;
}
/* start--Retina 屏幕下的 1px 边框--start */
.uni-border,
.uni-border-bottom,
.uni-border-left,
.uni-border-right,
.uni-border-top,
.uni-border-top-bottom {
position: relative;
}
.uni-border-bottom:after,
.uni-border-left:after,
.uni-border-right:after,
.uni-border-top-bottom:after,
.uni-border-top:after,
.uni-border:after {
/* #ifndef APP-NVUE */
content: ' ';
box-sizing: border-box;
pointer-events: none;
-webkit-transform-origin: 0 0;
/* #endif */
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
// 多加0.1%,能解决有时候边框缺失的问题
width: 199.8%;
height: 199.7%;
transform: scale(0.5, 0.5);
border: 0 solid $uni-border-color;
z-index: 2;
}
.uni-input-border {
padding-left: 4px;
border: 1px solid $uni-border-color;
border-radius: 6px;
/* #ifndef APP-NVUE */
min-height: 34px;
box-sizing: border-box;
/* #endif */
}
.uni-border-top:after {
border-top-width: 1px;
}
.uni-border-left:after {
border-left-width: 1px;
}
.uni-border-right:after {
border-right-width: 1px;
}
.uni-border-bottom:after {
border-bottom-width: 1px;
}
.uni-border-top-bottom:after {
border-width: 1px 0;
}
.uni-border:after {
border-width: 1px;
}
/* end--Retina 屏幕下的 1px 边框--end */
.uni-icon-wrap {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
padding-left: 3px;
padding-right: 3px;
align-items: center;
justify-content: center;
}
.uni-button-wrap {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: flex-end;
justify-content: center;
}
.uni-clear-icon {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
margin-left: 4px;
}
.uni-flex {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
}
.uni-flex-1 {
flex: 1;
}
.uni-error-in-label {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
</style>
{
"id": "uni-field",
"displayName": "Field 输入框",
"version": "1.0.0",
"description": "",
"keywords": [
""
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "u",
"aliyun": "u"
},
"client": {
"App": {
"app-vue": "u",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
### Field 输入框
输入框组件一般和表单控件 uni-form 配合使用,也可以单独使用,用于实现输入与校验,包括 "text" 和 "textarea" 类型,组件名:``uni-field``,代码块: uField。
### 平台差异说明
暂不支持在nvue页面中使用
### 组件使用注意事项
为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
- 组件需要依赖 `sass` 插件 ,请自行手动安装
- 组件校验需要依赖 `uni-forms` 组件的`forms-rule`属性,`uni-field` 组件暂时不支持单独校验内容
- 组件提供了右侧按钮的插槽,可传入 ``slot="right"``的标签或组件,例如发送验证码的按钮:``<button v-if="true" type="primary" slot="right" size="mini">发送验证码</button>``
- 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
### 使用方式
#### 方式1 (推荐)
`HBuilderX 2.5.5`起支持 `easycom` 组件模式。在使用 `uni-ui` 的时候,只要[`uni-ui` 组件](https://ext.dcloud.net.cn/plugin?id=55) 安装在项目的 `components` 目录下,并符合 `components/组件名称/组件名称.vue` 目录结构。就可以不用引用、注册,直接在页面中使用 `uni-ui` 组件
`easycom` 组件模式的好处在于不管 `components` 目录下安装了多少组件,`easycom` 打包后会自动剔除没有使用的组件,对组件库的使用尤为友好,组件库批量安装,随意使用,自动按需打包。 关于 `easycom` 更详细内容 [参考文档](https://uniapp.dcloud.io/collocation/pages?id=easycom)
#### 方式2(vue-cli)
**初始化项目**
如果是使用 `HBuiderX` 创建的项目,需先执行以下命令初始化:
```
npm init -y
```
**安装 uni-ui**
```
npm install @dcloudio/uni-ui -D
```
``script`` 中引用组件
```javascript
import uniField from '@/components/uni-field/uni-field.vue'
export default {
components: {uniField}
}
```
#### 方式3(vue-cli + easycom)
使用 `方式2` 安装好 `uni-ui` 之后,需要配置 `easycom` 规则,让 `npm` 安装的组件支持 `easycom`
打开项目根目录下的 `pages.json` 并添加 `easycom` 节点:
```javascript
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
// 其他内容
pages:[
// ...
]
}
```
### 基本用法
``template`` 中使用组件
```html
<uni-field
v-model="name"
label="姓名"
placeholder="请填写姓名"
:error-message="errorMessage"
/>
<uni-field
v-model="mobile"
label="手机号"
label-position="left"
placeholder="请填写手机号"
:error-message="errorMessage"
type="text"
:clearable="true"
>
<button v-if="true" type="primary" slot="right" size="mini">发送验证码</button>
</uni-field>
<uni-field
v-model="weixin"
label="微信号"
label-position="left"
placeholder="请填写微信号"
:required="false"
:focus="true"
type="text"
:clearable="true"
:password="false"
:disabled="false"
confirmType="good"
:error-message="errorMessage"
/>
```
### uni-field 属性说明
**uni-field 属性说明**
属性名 |类型 |默认值 |说明
:-: |:-: |:-: |:-:
type |String | text | 输入框的类型
required |Boolean| false | 是否必填,左边您显示红色"*"号
left-icon |String | - | label左边的图标,限uni-ui的图标名称
icon-color |String | #606266 | 左边通过icon配置的图标的颜色
right-icon |Boolean| false | 输入框右边的图标名称,限uni-ui的图标名称
label |String | - | 输入框左边的文字提示
label-width |Number | 65 | label的宽度,单位px
label-align |String | left | label的文字对齐方式
label-position |String | left | label的文字的位置
clearable |Boolean| true | 是否显示右侧清空内容的图标控件(输入框有内容,且获得焦点时显示),点击可清空输入框内容
placeholder |String | - | 输入框的提示文字
placeholder-style |String | - | placeholder的样式(内联样式,字符串),如color: #ddd"
password |Boolean| false | 是否密码输入方式(用点替换文字),type为text时有效
focus |Boolean| false | 是否自动获得焦点
disabled |Boolean| false | 是否不可输入
maxlength |Number | 140 | 最大输入长度,设置为 -1 的时候不限制最大长度
confirm-type |String | done | 设置键盘右下角按钮的文字,仅在type="text"时生效
clear-size |Number | 15 | 清除图标的大小,单位px
trim |Boolean| true | 是否自动去除两端的空格
name |String | - | 表单域的属性名,在使用校验规则时必填
input-border |Boolean| false | 是否显示input输入框的边框
border-bottom |Boolean| true | 是否显示field的下边框
border-top |Boolean| false | 是否显示field的上边框
auto-height |Boolean| true | 是否自动增高输入区域,type为textarea时有效
**uni-field 事件说明**
事件称名 |说明 | 返回参数
:-: |:-: | :-:
input | 输入框内容发生变化时触发 | value 输入的值
focus | 输入框获得焦点时触发 | event 获取焦点的事件对象
blur | 输入框失去焦点时触发 | event 失去焦点的事件对象
confirm | 点击完成按钮时触发 | value 输入的值
right-icon-click| 通过right-icon生成的图标被点击时触发 | -
click | 输入框被点击或者通过right-icon生成的图标被点击时触发 | -
**插槽**
名称 | 说明
:-: | :-:
leftIcon | 左侧插槽
right | 右侧插槽
## 0.0.33(2021-02-24)
uni-ui 工程
## 0.0.32(2021-02-24)
- 更新 read 2
## 0.0.31(2021-02-24)
- 同步 readme.md
{
"id": "uni-test",
"displayName": "Test 测试插件",
"version": "0.0.33",
"description": "测试插件 ",
"keywords": [
"test"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.1.3"
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [
"uni-badge",
"uni-calendar",
"uni-card",
"uni-collapse",
"uni-combox",
"uni-countdown",
"uni-data-checkbox",
"uni-data-picker",
"uni-dateformat",
"uni-datetime-picker",
"uni-drawer",
"uni-easyinput",
"uni-fab",
"uni-fav",
"uni-field",
"uni-file-picker",
"uni-forms",
"uni-goods-nav",
"uni-grid",
"uni-group",
"uni-icons",
"uni-indexed-list",
"uni-link",
"uni-list",
"uni-load-more",
"uni-nav-bar",
"uni-notice-bar",
"uni-number-box",
"uni-pagination",
"uni-popup",
"uni-rate",
"uni-row",
"uni-search-bar",
"uni-section",
"uni-segmented-control",
"uni-steps",
"uni-swipe-action",
"uni-swiper-dot",
"uni-table",
"uni-tag",
"uni-title",
"uni-transition"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "y",
"联盟": "y"
}
}
}
}
}
## DataCheckbox 数据驱动的单选复选框
> 代码块: `uDataCheckbox`
本组件是基于uni-app基础组件checkbox的封装。本组件要解决问题包括:
1. 数据绑定型组件:给本组件绑定一个data,会自动渲染一组候选内容。再以往,开发者需要编写不少代码实现类似功能
2. 自动的表单校验:组件绑定了data,且符合[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)组件的表单校验规范,搭配使用会自动实现表单校验
3. 本组件合并了单选多选
4. 本组件有若干风格选择,如普通的单选多选框、并列button风格、tag风格。开发者可以快速选择需要的风格。但作为一个封装组件,样式代码虽然不用自己写了,却会牺牲一定的样式自定义性
在uniCloud开发中,`DB Schema`中配置了enum枚举等类型后,在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中,会自动生成``uni-data-checkbox``组件并绑定好data
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ,请自行手动安装
> - 本组件为数据驱动,目的是快速投入使用,只可通过 style 覆盖有限样式,不支持自定义更多样式
> - 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
> - 组件支持 nvue ,需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"`
> - 如组件显示有问题 ,请升级 `HBuilderX` 为 `v3.1.0` 以上
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`
如需通过`npm`方式使用`uni-ui`组件,另行文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
设置 `localdata` 属性后,组件会通过数据渲染出对应的内容,默认显示的是单选框
需要注意 `:multiple="false"` 时(单选) , `value/v-model` 的值是 `String|Number` 类型
```html
<template>
<view>
<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: 0,
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 多选框
设置 `multiple` 属性,组件显示为多选框
需要注意 `:multiple="true"` 时(多选) , `value/v-model` 的值是 `Array` 类型
```html
<template>
<view>
<uni-data-checkbox multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: [0,2],
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 设置最大最小值
设置 `:multiple="true"` 时(多选) ,可以设置 `min``max` 属性
如果选中个数小于 `min` 属性设置的值,那么选中内容将不可取消,只有当选中个数大于等于 `min`且小于 `max` 时,才可取消选中
如果选中个数大于等于 `max` 属性设置的值,那么其他未选中内容将不可选
```html
<template>
<view>
<uni-data-checkbox min="1" max="2" multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: [0,2],
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 设置禁用
如果需要禁用某项,需要在 `localdata` 属性的数据源中添加 `disable` 属性,而不是在组件中添加 `disable` 属性
```html
<template>
<view>
<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: 0,
range: [{
"value": 0,
"text": "篮球"
},
{
"value": 1,
"text": "足球",
// 禁用当前项
"disable":true
},
{
"value": 2,
"text": "游泳"
}
]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 自定义选中颜色
设置 `selectedColor` 属性,可以修改组件选中后的图标及边框颜色
设置 `selectedTextColor` 属性,可以修改组件选中后的文字颜色,如不填写默认同 `selectedColor` 属性 ,`mode` 属性为 `tag` 时,默认为白色
```html
<template>
<view>
<uni-data-checkbox selectedColor="red" selectedTextColor="red" multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: [0,2],
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 更多模式
设置 `mode` 属性,可以设置更多显示样式,目前内置样式有四种 `default/list/button/tag`
如果需要禁用某项,需要在 `localdata` 属性的数据源中添加 `disable` 属性,而不是在组件中添加 `disable` 属性
```html
<template>
<view>
<!-- 默认 default -->
<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
<!-- 列表 list ,显示左侧图标 -->
<uni-data-checkbox mode="list" icon="left" v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
<!-- 列表 list ,显示右侧图标 -->
<uni-data-checkbox mode="list" icon="right" v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
<!-- 按钮 button -->
<uni-data-checkbox mode="button" v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
<!-- 标签 tag -->
<uni-data-checkbox mode="tag" v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: 0,
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
## API
### DataCheckbox Props
| 属性名 | 类型 |可选值 | 默认值| 说明 |
| :-: | :-: |:-: |:-: | :-: |
|value/v-model|Array/String/Number|- |- |默认值,multiple=true时为 Array类型,否则为 String或Number类型 |
|localdata |Array |- |- |本地渲染数据, |
|mode | String |default/list/button/tag|default|显示模式 |
|multiple |Boolean |- |false |是否多选 |
|min |String/Number |- |- |最小选择个数 ,multiple为true时生效 |
|max |String/Number |- |- |最大选择个数 ,multiple为true时生效 |
|wrap |Boolean |- |- |是否换行显示 |
|icon |String |left/right |left |list 列表模式下 icon 显示的位置 |
|selectedColor|String |- |#007aff|选中颜色|
|selectedTextColor|String |- |#333 |选中文本颜色,如不填写则自动显示|
#### Localdata Options
`localdata` 属性的格式为数组,数组内每项是对象,需要严格遵循如下格式
|属性名 | 说明 |
|:-: | :-: |
|text |显示文本 |
|value |选中后的值 |
|disable |是否禁用 |
#### Mode Options
|属性名 | 说明 |
|:-: | :-: |
|default |默认值,横向显示 |
|list |列表 |
|button |按钮 |
|tag |标签 |
### DataCheckbox Events
| 事件名 | 事件说明 | 返回参数|
| :-: | :-: | :-: |
| @chage| 选中状态改变时触发事件 | - |
......@@ -163,5 +163,5 @@
"template" : ""
},
"_spaceID" : "76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e",
"vueVersion" : "2"
"vueVersion" : "3"
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册