Skip to content

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

完成select组件文档编写

parent 4ca43c37
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 372 additions and 448 deletions
pages.json
View file @ e66f6704
......@@ -6,7 +6,7 @@
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "test", //模式名称
"path": "pages/componentsA/form/index", //启动页面，必选
"path": "pages/componentsA/calendar/index", //启动页面，必选
"query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
}]
},
......@@ -450,6 +450,13 @@
{
"root": "pages/componentsA",
"pages": [
// calendar-日历
{
"path": "calendar/index",
"style": {
"navigationBarTitleText": "calendar-日历"
}
},
// form-表单
{
"path": "form/index",
......
pages/componentsA/calendar/index.vue
View file @ e66f6704
......@@ -3,9 +3,11 @@
<view class="u-demo-wrap" style="background-color: #FFFFFF;">
<view class="u-demo-title">演示效果</view>
<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"
:type="type" ref="calendar" @change="change"></-calendar>
:mode="mode" ref="calendar" @change="change">
</u-calendar>
</view>
</view>
<view class="u-config-wrap">
......@@ -13,8 +15,8 @@
参数配置
</view>
<view class="u-config-item">
<view class="u-item-title">右侧按钮</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="showBtnChange"></u-subsection>
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :current="showBtnStatus" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">显示错误信息</view>
......@@ -40,23 +42,28 @@
export default {
data() {
return {
type: 1,
status: [],
show: true,
mode: 'range',
arrowType: 1,
minDate: "1920-01-01",
maxDate: "",
btnType: "primary",
activeBgColor: "#5677fc",
rangeBgColor: "rgba(86,119,252,0.1)",
rangeColor: "#5677fc",
activeBgColor: "#2979ff",
rangeBgColor: "rgba(41,121,255,0.13)",
rangeColor: "#2979ff",
startText: "开始",
endText: "结束",
result: ""
}
},
computed: {
showBtnStatus() {
return this.show ? 0 : 1;
}
},
methods: {
showBtnChange(index) {
this.showBtn = index == 0 ? true : false;
showChange(index) {
this.show = !index;
},
errorMessageChange(index) {
this.errorMessage = index == 0 ? '手机号有误' : false
......@@ -77,6 +84,14 @@
},
textareaChange(index) {
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 @@
data() {
return {
iconList: [
{
name: 'arrow-left-double'
},
{
name: 'arrow-right-double'
},
{
name: 'chat'
},
......
pages/componentsC/test/index.vue
View file @ e66f6704
<template>
<view class="u-demo">
<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>
<u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>
</template>
<script>
import citySelect from './u-city-select.vue';
export default {
components: {
citySelect
},
data() {
return {
height: 30,
bgColor: this.$u.color.bgColor,
marginTop: 30,
marginBottom: 30,
value: false,
input: '',
};
},
methods: {
cityChange(e) {
this.input = e.province.label + '-' + e.city.label + '-' + e.area.label;
export default {
data() {
return {
show: true,
list: [
{
value: 1,
label: '中国',
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: {
confirm(e) {
console.log(e);
}
}
}
};
</script>
<style scoped>
.btn-wrap {
margin: 100rpx 30rpx;
<style lang="scss">
.money{
font-size: 80rpx;
color: $u-type-primary;
}
</style>
pages/example/components.config.js
View file @ e66f6704
......@@ -33,6 +33,10 @@ export default [{
{
groupName: '表单组件',
list: [{
path: '/pages/componentsA/calendar/index',
icon: 'calendar',
title: 'Calendar 日历',
},{
path: '/pages/componentsA/select/index',
icon: 'select',
title: 'Select 列选择器',
......
uview-ui/components/u-calendar/u-calendar.vue
View file @ e66f6704
<template>
<u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
:safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
<view class="u-calendar-header" :class="{'u-calendar-radius':radius}" @touchmove.stop.prevent="stop" v-if="isFixed">
<view>日期选择</view>
<view class="u-iconfont u-font-close" hover-class="u-opacity" :hover-stay-time="150" @tap="hide"></view>
<u-popup closeable :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
:safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex" :border-radius="borderRadius">
<view class="u-calendar">
<view class="u-calendar__header">
<view class="u-calendar__header__text" v-if="!$slots['tool-tip']">
{{toolTip}}
</view>
<slot v-else name="tool-tip" />
</view>
<view class="u-date-box">
<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 class="u-calendar__action u-flex u-row-center">
<view class="u-calendar__action__icon">
<u-icon v-if="changeYear" name="arrow-left-double" :color="yearArrowColor" @click="changeYear(0)"></u-icon>
</view>
<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-date-header">
<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 class="u-date">五</view>
<view class="u-date">六</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-date-content">
<view class="u-calendar__content">
<!-- 前置空白部分 -->
<block v-for="(item, index) in weekdayArr" :key="index">
<view class="u-date"></view>
<view class="u-calendar__content__item"></view>
</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}"
:style="{backgroundColor:isFixed? getColor(index,1):'transparent'}" v-for="(item, index) in daysArr" :key="index"
<view class="u-calendar__content__item" :class="{
'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)">
<view class="u-date-text" :style="{color:isFixed? getColor(index,2):getStatusData(3,index),backgroundColor: getStatusData(2,index)}">
<view v-if="isFixed || !getStatusData(4,index)">{{ 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 class="u-calendar__content__item__inner" :style="{color: getColor(index,2)}">
<view>{{ index + 1 }}</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-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' && startDate==`${year}-${month}-${index+1}` && startDate!=endDate">{{startText}}</view>
<view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && endDate==`${year}-${month}-${index+1}`">{{endText}}</view>
</view>
<view class="u-bg-month">{{month}}</view>
<view class="u-calendar__content__bg-month">{{month}}</view>
</view>
<view class="u-calendar-op" v-if="isFixed" @touchmove.stop.prevent="stop">
<view class="u-calendar-result">
<text>{{type==1?activeDate:startDate}}</text>
<view class="u-calendar__bottom">
<view class="u-calendar__bottom__choose">
<text>{{mode == 'date' ? activeDate : startDate}}</text>
<text v-if="endDate">至{{endDate}}</text>
</view>
<view class="u-calendar-btn_box">
<u-button :type="btnType" height="72rpx" shape="circle" :size="28" @click="btnFix(false)">确定</u-button>
<view class="u-calendar__bottom__btn">
<u-button :type="btnType" shape="circle" size="default" @click="btnFix(false)">确定</u-button>
</view>
</view>
</view>
......@@ -78,30 +80,35 @@
type: [String, Number],
default: 0
},
//1-切换月份和年份 2-切换月份
arrowType: {
type: [Number, String],
default: 1
// 是否允许切换年份
changeYear: {
type: Boolean,
default: true
},
//1-单个日期选择 2-开始日期+结束日期选择
type: {
type: Number,
default: 1
// 是否允许切换月份
changeMonth: {
type: Boolean,
default: true
},
//可切换最大年份
// date-单个日期选择，range-开始日期+结束日期选择
mode: {
type: String,
default: 'date'
},
// 可切换最大年份
maxYear: {
type: Number,
default: 2030
default: 2050
},
//可切换最小年份
// 可切换最小年份
minYear: {
type: Number,
default: 1920
default: 1950
},
//最小可选日期(不在范围内日期禁用不可选)
// 最小可选日期(不在范围内日期禁用不可选)
minDate: {
type: String,
default: '1920-01-01'
default: '1950-01-01'
},
/**
* 最大可选日期
......@@ -112,70 +119,52 @@
type: String,
default: ''
},
//显示圆角
radius: {
type: Boolean,
default: true
},
//状态 数据顺序与当月天数一致，index=>day
/**
* [{
* text:"", 描述：2字以内
* value:"",状态值
* bgColor:"",背景色
* color:"" 文字颜色,
* check:false //是否显示对勾
*
}]
*
* **/
status: {
type: Array,
default () {
return [];
}
// 弹窗顶部左右两边的圆角值
borderRadius: {
type: [String, Number],
default: 20
},
//月份切换箭头颜色
monthArrowColor: {
type: String,
default: '#999'
default: '#606266'
},
//年份切换箭头颜色
yearArrowColor: {
type: String,
default: '#bcbcbc'
default: '#909399'
},
//默认日期字体颜色
color: {
type: String,
default: '#333'
default: '#303133'
},
//选中|起始结束日期背景色
activeBgColor: {
type: String,
default: '#5677fc'
default: '#2979ff'
},
//选中|起始结束日期字体颜色
activeColor: {
type: String,
default: '#fff'
default: '#ffffff'
},
//范围内日期背景色
rangeBgColor: {
type: String,
default: 'rgba(86,119,252,0.1)'
default: 'rgba(41,121,255,0.13)'
},
//范围内日期字体颜色
rangeColor: {
type: String,
default: '#5677fc'
default: '#2979ff'
},
//type=2时生效，起始日期自定义文案
//mode=range时生效，起始日期自定义文案
startText: {
type: String,
default: '开始'
},
//type=2时生效，结束日期自定义文案
//mode=range时生效，结束日期自定义文案
endText: {
type: String,
default: '结束'
......@@ -185,27 +174,29 @@
type: String,
default: 'primary'
},
isFixed: {
type: Boolean,
default: false
},
//当前选中日期带选中效果
isActiveCurrent: {
type: Boolean,
default: true
},
//切换年月是否触发事件 type=1时生效
//切换年月是否触发事件 mode=date时生效
isChange: {
type: Boolean,
default: false
},
// 顶部的提示文字
toolTip: {
type: String,
default: '选择日期'
}
},
data() {
return {
isShow: false,
weekday: 1, // 星期几,值为1-7
// 星期几,值为1-7
weekday: 1,
weekdayArr:[],
days: 0, //当前月有多少天
// 当前月有多少天
days: 0,
daysArr:[],
showTitle: '',
year: 2020,
......@@ -223,12 +214,17 @@
endDate: '',
isStart: true,
min: null,
max: null
max: null,
weekDayZh: ['日', '一', '二', '三', '四', '五', '六']
};
},
computed: {
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: {
......@@ -254,33 +250,6 @@
}
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() {
let now = new Date();
this.year = now.getFullYear();
......@@ -328,9 +297,6 @@
formatNum: function(num) {
return num < 10 ? '0' + num : num + '';
},
stop() {
return !this.isFixed
},
//一个月有多少天
getMonthDay(year, month) {
let days = new Date(year, month, 0).getDate();
......@@ -384,7 +350,7 @@
this.weekday = this.getWeekday(this.year, this.month);
this.weekdayArr=this.generateArray(1,this.weekday)
this.showTitle = `${this.year}年${this.month}月`;
if (this.isChange && this.type == 1) {
if (this.isChange && this.mode == 'date') {
this.btnFix(true);
}
},
......@@ -393,7 +359,7 @@
if (!this.openDisAbled(this.year, this.month, day)) {
this.day = day;
let date = `${this.year}-${this.month}-${day}`;
if (this.type == 1) {
if (this.mode == 'date') {
this.activeDate = date;
} else {
let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(/\-/g, '/')).getTime()
......@@ -416,16 +382,11 @@
this.isStart = true;
}
}
if (!this.isFixed) {
this.btnFix();
}
}
},
show() {
this.isShow = true;
},
hide() {
this.isShow = false;
close() {
// 修改通过v-model绑定的父组件变量的值为false，从而隐藏日历弹窗
this.$emit('input', false);
},
getWeekText(date) {
date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
......@@ -434,9 +395,9 @@
},
btnFix(show) {
if (!show) {
this.hide();
this.close();
}
if (this.type == 1) {
if (this.mode == 'date') {
let arr = this.activeDate.split('-')
let year = this.isChange ? this.year : Number(arr[0]);
let month = this.isChange ? this.month : Number(arr[1]);
......@@ -489,263 +450,153 @@
};
</script>
<style scoped>
@font-face {
font-family: 'tuiDateFont';
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 {
content: "\e6e1";
}
.u-font-arrowright:before {
content: "\e600";
}
.u-font-arrowleft:before {
content: "\e601";
}
.u-date-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 0 30rpx;
background-color: #fff;
}
.u-calendar-radius {
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
overflow: hidden;
}
.u-date_time {
padding: 0 16rpx;
color: #333;
font-size: 32rpx;
line-height: 32rpx;
font-weight: bold;
}
.u-font-arrowleft {
margin-right: 32rpx;
}
.u-font-arrowright {
margin-left: 32rpx;
}
.u-date-header {
width: 100%;
display: flex;
align-items: center;
background-color: #fff;
font-size: 24rpx;
line-height: 24rpx;
color: #555;
box-shadow: 0 15rpx 20rpx -15rpx #efefef;
position: relative;
z-index: 2;
}
.u-date-content {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 12rpx 0;
box-sizing: border-box;
background-color: #fff;
position: relative;
}
.u-bg-month {
position: absolute;
font-size: 260rpx;
line-height: 260rpx;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #F5F5F7;
z-index: 1;
}
.u-date {
width: 14.2857%;
display: flex;
align-items: center;
justify-content: center;
padding: 12rpx 0;
overflow: hidden;
position: relative;
z-index: 2;
}
.u-start-date {
border-top-left-radius: 8rpx;
border-bottom-left-radius: 8rpx;
}
.u-end-date {
border-top-right-radius: 8rpx;
border-bottom-right-radius: 8rpx;
}
.u-date-text {
width: 80rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 32rpx;
position: relative;
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 {
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%;
font-size: 24rpx;
line-height: 24rpx;
transform: scale(0.75);
transform-origin: center center;
position: absolute;
left: 0;
text-align: center;
bottom: 2rpx;
}
.u-date-desc {
width: 100%;
font-size: 24rpx;
line-height: 24rpx;
position: absolute;
left: 0;
transform: scale(0.8);
transform-origin: center center;
text-align: center;
bottom: 8rpx;
z-index: 2;
}
.u-calendar-op {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #fff;
padding: 0 42rpx 30rpx;
box-sizing: border-box;
font-size: 24rpx;
color: #666;
}
.u-calendar-result {
height: 48rpx;
}
.u-calendar-btn_box {
width: 100%;
<style scoped lang="scss">
.u-calendar {
color: $u-content-color;
&__header {
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;
justify-content: center;
align-items: center;
}
}
&__action {
padding: 40rpx 0 40rpx 0;
&__icon {
margin: 0 10rpx;
}
&__text {
padding: 0 16rpx;
color: $u-main-color;
font-size: 32rpx;
line-height: 32rpx;
font-weight: bold;
}
}
&__week-day {
display: flex;
align-items: center;
justify-content: center;
padding: 6px 0;
overflow: hidden;
&__text {
flex: 1;
}
}
&__content {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 6px 0;
box-sizing: border-box;
background-color: #fff;
position: relative;
&--end-date {
border-top-right-radius: 8rpx;
border-bottom-right-radius: 8rpx;
}
&--start-date {
border-top-left-radius: 8rpx;
border-bottom-left-radius: 8rpx;
}
&__item {
width: 14.2857%;
display: flex;
align-items: center;
justify-content: center;
padding: 6px 0;
overflow: hidden;
position: relative;
z-index: 2;
&__inner {
height: 84rpx;
display: -webkit-box;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 32rpx;
position: relative;
border-radius: 50%;
&__desc {
width: 100%;
font-size: 24rpx;
line-height: 24rpx;
transform: scale(0.75);
transform-origin: center center;
position: absolute;
left: 0;
text-align: center;
bottom: 2rpx;
}
}
&__tips {
width: 100%;
font-size: 24rpx;
line-height: 24rpx;
position: absolute;
left: 0;
transform: scale(0.8);
transform-origin: center center;
text-align: center;
bottom: 8rpx;
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;
}
}
&__bottom {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #fff;
padding: 0 40rpx 30rpx;
box-sizing: border-box;
font-size: 24rpx;
color: $u-tips-color;
&__choose {
height: 50rpx;
}
&__btn {
width: 100%;
}
}
}
</style>
\ No newline at end of file
uview-ui/components/u-select/u-select.vue
View file @ e66f6704
......@@ -97,7 +97,7 @@ export default {
return [0];
}
},
// 模式选择
// 模式选择，single-column-单列，mutil-column-多列，mutil-column-auto-多列联动
mode: {
type: String,
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