Skip to content

U
uview-ui
Commit e66f6704 authored by wlxuqu's avatar wlxuqu
Browse files
Options

完成select组件文档编写

parent 4ca43c37
Expand all Show whitespace changes
Inline Side-by-side
Showing with 372 additions and 448 deletions
pages.json
View file @ e66f6704
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
"current": 0, //当前激活的模式(list 的索引项) "current": 0, //当前激活的模式(list 的索引项)
"list": [{ "list": [{
"name": "test", //模式名称 "name": "test", //模式名称
"path": "pages/componentsA/form/index", //启动页面，必选 "path": "pages/componentsA/calendar/index", //启动页面，必选
"query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到 "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
}] }]
}, },
...@@ -450,6 +450,13 @@ ...@@ -450,6 +450,13 @@
{ {
"root": "pages/componentsA", "root": "pages/componentsA",
"pages": [ "pages": [
// calendar-日历
{
"path": "calendar/index",
"style": {
"navigationBarTitleText": "calendar-日历"
}
},
// form-表单 // form-表单
{ {
"path": "form/index", "path": "form/index",
......
pages/componentsA/calendar/index.vue
View file @ e66f6704
...@@ -3,9 +3,11 @@ ...@@ -3,9 +3,11 @@
<view class="u-demo-wrap" style="background-color: #FFFFFF;"> <view class="u-demo-wrap" style="background-color: #FFFFFF;">
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area"> <view class="u-demo-area">
<u-calendar isFixed :minDate="minDate" :maxDate="maxDate" :btnType="btnType" :activeBgColor="activeBgColor" <u-calendar v-model="show" :minDate="minDate" :maxDate="maxDate" :btnType="btnType" :activeBgColor="activeBgColor"
:rangeBgColor="rangeBgColor" :rangeColor="rangeColor" :startText="startText" :endText="endText" :arrowType="arrowType" :rangeBgColor="rangeBgColor" :rangeColor="rangeColor" :startText="startText" :endText="endText" :arrowType="arrowType"
:type="type" ref="calendar" @change="change"></-calendar> :mode="mode" ref="calendar" @change="change">
</u-calendar>
</view> </view>
</view> </view>
<view class="u-config-wrap"> <view class="u-config-wrap">
...@@ -13,8 +15,8 @@ ...@@ -13,8 +15,8 @@
参数配置 参数配置
</view> </view>
<view class="u-config-item"> <view class="u-config-item">
<view class="u-item-title">右侧按钮</view> <view class="u-item-title">状态</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="showBtnChange"></u-subsection> <u-subsection vibrateShort :current="showBtnStatus" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
</view> </view>
<view class="u-config-item"> <view class="u-config-item">
<view class="u-item-title">显示错误信息</view> <view class="u-item-title">显示错误信息</view>
...@@ -40,23 +42,28 @@ ...@@ -40,23 +42,28 @@
export default { export default {
data() { data() {
return { return {
type: 1, show: true,
status: [], mode: 'range',
arrowType: 1, arrowType: 1,
minDate: "1920-01-01", minDate: "1920-01-01",
maxDate: "", maxDate: "",
btnType: "primary", btnType: "primary",
activeBgColor: "#5677fc", activeBgColor: "#2979ff",
rangeBgColor: "rgba(86,119,252,0.1)", rangeBgColor: "rgba(41,121,255,0.13)",
rangeColor: "#5677fc", rangeColor: "#2979ff",
startText: "开始", startText: "开始",
endText: "结束", endText: "结束",
result: "" result: ""
} }
}, },
computed: {
showBtnStatus() {
return this.show ? 0 : 1;
}
},
methods: { methods: {
showBtnChange(index) { showChange(index) {
this.showBtn = index == 0 ? true : false; this.show = !index;
}, },
errorMessageChange(index) { errorMessageChange(index) {
this.errorMessage = index == 0 ? '手机号有误' : false this.errorMessage = index == 0 ? '手机号有误' : false
...@@ -77,6 +84,14 @@ ...@@ -77,6 +84,14 @@
}, },
textareaChange(index) { textareaChange(index) {
this.type = index == 0 ? 'textarea' : 'text'; this.type = index == 0 ? 'textarea' : 'text';
},
change(e) {
console.log(e)
if (this.type == 1) {
this.result = e.result
} else {
this.result = `${e.startDate} 至 ${e.endDate}`
}
} }
} }
} }
......
pages/componentsA/icon/index.vue
View file @ e66f6704
...@@ -14,6 +14,12 @@ ...@@ -14,6 +14,12 @@
data() { data() {
return { return {
iconList: [ iconList: [
{
name: 'arrow-left-double'
},
{
name: 'arrow-right-double'
},
{ {
name: 'chat' name: 'chat'
}, },
......
pages/componentsC/test/index.vue
View file @ e66f6704
<template> <template>
<view class="u-demo"> <u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>
<view class="u-demo-wrap">
<u-icon label="uView" size="40" name="https://cdn.uviewui.com/uview/example/button.png"></u-icon>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-button @click="value = true">打开Picker</u-button>
</view>
</view>
</view>
</template> </template>
<script> <script>
import citySelect from './u-city-select.vue'; export default {
export default {
components: {
citySelect
},
data() { data() {
return { return {
height: 30, show: true,
bgColor: this.$u.color.bgColor, list: [
marginTop: 30, {
marginBottom: 30, value: 1,
value: false, label: '中国',
input: '', children: [
}; {
value: 2,
label: '广东',
children: [
{
value: 3,
label: '深圳'
},
{
value: 4,
label: '广州'
}
]
},
{
value: 5,
label: '广西',
children: [
{
value: 6,
label: '南宁'
},
{
value: 7,
label: '桂林'
}
]
}
]
},
{
value: 8,
label: '美国',
children: [
{
value: 9,
label: '纽约',
children: [
{
value: 10,
label: '皇后街区'
}
]
}
]
}
]
}
}, },
methods: { methods: {
cityChange(e) { confirm(e) {
this.input = e.province.label + '-' + e.city.label + '-' + e.area.label; console.log(e);
}
} }
} }
};
</script> </script>
<style scoped> <style lang="scss">
.btn-wrap { .money{
margin: 100rpx 30rpx; font-size: 80rpx;
color: $u-type-primary;
} }
</style> </style>
pages/example/components.config.js
View file @ e66f6704
...@@ -33,6 +33,10 @@ export default [{ ...@@ -33,6 +33,10 @@ export default [{
{ {
groupName: '表单组件', groupName: '表单组件',
list: [{ list: [{
path: '/pages/componentsA/calendar/index',
icon: 'calendar',
title: 'Calendar 日历',
},{
path: '/pages/componentsA/select/index', path: '/pages/componentsA/select/index',
icon: 'select', icon: 'select',
title: 'Select 列选择器', title: 'Select 列选择器',
......
uview-ui/components/u-calendar/u-calendar.vue
View file @ e66f6704
<template> <template>
<u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto" <u-popup closeable :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
:safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex"> :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex" :border-radius="borderRadius">
<view class="u-calendar-header" :class="{'u-calendar-radius':radius}" @touchmove.stop.prevent="stop" v-if="isFixed"> <view class="u-calendar">
<view>日期选择</view> <view class="u-calendar__header">
<view class="u-iconfont u-font-close" hover-class="u-opacity" :hover-stay-time="150" @tap="hide"></view> <view class="u-calendar__header__text" v-if="!$slots['tool-tip']">
{{toolTip}}
</view> </view>
<view class="u-date-box"> <slot v-else name="tool-tip" />
<view class="u-iconfont u-font-arrowleft" :style="{color:yearArrowColor}" hover-class="u-opacity"
:hover-stay-time="150" v-if="arrowType == 1" @tap="changeYear(0)"></view>
<view class="u-iconfont u-font-arrowleft" :style="{color:monthArrowColor}" hover-class="u-opacity"
:hover-stay-time="150" @tap="changeMonth(0)"></view>
<view class="u-date_time">{{ showTitle }}</view>
<view class="u-iconfont u-font-arrowright" :style="{color:monthArrowColor}" hover-class="u-opacity"
:hover-stay-time="150" @tap="changeMonth(1)"></view>
<view class="u-iconfont u-font-arrowright" :style="{color:yearArrowColor}" hover-class="u-opacity"
:hover-stay-time="150" v-if="arrowType == 1" @tap="changeYear(1)"></view>
</view> </view>
<view class="u-date-header"> <view class="u-calendar__action u-flex u-row-center">
<view class="u-date">日</view> <view class="u-calendar__action__icon">
<view class="u-date">一</view> <u-icon v-if="changeYear" name="arrow-left-double" :color="yearArrowColor" @click="changeYear(0)"></u-icon>
<view class="u-date">二</view>
<view class="u-date">三</view>
<view class="u-date">四</view>
<view class="u-date">五</view>
<view class="u-date">六</view>
</view> </view>
<view class="u-date-content"> <view class="u-calendar__action__icon">
<u-icon v-if="changeMonth" name="arrow-left" :color="monthArrowColor" @click="changeMonth(0)"></u-icon>
</view>
<view class="u-calendar__action__text">{{ showTitle }}</view>
<view class="u-calendar__action__icon">
<u-icon v-if="changeMonth" name="arrow-right" :color="monthArrowColor" @click="changeMonth(1)"></u-icon>
</view>
<view class="u-calendar__action__icon">
<u-icon v-if="changeYear" name="arrow-right-double" :color="yearArrowColor" @click="changeYear(1)"></u-icon>
</view>
</view>
<view class="u-calendar__week-day">
<view class="u-calendar__week-day__text" v-for="(item, index) in weekDayZh" :key="index">{{item}}</view>
</view>
<view class="u-calendar__content">
<!-- 前置空白部分 -->
<block v-for="(item, index) in weekdayArr" :key="index"> <block v-for="(item, index) in weekdayArr" :key="index">
<view class="u-date"></view> <view class="u-calendar__content__item"></view>
</block> </block>
<view class="u-date" :class="{'u-opacity':openDisAbled(year,month,index+1),'u-start-date':(type==2 && startDate==`${year}-${month}-${index+1}`) ||type==1,'u-end-date':(type==2 && endDate==`${year}-${month}-${index+1}`) || type==1}" <view class="u-calendar__content__item" :class="{
:style="{backgroundColor:isFixed? getColor(index,1):'transparent'}" v-for="(item, index) in daysArr" :key="index" 'u-hover-class':openDisAbled(year,month,index+1),
'u-calendar__content--start-date': (mode == 'range' && startDate==`${year}-${month}-${index+1}`) || mode== 'date',
'u-calendar__content--end-date':(mode== 'range' && endDate==`${year}-${month}-${index+1}`) || mode == 'date'
}" :style="{backgroundColor: getColor(index,1)}" v-for="(item, index) in daysArr" :key="index"
@tap="dateClick(index)"> @tap="dateClick(index)">
<view class="u-date-text" :style="{color:isFixed? getColor(index,2):getStatusData(3,index),backgroundColor: getStatusData(2,index)}"> <view class="u-calendar__content__item__inner" :style="{color: getColor(index,2)}">
<view v-if="isFixed || !getStatusData(4,index)">{{ index + 1 }}</view> <view>{{ index + 1 }}</view>
<view class="u-custom-desc">{{getStatusData(1,index)}}</view>
<text class="u-iconfont u-font-check" v-if="getStatusData(4,index)"></text>
</view> </view>
<view class="u-date-desc" :style="{color:activeColor}" v-if="type==2 && startDate==`${year}-${month}-${index+1}` && startDate!=endDate">{{startText}}</view> <view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && startDate==`${year}-${month}-${index+1}` && startDate!=endDate">{{startText}}</view>
<view class="u-date-desc" :style="{color:activeColor}" v-if="type==2 && endDate==`${year}-${month}-${index+1}`">{{endText}}</view> <view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && endDate==`${year}-${month}-${index+1}`">{{endText}}</view>
</view> </view>
<view class="u-bg-month">{{month}}</view> <view class="u-calendar__content__bg-month">{{month}}</view>
</view> </view>
<view class="u-calendar__bottom">
<view class="u-calendar-op" v-if="isFixed" @touchmove.stop.prevent="stop"> <view class="u-calendar__bottom__choose">
<view class="u-calendar-result"> <text>{{mode == 'date' ? activeDate : startDate}}</text>
<text>{{type==1?activeDate:startDate}}</text>
<text v-if="endDate">至{{endDate}}</text> <text v-if="endDate">至{{endDate}}</text>
</view> </view>
<view class="u-calendar-btn_box"> <view class="u-calendar__bottom__btn">
<u-button :type="btnType" height="72rpx" shape="circle" :size="28" @click="btnFix(false)">确定</u-button> <u-button :type="btnType" shape="circle" size="default" @click="btnFix(false)">确定</u-button>
</view> </view>
</view> </view>
</view> </view>
...@@ -78,30 +80,35 @@ ...@@ -78,30 +80,35 @@
type: [String, Number], type: [String, Number],
default: 0 default: 0
}, },
//1-切换月份和年份 2-切换月份 // 是否允许切换年份
arrowType: { changeYear: {
type: [Number, String], type: Boolean,
default: 1 default: true
}, },
//1-单个日期选择 2-开始日期+结束日期选择 // 是否允许切换月份
type: { changeMonth: {
type: Number, type: Boolean,
default: 1 default: true
},
// date-单个日期选择，range-开始日期+结束日期选择
mode: {
type: String,
default: 'date'
}, },
//可切换最大年份 // 可切换最大年份
maxYear: { maxYear: {
type: Number, type: Number,
default: 2030 default: 2050
}, },
//可切换最小年份 // 可切换最小年份
minYear: { minYear: {
type: Number, type: Number,
default: 1920 default: 1950
}, },
//最小可选日期(不在范围内日期禁用不可选) // 最小可选日期(不在范围内日期禁用不可选)
minDate: { minDate: {
type: String, type: String,
default: '1920-01-01' default: '1950-01-01'
}, },
/** /**
* 最大可选日期 * 最大可选日期
...@@ -112,70 +119,52 @@ ...@@ -112,70 +119,52 @@
type: String, type: String,
default: '' default: ''
}, },
//显示圆角 // 弹窗顶部左右两边的圆角值
radius: { borderRadius: {
type: Boolean, type: [String, Number],
default: true default: 20
},
//状态 数据顺序与当月天数一致，index=>day
/**
* [{
* text:"", 描述：2字以内
* value:"",状态值
* bgColor:"",背景色
* color:"" 文字颜色,
* check:false //是否显示对勾
*
}]
*
* **/
status: {
type: Array,
default () {
return [];
}
}, },
//月份切换箭头颜色 //月份切换箭头颜色
monthArrowColor: { monthArrowColor: {
type: String, type: String,
default: '#999' default: '#606266'
}, },
//年份切换箭头颜色 //年份切换箭头颜色
yearArrowColor: { yearArrowColor: {
type: String, type: String,
default: '#bcbcbc' default: '#909399'
}, },
//默认日期字体颜色 //默认日期字体颜色
color: { color: {
type: String, type: String,
default: '#333' default: '#303133'
}, },
//选中|起始结束日期背景色 //选中|起始结束日期背景色
activeBgColor: { activeBgColor: {
type: String, type: String,
default: '#5677fc' default: '#2979ff'
}, },
//选中|起始结束日期字体颜色 //选中|起始结束日期字体颜色
activeColor: { activeColor: {
type: String, type: String,
default: '#fff' default: '#ffffff'
}, },
//范围内日期背景色 //范围内日期背景色
rangeBgColor: { rangeBgColor: {
type: String, type: String,
default: 'rgba(86,119,252,0.1)' default: 'rgba(41,121,255,0.13)'
}, },
//范围内日期字体颜色 //范围内日期字体颜色
rangeColor: { rangeColor: {
type: String, type: String,
default: '#5677fc' default: '#2979ff'
}, },
//type=2时生效，起始日期自定义文案 //mode=range时生效，起始日期自定义文案
startText: { startText: {
type: String, type: String,
default: '开始' default: '开始'
}, },
//type=2时生效，结束日期自定义文案 //mode=range时生效，结束日期自定义文案
endText: { endText: {
type: String, type: String,
default: '结束' default: '结束'
...@@ -185,27 +174,29 @@ ...@@ -185,27 +174,29 @@
type: String, type: String,
default: 'primary' default: 'primary'
}, },
isFixed: {
type: Boolean,
default: false
},
//当前选中日期带选中效果 //当前选中日期带选中效果
isActiveCurrent: { isActiveCurrent: {
type: Boolean, type: Boolean,
default: true default: true
}, },
//切换年月是否触发事件 type=1时生效 //切换年月是否触发事件 mode=date时生效
isChange: { isChange: {
type: Boolean, type: Boolean,
default: false default: false
},
// 顶部的提示文字
toolTip: {
type: String,
default: '选择日期'
} }
}, },
data() { data() {
return { return {
isShow: false, // 星期几,值为1-7
weekday: 1, // 星期几,值为1-7 weekday: 1,
weekdayArr:[], weekdayArr:[],
days: 0, //当前月有多少天 // 当前月有多少天
days: 0,
daysArr:[], daysArr:[],
showTitle: '', showTitle: '',
year: 2020, year: 2020,
...@@ -223,12 +214,17 @@ ...@@ -223,12 +214,17 @@
endDate: '', endDate: '',
isStart: true, isStart: true,
min: null, min: null,
max: null max: null,
weekDayZh: ['日', '一', '二', '三', '四', '五', '六']
}; };
}, },
computed: { computed: {
dataChange() { dataChange() {
return `${this.type}-${this.minDate}-${this.maxDate}`; return `${this.mode}-${this.minDate}-${this.maxDate}`;
},
uZIndex() {
// 如果用户有传递z-index值，优先使用
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
} }
}, },
watch: { watch: {
...@@ -254,33 +250,6 @@ ...@@ -254,33 +250,6 @@
} }
return color; return color;
}, },
//获取状态数据
getStatusData(type, index) {
//1-描述text,2-bgColor背景色,3-color文字颜色 4-check 是否显示对勾
let val = ["", "transparent", "#333", ""][type - 1];
if (!this.isFixed && this.status && this.status.length > 0) {
let item = this.status[index]
if (item) {
switch (type) {
case 1:
val = item.text;
break;
case 2:
val = item.bgColor;
break;
case 3:
val = item.color;
break;
case 4:
val = item.check;
break;
default:
break;
}
}
}
return val;
},
init() { init() {
let now = new Date(); let now = new Date();
this.year = now.getFullYear(); this.year = now.getFullYear();
...@@ -328,9 +297,6 @@ ...@@ -328,9 +297,6 @@
formatNum: function(num) { formatNum: function(num) {
return num < 10 ? '0' + num : num + ''; return num < 10 ? '0' + num : num + '';
}, },
stop() {
return !this.isFixed
},
//一个月有多少天 //一个月有多少天
getMonthDay(year, month) { getMonthDay(year, month) {
let days = new Date(year, month, 0).getDate(); let days = new Date(year, month, 0).getDate();
...@@ -384,7 +350,7 @@ ...@@ -384,7 +350,7 @@
this.weekday = this.getWeekday(this.year, this.month); this.weekday = this.getWeekday(this.year, this.month);
this.weekdayArr=this.generateArray(1,this.weekday) this.weekdayArr=this.generateArray(1,this.weekday)
this.showTitle = `${this.year}年${this.month}月`; this.showTitle = `${this.year}年${this.month}月`;
if (this.isChange && this.type == 1) { if (this.isChange && this.mode == 'date') {
this.btnFix(true); this.btnFix(true);
} }
}, },
...@@ -393,7 +359,7 @@ ...@@ -393,7 +359,7 @@
if (!this.openDisAbled(this.year, this.month, day)) { if (!this.openDisAbled(this.year, this.month, day)) {
this.day = day; this.day = day;
let date = `${this.year}-${this.month}-${day}`; let date = `${this.year}-${this.month}-${day}`;
if (this.type == 1) { if (this.mode == 'date') {
this.activeDate = date; this.activeDate = date;
} else { } else {
let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(/\-/g, '/')).getTime() let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(/\-/g, '/')).getTime()
...@@ -416,16 +382,11 @@ ...@@ -416,16 +382,11 @@
this.isStart = true; this.isStart = true;
} }
} }
if (!this.isFixed) {
this.btnFix();
}
} }
}, },
show() { close() {
this.isShow = true; // 修改通过v-model绑定的父组件变量的值为false，从而隐藏日历弹窗
}, this.$emit('input', false);
hide() {
this.isShow = false;
}, },
getWeekText(date) { getWeekText(date) {
date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`); date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
...@@ -434,9 +395,9 @@ ...@@ -434,9 +395,9 @@
}, },
btnFix(show) { btnFix(show) {
if (!show) { if (!show) {
this.hide(); this.close();
} }
if (this.type == 1) { if (this.mode == 'date') {
let arr = this.activeDate.split('-') let arr = this.activeDate.split('-')
let year = this.isChange ? this.year : Number(arr[0]); let year = this.isChange ? this.year : Number(arr[0]);
let month = this.isChange ? this.month : Number(arr[1]); let month = this.isChange ? this.month : Number(arr[1]);
...@@ -489,128 +450,87 @@ ...@@ -489,128 +450,87 @@
}; };
</script> </script>
<style scoped> <style scoped lang="scss">
@font-face { .u-calendar {
font-family: 'tuiDateFont'; color: $u-content-color;
src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA0AAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAFRAAAABoAAAAci0/w50dERUYAAAUkAAAAHgAAAB4AKQANT1MvMgAAAaAAAABDAAAAVjxuSNNjbWFwAAAB+AAAAEoAAAFS5iPQt2dhc3AAAAUcAAAACAAAAAj//wADZ2x5ZgAAAlQAAAFHAAABvPf29TBoZWFkAAABMAAAADAAAAA2GMsN3WhoZWEAAAFgAAAAHQAAACQHjAOFaG10eAAAAeQAAAATAAAAFgzQAPJsb2NhAAACRAAAABAAAAAQAOoBSG1heHAAAAGAAAAAHgAAACABEwA3bmFtZQAAA5wAAAFJAAACiCnmEVVwb3N0AAAE6AAAADQAAABLUwjqHHjaY2BkYGAAYp5Gj5/x/DZfGbhZGEDg1tUn7+F00P/LzOuY9YFcDgYmkCgAa0gNlHjaY2BkYGBu+N/AEMPCAALM6xgYGVABCwBT4AMaAAAAeNpjYGRgYGBn0GZgYgABEMkFhAwM/8F8BgANaAFLAAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ49ZG7438AQw9zA0AAUZgTJAQDrcAy8AHjaY2GAABYIDgLCBQx1AAcEAc8AeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMzxifcTx7+P8/kMUAYUkxS/6VVIXqAgNGNgY4lxGoB6QPBTAyDHsAADDkDYkAAAAAAAAAAAAAADQAagC2AN542m2QsU7DMBCG/Tt1bNPUiUnkSgiVtqKpxJAgVLVbeAa6MaK+B4JXgJWBjY21UtW5gpkdMTFX7dzApaJLhXU6n8+n//ttxtn458N79XJWZ8eMxS00C4wy9A1EP8PQncAlIQzS4WgsVtPpSmwzV3OFRqLetH5TSQMK939X61ptPZ2p2EAttNMLBRMrtschQblDeS34aY50cIkCzg/B2Y5C+VpyQxhFkRgu515O8jvU5mmPM2O0wJ5Z27vhX+yMsV437WvCdTM+GI40MgwKfuGammC0uURqeqFMfe9cxaJclkt5GMaB1hIR1VobOgpEiKq+sLZcIrJWhO3/Jw7qWlYj1Jf21FaCtmd5bevrlk28O/7A4spXTl4KTh9MTlqQ8PESBRstReic+sRj0Dni9fIqmNS/pXNWCvWOeYBmx5S9Bsn9Ah+5WtAAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAO2MGiTIxMjMyMLIys7GmJeRmlmWZQ2pQ5OSORLaU0Mz2/FACDfwlbAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABgABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9K2rT97DaABNlwiuAAA=) format('woff');
font-weight: normal;
font-style: normal;
}
.u-iconfont {
font-family: "tuiDateFont" !important;
font-size: 36rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.u-font-close:before {
content: "\e608";
}
.u-font-check:before { &__header {
content: "\e6e1";
}
.u-font-arrowright:before {
content: "\e600";
}
.u-font-arrowleft:before {
content: "\e601";
}
.u-date-box {
width: 100%; width: 100%;
box-sizing: border-box;
font-size: 30rpx;
background-color: #fff;
color: $u-main-color;
&__text {
margin-top: 30rpx;
padding: 0 60rpx;
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
padding: 20rpx 0 30rpx; align-items: center;
background-color: #fff; }
} }
.u-calendar-radius { &__action {
border-top-left-radius: 20rpx; padding: 40rpx 0 40rpx 0;
border-top-right-radius: 20rpx;
overflow: hidden; &__icon {
margin: 0 10rpx;
} }
.u-date_time { &__text {
padding: 0 16rpx; padding: 0 16rpx;
color: #333; color: $u-main-color;
font-size: 32rpx; font-size: 32rpx;
line-height: 32rpx; line-height: 32rpx;
font-weight: bold; font-weight: bold;
} }
.u-font-arrowleft {
margin-right: 32rpx;
} }
.u-font-arrowright { &__week-day {
margin-left: 32rpx;
}
.u-date-header {
width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #fff; justify-content: center;
font-size: 24rpx; padding: 6px 0;
line-height: 24rpx; overflow: hidden;
color: #555;
box-shadow: 0 15rpx 20rpx -15rpx #efefef; &__text {
position: relative; flex: 1;
z-index: 2; }
} }
.u-date-content { &__content {
width: 100%; width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 12rpx 0; padding: 6px 0;
box-sizing: border-box; box-sizing: border-box;
background-color: #fff; background-color: #fff;
position: relative; position: relative;
}
.u-bg-month { &--end-date {
position: absolute; border-top-right-radius: 8rpx;
font-size: 260rpx; border-bottom-right-radius: 8rpx;
line-height: 260rpx;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #F5F5F7;
z-index: 1;
} }
&--start-date {
border-top-left-radius: 8rpx;
border-bottom-left-radius: 8rpx;
}
.u-date { &__item {
width: 14.2857%; width: 14.2857%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 12rpx 0; padding: 6px 0;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
z-index: 2; z-index: 2;
}
.u-start-date { &__inner {
border-top-left-radius: 8rpx; height: 84rpx;
border-bottom-left-radius: 8rpx; display: -webkit-box;
} display: -webkit-flex;
.u-end-date {
border-top-right-radius: 8rpx;
border-bottom-right-radius: 8rpx;
}
.u-date-text {
width: 80rpx;
height: 80rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -618,92 +538,8 @@ ...@@ -618,92 +538,8 @@
font-size: 32rpx; font-size: 32rpx;
position: relative; position: relative;
border-radius: 50%; border-radius: 50%;
}
.u-btn-calendar {
padding: 16rpx;
box-sizing: border-box;
text-align: center;
text-decoration: none;
}
.u-opacity {
opacity: 0.5;
}
.u-bottom-popup {
width: 100%;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
visibility: hidden;
transform: translate3d(0, 100%, 0);
transform-origin: center;
transition: all 0.3s ease-in-out;
min-height: 20rpx;
}
.u-popup-show {
transform: translate3d(0, 0, 0);
visibility: visible;
}
.u-popup-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 9996;
transition: all 0.3s ease-in-out;
opacity: 0;
visibility: hidden;
}
.u-mask-show {
opacity: 1;
visibility: visible;
}
.u-calendar-header { &__desc {
width: 100%;
height: 80rpx;
padding: 0 40rpx;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
font-size: 30rpx;
background-color: #fff;
color: #555;
position: relative;
}
.u-font-close {
position: absolute;
right: 30rpx;
top: 50%;
transform: translateY(-50%);
color: #999;
}
.u-btn-calendar {
padding: 16rpx;
box-sizing: border-box;
text-align: center;
text-decoration: none;
}
.u-font-check {
color: #fff;
font-size: 54rpx;
line-height: 54rpx;
}
.u-custom-desc {
width: 100%; width: 100%;
font-size: 24rpx; font-size: 24rpx;
line-height: 24rpx; line-height: 24rpx;
...@@ -714,8 +550,9 @@ ...@@ -714,8 +550,9 @@
text-align: center; text-align: center;
bottom: 2rpx; bottom: 2rpx;
} }
}
.u-date-desc { &__tips {
width: 100%; width: 100%;
font-size: 24rpx; font-size: 24rpx;
line-height: 24rpx; line-height: 24rpx;
...@@ -727,25 +564,39 @@ ...@@ -727,25 +564,39 @@
bottom: 8rpx; bottom: 8rpx;
z-index: 2; z-index: 2;
} }
}
&__bg-month {
position: absolute;
font-size: 130px;
line-height: 130px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #e4e7ed;
z-index: 1;
}
}
.u-calendar-op { &__bottom {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
background-color: #fff; background-color: #fff;
padding: 0 42rpx 30rpx; padding: 0 40rpx 30rpx;
box-sizing: border-box; box-sizing: border-box;
font-size: 24rpx; font-size: 24rpx;
color: #666; color: $u-tips-color;
}
.u-calendar-result { &__choose {
height: 48rpx; height: 50rpx;
} }
.u-calendar-btn_box { &__btn {
width: 100%; width: 100%;
} }
}
}
</style> </style>
\ No newline at end of file
uview-ui/components/u-select/u-select.vue
View file @ e66f6704
...@@ -97,7 +97,7 @@ export default { ...@@ -97,7 +97,7 @@ export default {
return [0]; return [0];
} }
}, },
// 模式选择 // 模式选择，single-column-单列，mutil-column-多列，mutil-column-auto-多列联动
mode: { mode: {
type: String, type: String,
default: 'single-column' default: 'single-column'
......
uview-ui/iconfont.css
View file @ e66f6704
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment