<template>
|
<view class="m-input-row" :class="{'after':after,'before':before}" :style="rowStyle">
|
<text v-if="title" class="m-title" :class="{'separate':separate}" :style="labelStyle">{{title}}</text>
|
<view class="m-input-view" :style="inputStyle">
|
<!-- hint 只读标签 -->
|
<template v-if="type==='hint'">
|
<scroll-view :style="{'width':showButton?'90%':'100%'}" class="scroll-view_H" scroll-x="true">
|
<view style="display: flex;">
|
<uni-icons v-if="hintIcons" :color="iconColor" :type="inputIcon" />
|
<text class="m-input"
|
:style="{'justify-content': tempalignment}">{{value.length<=0?placeholder:value}}</text>
|
</view>
|
</scroll-view>
|
</template>
|
<!-- numberbox 数字box -->
|
<template v-else-if="type==='numberbox'">
|
<view class="uni-numbox">
|
<view @click="calcValue('minus')" class="uni-numbox__minus">
|
<text class="uni-numbox--text"
|
:class="{ 'uni-numbox--disabled': value <= min || disabled }">-</text>
|
</view>
|
<input class="uni-numbox__value" :disabled="disabled" :focus="focus||thisFocus" type="number"
|
:value="value" :placeholder="placeholder" @input="onInput" @confirm="onConfirm"
|
@blur="onBlurNumberbox" :isFocusSelectAll="isFocusSelectAll" :selection-start="0" :selection-end="selectionEnd"></input>
|
<view @click="calcValue('plus')" class="uni-numbox__plus">
|
<text class="uni-numbox--text"
|
:class="{ 'uni-numbox--disabled': value >= max || disabled }">+</text>
|
</view>
|
</view>
|
<!-- 清空内容图标 -->
|
<uni-icons v-if="clearable&&value.length>0" type="clear" :color="iconColor" @click="clear" size="22">
|
</uni-icons>
|
</template>
|
<!-- checkbox 复选框 -->
|
<template v-else-if="type==='checkbox'">
|
<checkbox-group @change="checkboxChange">
|
<view class="radio-checkbox-content" v-for="(item, index) in temprange" :key="item[rangeKey]"
|
:style="radioOrCheckboxStyle">
|
<checkbox :value="item[rangeKey]" :checked="item.checked" />
|
<uni-notice-bar class="radio-checkbox-content-notice" :speed="30"
|
:scrollable="item[rangeVal].length>(8/columns)" :single="true" :text="item[rangeVal]"
|
@click="onNoticeClick('checkbox',index)" />
|
</view>
|
</checkbox-group>
|
</template>
|
<!-- radio 单选框 -->
|
<template v-else-if="type==='radio'">
|
<radio-group @change="radioChange">
|
<view class="radio-checkbox-content" style="display: flex;" v-for="(item, index) in temprange"
|
:key="item[rangeKey]" :style="radioOrCheckboxStyle">
|
<radio :value="item[rangeKey]" :checked="item.checked" />
|
<uni-notice-bar class="radio-checkbox-content-notice" :speed="30"
|
:scrollable="item[rangeVal].length>(8/columns)" :single="true" :text="item[rangeVal]"
|
@click="onNoticeClick('radio',index)" />
|
</view>
|
</radio-group>
|
</template>
|
<!-- switch 开关 -->
|
<template v-else-if="type==='switch'">
|
<switch :checked="switchResult" type="switch" @change="switchChange" />
|
<text style="font-size: 16px;" :style="{'color':switchResult?'#007aff':'#636363' }">
|
{{setSwitchResult}}
|
</text>
|
</template>
|
<!-- combox 下拉框 -->
|
<template v-else-if="type==='combox'">
|
<view class="uni-combox__input-box">
|
<uni-icons
|
v-if="verify && comboxValue['index']<0 && comboxValue['val'] && comboxValue['val'].length>0"
|
color="#ff0000" type="clear" size="5"></uni-icons>
|
<uni-icons v-if="verify && comboxValue['index']>=0" color="#00ff00" type="checkbox" size="5">
|
</uni-icons>
|
<text v-if="showValueKey">{{comboxValue['key']+(comboxValue['key']?':':'')}}</text>
|
<input class="uni-combox__input" :focus="focus||thisFocus" type="text"
|
:value="comboxValue['val']||''" :placeholder="placeholder" @input="onInputCombox"
|
@focus="onFocusCombox" @blur="onBlurCombox" @confirm="onConfirmCombox" />
|
<uni-icons v-if="clearable && (comboxValue['val'] && comboxValue['val'].length>0)"
|
:color="iconColor" type="clear" @click="clearCombox" size="22"></uni-icons>
|
<uni-icons v-if="!clearable || !comboxValue['val'] || comboxValue['val'].length <= 0"
|
:color="iconColor" class="uni-combox__input-arrow" type="arrowdown" size="22"
|
@click="toggleSelector"></uni-icons>
|
<view v-if="showSelector" class="uni-combox__selector" :style="{'background-color':selectorColor}">
|
<scroll-view scroll-y="true" scroll-x="true" class="uni-combox__selector-scroll">
|
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
|
<text>{{ emptyTips }}</text>
|
</view>
|
<view class="uni-combox__selector-item" :style="{'text-align':showSelectorAlign}"
|
v-for="(item, index) in filterCandidates" :key="index"
|
v-if="item[rangeKey] && item[rangeVal]" @click="onSelectorClick(index)">
|
<text>{{
|
(showSelectorKey?(item[rangeKey]) :"")+
|
(showSelectorVal?(showSelectorKey?":":"")+item[rangeVal]:"")
|
}}</text>
|
</view>
|
</scroll-view>
|
</view>
|
</view>
|
</template>
|
<!-- slot 自定义卡槽容器 -->
|
<template v-else-if="type==='slot'">
|
<scroll-view :style="{'width':showButton?'90%':'100%'}" class="scroll-view_H" scroll-x="true">
|
<view style="display: flex;">
|
<slot name="slot"></slot>
|
</view>
|
</scroll-view>
|
</template>
|
<!-- date 时间 -->
|
<template v-else-if="type==='date'">
|
<!-- 日期 -->
|
<picker v-if="isDate" :style="{'width':isTime?'50%':'100%'}" mode="date" :value="defaultDate"
|
fields="day" :start="startDate" :end="endDate" @change="bindDateChange">
|
<view class="m-input" style="padding-right:10px;">{{defaultDate}}</view>
|
</picker>
|
<!-- 时间 -->
|
<picker v-if="isTime" :style="{'width':isDate?'50%':'100%'}" mode="time" :value="defaultTime"
|
:start="start" :end="end" @change="bindTimeChange">
|
<view class="m-input">{{defaultTime}}</view>
|
</picker>
|
<!-- 清空内容图标 -->
|
<uni-icons v-if="clearable&&(value.length>0||defaultDateTime)" type="clear" :color="iconColor"
|
@click="clear" size="22"></uni-icons>
|
</template>
|
<!-- text password number 默认为input输入框 -->
|
<template v-else>
|
<input v-if="type!=='textarea'" class="m-input" :maxlength=-1 :focus="focus||thisFocus"
|
:type="inputType" :value="value" @input="onInput" @confirm="onConfirm" @focus="onFocusInput($event)" :isFocusSelectAll="isFocusSelectAll"
|
@blur="onBlurInput" :placeholder="placeholder" :password="type==='password'&&!showPassword"
|
:selection-start="0" :selection-end="selectionEnd"></input>
|
|
<textarea v-else :style="{'height':rowHeight}" class="m-input" :maxlength=-1 :focus="focus||thisFocus"
|
:value="value" @input="onInput" @confirm="onConfirm" @focus="onFocusInput($event)" @blur="onBlurInput"
|
:placeholder="placeholder"
|
:isFocusSelectAll="isFocusSelectAll" :selection-start="0" :selection-end="selectionEnd"></textarea>
|
|
<!-- 清空内容图标 -->
|
<uni-icons v-if="clearable&&!displayable&&value.length>0" type="clear" :color="iconColor" @click="clear"
|
size="22"></uni-icons>
|
<!-- 密码小眼睛图标 -->
|
<uni-icons v-if="displayable" :style="{color:showPassword?'#666666':'#cccccc'}" type="eye"
|
@click="display" size="22"></uni-icons>
|
<!-- 扫描图标 -->
|
<uni-icons v-if="canScan&&(!clearable|| value.length<=0)" type="scan" :color="iconColor" size="22"
|
@click="scan" />
|
</template>
|
<!-- 输入框按钮 -->
|
<uni-icons v-if="showButton && buttonVal.length<=0" :color="iconColor" :type="buttonIcon" size="22"
|
@click="buttonClick"></uni-icons>
|
<button v-if="showButton && buttonVal.length>0" class="rightButton" :type="buttonType" size="mini"
|
:style="buttonStyle" @click="buttonClick">
|
{{buttonVal}}
|
</button>
|
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import permision from "@/common/permission.js"
|
export default {
|
props: {
|
// 标签
|
title: String,
|
// row高度
|
rowHeight: {
|
type: String,
|
default: '30px'
|
},
|
// 标签内容宽度
|
labelWidth: {
|
type: String,
|
default: 'auto'
|
},
|
// 输入框类型
|
type: {
|
type: String,
|
default: 'text'
|
},
|
// 输入框值
|
value: {
|
type: [Date, Object, Number, String, Boolean, Array],
|
default () {
|
return '';
|
}
|
},
|
// 是否必填
|
mandatory: {
|
type: Boolean,
|
default: false
|
},
|
// 默认必填背景颜色
|
mandatoryColor: {
|
type: String,
|
default: '#FFFFCC'
|
},
|
// 默认正常背景颜色
|
defaultColor: {
|
type: String,
|
default: '#ffffff' //#fffae8
|
},
|
// 默认只读背景颜色
|
readonlyColor: {
|
type: String,
|
default: '#f1f1f1'
|
},
|
// 默认图标颜色
|
iconColor: {
|
type: String,
|
default: '#666666'
|
},
|
// 输入框占位符提示信息
|
placeholder: String,
|
// 输入框占位符提示信息、只读字体颜色
|
placeholderColor: {
|
type: String,
|
default: '#8383a2'
|
},
|
// 容器顶部边框
|
before: {
|
type: Boolean,
|
default: false
|
},
|
// 容器底部边框
|
after: {
|
type: Boolean,
|
default: true
|
},
|
//标题和内容之间的分割线
|
separate: {
|
type: Boolean,
|
default: false
|
},
|
//输入内容框边框
|
inputBorder: {
|
type: Boolean,
|
default: true
|
},
|
//输入内容框边框颜色
|
inputBorderColor: {
|
type: String,
|
default: "#c5c5e1"
|
},
|
// 自动获取焦点
|
focus: {
|
type: Boolean,
|
default: false
|
},
|
// 自动选中内容
|
isFocusSelectAll: {
|
type: Boolean,
|
default: false
|
},
|
// 输入框是否显示清除按钮
|
clearable: {
|
type: [Boolean, String],
|
default: true
|
},
|
// 是否显示密码可见按钮
|
displayable: {
|
type: [Boolean, String],
|
default: false
|
},
|
// 是否显示扫描按钮
|
canScan: {
|
type: [Boolean, String],
|
default: false
|
},
|
// 是否显示只读标签图标
|
hintIcons: {
|
type: Boolean,
|
default: false
|
},
|
// 是否显示按钮
|
showButton: {
|
type: Boolean,
|
default: false
|
},
|
// 输入框提示图标类型
|
inputIcon: {
|
type: String,
|
default: 'info'
|
},
|
// 按钮图标类型
|
buttonIcon: {
|
type: String,
|
default: 'checkmarkempty'
|
},
|
//按钮类型
|
buttonType: {
|
type: String,
|
default: 'primary' //primary、warn、default
|
},
|
//按钮宽度
|
buttonWidth: {
|
type: String,
|
default: ''
|
},
|
//按钮背景颜色
|
buttonColor: {
|
type: String,
|
default: '#f8f8f8'
|
},
|
//按钮字体颜色
|
buttonlabColor: {
|
type: String,
|
default: '#000000'
|
},
|
// 右侧按钮响应事件，false-执行自定义按钮点击事件 true-执行输入框提交事件
|
btConfirm: {
|
type: Boolean,
|
default: false
|
},
|
// 按钮内容
|
buttonVal: {
|
type: String,
|
default: ''
|
},
|
// 数字输入框最小值
|
min: {
|
type: Number,
|
default: 0
|
},
|
// 数字输入框最大值
|
max: {
|
type: Number,
|
default: 100
|
},
|
// 数字输入框步长间隔大小
|
step: {
|
type: Number,
|
default: 1
|
},
|
//数字输入框按钮是否为禁用状态
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
//开关、复选框、单选框、下拉框数据源(父控件的值)
|
range: {
|
type: [Array, Boolean, Object],
|
default () {
|
return [];
|
}
|
},
|
//开关、复选框、单选框、下拉框数据源对应的key字段名称
|
rangeKey: {
|
type: String,
|
default: 'value'
|
},
|
//开关、复选框、单选框、下拉框数据源对应的value字段名称
|
rangeVal: {
|
type: String,
|
default: 'name'
|
},
|
//开关、复选框、单选框、下拉框数据源对应默认选择项index
|
rangeSelect: {
|
type: Number,
|
default: -1
|
},
|
//复选框和单选框展示的列数
|
columns: {
|
type: Number,
|
default: 2
|
},
|
//switch开关是否选中
|
checked: {
|
type: Boolean,
|
default: false
|
},
|
//下拉框筛选结果为空时显示的文字
|
emptyTips: {
|
type: String,
|
default: '无匹配项'
|
},
|
// 是否验证下拉框输入内容是否存在
|
verify: {
|
type: Boolean,
|
default: true
|
},
|
//下拉框输入内容是否自动补全（过滤的时候默认选择第一个选项）
|
automatic: {
|
type: Boolean,
|
default: true
|
},
|
//下拉框选择器是否显示key内容
|
showSelectorKey: {
|
type: Boolean,
|
default: false
|
},
|
//下拉框选择器是否显示valur内容
|
showSelectorVal: {
|
type: Boolean,
|
default: true
|
},
|
//下拉框输入值是否显示key内容
|
showValueKey: {
|
type: Boolean,
|
default: false
|
},
|
//下拉框选择器字体对齐方式
|
showSelectorAlign: {
|
type: String,
|
default: "left"
|
},
|
//标签颜色
|
labelColor: {
|
type: String,
|
default: "#000000"
|
},
|
//文本内容颜色
|
textColor: {
|
type: String,
|
default: "#0000ff"
|
},
|
//选择器背景颜色
|
selectorColor: {
|
type: String,
|
default: "#ffffff"
|
},
|
//是否显示日期
|
isDate: {
|
type: Boolean,
|
default: true
|
},
|
//是否显示时间
|
isTime: {
|
type: Boolean,
|
default: true
|
},
|
//是否默认日期和时间
|
defaultDateTime: {
|
type: Boolean,
|
default: false
|
},
|
//默认时间的时间间隔（比如昨天、明天：-1、1），默认0，天为单位
|
dayInterval: {
|
type: Number,
|
default: 0
|
},
|
|
//最小日期
|
startDate: {
|
type: String,
|
default: '' //getDate('start');
|
},
|
//最大日期
|
endDate: {
|
type: String,
|
default: '' //getDate('end');
|
},
|
//最小时间
|
start: {
|
type: String,
|
default: '00:00'
|
},
|
//最大时间
|
end: {
|
type: String,
|
default: '23:59'
|
},
|
//日期结果
|
date: {
|
type: String,
|
default: ''
|
},
|
//时间结果
|
time: {
|
type: String,
|
default: ''
|
},
|
//内容对齐方式 默认左对齐 ；left:flex-start； center：center； right：flex-end;
|
alignment: {
|
type: String,
|
default: 'left'
|
},
|
},
|
model: {
|
prop: 'value',
|
event: 'input'
|
},
|
data() {
|
return {
|
//服务器日期
|
SYSDate: "",
|
//服务器时间
|
SYSTime: "",
|
//默认日期
|
defaultDate: '选择日期',
|
//默认时间
|
defaultTime: '选择时间',
|
//显示密码明文
|
showPassword: false,
|
//switch是否选中结果(switchResult)
|
switchResult: false,
|
//显示/隐藏 下拉框选择器内容信息
|
showSelector: false,
|
//下拉框值内容显示
|
comboxValue: {
|
index: -1,
|
key: '',
|
val: ''
|
},
|
//初始化数据开关。针对需要数据源，并且需要构建返回值结构的时候
|
initState: false,
|
//内容对齐方式 默认左对齐
|
tempalignment: 'flex-start',
|
//开关、复选框、单选框、下拉框数据源(子控件的值)
|
temprange: {
|
type: [Array, Boolean, Object],
|
default () {
|
return [];
|
}
|
},
|
thisFocus: false, //输入框焦点
|
selectionEnd:0//选择结束点
|
}
|
},
|
computed: {
|
// 针对密码输入框类型处理，为了显示和隐藏密码
|
inputType() {
|
const type = this.type;
|
return type === 'password' ? 'text' : type;
|
},
|
// 处理主容器样式css
|
rowStyle() {
|
const type = this.type;
|
if (this.rowHeight === '40px' && (type === 'checkbox' || type === 'radio')) {
|
//复选框和单选框自动设置高度
|
if (this.temprange.length > 1) {
|
const cbLen = Math.ceil(this.temprange.length / this.columns);
|
return {
|
height: ((cbLen > 3 ? 3 : cbLen) * 40) + 'px'
|
}
|
}
|
}
|
return {
|
height: this.rowHeight
|
}
|
},
|
// 处理标签样式css
|
labelStyle() {
|
let css = {}
|
if (this.labelWidth !== 'auto') {
|
css['width'] = this.labelWidth;
|
}
|
css['color'] = this.labelColor;
|
return css;
|
},
|
// 处理输入部分样式css
|
inputStyle() {
|
let css = {};
|
const type = this.type;
|
//设置备件颜色
|
if (type === 'hint') {
|
css['background-color'] = this.readonlyColor;
|
css['width'] = '90px';
|
css['color'] = this.placeholderColor;
|
} else if (this.mandatory) {
|
css['background-color'] = this.mandatoryColor;
|
css['width'] = '90px';
|
css['color'] = this.textColor;
|
} else {
|
css['background-color'] = this.defaultColor;
|
css['width'] = '90px';
|
css['color'] = this.textColor;
|
}
|
//数字box不用设置边距
|
if (type === 'numberbox') {
|
css['padding'] = '0';
|
}
|
|
//增加边框
|
if (this.inputBorder && this.type !== 'switch' && this.type !== 'slot') {
|
css['border-style'] = 'solid';
|
css['border-width'] = '1px';
|
css['border-color'] = this.inputBorderColor; //'#c5c5e1';
|
}
|
//存在按钮的时候，并且为文字按钮的时候，容器右侧增加圆角
|
if (this.showButton && this.buttonVal !== '') {
|
css['border-radius'] = '0 5px 5px 0';
|
}
|
|
//设置内容对齐方式
|
css['text-align'] = this.alignment;
|
return css;
|
},
|
//按钮样式调整
|
buttonStyle() {
|
let css = {};
|
if (this.buttonWidth !== '') {
|
css['width'] = this.buttonWidth;
|
}
|
if (this.buttonType === 'default') {
|
css['background-color'] = this.buttonColor;
|
css['color'] = this.buttonlabColor;
|
}
|
return css;
|
},
|
// 复选框和单选框样式调整
|
radioOrCheckboxStyle() {
|
//复选框和单选框设置宽度
|
const ratio = Math.floor(100 / this.columns);
|
return {
|
width: ratio + '%'
|
}
|
},
|
// 开关结果处理
|
setSwitchResult() {
|
if (this.temprange.length < 2)
|
return '';
|
if (this.switchResult) {
|
return this.temprange[0][this.rangeVal];
|
} else {
|
return this.temprange[1][this.rangeVal];
|
}
|
},
|
// 得到过滤后的下拉框数据源(根据key进行过滤)
|
filterCandidatesKey() {
|
if (this.temprange.length <= 0) {
|
return [];
|
}
|
return this.temprange.filter((item, index, arr) => {
|
this.$set(item, 'index', index);
|
return item[this.rangeKey].indexOf(this.value['key']) > -1;
|
});
|
},
|
// 得到过滤后的下拉框数据源(根据key或者val进行过滤)
|
filterCandidates() {
|
if (this.temprange.length <= 0) {
|
return [];
|
}
|
return this.temprange.filter((item, index, arr) => {
|
this.$set(item, 'index', index);
|
let t = false;
|
//一：key、val都为空的时候；二：key、val都不为空，并且索引不小于0（有选中结果的情况）
|
if ((!this.value['key'] && !this.value['val']) ||
|
(this.value['key'] && this.value['val'] && (this.value['index'] || this.value['index'] ==
|
0) && this.value['index'] >= 0)) {
|
t = true;
|
} else {
|
//通过val进行过滤
|
if (this.value['val']) {
|
t = item[this.rangeVal].indexOf(this.value['val']) > -1 ||
|
item[this.rangeKey].indexOf(this.value['val']) > -1;
|
}
|
//通过key进行过滤
|
if (this.value['key']) {
|
t = t || item[this.rangeKey].indexOf(this.value['key']) > -1;
|
}
|
}
|
return t;
|
});
|
},
|
// 得到下拉框选择器数据源的数据长度，用于提示是否有匹配选择项
|
filterCandidatesLength() {
|
return this.filterCandidates.length;
|
}
|
},
|
watch: {
|
//内容对齐方式监听
|
alignment(newVal, oldVal) {
|
if (JSON.stringify(newVal) != JSON.stringify(oldVal)) {
|
this.setAlignment();
|
}
|
},
|
|
//内容值改变
|
value(newVal, oldVal) {
|
//用户自定义修改、返回值改变的时候，针对一些需要重新整理的结果集进行处理。
|
//(现在操作可能不是最优的，因为控件这个操作主要是针对开发的时候通过代码去改，如果通过控件去操作会导致进行两次整理数据，效率会减慢，先用着)
|
let BeforeNewVal = newVal;
|
if (JSON.stringify(newVal) != JSON.stringify(oldVal)) {
|
switch (this.type) {
|
case 'switch': //开关
|
if ((newVal === true || newVal === false) && this.temprange.length >=
|
2) { //只设置直接赋值true、false，暂时不提供其他赋值方式
|
let switchV = {
|
"result": false,
|
key: '',
|
val: ''
|
};
|
let i = 0;
|
if (newVal === true) {
|
this.switchResult = true;
|
switchV.result = true;
|
} else {
|
this.switchResult = false;
|
switchV.result = true;
|
i = 1;
|
}
|
switchV.key = this.temprange[i][this.rangeKey];
|
switchV.val = this.temprange[i][this.rangeVal];
|
newVal = switchV;
|
}
|
break;
|
case 'date': //日期时间
|
if (newVal == '') {
|
this.defaultDate = '选择日期';
|
this.defaultTime = '选择时间';
|
}
|
newVal = this.operationDateValue();
|
break;
|
case 'combox': //下拉框
|
// console.log("##############"+JSON.stringify(this.temprange))
|
// console.log('@@@@@@@@@@@@@@'+JSON.stringify(newVal))
|
if (this.temprange.length <= 0)
|
break;
|
|
// console.log('$$$$$$$$$$$$$')
|
let comboxV = {
|
index: newVal.index || -1,
|
key: newVal.key || '',
|
val: newVal.val || '',
|
};
|
if ((newVal.index || newVal.index == 0) && newVal.index >= 0) { //优先通过索引过滤整理数据
|
comboxV = {
|
index: newVal.index,
|
key: this.temprange[newVal.index][this.rangeKey],
|
val: this.temprange[newVal.index][this.rangeVal]
|
};
|
} else if (newVal.key) { //通过key过滤整理数据
|
let filterItem = this.filterCandidatesKey;
|
if (filterItem.length > 0) {
|
comboxV = {
|
index: filterItem[0].index,
|
key: filterItem[0][this.rangeKey],
|
val: filterItem[0][this.rangeVal]
|
};
|
}
|
} else if ((typeof newVal == 'string') && newVal.constructor == String) { //直接赋key值
|
if (newVal) {
|
let filterItem = this.temprange.filter((item, index, arr) => {
|
this.$set(item, 'index', index);
|
return item[this.rangeKey].indexOf(newVal) > -1;
|
});
|
if (filterItem.length > 0) {
|
comboxV = {
|
index: filterItem[0].index,
|
key: filterItem[0][this.rangeKey],
|
val: filterItem[0][this.rangeVal]
|
};
|
}
|
}
|
} else if ((typeof newVal == 'number') && newVal.constructor == Number) { //直接赋索引值
|
if (newVal >= 0) {
|
comboxV = {
|
index: newVal,
|
key: this.temprange[newVal][this.rangeKey],
|
val: this.temprange[newVal][this.rangeVal]
|
};
|
}
|
}
|
newVal = comboxV;
|
this.comboxValue = comboxV;
|
// console.log('@@@@@@@@@@@@@@'+JSON.stringify(this.comboxValue))
|
break;
|
case 'checkbox': //复选框
|
if (this.temprange.length <= 0)
|
break;
|
let checkboxV = {
|
indexs: newVal.indexs || [],
|
keys: newVal.keys || [],
|
vals: newVal.vals || [],
|
};
|
let selectK = [];
|
let selectV = [];
|
let selectI = [];
|
if (newVal.indexs) { //优先通过索引过滤整理数据
|
this.temprange.forEach((item, index) => {
|
if (newVal.indexs.includes(index)) {
|
this.$set(item, 'checked', true)
|
} else {
|
this.$set(item, 'checked', false)
|
}
|
if (item.checked) {
|
selectK.push(item[this.rangeKey]);
|
selectV.push(item[this.rangeVal]);
|
selectI.push(index);
|
}
|
})
|
} else if (newVal.keys) { //通过key过滤整理数据
|
this.temprange.forEach((item, index) => {
|
if (newVal.keys.includes(item[this.rangeKey])) {
|
this.$set(item, 'checked', true)
|
} else {
|
this.$set(item, 'checked', false)
|
}
|
if (item.checked) {
|
selectK.push(item[this.rangeKey]);
|
selectV.push(item[this.rangeVal]);
|
selectI.push(index);
|
}
|
})
|
}
|
checkboxV.indexs = selectI;
|
checkboxV.keys = selectK;
|
checkboxV.vals = selectV;
|
newVal = checkboxV;
|
break;
|
case 'radio': //单选框
|
if (this.temprange.length <= 0)
|
break;
|
let radioV = {
|
index: newVal.index || -1,
|
key: newVal.key || '',
|
val: newVal.val || '',
|
};
|
if ((newVal.index || newVal.index == 0) && newVal.index >= 0) { //优先通过索引过滤整理数据
|
this.temprange[newVal.index].checked = true;
|
radioV = {
|
index: newVal.index,
|
key: this.temprange[newVal.index][this.rangeKey],
|
val: this.temprange[newVal.index][this.rangeVal]
|
};
|
} else if (newVal.key) { //通过key过滤整理数据
|
let filterItem = this.filterCandidatesKey;
|
if (filterItem.length > 0) {
|
this.temprange[filterItem[0].index].checked = true;
|
radioV = {
|
index: filterItem[0].index,
|
key: filterItem[0][this.rangeKey],
|
val: filterItem[0][this.rangeVal]
|
};
|
}
|
} else if ((typeof newVal == 'string') && newVal.constructor == String) { //直接赋key值
|
if (newVal) {
|
let filterItem = this.temprange.filter((item, index, arr) => {
|
this.$set(item, 'index', index);
|
return item[this.rangeKey].indexOf(newVal) > -1;
|
});
|
if (filterItem.length > 0) {
|
this.temprange[filterItem[0].index].checked = true;
|
radioV = {
|
index: filterItem[0].index,
|
key: filterItem[0][this.rangeKey],
|
val: filterItem[0][this.rangeVal]
|
};
|
}
|
}
|
} else if ((typeof newVal == 'number') && newVal.constructor == Number) { //直接赋索引值
|
if (newVal >= 0) {
|
this.temprange[newVal].checked = true;
|
radioV = {
|
index: newVal,
|
key: this.temprange[newVal][this.rangeKey],
|
val: this.temprange[newVal][this.rangeVal]
|
};
|
}
|
}
|
newVal = radioV;
|
// 把旧的结果改回去
|
if (oldVal.index && oldVal.index >= 0) {
|
this.temprange[oldVal.index].checked = false;
|
}
|
break;
|
}
|
}
|
|
let setOnChange = true; //判断是否需要设置 change 事件
|
//整理之后的结果集合判断是否一致，不一致就反馈到夫控件
|
if (JSON.stringify(BeforeNewVal) != JSON.stringify(newVal)) {
|
this.$emit('input', newVal);
|
setOnChange = false; //因为还会返回一次值到父控件，所以不需要触发change事件
|
}
|
//用来初始化的时候不进行触发change事件
|
if (!this.initState) {
|
if (JSON.stringify(newVal) != JSON.stringify(oldVal) && setOnChange) {
|
this.$emit('change', newVal);
|
}
|
} else {
|
this.initState = false;
|
}
|
},
|
//数据源变化，更新界面数据绑定信息
|
range(newVal, oldVal) {
|
//数据源是在页面data中定义，然后通过方法进行赋值的，重新调用初始化数据操作
|
if (newVal !== oldVal) {
|
//注：这里两个对象判断相等应该是没用的，需要转换成字符串或者其他操作去进行比对，因为表格数据量大，就不比对了，先这样放着
|
this.temprange = JSON.parse(JSON.stringify(this.range));
|
this.init();
|
}
|
}
|
},
|
created() {
|
this.temprange = JSON.parse(JSON.stringify(this.range));
|
//初始化内容对齐方式
|
this.setAlignment();
|
//在模板渲染成html前调用，初始化属性值。
|
switch (this.type) {
|
case 'switch':
|
this.switchResult = this.checked;
|
break;
|
case 'date':
|
let resultDate = this.operationDateValue();
|
this.$emit('input', resultDate);
|
break;
|
}
|
},
|
mounted() {
|
//在模板渲染成html后调用，初始化页面完成后，对html的dom节点进行一些需要的操作。
|
// if(this.temprange.length>0){
|
//数据源是在页面data中进行了初始化的，就调用初始化数据操作
|
this.init();
|
// }
|
},
|
methods: {
|
//设置内容对齐方式
|
setAlignment() {
|
switch (this.alignment) {
|
case 'center':
|
this.tempalignment = 'center';
|
break;
|
case 'right':
|
this.tempalignment = 'flex-end';
|
break;
|
default:
|
this.tempalignment = 'flex-start';
|
break;
|
}
|
},
|
//整合时间类型返回值整理
|
operationDateValue() {
|
// this.SYSDate = await this.$GetSysDateTime('yyyy-MM-dd'); //获取日期
|
// this.SYSTime = await this.$GetSysDateTime('hh:mm'); //获取时间
|
let d = '';
|
let t = '';
|
let result = '';
|
if (this.value.length > 0) {
|
if (this.value.length > 15) {
|
d = this.isDate ? this.value.substring(0, 10) : '';
|
t = this.isTime ? ' ' + this.value.substring(11, this.value.length) : '';
|
this.defaultDate = this.value.substring(0, 10);
|
this.defaultTime = this.value.substring(11, this.value.length);
|
} else {
|
//已经填写日期
|
if (this.value.length >= 10 && this.value.length < 15) {
|
d = this.isDate ? this.value.substring(0, 10) : '';
|
this.defaultDate = this.value.substring(0, 10);
|
}
|
//已经填写时间
|
if (this.value.length >= 5 && this.value.length < 10) {
|
t = this.isTime ? ' ' + this.value.substring(this.value.length - 5, this.value.length) : '';
|
this.defaultTime = this.value.substring(this.value.length - 5, this.value.length);
|
}
|
}
|
if (d != '' || t != '') {
|
result = (this.isDate ? d : '') + (this.isTime ? t : '');
|
}
|
} else {
|
this.defaultDate = this.date.length > 0 ?
|
this.date :
|
this.defaultDateTime ? getDate(this.type, this.dayInterval, this.SYSDate) : this.defaultDate;
|
this.defaultTime = this.time.length > 0 ?
|
this.time :
|
this.defaultDateTime ? getTime(this.type, this.SYSTime) : this.defaultTime;
|
d = this.defaultDate === '选择日期' ? '' : this.defaultDate;
|
t = this.defaultTime === '选择时间' ? '' : ' ' + this.defaultTime;
|
result = (this.isDate ? d : '') + (this.isTime ? t : '');
|
}
|
return result;
|
},
|
//初始化数据（针对有数据源的，range）
|
init() {
|
this.initState = true;
|
const items = this.temprange;
|
var result = {};
|
switch (this.type) {
|
case 'checkbox':
|
result = {
|
indexs: [],
|
keys: [],
|
vals: []
|
};
|
var selectK = [];
|
var selectV = [];
|
var selectI = [];
|
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
const item = items[i]
|
if (item.checked) {
|
selectK.push(item[this.rangeKey]);
|
selectV.push(item[this.rangeVal]);
|
selectI.push(i);
|
}
|
}
|
result.indexs = selectI;
|
result.keys = selectK;
|
result.vals = selectV;
|
this.$emit('input', result);
|
break;
|
case 'radio':
|
var select = false;
|
result = {
|
index: -1,
|
key: '',
|
val: ''
|
};
|
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
const item = items[i];
|
if (item['checked'] && !select) {
|
result = {
|
index: i,
|
key: item[this.rangeKey],
|
val: item[this.rangeVal]
|
};
|
select = true;
|
continue;
|
}
|
this.$set(item, 'checked', false);
|
}
|
this.$emit('input', result);
|
break;
|
case 'switch':
|
result = {
|
result: this.switchResult,
|
key: '',
|
val: '',
|
};
|
if (items.length < 2) {
|
this.$emit('input', result);
|
break;
|
}
|
var i = this.switchResult ? 0 : 1;
|
result.key = this.temprange[i][this.rangeKey];
|
result.val = this.temprange[i][this.rangeVal];
|
this.$emit('input', result);
|
break;
|
case 'combox':
|
//result={index:-1,key:'',val:''};
|
// if(this.value!=={}
|
// && this.value.index>=0
|
// && (this.temprange.length-1)>=this.value.index){
|
// result={
|
// index:this.value.index,
|
// key:this.temprange[this.value.index][this.rangeKey],
|
// val:this.temprange[this.value.index][this.rangeVal]
|
// };
|
// }
|
let newVal = this.value;
|
if (this.temprange.length <= 0)
|
break;
|
//console.log(JSON.stringify(this.temprange))
|
let comboxV = {
|
index: -1,
|
key: '',
|
val: ''
|
};
|
if ((newVal.index || newVal.index == 0) && newVal.index >= 0) { //优先通过索引过滤整理数据
|
|
comboxV = {
|
index: newVal.index,
|
key: this.temprange[newVal.index][this.rangeKey],
|
val: this.temprange[newVal.index][this.rangeVal]
|
};
|
} else if (newVal.key) { //通过key过滤整理数据
|
let filterItem = this.filterCandidatesKey;
|
if (filterItem.length > 0) {
|
comboxV = {
|
index: filterItem[0].index,
|
key: filterItem[0][this.rangeKey],
|
val: filterItem[0][this.rangeVal]
|
};
|
}
|
} else if ((typeof newVal == 'string') && newVal.constructor == String) { //直接赋key值
|
|
if (newVal) {
|
let filterItem = this.temprange.filter((item, index, arr) => {
|
this.$set(item, 'index', index);
|
return item[this.rangeKey].indexOf(newVal) > -1;
|
});
|
if (filterItem.length > 0) {
|
comboxV = {
|
index: filterItem[0].index,
|
key: filterItem[0][this.rangeKey],
|
val: filterItem[0][this.rangeVal]
|
};
|
}
|
}
|
} else if ((typeof newVal == 'number') && newVal.constructor == Number) { //直接赋索引值
|
|
if (newVal >= 0) {
|
comboxV = {
|
index: newVal,
|
key: this.temprange[newVal][this.rangeKey],
|
val: this.temprange[newVal][this.rangeVal]
|
};
|
}
|
}
|
result = comboxV;
|
|
// console.log(JSON.stringify(result))
|
//this.comboxValue=comboxV;
|
this.$emit('input', result)
|
break;
|
}
|
},
|
//密码框眼睛图标点击切换显示隐藏密码
|
display() {
|
this.showPassword = !this.showPassword
|
},
|
//普通输入框清空图标事件
|
clear() {
|
this.$emit('input', '');
|
this.$emit('clear', '');
|
this.thisFocus = true;
|
//时间控件清空操作
|
if (this.type === 'date') {
|
this.defaultDate = '选择日期';
|
this.defaultTime = '选择时间';
|
}
|
},
|
//按钮点击事件
|
buttonClick() {
|
if (this.btConfirm) {
|
this.$emit('confirm', this.value);
|
} else {
|
this.$emit('buttonClick', this.value);
|
}
|
},
|
//普通输入框输入事件
|
onInput(e) {
|
this.$emit('input', e.detail.value);
|
},
|
//普通输入框提交事件
|
onConfirm(e) {
|
this.$emit('confirm', e.detail.value);
|
},
|
//数字box输入框【+】【-】按钮点击事件
|
calcValue(type) {
|
if (this.disabled) {
|
return;
|
}
|
const scale = this.getDecimalScale();
|
let value = this.value * scale;
|
let step = this.step * scale;
|
if (type === "minus") {
|
value -= step;
|
if (value < (this.min * scale)) {
|
return;
|
}
|
if (value > (this.max * scale)) {
|
value = this.max * scale
|
}
|
} else if (type === "plus") {
|
value += step;
|
if (value > (this.max * scale)) {
|
return;
|
}
|
if (value < (this.min * scale)) {
|
value = this.min * scale
|
}
|
}
|
this.$emit('input', String(value / scale));
|
},
|
//数字box输入框值转换
|
getDecimalScale() {
|
let scale = 1;
|
// 浮点型
|
if (~~this.step !== this.step) {
|
scale = Math.pow(10, (this.step + "").split(".")[1].length);
|
}
|
return scale;
|
},
|
// 数字box输入框失去焦点事件
|
onBlurNumberbox(e) {
|
let value = e.detail.value;
|
if (!value) {
|
this.$emit('input', '');
|
return;
|
}
|
value = +value;
|
if (value > this.max) {
|
value = this.max;
|
} else if (value < this.min) {
|
value = this.min;
|
}
|
this.$emit('input', value);
|
},
|
//复选框选择项改变事件
|
checkboxChange(e) {
|
var items = this.temprange;
|
var checkboxV = {
|
indexs: [],
|
keys: [],
|
vals: []
|
};
|
var selectK = [];
|
var selectV = [];
|
var selectI = [];
|
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
const item = items[i]
|
if (e.detail.value.includes(item[this.rangeKey])) {
|
this.$set(item, 'checked', true)
|
} else {
|
this.$set(item, 'checked', false)
|
}
|
if (item.checked) {
|
selectK.push(item[this.rangeKey]);
|
selectV.push(item[this.rangeVal]);
|
selectI.push(i);
|
}
|
}
|
checkboxV.indexs = selectI;
|
checkboxV.keys = selectK;
|
checkboxV.vals = selectV;
|
this.$emit('input', checkboxV);
|
},
|
//单选框选择项改变事件
|
radioChange(e) {
|
var items = this.temprange;
|
var radioV = {};
|
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
const item = items[i]
|
if (e.target.value === item[this.rangeKey]) {
|
this.$set(item, 'checked', true);
|
radioV = {
|
index: i,
|
key: e.target.value,
|
val: item[this.rangeVal]
|
};
|
} else {
|
this.$set(item, 'checked', false);
|
}
|
}
|
this.$emit('input', radioV);
|
},
|
//复选框、单选框字体点击事件
|
onNoticeClick(type, index) {
|
let item = this.temprange[index];
|
let results = {};
|
if (type === 'checkbox') {
|
results = {
|
indexs: this.value.indexs,
|
keys: this.value.keys,
|
vals: this.value.vals
|
};
|
if (item['checked']) { //取消选择
|
let oldIndex = results.indexs.indexOf(index);
|
if (index > -1) {
|
results.indexs.splice(oldIndex, 1);
|
results.keys.splice(oldIndex, 1);
|
results.vals.splice(oldIndex, 1);
|
}
|
this.$set(item, 'checked', false);
|
} else { //选择
|
results.indexs.push(index);
|
results.keys.push(item[this.rangeKey]);
|
results.vals.push(item[this.rangeVal]);
|
this.$set(item, 'checked', true);
|
}
|
this.$emit('input', results);
|
} else if (type === 'radio') {
|
this.$set(this.temprange[this.value.index], 'checked', false);
|
results = {
|
index: index,
|
key: item[this.rangeKey],
|
val: item[this.rangeVal]
|
};
|
this.$set(item, 'checked', !item['checked']);
|
this.$emit('input', results);
|
}
|
},
|
//开关选择项改变事件
|
switchChange(e) {
|
this.switchResult = e.target.value;
|
var result = {
|
result: this.switchResult,
|
key: '',
|
val: ''
|
};
|
var i = this.switchResult ? 0 : 1;
|
if (this.temprange.length < 2) {
|
this.$emit('input', result);
|
return;
|
}
|
result.key = this.temprange[i][this.rangeKey];
|
result.val = this.temprange[i][this.rangeVal];
|
this.$emit('input', result);
|
},
|
//下拉框展开图标点击事件
|
toggleSelector() {
|
this.showSelector = !this.showSelector;
|
},
|
//下拉框清空图标点击事件
|
clearCombox() {
|
this.$emit('input', {
|
index: -1,
|
key: '',
|
val: ''
|
});
|
},
|
//下拉框输入内容事件
|
onInputCombox(e) {
|
this.$emit('input', {
|
index: -1,
|
key: '',
|
val: e.detail.value
|
});
|
setTimeout(() => {
|
let filter = this.filterCandidates;
|
if (filter.length === 1 && filter[0][this.rangeVal] === e.detail.value) {
|
let result = {
|
index: filter[0]["index"],
|
key: filter[0][this.rangeKey],
|
val: filter[0][this.rangeVal]
|
};
|
this.$emit('input', result);
|
}
|
}, 100);
|
},
|
//下拉框提交内容事件
|
onConfirmCombox() {
|
this.$emit('confirm', this.value);
|
},
|
//输入框类得到焦点
|
onFocusInput(e) {
|
this.thisFocus = true;
|
if(this.isFocusSelectAll) {
|
this.selectionEnd=this.value?this.value.length:0;//text类型可以 number不行
|
event.currentTarget.select();//number 类型可以 text类型不行
|
}
|
this.$emit('resetFocus', true);
|
this.$emit('focus', this.value);
|
},
|
//输入框类失去焦点
|
onBlurInput() {
|
this.thisFocus = false;
|
this.$emit('resetFocus', false);
|
this.$emit('blur', this.value);
|
},
|
//下拉框得到焦点事件
|
onFocusCombox() {
|
this.showSelector = true;
|
this.$emit('focus', this.value);
|
},
|
//下拉框失去焦点事件
|
onBlurCombox() {
|
//需要延迟执行，防止输入框失去焦点后，马上隐藏选项内容信息，导致无法选择
|
setTimeout(() => {
|
const filter = this.filterCandidates;
|
var result = this.value;
|
if (filter.length <= 0) {
|
result = this.verify ?
|
{
|
index: -1,
|
key: '',
|
val: ''
|
} :
|
result;
|
} else if (this.value['index'] < 0 && this.value['val'].length > 0) {
|
if (this.automatic) {
|
result = {
|
index: filter[0]['index'],
|
key: filter[0][this.rangeKey],
|
val: filter[0][this.rangeVal]
|
}
|
} else if (this.verify && result['index'] <= 0) {
|
result = {
|
index: -1,
|
key: '',
|
val: ''
|
};
|
}
|
}
|
this.$emit('input', result);
|
this.$emit('blur', result);
|
this.showSelector = false;
|
}, 100);
|
},
|
//下拉框选择器内容选项点击事件
|
onSelectorClick(index) {
|
this.showSelector = false;
|
const item = this.filterCandidates[index];
|
const result = {
|
index: item["index"],
|
key: item[this.rangeKey],
|
val: item[this.rangeVal]
|
};
|
this.$emit('input', result);
|
},
|
//时间输入框-日期点击选择事件
|
bindDateChange(e) {
|
this.defaultDate = e.detail.value
|
let result = (this.isDate ? this.defaultDate : '') + (this.isTime && this.defaultTime !== '选择时间' ? (' ' +
|
this.defaultTime) : '');
|
this.$emit('input', result);
|
this.$emit('confirm', {
|
date: e.detail.value,
|
time: this.defaultTime === '选择时间' ? '' : this.defaultTime
|
});
|
},
|
//时间输入框-时间点击选择事件
|
bindTimeChange(e) {
|
this.defaultTime = e.detail.value
|
let result = (this.isDate && this.defaultDate !== '选择日期' ? this.defaultDate : '') + (this.isTime ? (' ' +
|
this.defaultTime) : '');
|
this.$emit('input', result);
|
this.$emit('confirm', {
|
date: this.defaultTime === '选择日期' ? '' : this.defaultTime,
|
time: e.detail.value
|
});
|
},
|
|
//跳转到微信扫一扫，用于在微信推广吧。
|
// scan(){
|
// if (plus.os.name == "iOS") {
|
// plus.runtime.openURL("weixin://scanqrcode")
|
// } else if (plus.os.name == "andriod") {
|
// var Intent = plus.android.importClass("android.content.Intent");
|
// var ComponentName = plus.android.importClass('android.content.ComponentName')
|
// var intent = new Intent();
|
// intent.setComponent(new ComponentName("com.tencent.mm", "com.tencent.mm.ui.LauncherUI"));
|
// intent.putExtra("LauncherUI.From.Scaner.Shortcut", true);
|
// intent.setFlags(335544320);
|
// intent.setAction("android.intent.action.VIEW");
|
// var main = plus.android.runtimeMainActivity();
|
// main.startActivity(intent);
|
// }
|
// }
|
|
//扫一扫事件
|
async scan() {
|
let status = await this.checkPermission();
|
if (status !== 1) {
|
return;
|
}
|
uni.scanCode({
|
success: (res) => {
|
this.$emit('input', res.result);
|
this.$emit('confirm', res.result);
|
},
|
fail: (err) => {
|
uni.getSetting({
|
success: (res) => {
|
let authStatus = res.authSetting['scope.camera'];
|
if (!authStatus) {
|
uni.showModal({
|
title: '授权失败',
|
content: 'Hello uni-app需要使用您的相机，请在设置界面打开相关权限',
|
success: (res) => {
|
if (res.confirm) {
|
uni.openSetting()
|
}
|
}
|
})
|
}
|
}
|
})
|
}
|
});
|
},
|
|
//扫一扫功能必须的手机权限验证
|
async checkPermission(code) {
|
let status = permision.isIOS ? await permision.requestIOS('camera') :
|
await permision.requestAndroid('android.permission.CAMERA');
|
if (status === null || status === 1) {
|
status = 1;
|
} else {
|
uni.showModal({
|
content: "需要相机权限",
|
confirmText: "设置",
|
success: function(res) {
|
if (res.confirm) {
|
permision.gotoAppSetting();
|
}
|
}
|
})
|
}
|
return status;
|
}
|
|
}
|
}
|
//获取日期，只在时间类型控件才使用
|
function getDate(type, dayInterval, SYSDate) {
|
if (type !== 'date')
|
return '';
|
// if(dayInterval==0){
|
// return SYSDate;
|
// }
|
let dateTime = new Date();
|
dateTime = dateTime.setDate(dateTime.getDate() + dayInterval);
|
const date = new Date(dateTime)
|
let year = date.getFullYear();
|
let month = date.getMonth() + 1;
|
let day = date.getDate();
|
if (type === 'start') {
|
year = year - 60;
|
} else if (type === 'end') {
|
year = year + 2;
|
}
|
month = month > 9 ? month : '0' + month;;
|
day = day > 9 ? day : '0' + day;
|
return `${year}-${month}-${day}`;
|
}
|
|
//获取时间，只在时间类型控件才使用
|
function getTime(type, SYSTime) {
|
if (type !== 'date')
|
return '';
|
// return SYSTime;
|
const date = new Date();
|
let h = date.getHours();
|
let m = date.getMinutes();
|
return (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m);
|
}
|
</script>
|
|
<style>
|
.rightButton {
|
padding: 0 20rpx;
|
height: 30px;
|
margin-left: 10rpx;
|
}
|
|
.scroll-view_H {
|
white-space: nowrap;
|
/* width: 100%; */
|
}
|
|
.uni-combox {
|
display: flex;
|
height: 40px;
|
line-height: 40px;
|
flex-direction: row;
|
align-items: center;
|
position: relative;
|
}
|
|
.uni-combox.before::before {
|
position: absolute;
|
right: 0;
|
top: 0;
|
left: 0;
|
height: 1px;
|
content: '';
|
-webkit-transform: scaleY(0.5);
|
transform: scaleY(0.5);
|
background-color: #c8c7cc;
|
z-index: 99;
|
/* 这里会被input覆盖1px给了一个置顶 */
|
}
|
|
.uni-combox.after::after {
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
height: 1px;
|
content: '';
|
-webkit-transform: scaleY(0.5);
|
transform: scaleY(0.5);
|
background-color: #c8c7cc;
|
}
|
|
.uni-combox__input-box {
|
position: relative;
|
display: flex;
|
flex: 1;
|
flex-direction: row;
|
align-items: center;
|
/* color: #0000ff; */
|
height: 100%;
|
}
|
|
.uni-combox__input {
|
flex: 1;
|
font-size: 16px;
|
height: 22px;
|
line-height: 22px;
|
}
|
|
.uni-combox__input-arrow {
|
/* padding: 10px; */
|
}
|
|
.uni-combox__selector {
|
box-sizing: border-box;
|
position: absolute;
|
top: 42px;
|
left: 0;
|
width: 100%;
|
background-color: #ffffff;
|
border-radius: 6px;
|
box-shadow: #dddddd 4px 4px 8px, #dddddd -4px -4px 8px;
|
z-index: 99;
|
}
|
|
.uni-combox__selector-scroll {
|
max-height: 200px;
|
box-sizing: border-box;
|
white-space: nowrap;
|
}
|
|
.uni-combox__selector::before {
|
content: '';
|
position: absolute;
|
width: 0;
|
height: 0;
|
border-bottom: solid 6px #ffffff;
|
border-right: solid 6px transparent;
|
border-left: solid 6px transparent;
|
left: 50%;
|
top: -6px;
|
margin-left: -6px;
|
}
|
|
.uni-combox__selector-empty,
|
.uni-combox__selector-item {
|
/* #ifdef APP-NVUE */
|
display: flex;
|
/* #endif */
|
line-height: 36px;
|
font-size: 14px;
|
text-align: left;
|
border-bottom: solid 1px #dddddd;
|
margin: 0px 10px;
|
}
|
|
.uni-combox__selector-empty:last-child,
|
.uni-combox__selector-item:last-child {
|
border-bottom: none;
|
}
|
|
uni-radio-group,
|
uni-checkbox-group {
|
width: 100%;
|
height: 100%;
|
/* max-height: 120px; */
|
overflow-y: scroll;
|
}
|
|
.radio-checkbox-content {
|
display: flex;
|
float: left;
|
margin: 2px 0;
|
}
|
|
.radio-checkbox-content-notice {
|
padding: 0;
|
margin-bottom: 0;
|
}
|
|
.uni-numbox {
|
display: flex;
|
flex-direction: row;
|
height: 28px;
|
line-height: 28px;
|
width: 100%;
|
}
|
|
.uni-numbox__value {
|
height: 28px;
|
width: 100%;
|
text-align: center;
|
font-size: 16px;
|
border-style: solid;
|
border-color: #e5e5e5;
|
border-width: 0 1px 0 1px;
|
}
|
|
.uni-numbox__minus {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
width: 30px;
|
height: 28px;
|
font-size: 20px;
|
color: #333;
|
background-color: #f8f8f8;
|
border-style: solid;
|
border-color: #e5e5e5;
|
border-top-left-radius: 3px;
|
border-bottom-left-radius: 3px;
|
border-width: 0 0 0 1px;
|
}
|
|
.uni-numbox__plus {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
width: 30px;
|
height: 28px;
|
border-width: 0 1px 1px 0;
|
border-style: solid;
|
border-color: #e5e5e5;
|
border-top-right-radius: 3px;
|
border-bottom-right-radius: 3px;
|
background-color: #f8f8f8;
|
}
|
|
.uni-numbox--text {
|
font-size: 40rpx;
|
color: #333;
|
}
|
|
.uni-numbox--disabled {
|
color: #c0c0c0;
|
}
|
|
.m-input-view {
|
display: inline-flex;
|
flex-direction: row;
|
align-items: center;
|
width: 100%;
|
flex: 1;
|
padding: 0 0 0 5px;
|
}
|
|
.m-input-row {
|
display: flex;
|
flex-direction: row;
|
position: relative;
|
font-size: 16px;
|
line-height: 30px;
|
height: 30px;
|
padding: 5px 1px;
|
}
|
|
.m-input-row.before::before {
|
position: absolute;
|
right: 0;
|
top: 0;
|
left: 0;
|
height: 1px;
|
content: '';
|
-webkit-transform: scaleY(.5);
|
transform: scaleY(.5);
|
background-color: #b0b0d9;
|
}
|
|
.m-input-row.after::after {
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
height: 1px;
|
content: '';
|
-webkit-transform: scaleY(.5);
|
transform: scaleY(.5);
|
background-color: #b0b0d9;
|
}
|
|
.m-title {
|
/* width: 25%; */
|
width: 80px;
|
padding-left: 5px;
|
}
|
|
/* 标签右侧边框 */
|
.m-title.separate::after {
|
position: absolute;
|
bottom: 0;
|
top: 0;
|
width: 1px;
|
content: '';
|
background-color: #b0b0d9;
|
}
|
|
.m-input {
|
width: 100%;
|
display: flex;
|
flex: 1;
|
font-size: 16px;
|
}
|
|
</style>
|
