36 changed files with 6948 additions and 0 deletions
@ -0,0 +1,168 @@ |
|||||
|
## 2.2.38（2024-10-15） |
||||
|
- 修复 微信小程序中的getSystemInfo警告 |
||||
|
## 2.2.37（2024-10-12） |
||||
|
- 修复 微信小程序中的getSystemInfo警告 |
||||
|
## 2.2.36（2024-10-12） |
||||
|
- 修复 微信小程序中的getSystemInfo警告 |
||||
|
## 2.2.35（2024-09-21） |
||||
|
- 修复 没有选中日期时点击确定直接报错的Bug [详情](https://ask.dcloud.net.cn/question/198168) |
||||
|
## 2.2.34（2024-04-24） |
||||
|
- 新增 日期点击事件，在点击日期时会触发该事件。 |
||||
|
## 2.2.33（2024-04-15） |
||||
|
- 修复 抖音小程序事件传递失效bug |
||||
|
## 2.2.32（2024-02-20） |
||||
|
- 修复 日历的close事件触发异常的bug [详情](https://github.com/dcloudio/uni-ui/issues/844) |
||||
|
## 2.2.31（2024-02-20） |
||||
|
- 修复 h5平台 右边日历的月份默认+1的bug [详情](https://github.com/dcloudio/uni-ui/issues/841) |
||||
|
## 2.2.30（2024-01-31） |
||||
|
- 修复 隐藏“秒”时，在IOS15及以下版本时出现 结束时间在开始时间之前 的bug [详情](https://github.com/dcloudio/uni-ui/issues/788) |
||||
|
## 2.2.29（2024-01-20） |
||||
|
- 新增 show事件，弹窗弹出时触发该事件 [详情](https://github.com/dcloudio/uni-app/issues/4694) |
||||
|
## 2.2.28（2024-01-18） |
||||
|
- 去除 noChange事件，当进行日期范围选择时，若只选了一天，则开始结束日期都为同一天 [详情](https://github.com/dcloudio/uni-ui/issues/815) |
||||
|
## 2.2.27（2024-01-10） |
||||
|
- 优化 增加noChange事件，当进行日期范围选择时，若有空值，则触发该事件 [详情](https://github.com/dcloudio/uni-ui/issues/815) |
||||
|
## 2.2.26（2024-01-08） |
||||
|
- 修复 字节小程序时间选择范围器失效问题 [详情](https://github.com/dcloudio/uni-ui/issues/834) |
||||
|
## 2.2.25（2023-10-18） |
||||
|
- 修复 PC端初次修改时间，开始时间未更新的Bug [详情](https://github.com/dcloudio/uni-ui/issues/737) |
||||
|
## 2.2.24（2023-06-02） |
||||
|
- 修复 部分情况修改时间，开始、结束时间显示异常的Bug [详情](https://ask.dcloud.net.cn/question/171146) |
||||
|
- 优化 当前月可以选择上月、下月的日期的Bug |
||||
|
## 2.2.23（2023-05-02） |
||||
|
- 修复 部分情况修改时间，开始时间未更新的Bug [详情](https://github.com/dcloudio/uni-ui/issues/737) |
||||
|
- 修复 部分平台及设备第一次点击无法显示弹框的Bug |
||||
|
- 修复 ios 日期格式未补零显示及使用异常的Bug [详情](https://ask.dcloud.net.cn/question/162979) |
||||
|
## 2.2.22（2023-03-30） |
||||
|
- 修复 日历 picker 修改年月后，自动选中当月1日的Bug [详情](https://ask.dcloud.net.cn/question/165937) |
||||
|
- 修复 小程序端 低版本 ios NaN的Bug [详情](https://ask.dcloud.net.cn/question/162979) |
||||
|
## 2.2.21（2023-02-20） |
||||
|
- 修复 firefox 浏览器显示区域点击无法拉起日历弹框的Bug [详情](https://ask.dcloud.net.cn/question/163362) |
||||
|
## 2.2.20（2023-02-17） |
||||
|
- 优化 值为空依然选中当天问题 |
||||
|
- 优化 提供 default-value 属性支持配置选择器打开时默认显示的时间 |
||||
|
- 优化 非范围选择未选择日期时间，点击确认按钮选中当前日期时间 |
||||
|
- 优化 字节小程序日期时间范围选择，底部日期换行的Bug |
||||
|
## 2.2.19（2023-02-09） |
||||
|
- 修复 2.2.18 引起范围选择配置 end 选择无效的Bug [详情](https://github.com/dcloudio/uni-ui/issues/686) |
||||
|
## 2.2.18（2023-02-08） |
||||
|
- 修复 移动端范围选择change事件触发异常的Bug [详情](https://github.com/dcloudio/uni-ui/issues/684) |
||||
|
- 优化 PC端输入日期格式错误时返回当前日期时间 |
||||
|
- 优化 PC端输入日期时间超出 start、end 限制的Bug |
||||
|
- 优化 移动端日期时间范围用法时间展示不完整问题 |
||||
|
## 2.2.17（2023-02-04） |
||||
|
- 修复 小程序端绑定 Date 类型报错的Bug [详情](https://github.com/dcloudio/uni-ui/issues/679) |
||||
|
- 修复 vue3 time-picker 无法显示绑定时分秒的Bug |
||||
|
## 2.2.16（2023-02-02） |
||||
|
- 修复 字节小程序报错的Bug |
||||
|
## 2.2.15（2023-02-02） |
||||
|
- 修复 某些情况切换月份错误的Bug |
||||
|
## 2.2.14（2023-01-30） |
||||
|
- 修复 某些情况切换月份错误的Bug [详情](https://ask.dcloud.net.cn/question/162033) |
||||
|
## 2.2.13（2023-01-10） |
||||
|
- 修复 多次加载组件造成内存占用的Bug |
||||
|
## 2.2.12（2022-12-01） |
||||
|
- 修复 vue3 下 i18n 国际化初始值不正确的Bug |
||||
|
## 2.2.11（2022-09-19） |
||||
|
- 修复 支付宝小程序样式错乱的Bug [详情](https://github.com/dcloudio/uni-app/issues/3861) |
||||
|
## 2.2.10（2022-09-19） |
||||
|
- 修复 反向选择日期范围，日期显示异常的Bug [详情](https://ask.dcloud.net.cn/question/153401?item_id=212892&rf=false) |
||||
|
## 2.2.9（2022-09-16） |
||||
|
- 可以使用 uni-scss 控制主题色 |
||||
|
## 2.2.8（2022-09-08） |
||||
|
- 修复 close事件无效的Bug |
||||
|
## 2.2.7（2022-09-05） |
||||
|
- 修复 移动端 maskClick 无效的Bug [详情](https://ask.dcloud.net.cn/question/140824) |
||||
|
## 2.2.6（2022-06-30） |
||||
|
- 优化 组件样式，调整了组件图标大小、高度、颜色等，与uni-ui风格保持一致 |
||||
|
## 2.2.5（2022-06-24） |
||||
|
- 修复 日历顶部年月及底部确认未国际化的Bug |
||||
|
## 2.2.4（2022-03-31） |
||||
|
- 修复 Vue3 下动态赋值,单选类型未响应的Bug |
||||
|
## 2.2.3（2022-03-28） |
||||
|
- 修复 Vue3 下动态赋值未响应的Bug |
||||
|
## 2.2.2（2021-12-10） |
||||
|
- 修复 clear-icon 属性在小程序平台不生效的Bug |
||||
|
## 2.2.1（2021-12-10） |
||||
|
- 修复 日期范围选在小程序平台，必须多点击一次才能取消选中状态的Bug |
||||
|
## 2.2.0（2021-11-19） |
||||
|
- 优化 组件UI，并提供设计资源 [详情](https://uniapp.dcloud.io/component/uniui/resource) |
||||
|
- 文档迁移 [https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker) |
||||
|
## 2.1.5（2021-11-09） |
||||
|
- 新增 提供组件设计资源，组件样式调整 |
||||
|
## 2.1.4（2021-09-10） |
||||
|
- 修复 hide-second 在移动端的Bug |
||||
|
- 修复 单选赋默认值时，赋值日期未高亮的Bug |
||||
|
- 修复 赋默认值时，移动端未正确显示时间的Bug |
||||
|
## 2.1.3（2021-09-09） |
||||
|
- 新增 hide-second 属性，支持只使用时分，隐藏秒 |
||||
|
## 2.1.2（2021-09-03） |
||||
|
- 优化 取消选中时（范围选）直接开始下一次选择, 避免多点一次 |
||||
|
- 优化 移动端支持清除按钮，同时支持通过 ref 调用组件的 clear 方法 |
||||
|
- 优化 调整字号大小，美化日历界面 |
||||
|
- 修复 因国际化导致的 placeholder 失效的Bug |
||||
|
## 2.1.1（2021-08-24） |
||||
|
- 新增 支持国际化 |
||||
|
- 优化 范围选择器在 pc 端过宽的问题 |
||||
|
## 2.1.0（2021-08-09） |
||||
|
- 新增 适配 vue3 |
||||
|
## 2.0.19（2021-08-09） |
||||
|
- 新增 支持作为 uni-forms 子组件相关功能 |
||||
|
- 修复 在 uni-forms 中使用时，选择时间报 NAN 错误的Bug |
||||
|
## 2.0.18（2021-08-05） |
||||
|
- 修复 type 属性动态赋值无效的Bug |
||||
|
- 修复 ‘确认’按钮被 tabbar 遮盖 bug |
||||
|
- 修复 组件未赋值时范围选左、右日历相同的Bug |
||||
|
## 2.0.17（2021-08-04） |
||||
|
- 修复 范围选未正确显示当前值的Bug |
||||
|
- 修复 h5 平台（移动端）报错 'cale' of undefined 的Bug |
||||
|
## 2.0.16（2021-07-21） |
||||
|
- 新增 return-type 属性支持返回 date 日期对象 |
||||
|
## 2.0.15（2021-07-14） |
||||
|
- 修复 单选日期类型，初始赋值后不在当前日历的Bug |
||||
|
- 新增 clearIcon 属性，显示框的清空按钮可配置显示隐藏（仅 pc 有效） |
||||
|
- 优化 移动端移除显示框的清空按钮，无实际用途 |
||||
|
## 2.0.14（2021-07-14） |
||||
|
- 修复 组件赋值为空，界面未更新的Bug |
||||
|
- 修复 start 和 end 不能动态赋值的Bug |
||||
|
- 修复 范围选类型，用户选择后再次选择右侧日历（结束日期）显示不正确的Bug |
||||
|
## 2.0.13（2021-07-08） |
||||
|
- 修复 范围选择不能动态赋值的Bug |
||||
|
## 2.0.12（2021-07-08） |
||||
|
- 修复 范围选择的初始时间在一个月内时，造成无法选择的bug |
||||
|
## 2.0.11（2021-07-08） |
||||
|
- 优化 弹出层在超出视窗边缘定位不准确的问题 |
||||
|
## 2.0.10（2021-07-08） |
||||
|
- 修复 范围起始点样式的背景色与今日样式的字体前景色融合，导致日期字体看不清的Bug |
||||
|
- 优化 弹出层在超出视窗边缘被遮盖的问题 |
||||
|
## 2.0.9（2021-07-07） |
||||
|
- 新增 maskClick 事件 |
||||
|
- 修复 特殊情况日历 rpx 布局错误的Bug，rpx -> px |
||||
|
- 修复 范围选择时清空返回值不合理的bug，['', ''] -> [] |
||||
|
## 2.0.8（2021-07-07） |
||||
|
- 新增 日期时间显示框支持插槽 |
||||
|
## 2.0.7（2021-07-01） |
||||
|
- 优化 添加 uni-icons 依赖 |
||||
|
## 2.0.6（2021-05-22） |
||||
|
- 修复 图标在小程序上不显示的Bug |
||||
|
- 优化 重命名引用组件，避免潜在组件命名冲突 |
||||
|
## 2.0.5（2021-05-20） |
||||
|
- 优化 代码目录扁平化 |
||||
|
## 2.0.4（2021-05-12） |
||||
|
- 新增 组件示例地址 |
||||
|
## 2.0.3（2021-05-10） |
||||
|
- 修复 ios 下不识别 '-' 日期格式的Bug |
||||
|
- 优化 pc 下弹出层添加边框和阴影 |
||||
|
## 2.0.2（2021-05-08） |
||||
|
- 修复 在 admin 中获取弹出层定位错误的bug |
||||
|
## 2.0.1（2021-05-08） |
||||
|
- 修复 type 属性向下兼容，默认值从 date 变更为 datetime |
||||
|
## 2.0.0（2021-04-30） |
||||
|
- 支持日历形式的日期+时间的范围选择 |
||||
|
> 注意：此版本不向后兼容，不再支持单独时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker） |
||||
|
## 1.0.6（2021-03-18） |
||||
|
- 新增 hide-second 属性，时间支持仅选择时、分 |
||||
|
- 修复 选择跟显示的日期不一样的Bug |
||||
|
- 修复 chang事件触发2次的Bug |
||||
|
- 修复 分、秒 end 范围错误的Bug |
||||
|
- 优化 更好的 nvue 适配 |
||||
@ -0,0 +1,177 @@ |
|||||
|
<template> |
||||
|
<view class="uni-calendar-item__weeks-box" :class="{ |
||||
|
'uni-calendar-item--disable':weeks.disable, |
||||
|
'uni-calendar-item--before-checked-x':weeks.beforeMultiple, |
||||
|
'uni-calendar-item--multiple': weeks.multiple, |
||||
|
'uni-calendar-item--after-checked-x':weeks.afterMultiple, |
||||
|
}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)"> |
||||
|
<view class="uni-calendar-item__weeks-box-item" :class="{ |
||||
|
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover), |
||||
|
'uni-calendar-item--checked-range-text': checkHover, |
||||
|
'uni-calendar-item--before-checked':weeks.beforeMultiple, |
||||
|
'uni-calendar-item--multiple': weeks.multiple, |
||||
|
'uni-calendar-item--after-checked':weeks.afterMultiple, |
||||
|
'uni-calendar-item--disable':weeks.disable, |
||||
|
}"> |
||||
|
<text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text> |
||||
|
<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text> |
||||
|
</view> |
||||
|
<view :class="{'uni-calendar-item--today': weeks.isToday}"></view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
weeks: { |
||||
|
type: Object, |
||||
|
default () { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
calendar: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
selected: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
checkHover: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
choiceDate(weeks) { |
||||
|
this.$emit('change', weeks) |
||||
|
}, |
||||
|
handleMousemove(weeks) { |
||||
|
this.$emit('handleMouse', weeks) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" > |
||||
|
$uni-primary: #007aff !default; |
||||
|
|
||||
|
.uni-calendar-item__weeks-box { |
||||
|
flex: 1; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin: 1px 0; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar-item__weeks-box-text { |
||||
|
font-size: 14px; |
||||
|
// font-family: Lato-Bold, Lato; |
||||
|
font-weight: bold; |
||||
|
color: darken($color: $uni-primary, $amount: 40%); |
||||
|
} |
||||
|
|
||||
|
.uni-calendar-item__weeks-box-item { |
||||
|
position: relative; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
/* #ifdef H5 */ |
||||
|
cursor: pointer; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.uni-calendar-item__weeks-box-circle { |
||||
|
position: absolute; |
||||
|
top: 5px; |
||||
|
right: 5px; |
||||
|
width: 8px; |
||||
|
height: 8px; |
||||
|
border-radius: 8px; |
||||
|
background-color: #dd524d; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.uni-calendar-item__weeks-box .uni-calendar-item--disable { |
||||
|
cursor: default; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable { |
||||
|
color: #D1D1D1; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar-item--today { |
||||
|
position: absolute; |
||||
|
top: 10px; |
||||
|
right: 17%; |
||||
|
background-color: #dd524d; |
||||
|
width:6px; |
||||
|
height: 6px; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar-item--extra { |
||||
|
color: #dd524d; |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar-item__weeks-box .uni-calendar-item--checked { |
||||
|
background-color: $uni-primary; |
||||
|
border-radius: 50%; |
||||
|
box-sizing: border-box; |
||||
|
border: 3px solid #fff; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar-item--checked .uni-calendar-item--checked-text { |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text { |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar-item--multiple { |
||||
|
background-color: #F6F7FC; |
||||
|
// color: #fff; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar-item--multiple .uni-calendar-item--before-checked, |
||||
|
.uni-calendar-item--multiple .uni-calendar-item--after-checked { |
||||
|
background-color: $uni-primary; |
||||
|
border-radius: 50%; |
||||
|
box-sizing: border-box; |
||||
|
border: 3px solid #F6F7FC; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar-item--before-checked .uni-calendar-item--checked-text, |
||||
|
.uni-calendar-item--after-checked .uni-calendar-item--checked-text { |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar-item--before-checked-x { |
||||
|
border-top-left-radius: 50px; |
||||
|
border-bottom-left-radius: 50px; |
||||
|
box-sizing: border-box; |
||||
|
background-color: #F6F7FC; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar-item--after-checked-x { |
||||
|
border-top-right-radius: 50px; |
||||
|
border-bottom-right-radius: 50px; |
||||
|
background-color: #F6F7FC; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,947 @@ |
|||||
|
<template> |
||||
|
<view class="uni-calendar" @mouseleave="leaveCale"> |
||||
|
|
||||
|
<view v-if="!insert && show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" |
||||
|
@click="maskClick"></view> |
||||
|
|
||||
|
<view v-if="insert || show" class="uni-calendar__content" |
||||
|
:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}"> |
||||
|
<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}"> |
||||
|
|
||||
|
<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('pre')"> |
||||
|
<view class="uni-calendar__header-btn uni-calendar--left"></view> |
||||
|
</view> |
||||
|
|
||||
|
<picker mode="date" :value="date" fields="month" @change="bindDateChange"> |
||||
|
<text |
||||
|
class="uni-calendar__header-text">{{ (nowDate.year||'') + yearText + ( nowDate.month||'') + monthText}}</text> |
||||
|
</picker> |
||||
|
|
||||
|
<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('next')"> |
||||
|
<view class="uni-calendar__header-btn uni-calendar--right"></view> |
||||
|
</view> |
||||
|
|
||||
|
<view v-if="!insert" class="dialog-close" @click="maskClick"> |
||||
|
<view class="dialog-close-plus" data-id="close"></view> |
||||
|
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="uni-calendar__box"> |
||||
|
|
||||
|
<view v-if="showMonth" class="uni-calendar__box-bg"> |
||||
|
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="uni-calendar__weeks" style="padding-bottom: 7px;"> |
||||
|
<view class="uni-calendar__weeks-day"> |
||||
|
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text> |
||||
|
</view> |
||||
|
<view class="uni-calendar__weeks-day"> |
||||
|
<text class="uni-calendar__weeks-day-text">{{MONText}}</text> |
||||
|
</view> |
||||
|
<view class="uni-calendar__weeks-day"> |
||||
|
<text class="uni-calendar__weeks-day-text">{{TUEText}}</text> |
||||
|
</view> |
||||
|
<view class="uni-calendar__weeks-day"> |
||||
|
<text class="uni-calendar__weeks-day-text">{{WEDText}}</text> |
||||
|
</view> |
||||
|
<view class="uni-calendar__weeks-day"> |
||||
|
<text class="uni-calendar__weeks-day-text">{{THUText}}</text> |
||||
|
</view> |
||||
|
<view class="uni-calendar__weeks-day"> |
||||
|
<text class="uni-calendar__weeks-day-text">{{FRIText}}</text> |
||||
|
</view> |
||||
|
<view class="uni-calendar__weeks-day"> |
||||
|
<text class="uni-calendar__weeks-day-text">{{SATText}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex"> |
||||
|
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex"> |
||||
|
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" |
||||
|
:checkHover="range" @change="choiceDate" @handleMouse="handleMouse"> |
||||
|
</calendar-item> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view v-if="!insert && !range && hasTime" class="uni-date-changed uni-calendar--fixed-top" |
||||
|
style="padding: 0 80px;"> |
||||
|
<view class="uni-date-changed--time-date">{{tempSingleDate ? tempSingleDate : selectDateText}}</view> |
||||
|
<time-picker type="time" :start="timepickerStartTime" :end="timepickerEndTime" v-model="time" |
||||
|
:disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style"> |
||||
|
</time-picker> |
||||
|
</view> |
||||
|
|
||||
|
<view v-if="!insert && range && hasTime" class="uni-date-changed uni-calendar--fixed-top"> |
||||
|
<view class="uni-date-changed--time-start"> |
||||
|
<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}} |
||||
|
</view> |
||||
|
<time-picker type="time" :start="timepickerStartTime" v-model="timeRange.startTime" :border="false" |
||||
|
:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style"> |
||||
|
</time-picker> |
||||
|
</view> |
||||
|
<view style="line-height: 50px;"> |
||||
|
<uni-icons type="arrowthinright" color="#999"></uni-icons> |
||||
|
</view> |
||||
|
<view class="uni-date-changed--time-end"> |
||||
|
<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view> |
||||
|
<time-picker type="time" :end="timepickerEndTime" v-model="timeRange.endTime" :border="false" |
||||
|
:hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style"> |
||||
|
</time-picker> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view v-if="!insert" class="uni-date-changed uni-date-btn--ok"> |
||||
|
<view class="uni-datetime-picker--btn" @click="confirm">{{confirmText}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
Calendar, |
||||
|
getDate, |
||||
|
getTime |
||||
|
} from './util.js'; |
||||
|
import calendarItem from './calendar-item.vue' |
||||
|
import timePicker from './time-picker.vue' |
||||
|
|
||||
|
import { |
||||
|
initVueI18n |
||||
|
} from '@dcloudio/uni-i18n' |
||||
|
import i18nMessages from './i18n/index.js' |
||||
|
const { |
||||
|
t |
||||
|
} = initVueI18n(i18nMessages) |
||||
|
|
||||
|
/** |
||||
|
* Calendar 日历 |
||||
|
* @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等 |
||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=56 |
||||
|
* @property {String} date 自定义当前时间，默认为今天 |
||||
|
* @property {String} startDate 日期选择范围-开始日期 |
||||
|
* @property {String} endDate 日期选择范围-结束日期 |
||||
|
* @property {Boolean} range 范围选择 |
||||
|
* @property {Boolean} insert = [true|false] 插入模式,默认为false |
||||
|
* @value true 弹窗模式 |
||||
|
* @value false 插入模式 |
||||
|
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容 |
||||
|
* @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}] |
||||
|
* @property {Boolean} showMonth 是否选择月份为背景 |
||||
|
* @property {[String} defaultValue 选择器打开时默认显示的时间 |
||||
|
* @event {Function} change 日期改变，`insert :ture` 时生效 |
||||
|
* @event {Function} confirm 确认选择`insert :false` 时生效 |
||||
|
* @event {Function} monthSwitch 切换月份时触发 |
||||
|
* @example <uni-calendar :insert="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" /> |
||||
|
*/ |
||||
|
export default { |
||||
|
components: { |
||||
|
calendarItem, |
||||
|
timePicker |
||||
|
}, |
||||
|
|
||||
|
options: { |
||||
|
// #ifdef MP-TOUTIAO |
||||
|
virtualHost: false, |
||||
|
// #endif |
||||
|
// #ifndef MP-TOUTIAO |
||||
|
virtualHost: true |
||||
|
// #endif |
||||
|
}, |
||||
|
props: { |
||||
|
date: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
defTime: { |
||||
|
type: [String, Object], |
||||
|
default: '' |
||||
|
}, |
||||
|
selectableTimes: { |
||||
|
type: [Object], |
||||
|
default () { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
selected: { |
||||
|
type: Array, |
||||
|
default () { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
startDate: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
endDate: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
startPlaceholder: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
endPlaceholder: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
range: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
hasTime: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
insert: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
showMonth: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
clearDate: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
checkHover: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
hideSecond: { |
||||
|
type: [Boolean], |
||||
|
default: false |
||||
|
}, |
||||
|
pleStatus: { |
||||
|
type: Object, |
||||
|
default () { |
||||
|
return { |
||||
|
before: '', |
||||
|
after: '', |
||||
|
data: [], |
||||
|
fulldate: '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
defaultValue: { |
||||
|
type: [String, Object, Array], |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
show: false, |
||||
|
weeks: [], |
||||
|
calendar: {}, |
||||
|
nowDate: {}, |
||||
|
aniMaskShow: false, |
||||
|
firstEnter: true, |
||||
|
time: '', |
||||
|
timeRange: { |
||||
|
startTime: '', |
||||
|
endTime: '' |
||||
|
}, |
||||
|
tempSingleDate: '', |
||||
|
tempRange: { |
||||
|
before: '', |
||||
|
after: '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
date: { |
||||
|
immediate: true, |
||||
|
handler(newVal) { |
||||
|
if (!this.range) { |
||||
|
this.tempSingleDate = newVal |
||||
|
setTimeout(() => { |
||||
|
this.init(newVal) |
||||
|
}, 100) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
defTime: { |
||||
|
immediate: true, |
||||
|
handler(newVal) { |
||||
|
if (!this.range) { |
||||
|
this.time = newVal |
||||
|
} else { |
||||
|
this.timeRange.startTime = newVal.start |
||||
|
this.timeRange.endTime = newVal.end |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
startDate(val) { |
||||
|
// 字节小程序 watch 早于 created |
||||
|
if (!this.cale) { |
||||
|
return |
||||
|
} |
||||
|
this.cale.setStartDate(val) |
||||
|
this.cale.setDate(this.nowDate.fullDate) |
||||
|
this.weeks = this.cale.weeks |
||||
|
}, |
||||
|
endDate(val) { |
||||
|
// 字节小程序 watch 早于 created |
||||
|
if (!this.cale) { |
||||
|
return |
||||
|
} |
||||
|
this.cale.setEndDate(val) |
||||
|
this.cale.setDate(this.nowDate.fullDate) |
||||
|
this.weeks = this.cale.weeks |
||||
|
}, |
||||
|
selected(newVal) { |
||||
|
// 字节小程序 watch 早于 created |
||||
|
if (!this.cale) { |
||||
|
return |
||||
|
} |
||||
|
this.cale.setSelectInfo(this.nowDate.fullDate, newVal) |
||||
|
this.weeks = this.cale.weeks |
||||
|
}, |
||||
|
pleStatus: { |
||||
|
immediate: true, |
||||
|
handler(newVal) { |
||||
|
const { |
||||
|
before, |
||||
|
after, |
||||
|
fulldate, |
||||
|
which |
||||
|
} = newVal |
||||
|
this.tempRange.before = before |
||||
|
this.tempRange.after = after |
||||
|
setTimeout(() => { |
||||
|
if (fulldate) { |
||||
|
this.cale.setHoverMultiple(fulldate) |
||||
|
if (before && after) { |
||||
|
this.cale.lastHover = true |
||||
|
if (this.rangeWithinMonth(after, before)) return |
||||
|
this.setDate(before) |
||||
|
} else { |
||||
|
this.cale.setMultiple(fulldate) |
||||
|
this.setDate(this.nowDate.fullDate) |
||||
|
this.calendar.fullDate = '' |
||||
|
this.cale.lastHover = false |
||||
|
} |
||||
|
} else { |
||||
|
// 字节小程序 watch 早于 created |
||||
|
if (!this.cale) { |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
this.cale.setDefaultMultiple(before, after) |
||||
|
if (which === 'left' && before) { |
||||
|
this.setDate(before) |
||||
|
this.weeks = this.cale.weeks |
||||
|
} else if (after) { |
||||
|
this.setDate(after) |
||||
|
this.weeks = this.cale.weeks |
||||
|
} |
||||
|
this.cale.lastHover = true |
||||
|
} |
||||
|
}, 16) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
timepickerStartTime() { |
||||
|
const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate |
||||
|
return activeDate === this.startDate ? this.selectableTimes.start : '' |
||||
|
}, |
||||
|
timepickerEndTime() { |
||||
|
const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate |
||||
|
return activeDate === this.endDate ? this.selectableTimes.end : '' |
||||
|
}, |
||||
|
/** |
||||
|
* for i18n |
||||
|
*/ |
||||
|
selectDateText() { |
||||
|
return t("uni-datetime-picker.selectDate") |
||||
|
}, |
||||
|
startDateText() { |
||||
|
return this.startPlaceholder || t("uni-datetime-picker.startDate") |
||||
|
}, |
||||
|
endDateText() { |
||||
|
return this.endPlaceholder || t("uni-datetime-picker.endDate") |
||||
|
}, |
||||
|
okText() { |
||||
|
return t("uni-datetime-picker.ok") |
||||
|
}, |
||||
|
yearText() { |
||||
|
return t("uni-datetime-picker.year") |
||||
|
}, |
||||
|
monthText() { |
||||
|
return t("uni-datetime-picker.month") |
||||
|
}, |
||||
|
MONText() { |
||||
|
return t("uni-calender.MON") |
||||
|
}, |
||||
|
TUEText() { |
||||
|
return t("uni-calender.TUE") |
||||
|
}, |
||||
|
WEDText() { |
||||
|
return t("uni-calender.WED") |
||||
|
}, |
||||
|
THUText() { |
||||
|
return t("uni-calender.THU") |
||||
|
}, |
||||
|
FRIText() { |
||||
|
return t("uni-calender.FRI") |
||||
|
}, |
||||
|
SATText() { |
||||
|
return t("uni-calender.SAT") |
||||
|
}, |
||||
|
SUNText() { |
||||
|
return t("uni-calender.SUN") |
||||
|
}, |
||||
|
confirmText() { |
||||
|
return t("uni-calender.confirm") |
||||
|
}, |
||||
|
}, |
||||
|
created() { |
||||
|
// 获取日历方法实例 |
||||
|
this.cale = new Calendar({ |
||||
|
selected: this.selected, |
||||
|
startDate: this.startDate, |
||||
|
endDate: this.endDate, |
||||
|
range: this.range, |
||||
|
}) |
||||
|
// 选中某一天 |
||||
|
this.init(this.date) |
||||
|
}, |
||||
|
methods: { |
||||
|
leaveCale() { |
||||
|
this.firstEnter = true |
||||
|
}, |
||||
|
handleMouse(weeks) { |
||||
|
if (weeks.disable) return |
||||
|
if (this.cale.lastHover) return |
||||
|
let { |
||||
|
before, |
||||
|
after |
||||
|
} = this.cale.multipleStatus |
||||
|
if (!before) return |
||||
|
this.calendar = weeks |
||||
|
// 设置范围选 |
||||
|
this.cale.setHoverMultiple(this.calendar.fullDate) |
||||
|
this.weeks = this.cale.weeks |
||||
|
// hover时，进入一个日历，更新另一个 |
||||
|
if (this.firstEnter) { |
||||
|
this.$emit('firstEnterCale', this.cale.multipleStatus) |
||||
|
this.firstEnter = false |
||||
|
} |
||||
|
}, |
||||
|
rangeWithinMonth(A, B) { |
||||
|
const [yearA, monthA] = A.split('-') |
||||
|
const [yearB, monthB] = B.split('-') |
||||
|
return yearA === yearB && monthA === monthB |
||||
|
}, |
||||
|
// 蒙版点击事件 |
||||
|
maskClick() { |
||||
|
this.close() |
||||
|
this.$emit('maskClose') |
||||
|
}, |
||||
|
|
||||
|
clearCalender() { |
||||
|
if (this.range) { |
||||
|
this.timeRange.startTime = '' |
||||
|
this.timeRange.endTime = '' |
||||
|
this.tempRange.before = '' |
||||
|
this.tempRange.after = '' |
||||
|
this.cale.multipleStatus.before = '' |
||||
|
this.cale.multipleStatus.after = '' |
||||
|
this.cale.multipleStatus.data = [] |
||||
|
this.cale.lastHover = false |
||||
|
} else { |
||||
|
this.time = '' |
||||
|
this.tempSingleDate = '' |
||||
|
} |
||||
|
this.calendar.fullDate = '' |
||||
|
this.setDate(new Date()) |
||||
|
}, |
||||
|
|
||||
|
bindDateChange(e) { |
||||
|
const value = e.detail.value + '-1' |
||||
|
this.setDate(value) |
||||
|
}, |
||||
|
/** |
||||
|
* 初始化日期显示 |
||||
|
* @param {Object} date |
||||
|
*/ |
||||
|
init(date) { |
||||
|
// 字节小程序 watch 早于 created |
||||
|
if (!this.cale) { |
||||
|
return |
||||
|
} |
||||
|
this.cale.setDate(date || new Date()) |
||||
|
this.weeks = this.cale.weeks |
||||
|
this.nowDate = this.cale.getInfo(date) |
||||
|
this.calendar = { |
||||
|
...this.nowDate |
||||
|
} |
||||
|
if (!date) { |
||||
|
// 优化date为空默认不选中今天 |
||||
|
this.calendar.fullDate = '' |
||||
|
if (this.defaultValue && !this.range) { |
||||
|
// 暂时只支持移动端非范围选择 |
||||
|
const defaultDate = new Date(this.defaultValue) |
||||
|
const fullDate = getDate(defaultDate) |
||||
|
const year = defaultDate.getFullYear() |
||||
|
const month = defaultDate.getMonth() + 1 |
||||
|
const date = defaultDate.getDate() |
||||
|
const day = defaultDate.getDay() |
||||
|
this.calendar = { |
||||
|
fullDate, |
||||
|
year, |
||||
|
month, |
||||
|
date, |
||||
|
day |
||||
|
}, |
||||
|
this.tempSingleDate = fullDate |
||||
|
this.time = getTime(defaultDate, this.hideSecond) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 打开日历弹窗 |
||||
|
*/ |
||||
|
open() { |
||||
|
// 弹窗模式并且清理数据 |
||||
|
if (this.clearDate && !this.insert) { |
||||
|
this.cale.cleanMultipleStatus() |
||||
|
this.init(this.date) |
||||
|
} |
||||
|
this.show = true |
||||
|
this.$nextTick(() => { |
||||
|
setTimeout(() => { |
||||
|
this.aniMaskShow = true |
||||
|
}, 50) |
||||
|
}) |
||||
|
}, |
||||
|
/** |
||||
|
* 关闭日历弹窗 |
||||
|
*/ |
||||
|
close() { |
||||
|
this.aniMaskShow = false |
||||
|
this.$nextTick(() => { |
||||
|
setTimeout(() => { |
||||
|
this.show = false |
||||
|
this.$emit('close') |
||||
|
}, 300) |
||||
|
}) |
||||
|
}, |
||||
|
/** |
||||
|
* 确认按钮 |
||||
|
*/ |
||||
|
confirm() { |
||||
|
this.setEmit('confirm') |
||||
|
this.close() |
||||
|
}, |
||||
|
/** |
||||
|
* 变化触发 |
||||
|
*/ |
||||
|
change(isSingleChange) { |
||||
|
if (!this.insert && !isSingleChange) return |
||||
|
this.setEmit('change') |
||||
|
}, |
||||
|
/** |
||||
|
* 选择月份触发 |
||||
|
*/ |
||||
|
monthSwitch() { |
||||
|
let { |
||||
|
year, |
||||
|
month |
||||
|
} = this.nowDate |
||||
|
this.$emit('monthSwitch', { |
||||
|
year, |
||||
|
month: Number(month) |
||||
|
}) |
||||
|
}, |
||||
|
/** |
||||
|
* 派发事件 |
||||
|
* @param {Object} name |
||||
|
*/ |
||||
|
setEmit(name) { |
||||
|
if (!this.range) { |
||||
|
if (!this.calendar.fullDate) { |
||||
|
this.calendar = this.cale.getInfo(new Date()) |
||||
|
this.tempSingleDate = this.calendar.fullDate |
||||
|
} |
||||
|
if (this.hasTime && !this.time) { |
||||
|
this.time = getTime(new Date(), this.hideSecond) |
||||
|
} |
||||
|
} |
||||
|
let { |
||||
|
year, |
||||
|
month, |
||||
|
date, |
||||
|
fullDate, |
||||
|
extraInfo |
||||
|
} = this.calendar |
||||
|
this.$emit(name, { |
||||
|
range: this.cale.multipleStatus, |
||||
|
year, |
||||
|
month, |
||||
|
date, |
||||
|
time: this.time, |
||||
|
timeRange: this.timeRange, |
||||
|
fulldate: fullDate, |
||||
|
extraInfo: extraInfo || {} |
||||
|
}) |
||||
|
}, |
||||
|
/** |
||||
|
* 选择天触发 |
||||
|
* @param {Object} weeks |
||||
|
*/ |
||||
|
choiceDate(weeks) { |
||||
|
if (weeks.disable) return |
||||
|
this.calendar = weeks |
||||
|
this.calendar.userChecked = true |
||||
|
// 设置多选 |
||||
|
this.cale.setMultiple(this.calendar.fullDate, true) |
||||
|
this.weeks = this.cale.weeks |
||||
|
this.tempSingleDate = this.calendar.fullDate |
||||
|
const beforeDate = new Date(this.cale.multipleStatus.before).getTime() |
||||
|
const afterDate = new Date(this.cale.multipleStatus.after).getTime() |
||||
|
if (beforeDate > afterDate && afterDate) { |
||||
|
this.tempRange.before = this.cale.multipleStatus.after |
||||
|
this.tempRange.after = this.cale.multipleStatus.before |
||||
|
} else { |
||||
|
this.tempRange.before = this.cale.multipleStatus.before |
||||
|
this.tempRange.after = this.cale.multipleStatus.after |
||||
|
} |
||||
|
this.change(true) |
||||
|
}, |
||||
|
changeMonth(type) { |
||||
|
let newDate |
||||
|
if (type === 'pre') { |
||||
|
newDate = this.cale.getPreMonthObj(this.nowDate.fullDate).fullDate |
||||
|
} else if (type === 'next') { |
||||
|
newDate = this.cale.getNextMonthObj(this.nowDate.fullDate).fullDate |
||||
|
} |
||||
|
|
||||
|
this.setDate(newDate) |
||||
|
this.monthSwitch() |
||||
|
}, |
||||
|
/** |
||||
|
* 设置日期 |
||||
|
* @param {Object} date |
||||
|
*/ |
||||
|
setDate(date) { |
||||
|
this.cale.setDate(date) |
||||
|
this.weeks = this.cale.weeks |
||||
|
this.nowDate = this.cale.getInfo(date) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
$uni-primary: #007aff !default; |
||||
|
|
||||
|
.uni-calendar { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar__mask { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
background-color: rgba(0, 0, 0, 0.4); |
||||
|
transition-property: opacity; |
||||
|
transition-duration: 0.3s; |
||||
|
opacity: 0; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
z-index: 99; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-calendar--mask-show { |
||||
|
opacity: 1 |
||||
|
} |
||||
|
|
||||
|
.uni-calendar--fixed { |
||||
|
position: fixed; |
||||
|
bottom: calc(var(--window-bottom)); |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
transition-property: transform; |
||||
|
transition-duration: 0.3s; |
||||
|
transform: translateY(460px); |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
z-index: 99; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-calendar--ani-show { |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
|
||||
|
.uni-calendar__content { |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar__content-mobile { |
||||
|
border-top-left-radius: 10px; |
||||
|
border-top-right-radius: 10px; |
||||
|
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.uni-calendar__header { |
||||
|
position: relative; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
height: 50px; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar__header-mobile { |
||||
|
padding: 10px; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar--fixed-top { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
border-top-color: rgba(0, 0, 0, 0.4); |
||||
|
border-top-style: solid; |
||||
|
border-top-width: 1px; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar--fixed-width { |
||||
|
width: 50px; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar__backtoday { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 25rpx; |
||||
|
padding: 0 5px; |
||||
|
padding-left: 10px; |
||||
|
height: 25px; |
||||
|
line-height: 25px; |
||||
|
font-size: 12px; |
||||
|
border-top-left-radius: 25px; |
||||
|
border-bottom-left-radius: 25px; |
||||
|
color: #fff; |
||||
|
background-color: #f1f1f1; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar__header-text { |
||||
|
text-align: center; |
||||
|
width: 100px; |
||||
|
font-size: 15px; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar__button-text { |
||||
|
text-align: center; |
||||
|
width: 100px; |
||||
|
font-size: 14px; |
||||
|
color: $uni-primary; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
letter-spacing: 3px; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-calendar__header-btn-box { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar__header-btn { |
||||
|
width: 9px; |
||||
|
height: 9px; |
||||
|
border-left-color: #808080; |
||||
|
border-left-style: solid; |
||||
|
border-left-width: 1px; |
||||
|
border-top-color: #555555; |
||||
|
border-top-style: solid; |
||||
|
border-top-width: 1px; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar--left { |
||||
|
transform: rotate(-45deg); |
||||
|
} |
||||
|
|
||||
|
.uni-calendar--right { |
||||
|
transform: rotate(135deg); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.uni-calendar__weeks { |
||||
|
position: relative; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: row; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar__weeks-item { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar__weeks-day { |
||||
|
flex: 1; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
height: 40px; |
||||
|
border-bottom-color: #F5F5F5; |
||||
|
border-bottom-style: solid; |
||||
|
border-bottom-width: 1px; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar__weeks-day-text { |
||||
|
font-size: 12px; |
||||
|
color: #B2B2B2; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar__box { |
||||
|
position: relative; |
||||
|
// padding: 0 10px; |
||||
|
padding-bottom: 7px; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar__box-bg { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.uni-calendar__box-bg-text { |
||||
|
font-size: 200px; |
||||
|
font-weight: bold; |
||||
|
color: #999; |
||||
|
opacity: 0.1; |
||||
|
text-align: center; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
line-height: 1; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-date-changed { |
||||
|
padding: 0 10px; |
||||
|
// line-height: 50px; |
||||
|
text-align: center; |
||||
|
color: #333; |
||||
|
border-top-color: #DCDCDC; |
||||
|
; |
||||
|
border-top-style: solid; |
||||
|
border-top-width: 1px; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.uni-date-btn--ok { |
||||
|
padding: 20px 15px; |
||||
|
} |
||||
|
|
||||
|
.uni-date-changed--time-start { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.uni-date-changed--time-end { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.uni-date-changed--time-date { |
||||
|
color: #999; |
||||
|
line-height: 50px; |
||||
|
/* #ifdef MP-TOUTIAO */ |
||||
|
font-size: 16px; |
||||
|
/* #endif */ |
||||
|
margin-right: 5px; |
||||
|
// opacity: 0.6; |
||||
|
} |
||||
|
|
||||
|
.time-picker-style { |
||||
|
// width: 62px; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
justify-content: center; |
||||
|
align-items: center |
||||
|
} |
||||
|
|
||||
|
.mr-10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.dialog-close { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
padding: 0 25px; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
.dialog-close-plus { |
||||
|
width: 16px; |
||||
|
height: 2px; |
||||
|
background-color: #737987; |
||||
|
border-radius: 2px; |
||||
|
transform: rotate(45deg); |
||||
|
} |
||||
|
|
||||
|
.dialog-close-rotate { |
||||
|
position: absolute; |
||||
|
transform: rotate(-45deg); |
||||
|
} |
||||
|
|
||||
|
.uni-datetime-picker--btn { |
||||
|
border-radius: 100px; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
background-color: $uni-primary; |
||||
|
color: #fff; |
||||
|
font-size: 16px; |
||||
|
letter-spacing: 2px; |
||||
|
} |
||||
|
|
||||
|
/* #ifndef APP-NVUE */ |
||||
|
.uni-datetime-picker--btn:active { |
||||
|
opacity: 0.7; |
||||
|
} |
||||
|
|
||||
|
/* #endif */ |
||||
|
</style> |
||||
@ -0,0 +1,22 @@ |
|||||
|
{ |
||||
|
"uni-datetime-picker.selectDate": "select date", |
||||
|
"uni-datetime-picker.selectTime": "select time", |
||||
|
"uni-datetime-picker.selectDateTime": "select date and time", |
||||
|
"uni-datetime-picker.startDate": "start date", |
||||
|
"uni-datetime-picker.endDate": "end date", |
||||
|
"uni-datetime-picker.startTime": "start time", |
||||
|
"uni-datetime-picker.endTime": "end time", |
||||
|
"uni-datetime-picker.ok": "ok", |
||||
|
"uni-datetime-picker.clear": "clear", |
||||
|
"uni-datetime-picker.cancel": "cancel", |
||||
|
"uni-datetime-picker.year": "-", |
||||
|
"uni-datetime-picker.month": "", |
||||
|
"uni-calender.MON": "MON", |
||||
|
"uni-calender.TUE": "TUE", |
||||
|
"uni-calender.WED": "WED", |
||||
|
"uni-calender.THU": "THU", |
||||
|
"uni-calender.FRI": "FRI", |
||||
|
"uni-calender.SAT": "SAT", |
||||
|
"uni-calender.SUN": "SUN", |
||||
|
"uni-calender.confirm": "confirm" |
||||
|
} |
||||
@ -0,0 +1,8 @@ |
|||||
|
import en from './en.json' |
||||
|
import zhHans from './zh-Hans.json' |
||||
|
import zhHant from './zh-Hant.json' |
||||
|
export default { |
||||
|
en, |
||||
|
'zh-Hans': zhHans, |
||||
|
'zh-Hant': zhHant |
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
{ |
||||
|
"uni-datetime-picker.selectDate": "选择日期", |
||||
|
"uni-datetime-picker.selectTime": "选择时间", |
||||
|
"uni-datetime-picker.selectDateTime": "选择日期时间", |
||||
|
"uni-datetime-picker.startDate": "开始日期", |
||||
|
"uni-datetime-picker.endDate": "结束日期", |
||||
|
"uni-datetime-picker.startTime": "开始时间", |
||||
|
"uni-datetime-picker.endTime": "结束时间", |
||||
|
"uni-datetime-picker.ok": "确定", |
||||
|
"uni-datetime-picker.clear": "清除", |
||||
|
"uni-datetime-picker.cancel": "取消", |
||||
|
"uni-datetime-picker.year": "年", |
||||
|
"uni-datetime-picker.month": "月", |
||||
|
"uni-calender.SUN": "日", |
||||
|
"uni-calender.MON": "一", |
||||
|
"uni-calender.TUE": "二", |
||||
|
"uni-calender.WED": "三", |
||||
|
"uni-calender.THU": "四", |
||||
|
"uni-calender.FRI": "五", |
||||
|
"uni-calender.SAT": "六", |
||||
|
"uni-calender.confirm": "确认" |
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
{ |
||||
|
"uni-datetime-picker.selectDate": "選擇日期", |
||||
|
"uni-datetime-picker.selectTime": "選擇時間", |
||||
|
"uni-datetime-picker.selectDateTime": "選擇日期時間", |
||||
|
"uni-datetime-picker.startDate": "開始日期", |
||||
|
"uni-datetime-picker.endDate": "結束日期", |
||||
|
"uni-datetime-picker.startTime": "開始时间", |
||||
|
"uni-datetime-picker.endTime": "結束时间", |
||||
|
"uni-datetime-picker.ok": "確定", |
||||
|
"uni-datetime-picker.clear": "清除", |
||||
|
"uni-datetime-picker.cancel": "取消", |
||||
|
"uni-datetime-picker.year": "年", |
||||
|
"uni-datetime-picker.month": "月", |
||||
|
"uni-calender.SUN": "日", |
||||
|
"uni-calender.MON": "一", |
||||
|
"uni-calender.TUE": "二", |
||||
|
"uni-calender.WED": "三", |
||||
|
"uni-calender.THU": "四", |
||||
|
"uni-calender.FRI": "五", |
||||
|
"uni-calender.SAT": "六", |
||||
|
"uni-calender.confirm": "確認" |
||||
|
} |
||||
@ -0,0 +1,940 @@ |
|||||
|
<template> |
||||
|
<view class="uni-datetime-picker"> |
||||
|
<view @click="initTimePicker"> |
||||
|
<slot> |
||||
|
<view class="uni-datetime-picker-timebox-pointer" |
||||
|
:class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}"> |
||||
|
<text class="uni-datetime-picker-text">{{time}}</text> |
||||
|
<view v-if="!time" class="uni-datetime-picker-time"> |
||||
|
<text class="uni-datetime-picker-text">{{selectTimeText}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</slot> |
||||
|
</view> |
||||
|
<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view> |
||||
|
<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']" |
||||
|
:style="fixNvueBug"> |
||||
|
<view class="uni-title"> |
||||
|
<text class="uni-datetime-picker-text">{{selectTimeText}}</text> |
||||
|
</view> |
||||
|
<view v-if="dateShow" class="uni-datetime-picker__container-box"> |
||||
|
<picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd" |
||||
|
@change="bindDateChange"> |
||||
|
<picker-view-column> |
||||
|
<view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index"> |
||||
|
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> |
||||
|
</view> |
||||
|
</picker-view-column> |
||||
|
<picker-view-column> |
||||
|
<view class="uni-datetime-picker-item" v-for="(item,index) in months" :key="index"> |
||||
|
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> |
||||
|
</view> |
||||
|
</picker-view-column> |
||||
|
<picker-view-column> |
||||
|
<view class="uni-datetime-picker-item" v-for="(item,index) in days" :key="index"> |
||||
|
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> |
||||
|
</view> |
||||
|
</picker-view-column> |
||||
|
</picker-view> |
||||
|
<!-- 兼容 nvue 不支持伪类 --> |
||||
|
<text class="uni-datetime-picker-sign sign-left">-</text> |
||||
|
<text class="uni-datetime-picker-sign sign-right">-</text> |
||||
|
</view> |
||||
|
<view v-if="timeShow" class="uni-datetime-picker__container-box"> |
||||
|
<picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']" |
||||
|
:indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange"> |
||||
|
<picker-view-column> |
||||
|
<view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index"> |
||||
|
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> |
||||
|
</view> |
||||
|
</picker-view-column> |
||||
|
<picker-view-column> |
||||
|
<view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index"> |
||||
|
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> |
||||
|
</view> |
||||
|
</picker-view-column> |
||||
|
<picker-view-column v-if="!hideSecond"> |
||||
|
<view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index"> |
||||
|
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> |
||||
|
</view> |
||||
|
</picker-view-column> |
||||
|
</picker-view> |
||||
|
<!-- 兼容 nvue 不支持伪类 --> |
||||
|
<text class="uni-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text> |
||||
|
<text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right">:</text> |
||||
|
</view> |
||||
|
<view class="uni-datetime-picker-btn"> |
||||
|
<view @click="clearTime"> |
||||
|
<text class="uni-datetime-picker-btn-text">{{clearText}}</text> |
||||
|
</view> |
||||
|
<view class="uni-datetime-picker-btn-group"> |
||||
|
<view class="uni-datetime-picker-cancel" @click="tiggerTimePicker"> |
||||
|
<text class="uni-datetime-picker-btn-text">{{cancelText}}</text> |
||||
|
</view> |
||||
|
<view @click="setTime"> |
||||
|
<text class="uni-datetime-picker-btn-text">{{okText}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
initVueI18n |
||||
|
} from '@dcloudio/uni-i18n' |
||||
|
import i18nMessages from './i18n/index.js' |
||||
|
const { |
||||
|
t |
||||
|
} = initVueI18n(i18nMessages) |
||||
|
import { |
||||
|
fixIosDateFormat |
||||
|
} from './util' |
||||
|
|
||||
|
/** |
||||
|
* DatetimePicker 时间选择器 |
||||
|
* @description 可以同时选择日期和时间的选择器 |
||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx |
||||
|
* @property {String} type = [datetime | date | time] 显示模式 |
||||
|
* @property {Boolean} multiple = [true|false] 是否多选 |
||||
|
* @property {String|Number} value 默认值 |
||||
|
* @property {String|Number} start 起始日期或时间 |
||||
|
* @property {String|Number} end 起始日期或时间 |
||||
|
* @property {String} return-type = [timestamp | string] |
||||
|
* @event {Function} change 选中发生变化触发 |
||||
|
*/ |
||||
|
|
||||
|
export default { |
||||
|
name: 'UniDatetimePicker', |
||||
|
data() { |
||||
|
return { |
||||
|
indicatorStyle: `height: 50px;`, |
||||
|
visible: false, |
||||
|
fixNvueBug: {}, |
||||
|
dateShow: true, |
||||
|
timeShow: true, |
||||
|
title: '日期和时间', |
||||
|
// 输入框当前时间 |
||||
|
time: '', |
||||
|
// 当前的年月日时分秒 |
||||
|
year: 1920, |
||||
|
month: 0, |
||||
|
day: 0, |
||||
|
hour: 0, |
||||
|
minute: 0, |
||||
|
second: 0, |
||||
|
// 起始时间 |
||||
|
startYear: 1920, |
||||
|
startMonth: 1, |
||||
|
startDay: 1, |
||||
|
startHour: 0, |
||||
|
startMinute: 0, |
||||
|
startSecond: 0, |
||||
|
// 结束时间 |
||||
|
endYear: 2120, |
||||
|
endMonth: 12, |
||||
|
endDay: 31, |
||||
|
endHour: 23, |
||||
|
endMinute: 59, |
||||
|
endSecond: 59, |
||||
|
} |
||||
|
}, |
||||
|
options: { |
||||
|
// #ifdef MP-TOUTIAO |
||||
|
virtualHost: false, |
||||
|
// #endif |
||||
|
// #ifndef MP-TOUTIAO |
||||
|
virtualHost: true |
||||
|
// #endif |
||||
|
}, |
||||
|
props: { |
||||
|
type: { |
||||
|
type: String, |
||||
|
default: 'datetime' |
||||
|
}, |
||||
|
value: { |
||||
|
type: [String, Number], |
||||
|
default: '' |
||||
|
}, |
||||
|
modelValue: { |
||||
|
type: [String, Number], |
||||
|
default: '' |
||||
|
}, |
||||
|
start: { |
||||
|
type: [Number, String], |
||||
|
default: '' |
||||
|
}, |
||||
|
end: { |
||||
|
type: [Number, String], |
||||
|
default: '' |
||||
|
}, |
||||
|
returnType: { |
||||
|
type: String, |
||||
|
default: 'string' |
||||
|
}, |
||||
|
disabled: { |
||||
|
type: [Boolean, String], |
||||
|
default: false |
||||
|
}, |
||||
|
border: { |
||||
|
type: [Boolean, String], |
||||
|
default: true |
||||
|
}, |
||||
|
hideSecond: { |
||||
|
type: [Boolean, String], |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
// #ifndef VUE3 |
||||
|
value: { |
||||
|
handler(newVal) { |
||||
|
if (newVal) { |
||||
|
this.parseValue(fixIosDateFormat(newVal)) |
||||
|
this.initTime(false) |
||||
|
} else { |
||||
|
this.time = '' |
||||
|
this.parseValue(Date.now()) |
||||
|
} |
||||
|
}, |
||||
|
immediate: true |
||||
|
}, |
||||
|
// #endif |
||||
|
// #ifdef VUE3 |
||||
|
modelValue: { |
||||
|
handler(newVal) { |
||||
|
if (newVal) { |
||||
|
this.parseValue(fixIosDateFormat(newVal)) |
||||
|
this.initTime(false) |
||||
|
} else { |
||||
|
this.time = '' |
||||
|
this.parseValue(Date.now()) |
||||
|
} |
||||
|
}, |
||||
|
immediate: true |
||||
|
}, |
||||
|
// #endif |
||||
|
type: { |
||||
|
handler(newValue) { |
||||
|
if (newValue === 'date') { |
||||
|
this.dateShow = true |
||||
|
this.timeShow = false |
||||
|
this.title = '日期' |
||||
|
} else if (newValue === 'time') { |
||||
|
this.dateShow = false |
||||
|
this.timeShow = true |
||||
|
this.title = '时间' |
||||
|
} else { |
||||
|
this.dateShow = true |
||||
|
this.timeShow = true |
||||
|
this.title = '日期和时间' |
||||
|
} |
||||
|
}, |
||||
|
immediate: true |
||||
|
}, |
||||
|
start: { |
||||
|
handler(newVal) { |
||||
|
this.parseDatetimeRange(fixIosDateFormat(newVal), 'start') |
||||
|
}, |
||||
|
immediate: true |
||||
|
}, |
||||
|
end: { |
||||
|
handler(newVal) { |
||||
|
this.parseDatetimeRange(fixIosDateFormat(newVal), 'end') |
||||
|
}, |
||||
|
immediate: true |
||||
|
}, |
||||
|
|
||||
|
// 月、日、时、分、秒可选范围变化后，检查当前值是否在范围内，不在则当前值重置为可选范围第一项 |
||||
|
months(newVal) { |
||||
|
this.checkValue('month', this.month, newVal) |
||||
|
}, |
||||
|
days(newVal) { |
||||
|
this.checkValue('day', this.day, newVal) |
||||
|
}, |
||||
|
hours(newVal) { |
||||
|
this.checkValue('hour', this.hour, newVal) |
||||
|
}, |
||||
|
minutes(newVal) { |
||||
|
this.checkValue('minute', this.minute, newVal) |
||||
|
}, |
||||
|
seconds(newVal) { |
||||
|
this.checkValue('second', this.second, newVal) |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
// 当前年、月、日、时、分、秒选择范围 |
||||
|
years() { |
||||
|
return this.getCurrentRange('year') |
||||
|
}, |
||||
|
|
||||
|
months() { |
||||
|
return this.getCurrentRange('month') |
||||
|
}, |
||||
|
|
||||
|
days() { |
||||
|
return this.getCurrentRange('day') |
||||
|
}, |
||||
|
|
||||
|
hours() { |
||||
|
return this.getCurrentRange('hour') |
||||
|
}, |
||||
|
|
||||
|
minutes() { |
||||
|
return this.getCurrentRange('minute') |
||||
|
}, |
||||
|
|
||||
|
seconds() { |
||||
|
return this.getCurrentRange('second') |
||||
|
}, |
||||
|
|
||||
|
// picker 当前值数组 |
||||
|
ymd() { |
||||
|
return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay] |
||||
|
}, |
||||
|
hms() { |
||||
|
return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond] |
||||
|
}, |
||||
|
|
||||
|
// 当前 date 是 start |
||||
|
currentDateIsStart() { |
||||
|
return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay |
||||
|
}, |
||||
|
|
||||
|
// 当前 date 是 end |
||||
|
currentDateIsEnd() { |
||||
|
return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay |
||||
|
}, |
||||
|
|
||||
|
// 当前年、月、日、时、分、秒的最小值和最大值 |
||||
|
minYear() { |
||||
|
return this.startYear |
||||
|
}, |
||||
|
maxYear() { |
||||
|
return this.endYear |
||||
|
}, |
||||
|
minMonth() { |
||||
|
if (this.year === this.startYear) { |
||||
|
return this.startMonth |
||||
|
} else { |
||||
|
return 1 |
||||
|
} |
||||
|
}, |
||||
|
maxMonth() { |
||||
|
if (this.year === this.endYear) { |
||||
|
return this.endMonth |
||||
|
} else { |
||||
|
return 12 |
||||
|
} |
||||
|
}, |
||||
|
minDay() { |
||||
|
if (this.year === this.startYear && this.month === this.startMonth) { |
||||
|
return this.startDay |
||||
|
} else { |
||||
|
return 1 |
||||
|
} |
||||
|
}, |
||||
|
maxDay() { |
||||
|
if (this.year === this.endYear && this.month === this.endMonth) { |
||||
|
return this.endDay |
||||
|
} else { |
||||
|
return this.daysInMonth(this.year, this.month) |
||||
|
} |
||||
|
}, |
||||
|
minHour() { |
||||
|
if (this.type === 'datetime') { |
||||
|
if (this.currentDateIsStart) { |
||||
|
return this.startHour |
||||
|
} else { |
||||
|
return 0 |
||||
|
} |
||||
|
} |
||||
|
if (this.type === 'time') { |
||||
|
return this.startHour |
||||
|
} |
||||
|
}, |
||||
|
maxHour() { |
||||
|
if (this.type === 'datetime') { |
||||
|
if (this.currentDateIsEnd) { |
||||
|
return this.endHour |
||||
|
} else { |
||||
|
return 23 |
||||
|
} |
||||
|
} |
||||
|
if (this.type === 'time') { |
||||
|
return this.endHour |
||||
|
} |
||||
|
}, |
||||
|
minMinute() { |
||||
|
if (this.type === 'datetime') { |
||||
|
if (this.currentDateIsStart && this.hour === this.startHour) { |
||||
|
return this.startMinute |
||||
|
} else { |
||||
|
return 0 |
||||
|
} |
||||
|
} |
||||
|
if (this.type === 'time') { |
||||
|
if (this.hour === this.startHour) { |
||||
|
return this.startMinute |
||||
|
} else { |
||||
|
return 0 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
maxMinute() { |
||||
|
if (this.type === 'datetime') { |
||||
|
if (this.currentDateIsEnd && this.hour === this.endHour) { |
||||
|
return this.endMinute |
||||
|
} else { |
||||
|
return 59 |
||||
|
} |
||||
|
} |
||||
|
if (this.type === 'time') { |
||||
|
if (this.hour === this.endHour) { |
||||
|
return this.endMinute |
||||
|
} else { |
||||
|
return 59 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
minSecond() { |
||||
|
if (this.type === 'datetime') { |
||||
|
if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) { |
||||
|
return this.startSecond |
||||
|
} else { |
||||
|
return 0 |
||||
|
} |
||||
|
} |
||||
|
if (this.type === 'time') { |
||||
|
if (this.hour === this.startHour && this.minute === this.startMinute) { |
||||
|
return this.startSecond |
||||
|
} else { |
||||
|
return 0 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
maxSecond() { |
||||
|
if (this.type === 'datetime') { |
||||
|
if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) { |
||||
|
return this.endSecond |
||||
|
} else { |
||||
|
return 59 |
||||
|
} |
||||
|
} |
||||
|
if (this.type === 'time') { |
||||
|
if (this.hour === this.endHour && this.minute === this.endMinute) { |
||||
|
return this.endSecond |
||||
|
} else { |
||||
|
return 59 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* for i18n |
||||
|
*/ |
||||
|
selectTimeText() { |
||||
|
return t("uni-datetime-picker.selectTime") |
||||
|
}, |
||||
|
okText() { |
||||
|
return t("uni-datetime-picker.ok") |
||||
|
}, |
||||
|
clearText() { |
||||
|
return t("uni-datetime-picker.clear") |
||||
|
}, |
||||
|
cancelText() { |
||||
|
return t("uni-datetime-picker.cancel") |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
// #ifdef APP-NVUE |
||||
|
const res = uni.getSystemInfoSync(); |
||||
|
this.fixNvueBug = { |
||||
|
top: res.windowHeight / 2, |
||||
|
left: res.windowWidth / 2 |
||||
|
} |
||||
|
// #endif |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
/** |
||||
|
* @param {Object} item |
||||
|
* 小于 10 在前面加个 0 |
||||
|
*/ |
||||
|
|
||||
|
lessThanTen(item) { |
||||
|
return item < 10 ? '0' + item : item |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 解析时分秒字符串，例如：00:00:00 |
||||
|
* @param {String} timeString |
||||
|
*/ |
||||
|
parseTimeType(timeString) { |
||||
|
if (timeString) { |
||||
|
let timeArr = timeString.split(':') |
||||
|
this.hour = Number(timeArr[0]) |
||||
|
this.minute = Number(timeArr[1]) |
||||
|
this.second = Number(timeArr[2]) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 解析选择器初始值，类型可以是字符串、时间戳，例如：2000-10-02、'08:30:00'、 1610695109000 |
||||
|
* @param {String | Number} datetime |
||||
|
*/ |
||||
|
initPickerValue(datetime) { |
||||
|
let defaultValue = null |
||||
|
if (datetime) { |
||||
|
defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end) |
||||
|
} else { |
||||
|
defaultValue = Date.now() |
||||
|
defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end) |
||||
|
} |
||||
|
this.parseValue(defaultValue) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 初始值规则： |
||||
|
* - 用户设置初始值 value |
||||
|
* - 设置了起始时间 start、终止时间 end，并 start < value < end，初始值为 value， 否则初始值为 start |
||||
|
* - 只设置了起始时间 start，并 start < value，初始值为 value，否则初始值为 start |
||||
|
* - 只设置了终止时间 end，并 value < end，初始值为 value，否则初始值为 end |
||||
|
* - 无起始终止时间，则初始值为 value |
||||
|
* - 无初始值 value，则初始值为当前本地时间 Date.now() |
||||
|
* @param {Object} value |
||||
|
* @param {Object} dateBase |
||||
|
*/ |
||||
|
compareValueWithStartAndEnd(value, start, end) { |
||||
|
let winner = null |
||||
|
value = this.superTimeStamp(value) |
||||
|
start = this.superTimeStamp(start) |
||||
|
end = this.superTimeStamp(end) |
||||
|
|
||||
|
if (start && end) { |
||||
|
if (value < start) { |
||||
|
winner = new Date(start) |
||||
|
} else if (value > end) { |
||||
|
winner = new Date(end) |
||||
|
} else { |
||||
|
winner = new Date(value) |
||||
|
} |
||||
|
} else if (start && !end) { |
||||
|
winner = start <= value ? new Date(value) : new Date(start) |
||||
|
} else if (!start && end) { |
||||
|
winner = value <= end ? new Date(value) : new Date(end) |
||||
|
} else { |
||||
|
winner = new Date(value) |
||||
|
} |
||||
|
|
||||
|
return winner |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 转换为可比较的时间戳，接受日期、时分秒、时间戳 |
||||
|
* @param {Object} value |
||||
|
*/ |
||||
|
superTimeStamp(value) { |
||||
|
let dateBase = '' |
||||
|
if (this.type === 'time' && value && typeof value === 'string') { |
||||
|
const now = new Date() |
||||
|
const year = now.getFullYear() |
||||
|
const month = now.getMonth() + 1 |
||||
|
const day = now.getDate() |
||||
|
dateBase = year + '/' + month + '/' + day + ' ' |
||||
|
} |
||||
|
if (Number(value)) { |
||||
|
value = parseInt(value) |
||||
|
dateBase = 0 |
||||
|
} |
||||
|
return this.createTimeStamp(dateBase + value) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 解析默认值 value，字符串、时间戳 |
||||
|
* @param {Object} defaultTime |
||||
|
*/ |
||||
|
parseValue(value) { |
||||
|
if (!value) { |
||||
|
return |
||||
|
} |
||||
|
if (this.type === 'time' && typeof value === "string") { |
||||
|
this.parseTimeType(value) |
||||
|
} else { |
||||
|
let defaultDate = null |
||||
|
defaultDate = new Date(value) |
||||
|
if (this.type !== 'time') { |
||||
|
this.year = defaultDate.getFullYear() |
||||
|
this.month = defaultDate.getMonth() + 1 |
||||
|
this.day = defaultDate.getDate() |
||||
|
} |
||||
|
if (this.type !== 'date') { |
||||
|
this.hour = defaultDate.getHours() |
||||
|
this.minute = defaultDate.getMinutes() |
||||
|
this.second = defaultDate.getSeconds() |
||||
|
} |
||||
|
} |
||||
|
if (this.hideSecond) { |
||||
|
this.second = 0 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 解析可选择时间范围 start、end，年月日字符串、时间戳 |
||||
|
* @param {Object} defaultTime |
||||
|
*/ |
||||
|
parseDatetimeRange(point, pointType) { |
||||
|
// 时间为空，则重置为初始值 |
||||
|
if (!point) { |
||||
|
if (pointType === 'start') { |
||||
|
this.startYear = 1920 |
||||
|
this.startMonth = 1 |
||||
|
this.startDay = 1 |
||||
|
this.startHour = 0 |
||||
|
this.startMinute = 0 |
||||
|
this.startSecond = 0 |
||||
|
} |
||||
|
if (pointType === 'end') { |
||||
|
this.endYear = 2120 |
||||
|
this.endMonth = 12 |
||||
|
this.endDay = 31 |
||||
|
this.endHour = 23 |
||||
|
this.endMinute = 59 |
||||
|
this.endSecond = 59 |
||||
|
} |
||||
|
return |
||||
|
} |
||||
|
if (this.type === 'time') { |
||||
|
const pointArr = point.split(':') |
||||
|
this[pointType + 'Hour'] = Number(pointArr[0]) |
||||
|
this[pointType + 'Minute'] = Number(pointArr[1]) |
||||
|
this[pointType + 'Second'] = Number(pointArr[2]) |
||||
|
} else { |
||||
|
if (!point) { |
||||
|
pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60 |
||||
|
return |
||||
|
} |
||||
|
if (Number(point)) { |
||||
|
point = parseInt(point) |
||||
|
} |
||||
|
// datetime 的 end 没有时分秒, 则不限制 |
||||
|
const hasTime = /[0-9]:[0-9]/ |
||||
|
if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test( |
||||
|
point)) { |
||||
|
point = point + ' 23:59:59' |
||||
|
} |
||||
|
const pointDate = new Date(point) |
||||
|
this[pointType + 'Year'] = pointDate.getFullYear() |
||||
|
this[pointType + 'Month'] = pointDate.getMonth() + 1 |
||||
|
this[pointType + 'Day'] = pointDate.getDate() |
||||
|
if (this.type === 'datetime') { |
||||
|
this[pointType + 'Hour'] = pointDate.getHours() |
||||
|
this[pointType + 'Minute'] = pointDate.getMinutes() |
||||
|
this[pointType + 'Second'] = pointDate.getSeconds() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 获取 年、月、日、时、分、秒 当前可选范围 |
||||
|
getCurrentRange(value) { |
||||
|
const range = [] |
||||
|
for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) { |
||||
|
range.push(i) |
||||
|
} |
||||
|
return range |
||||
|
}, |
||||
|
|
||||
|
// 字符串首字母大写 |
||||
|
capitalize(str) { |
||||
|
return str.charAt(0).toUpperCase() + str.slice(1) |
||||
|
}, |
||||
|
|
||||
|
// 检查当前值是否在范围内，不在则当前值重置为可选范围第一项 |
||||
|
checkValue(name, value, values) { |
||||
|
if (values.indexOf(value) === -1) { |
||||
|
this[name] = values[0] |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 每个月的实际天数 |
||||
|
daysInMonth(year, month) { // Use 1 for January, 2 for February, etc. |
||||
|
return new Date(year, month, 0).getDate(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生成时间戳 |
||||
|
* @param {Object} time |
||||
|
*/ |
||||
|
createTimeStamp(time) { |
||||
|
if (!time) return |
||||
|
if (typeof time === "number") { |
||||
|
return time |
||||
|
} else { |
||||
|
time = time.replace(/-/g, '/') |
||||
|
if (this.type === 'date') { |
||||
|
time = time + ' ' + '00:00:00' |
||||
|
} |
||||
|
return Date.parse(time) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生成日期或时间的字符串 |
||||
|
*/ |
||||
|
createDomSting() { |
||||
|
const yymmdd = this.year + |
||||
|
'-' + |
||||
|
this.lessThanTen(this.month) + |
||||
|
'-' + |
||||
|
this.lessThanTen(this.day) |
||||
|
|
||||
|
let hhmmss = this.lessThanTen(this.hour) + |
||||
|
':' + |
||||
|
this.lessThanTen(this.minute) |
||||
|
|
||||
|
if (!this.hideSecond) { |
||||
|
hhmmss = hhmmss + ':' + this.lessThanTen(this.second) |
||||
|
} |
||||
|
|
||||
|
if (this.type === 'date') { |
||||
|
return yymmdd |
||||
|
} else if (this.type === 'time') { |
||||
|
return hhmmss |
||||
|
} else { |
||||
|
return yymmdd + ' ' + hhmmss |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 初始化返回值，并抛出 change 事件 |
||||
|
*/ |
||||
|
initTime(emit = true) { |
||||
|
this.time = this.createDomSting() |
||||
|
if (!emit) return |
||||
|
if (this.returnType === 'timestamp' && this.type !== 'time') { |
||||
|
this.$emit('change', this.createTimeStamp(this.time)) |
||||
|
this.$emit('input', this.createTimeStamp(this.time)) |
||||
|
this.$emit('update:modelValue', this.createTimeStamp(this.time)) |
||||
|
} else { |
||||
|
this.$emit('change', this.time) |
||||
|
this.$emit('input', this.time) |
||||
|
this.$emit('update:modelValue', this.time) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 用户选择日期或时间更新 data |
||||
|
* @param {Object} e |
||||
|
*/ |
||||
|
bindDateChange(e) { |
||||
|
const val = e.detail.value |
||||
|
this.year = this.years[val[0]] |
||||
|
this.month = this.months[val[1]] |
||||
|
this.day = this.days[val[2]] |
||||
|
}, |
||||
|
bindTimeChange(e) { |
||||
|
const val = e.detail.value |
||||
|
this.hour = this.hours[val[0]] |
||||
|
this.minute = this.minutes[val[1]] |
||||
|
this.second = this.seconds[val[2]] |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 初始化弹出层 |
||||
|
*/ |
||||
|
initTimePicker() { |
||||
|
if (this.disabled) return |
||||
|
const value = fixIosDateFormat(this.time) |
||||
|
this.initPickerValue(value) |
||||
|
this.visible = !this.visible |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 触发或关闭弹框 |
||||
|
*/ |
||||
|
tiggerTimePicker(e) { |
||||
|
this.visible = !this.visible |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 用户点击“清空”按钮，清空当前值 |
||||
|
*/ |
||||
|
clearTime() { |
||||
|
this.time = '' |
||||
|
this.$emit('change', this.time) |
||||
|
this.$emit('input', this.time) |
||||
|
this.$emit('update:modelValue', this.time) |
||||
|
this.tiggerTimePicker() |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 用户点击“确定”按钮 |
||||
|
*/ |
||||
|
setTime() { |
||||
|
this.initTime() |
||||
|
this.tiggerTimePicker() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
$uni-primary: #007aff !default; |
||||
|
|
||||
|
.uni-datetime-picker { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
/* width: 100%; */ |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-datetime-picker-view { |
||||
|
height: 130px; |
||||
|
width: 270px; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
cursor: pointer; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-datetime-picker-item { |
||||
|
height: 50px; |
||||
|
line-height: 50px; |
||||
|
text-align: center; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.uni-datetime-picker-btn { |
||||
|
margin-top: 60px; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
cursor: pointer; |
||||
|
/* #endif */ |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.uni-datetime-picker-btn-text { |
||||
|
font-size: 14px; |
||||
|
color: $uni-primary; |
||||
|
} |
||||
|
|
||||
|
.uni-datetime-picker-btn-group { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: row; |
||||
|
} |
||||
|
|
||||
|
.uni-datetime-picker-cancel { |
||||
|
margin-right: 30px; |
||||
|
} |
||||
|
|
||||
|
.uni-datetime-picker-mask { |
||||
|
position: fixed; |
||||
|
bottom: 0px; |
||||
|
top: 0px; |
||||
|
left: 0px; |
||||
|
right: 0px; |
||||
|
background-color: rgba(0, 0, 0, 0.4); |
||||
|
transition-duration: 0.3s; |
||||
|
z-index: 998; |
||||
|
} |
||||
|
|
||||
|
.uni-datetime-picker-popup { |
||||
|
border-radius: 8px; |
||||
|
padding: 30px; |
||||
|
width: 270px; |
||||
|
/* #ifdef APP-NVUE */ |
||||
|
height: 500px; |
||||
|
/* #endif */ |
||||
|
/* #ifdef APP-NVUE */ |
||||
|
width: 330px; |
||||
|
/* #endif */ |
||||
|
background-color: #fff; |
||||
|
position: fixed; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
transition-duration: 0.3s; |
||||
|
z-index: 999; |
||||
|
} |
||||
|
|
||||
|
.fix-nvue-height { |
||||
|
/* #ifdef APP-NVUE */ |
||||
|
height: 330px; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-datetime-picker-time { |
||||
|
color: grey; |
||||
|
} |
||||
|
|
||||
|
.uni-datetime-picker-column { |
||||
|
height: 50px; |
||||
|
} |
||||
|
|
||||
|
.uni-datetime-picker-timebox { |
||||
|
|
||||
|
border: 1px solid #E5E5E5; |
||||
|
border-radius: 5px; |
||||
|
padding: 7px 10px; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
box-sizing: border-box; |
||||
|
cursor: pointer; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-datetime-picker-timebox-pointer { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
cursor: pointer; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.uni-datetime-picker-disabled { |
||||
|
opacity: 0.4; |
||||
|
/* #ifdef H5 */ |
||||
|
cursor: not-allowed !important; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-datetime-picker-text { |
||||
|
font-size: 14px; |
||||
|
line-height: 50px |
||||
|
} |
||||
|
|
||||
|
.uni-datetime-picker-sign { |
||||
|
position: absolute; |
||||
|
top: 53px; |
||||
|
/* 减掉 10px 的元素高度，兼容nvue */ |
||||
|
color: #999; |
||||
|
/* #ifdef APP-NVUE */ |
||||
|
font-size: 16px; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.sign-left { |
||||
|
left: 86px; |
||||
|
} |
||||
|
|
||||
|
.sign-right { |
||||
|
right: 86px; |
||||
|
} |
||||
|
|
||||
|
.sign-center { |
||||
|
left: 135px; |
||||
|
} |
||||
|
|
||||
|
.uni-datetime-picker__container-box { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-top: 40px; |
||||
|
} |
||||
|
|
||||
|
.time-hide-second { |
||||
|
width: 180px; |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
@ -0,0 +1,421 @@ |
|||||
|
class Calendar { |
||||
|
constructor({ |
||||
|
selected, |
||||
|
startDate, |
||||
|
endDate, |
||||
|
range, |
||||
|
} = {}) { |
||||
|
// 当前日期
|
||||
|
this.date = this.getDateObj(new Date()) // 当前初入日期
|
||||
|
// 打点信息
|
||||
|
this.selected = selected || []; |
||||
|
// 起始时间
|
||||
|
this.startDate = startDate |
||||
|
// 终止时间
|
||||
|
this.endDate = endDate |
||||
|
// 是否范围选择
|
||||
|
this.range = range |
||||
|
// 多选状态
|
||||
|
this.cleanMultipleStatus() |
||||
|
// 每周日期
|
||||
|
this.weeks = {} |
||||
|
this.lastHover = false |
||||
|
} |
||||
|
/** |
||||
|
* 设置日期 |
||||
|
* @param {Object} date |
||||
|
*/ |
||||
|
setDate(date) { |
||||
|
const selectDate = this.getDateObj(date) |
||||
|
this.getWeeks(selectDate.fullDate) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 清理多选状态 |
||||
|
*/ |
||||
|
cleanMultipleStatus() { |
||||
|
this.multipleStatus = { |
||||
|
before: '', |
||||
|
after: '', |
||||
|
data: [] |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
setStartDate(startDate) { |
||||
|
this.startDate = startDate |
||||
|
} |
||||
|
|
||||
|
setEndDate(endDate) { |
||||
|
this.endDate = endDate |
||||
|
} |
||||
|
|
||||
|
getPreMonthObj(date) { |
||||
|
date = fixIosDateFormat(date) |
||||
|
date = new Date(date) |
||||
|
|
||||
|
const oldMonth = date.getMonth() |
||||
|
date.setMonth(oldMonth - 1) |
||||
|
const newMonth = date.getMonth() |
||||
|
if (oldMonth !== 0 && newMonth - oldMonth === 0) { |
||||
|
date.setMonth(newMonth - 1) |
||||
|
} |
||||
|
return this.getDateObj(date) |
||||
|
} |
||||
|
getNextMonthObj(date) { |
||||
|
date = fixIosDateFormat(date) |
||||
|
date = new Date(date) |
||||
|
|
||||
|
const oldMonth = date.getMonth() |
||||
|
date.setMonth(oldMonth + 1) |
||||
|
const newMonth = date.getMonth() |
||||
|
if (newMonth - oldMonth > 1) { |
||||
|
date.setMonth(newMonth - 1) |
||||
|
} |
||||
|
return this.getDateObj(date) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取指定格式Date对象 |
||||
|
*/ |
||||
|
getDateObj(date) { |
||||
|
date = fixIosDateFormat(date) |
||||
|
date = new Date(date) |
||||
|
|
||||
|
return { |
||||
|
fullDate: getDate(date), |
||||
|
year: date.getFullYear(), |
||||
|
month: addZero(date.getMonth() + 1), |
||||
|
date: addZero(date.getDate()), |
||||
|
day: date.getDay() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取上一个月日期集合 |
||||
|
*/ |
||||
|
getPreMonthDays(amount, dateObj) { |
||||
|
const result = [] |
||||
|
for (let i = amount - 1; i >= 0; i--) { |
||||
|
const month = dateObj.month - 1 |
||||
|
result.push({ |
||||
|
date: new Date(dateObj.year, month, -i).getDate(), |
||||
|
month, |
||||
|
disable: true |
||||
|
}) |
||||
|
} |
||||
|
return result |
||||
|
} |
||||
|
/** |
||||
|
* 获取本月日期集合 |
||||
|
*/ |
||||
|
getCurrentMonthDays(amount, dateObj) { |
||||
|
const result = [] |
||||
|
const fullDate = this.date.fullDate |
||||
|
for (let i = 1; i <= amount; i++) { |
||||
|
const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}` |
||||
|
const isToday = fullDate === currentDate |
||||
|
// 获取打点信息
|
||||
|
const info = this.selected && this.selected.find((item) => { |
||||
|
if (this.dateEqual(currentDate, item.date)) { |
||||
|
return item |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// 日期禁用
|
||||
|
let disableBefore = true |
||||
|
let disableAfter = true |
||||
|
if (this.startDate) { |
||||
|
disableBefore = dateCompare(this.startDate, currentDate) |
||||
|
} |
||||
|
|
||||
|
if (this.endDate) { |
||||
|
disableAfter = dateCompare(currentDate, this.endDate) |
||||
|
} |
||||
|
|
||||
|
let multiples = this.multipleStatus.data |
||||
|
let multiplesStatus = -1 |
||||
|
if (this.range && multiples) { |
||||
|
multiplesStatus = multiples.findIndex((item) => { |
||||
|
return this.dateEqual(item, currentDate) |
||||
|
}) |
||||
|
} |
||||
|
const checked = multiplesStatus !== -1 |
||||
|
|
||||
|
result.push({ |
||||
|
fullDate: currentDate, |
||||
|
year: dateObj.year, |
||||
|
date: i, |
||||
|
multiple: this.range ? checked : false, |
||||
|
beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after), |
||||
|
afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after), |
||||
|
month: dateObj.month, |
||||
|
disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !dateCompare( |
||||
|
currentDate, this.endDate)), |
||||
|
isToday, |
||||
|
userChecked: false, |
||||
|
extraInfo: info |
||||
|
}) |
||||
|
} |
||||
|
return result |
||||
|
} |
||||
|
/** |
||||
|
* 获取下一个月日期集合 |
||||
|
*/ |
||||
|
_getNextMonthDays(amount, dateObj) { |
||||
|
const result = [] |
||||
|
const month = dateObj.month + 1 |
||||
|
for (let i = 1; i <= amount; i++) { |
||||
|
result.push({ |
||||
|
date: i, |
||||
|
month, |
||||
|
disable: true |
||||
|
}) |
||||
|
} |
||||
|
return result |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取当前日期详情 |
||||
|
* @param {Object} date |
||||
|
*/ |
||||
|
getInfo(date) { |
||||
|
if (!date) { |
||||
|
date = new Date() |
||||
|
} |
||||
|
const res = this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate) |
||||
|
return res ? res : this.getDateObj(date) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 比较时间是否相等 |
||||
|
*/ |
||||
|
dateEqual(before, after) { |
||||
|
before = new Date(fixIosDateFormat(before)) |
||||
|
after = new Date(fixIosDateFormat(after)) |
||||
|
return before.valueOf() === after.valueOf() |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 比较真实起始日期 |
||||
|
*/ |
||||
|
|
||||
|
isLogicBefore(currentDate, before, after) { |
||||
|
let logicBefore = before |
||||
|
if (before && after) { |
||||
|
logicBefore = dateCompare(before, after) ? before : after |
||||
|
} |
||||
|
return this.dateEqual(logicBefore, currentDate) |
||||
|
} |
||||
|
|
||||
|
isLogicAfter(currentDate, before, after) { |
||||
|
let logicAfter = after |
||||
|
if (before && after) { |
||||
|
logicAfter = dateCompare(before, after) ? after : before |
||||
|
} |
||||
|
return this.dateEqual(logicAfter, currentDate) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取日期范围内所有日期 |
||||
|
* @param {Object} begin |
||||
|
* @param {Object} end |
||||
|
*/ |
||||
|
geDateAll(begin, end) { |
||||
|
var arr = [] |
||||
|
var ab = begin.split('-') |
||||
|
var ae = end.split('-') |
||||
|
var db = new Date() |
||||
|
db.setFullYear(ab[0], ab[1] - 1, ab[2]) |
||||
|
var de = new Date() |
||||
|
de.setFullYear(ae[0], ae[1] - 1, ae[2]) |
||||
|
var unixDb = db.getTime() - 24 * 60 * 60 * 1000 |
||||
|
var unixDe = de.getTime() - 24 * 60 * 60 * 1000 |
||||
|
for (var k = unixDb; k <= unixDe;) { |
||||
|
k = k + 24 * 60 * 60 * 1000 |
||||
|
arr.push(this.getDateObj(new Date(parseInt(k))).fullDate) |
||||
|
} |
||||
|
return arr |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取多选状态 |
||||
|
*/ |
||||
|
setMultiple(fullDate) { |
||||
|
if (!this.range) return |
||||
|
|
||||
|
let { |
||||
|
before, |
||||
|
after |
||||
|
} = this.multipleStatus |
||||
|
if (before && after) { |
||||
|
if (!this.lastHover) { |
||||
|
this.lastHover = true |
||||
|
return |
||||
|
} |
||||
|
this.multipleStatus.before = fullDate |
||||
|
this.multipleStatus.after = '' |
||||
|
this.multipleStatus.data = [] |
||||
|
this.multipleStatus.fulldate = '' |
||||
|
this.lastHover = false |
||||
|
} else { |
||||
|
if (!before) { |
||||
|
this.multipleStatus.before = fullDate |
||||
|
this.multipleStatus.after = undefined; |
||||
|
this.lastHover = false |
||||
|
} else { |
||||
|
this.multipleStatus.after = fullDate |
||||
|
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) { |
||||
|
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus |
||||
|
.after); |
||||
|
} else { |
||||
|
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus |
||||
|
.before); |
||||
|
} |
||||
|
this.lastHover = true |
||||
|
} |
||||
|
} |
||||
|
this.getWeeks(fullDate) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 鼠标 hover 更新多选状态 |
||||
|
*/ |
||||
|
setHoverMultiple(fullDate) { |
||||
|
//抖音小程序点击会触发hover事件，需要避免一下
|
||||
|
// #ifndef MP-TOUTIAO
|
||||
|
if (!this.range || this.lastHover) return |
||||
|
const { |
||||
|
before |
||||
|
} = this.multipleStatus |
||||
|
|
||||
|
if (!before) { |
||||
|
this.multipleStatus.before = fullDate |
||||
|
} else { |
||||
|
this.multipleStatus.after = fullDate |
||||
|
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) { |
||||
|
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after); |
||||
|
} else { |
||||
|
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before); |
||||
|
} |
||||
|
} |
||||
|
this.getWeeks(fullDate) |
||||
|
// #endif
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 更新默认值多选状态 |
||||
|
*/ |
||||
|
setDefaultMultiple(before, after) { |
||||
|
this.multipleStatus.before = before |
||||
|
this.multipleStatus.after = after |
||||
|
if (before && after) { |
||||
|
if (dateCompare(before, after)) { |
||||
|
this.multipleStatus.data = this.geDateAll(before, after); |
||||
|
this.getWeeks(after) |
||||
|
} else { |
||||
|
this.multipleStatus.data = this.geDateAll(after, before); |
||||
|
this.getWeeks(before) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取每周数据 |
||||
|
* @param {Object} dateData |
||||
|
*/ |
||||
|
getWeeks(dateData) { |
||||
|
const { |
||||
|
year, |
||||
|
month, |
||||
|
} = this.getDateObj(dateData) |
||||
|
|
||||
|
const preMonthDayAmount = new Date(year, month - 1, 1).getDay() |
||||
|
const preMonthDays = this.getPreMonthDays(preMonthDayAmount, this.getDateObj(dateData)) |
||||
|
|
||||
|
const currentMonthDayAmount = new Date(year, month, 0).getDate() |
||||
|
const currentMonthDays = this.getCurrentMonthDays(currentMonthDayAmount, this.getDateObj(dateData)) |
||||
|
|
||||
|
const nextMonthDayAmount = 42 - preMonthDayAmount - currentMonthDayAmount |
||||
|
const nextMonthDays = this._getNextMonthDays(nextMonthDayAmount, this.getDateObj(dateData)) |
||||
|
|
||||
|
const calendarDays = [...preMonthDays, ...currentMonthDays, ...nextMonthDays] |
||||
|
|
||||
|
const weeks = new Array(6) |
||||
|
for (let i = 0; i < calendarDays.length; i++) { |
||||
|
const index = Math.floor(i / 7) |
||||
|
if (!weeks[index]) { |
||||
|
weeks[index] = new Array(7) |
||||
|
} |
||||
|
weeks[index][i % 7] = calendarDays[i] |
||||
|
} |
||||
|
|
||||
|
this.calendar = calendarDays |
||||
|
this.weeks = weeks |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function getDateTime(date, hideSecond) { |
||||
|
return `${getDate(date)} ${getTime(date, hideSecond)}` |
||||
|
} |
||||
|
|
||||
|
function getDate(date) { |
||||
|
date = fixIosDateFormat(date) |
||||
|
date = new Date(date) |
||||
|
const year = date.getFullYear() |
||||
|
const month = date.getMonth() + 1 |
||||
|
const day = date.getDate() |
||||
|
return `${year}-${addZero(month)}-${addZero(day)}` |
||||
|
} |
||||
|
|
||||
|
function getTime(date, hideSecond) { |
||||
|
date = fixIosDateFormat(date) |
||||
|
date = new Date(date) |
||||
|
const hour = date.getHours() |
||||
|
const minute = date.getMinutes() |
||||
|
const second = date.getSeconds() |
||||
|
return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}` |
||||
|
} |
||||
|
|
||||
|
function addZero(num) { |
||||
|
if (num < 10) { |
||||
|
num = `0${num}` |
||||
|
} |
||||
|
return num |
||||
|
} |
||||
|
|
||||
|
function getDefaultSecond(hideSecond) { |
||||
|
return hideSecond ? '00:00' : '00:00:00' |
||||
|
} |
||||
|
|
||||
|
function dateCompare(startDate, endDate) { |
||||
|
startDate = new Date(fixIosDateFormat(startDate)) |
||||
|
endDate = new Date(fixIosDateFormat(endDate)) |
||||
|
return startDate <= endDate |
||||
|
} |
||||
|
|
||||
|
function checkDate(date) { |
||||
|
const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g |
||||
|
return date.match(dateReg) |
||||
|
} |
||||
|
//ios低版本15及以下，无法匹配 没有 ’秒‘ 时的情况，所以需要在末尾 秒 加上 问号
|
||||
|
const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9](:[0-5]?[0-9])?)?$/; |
||||
|
|
||||
|
function fixIosDateFormat(value) { |
||||
|
if (typeof value === 'string' && dateTimeReg.test(value)) { |
||||
|
value = value.replace(/-/g, '/') |
||||
|
} |
||||
|
return value |
||||
|
} |
||||
|
|
||||
|
export { |
||||
|
Calendar, |
||||
|
getDateTime, |
||||
|
getDate, |
||||
|
getTime, |
||||
|
addZero, |
||||
|
getDefaultSecond, |
||||
|
dateCompare, |
||||
|
checkDate, |
||||
|
fixIosDateFormat |
||||
|
} |
||||
@ -0,0 +1,88 @@ |
|||||
|
{ |
||||
|
"id": "uni-datetime-picker", |
||||
|
"displayName": "uni-datetime-picker 日期选择器", |
||||
|
"version": "2.2.38", |
||||
|
"description": "uni-datetime-picker 日期时间选择器，支持日历，支持范围选择", |
||||
|
"keywords": [ |
||||
|
"uni-datetime-picker", |
||||
|
"uni-ui", |
||||
|
"uniui", |
||||
|
"日期时间选择器", |
||||
|
"日期时间" |
||||
|
], |
||||
|
"repository": "https://github.com/dcloudio/uni-ui", |
||||
|
"engines": { |
||||
|
"HBuilderX": "" |
||||
|
}, |
||||
|
"directories": { |
||||
|
"example": "../../temps/example_temps" |
||||
|
}, |
||||
|
"dcloudext": { |
||||
|
"sale": { |
||||
|
"regular": { |
||||
|
"price": "0.00" |
||||
|
}, |
||||
|
"sourcecode": { |
||||
|
"price": "0.00" |
||||
|
} |
||||
|
}, |
||||
|
"contact": { |
||||
|
"qq": "" |
||||
|
}, |
||||
|
"declaration": { |
||||
|
"ads": "无", |
||||
|
"data": "无", |
||||
|
"permissions": "无" |
||||
|
}, |
||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", |
||||
|
"type": "component-vue" |
||||
|
}, |
||||
|
"uni_modules": { |
||||
|
"dependencies": [ |
||||
|
"uni-scss", |
||||
|
"uni-icons" |
||||
|
], |
||||
|
"encrypt": [], |
||||
|
"platforms": { |
||||
|
"cloud": { |
||||
|
"tcb": "y", |
||||
|
"aliyun": "y", |
||||
|
"alipay": "n" |
||||
|
}, |
||||
|
"client": { |
||||
|
"App": { |
||||
|
"app-vue": "y", |
||||
|
"app-nvue": "n" |
||||
|
}, |
||||
|
"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": "y" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,21 @@ |
|||||
|
|
||||
|
|
||||
|
> `重要通知：组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护` |
||||
|
|
||||
|
## DatetimePicker 时间选择器 |
||||
|
|
||||
|
> **组件名：uni-datetime-picker** |
||||
|
> 代码块： `uDatetimePicker` |
||||
|
|
||||
|
|
||||
|
该组件的优势是，支持**时间戳**输入和输出（起始时间、终止时间也支持时间戳），可**同时选择**日期和时间。 |
||||
|
|
||||
|
若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 picker 组件。 |
||||
|
|
||||
|
**_点击 picker 默认值规则：_** |
||||
|
|
||||
|
- 若设置初始值 value, 会显示在 picker 显示框中 |
||||
|
- 若无初始值 value，则初始值 value 为当前本地时间 Date.now()， 但不会显示在 picker 显示框中 |
||||
|
|
||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker) |
||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
||||
@ -0,0 +1,42 @@ |
|||||
|
## 2.0.10（2024-06-07） |
||||
|
- 优化 uni-app x 中，size 属性的类型 |
||||
|
## 2.0.9（2024-01-12） |
||||
|
fix: 修复图标大小默认值错误的问题 |
||||
|
## 2.0.8（2023-12-14） |
||||
|
- 修复 项目未使用 ts 情况下，打包报错的bug |
||||
|
## 2.0.7（2023-12-14） |
||||
|
- 修复 size 属性为 string 时，不加单位导致尺寸异常的bug |
||||
|
## 2.0.6（2023-12-11） |
||||
|
- 优化 兼容老版本icon类型，如 top ，bottom 等 |
||||
|
## 2.0.5（2023-12-11） |
||||
|
- 优化 兼容老版本icon类型，如 top ，bottom 等 |
||||
|
## 2.0.4（2023-12-06） |
||||
|
- 优化 uni-app x 下示例项目图标排序 |
||||
|
## 2.0.3（2023-12-06） |
||||
|
- 修复 nvue下引入组件报错的bug |
||||
|
## 2.0.2（2023-12-05） |
||||
|
-优化 size 属性支持单位 |
||||
|
## 2.0.1（2023-12-05） |
||||
|
- 新增 uni-app x 支持定义图标 |
||||
|
## 1.3.5（2022-01-24） |
||||
|
- 优化 size 属性可以传入不带单位的字符串数值 |
||||
|
## 1.3.4（2022-01-24） |
||||
|
- 优化 size 支持其他单位 |
||||
|
## 1.3.3（2022-01-17） |
||||
|
- 修复 nvue 有些图标不显示的bug，兼容老版本图标 |
||||
|
## 1.3.2（2021-12-01） |
||||
|
- 优化 示例可复制图标名称 |
||||
|
## 1.3.1（2021-11-23） |
||||
|
- 优化 兼容旧组件 type 值 |
||||
|
## 1.3.0（2021-11-19） |
||||
|
- 新增 更多图标 |
||||
|
- 优化 自定义图标使用方式 |
||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) |
||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons) |
||||
|
## 1.1.7（2021-11-08） |
||||
|
## 1.2.0（2021-07-30） |
||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
||||
|
## 1.1.5（2021-05-12） |
||||
|
- 新增 组件示例地址 |
||||
|
## 1.1.4（2021-02-05） |
||||
|
- 调整为uni_modules目录规范 |
||||
@ -0,0 +1,91 @@ |
|||||
|
<template> |
||||
|
<text class="uni-icons" :style="styleObj"> |
||||
|
<slot>{{unicode}}</slot> |
||||
|
</text> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { fontData, IconsDataItem } from './uniicons_file' |
||||
|
|
||||
|
/** |
||||
|
* Icons 图标 |
||||
|
* @description 用于展示 icon 图标 |
||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=28 |
||||
|
* @property {Number,String} size 图标大小 |
||||
|
* @property {String} type 图标图案，参考示例 |
||||
|
* @property {String} color 图标颜色 |
||||
|
* @property {String} customPrefix 自定义图标 |
||||
|
* @event {Function} click 点击 Icon 触发事件 |
||||
|
*/ |
||||
|
export default { |
||||
|
name: "uni-icons", |
||||
|
props: { |
||||
|
type: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
color: { |
||||
|
type: String, |
||||
|
default: '#333333' |
||||
|
}, |
||||
|
size: { |
||||
|
type: [Number, String], |
||||
|
default: 16 |
||||
|
}, |
||||
|
fontFamily: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
computed: { |
||||
|
unicode() : string { |
||||
|
let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type }) |
||||
|
if (codes !== null) { |
||||
|
return codes.unicode |
||||
|
} |
||||
|
return '' |
||||
|
}, |
||||
|
iconSize() : string { |
||||
|
const size = this.size |
||||
|
if (typeof size == 'string') { |
||||
|
const reg = /^[0-9]*$/g |
||||
|
return reg.test(size as string) ? '' + size + 'px' : '' + size; |
||||
|
// return '' + this.size |
||||
|
} |
||||
|
return this.getFontSize(size as number) |
||||
|
}, |
||||
|
styleObj() : UTSJSONObject { |
||||
|
if (this.fontFamily !== '') { |
||||
|
return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily } |
||||
|
} |
||||
|
return { color: this.color, fontSize: this.iconSize } |
||||
|
} |
||||
|
}, |
||||
|
created() { }, |
||||
|
methods: { |
||||
|
/** |
||||
|
* 字体大小 |
||||
|
*/ |
||||
|
getFontSize(size : number) : string { |
||||
|
return size + 'px'; |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
@font-face { |
||||
|
font-family: UniIconsFontFamily; |
||||
|
src: url('./uniicons.ttf'); |
||||
|
} |
||||
|
|
||||
|
.uni-icons { |
||||
|
font-family: UniIconsFontFamily; |
||||
|
font-size: 18px; |
||||
|
font-style: normal; |
||||
|
color: #333; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,110 @@ |
|||||
|
<template> |
||||
|
<!-- #ifdef APP-NVUE --> |
||||
|
<text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text> |
||||
|
<!-- #endif --> |
||||
|
<!-- #ifndef APP-NVUE --> |
||||
|
<text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"> |
||||
|
<slot></slot> |
||||
|
</text> |
||||
|
<!-- #endif --> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { fontData } from './uniicons_file_vue.js'; |
||||
|
|
||||
|
const getVal = (val) => { |
||||
|
const reg = /^[0-9]*$/g |
||||
|
return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val; |
||||
|
} |
||||
|
|
||||
|
// #ifdef APP-NVUE |
||||
|
var domModule = weex.requireModule('dom'); |
||||
|
import iconUrl from './uniicons.ttf' |
||||
|
domModule.addRule('fontFace', { |
||||
|
'fontFamily': "uniicons", |
||||
|
'src': "url('" + iconUrl + "')" |
||||
|
}); |
||||
|
// #endif |
||||
|
|
||||
|
/** |
||||
|
* Icons 图标 |
||||
|
* @description 用于展示 icons 图标 |
||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=28 |
||||
|
* @property {Number} size 图标大小 |
||||
|
* @property {String} type 图标图案，参考示例 |
||||
|
* @property {String} color 图标颜色 |
||||
|
* @property {String} customPrefix 自定义图标 |
||||
|
* @event {Function} click 点击 Icon 触发事件 |
||||
|
*/ |
||||
|
export default { |
||||
|
name: 'UniIcons', |
||||
|
emits: ['click'], |
||||
|
props: { |
||||
|
type: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
color: { |
||||
|
type: String, |
||||
|
default: '#333333' |
||||
|
}, |
||||
|
size: { |
||||
|
type: [Number, String], |
||||
|
default: 16 |
||||
|
}, |
||||
|
customPrefix: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
fontFamily: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
icons: fontData |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
unicode() { |
||||
|
let code = this.icons.find(v => v.font_class === this.type) |
||||
|
if (code) { |
||||
|
return code.unicode |
||||
|
} |
||||
|
return '' |
||||
|
}, |
||||
|
iconSize() { |
||||
|
return getVal(this.size) |
||||
|
}, |
||||
|
styleObj() { |
||||
|
if (this.fontFamily !== '') { |
||||
|
return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};` |
||||
|
} |
||||
|
return `color: ${this.color}; font-size: ${this.iconSize};` |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
_onClick() { |
||||
|
this.$emit('click') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
@import './uniicons.css'; |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: uniicons; |
||||
|
src: url('./uniicons.ttf'); |
||||
|
} |
||||
|
|
||||
|
/* #endif */ |
||||
|
.uni-icons { |
||||
|
font-family: uniicons; |
||||
|
text-decoration: none; |
||||
|
text-align: center; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,664 @@ |
|||||
|
|
||||
|
.uniui-cart-filled:before { |
||||
|
content: "\e6d0"; |
||||
|
} |
||||
|
|
||||
|
.uniui-gift-filled:before { |
||||
|
content: "\e6c4"; |
||||
|
} |
||||
|
|
||||
|
.uniui-color:before { |
||||
|
content: "\e6cf"; |
||||
|
} |
||||
|
|
||||
|
.uniui-wallet:before { |
||||
|
content: "\e6b1"; |
||||
|
} |
||||
|
|
||||
|
.uniui-settings-filled:before { |
||||
|
content: "\e6ce"; |
||||
|
} |
||||
|
|
||||
|
.uniui-auth-filled:before { |
||||
|
content: "\e6cc"; |
||||
|
} |
||||
|
|
||||
|
.uniui-shop-filled:before { |
||||
|
content: "\e6cd"; |
||||
|
} |
||||
|
|
||||
|
.uniui-staff-filled:before { |
||||
|
content: "\e6cb"; |
||||
|
} |
||||
|
|
||||
|
.uniui-vip-filled:before { |
||||
|
content: "\e6c6"; |
||||
|
} |
||||
|
|
||||
|
.uniui-plus-filled:before { |
||||
|
content: "\e6c7"; |
||||
|
} |
||||
|
|
||||
|
.uniui-folder-add-filled:before { |
||||
|
content: "\e6c8"; |
||||
|
} |
||||
|
|
||||
|
.uniui-color-filled:before { |
||||
|
content: "\e6c9"; |
||||
|
} |
||||
|
|
||||
|
.uniui-tune-filled:before { |
||||
|
content: "\e6ca"; |
||||
|
} |
||||
|
|
||||
|
.uniui-calendar-filled:before { |
||||
|
content: "\e6c0"; |
||||
|
} |
||||
|
|
||||
|
.uniui-notification-filled:before { |
||||
|
content: "\e6c1"; |
||||
|
} |
||||
|
|
||||
|
.uniui-wallet-filled:before { |
||||
|
content: "\e6c2"; |
||||
|
} |
||||
|
|
||||
|
.uniui-medal-filled:before { |
||||
|
content: "\e6c3"; |
||||
|
} |
||||
|
|
||||
|
.uniui-fire-filled:before { |
||||
|
content: "\e6c5"; |
||||
|
} |
||||
|
|
||||
|
.uniui-refreshempty:before { |
||||
|
content: "\e6bf"; |
||||
|
} |
||||
|
|
||||
|
.uniui-location-filled:before { |
||||
|
content: "\e6af"; |
||||
|
} |
||||
|
|
||||
|
.uniui-person-filled:before { |
||||
|
content: "\e69d"; |
||||
|
} |
||||
|
|
||||
|
.uniui-personadd-filled:before { |
||||
|
content: "\e698"; |
||||
|
} |
||||
|
|
||||
|
.uniui-arrowthinleft:before { |
||||
|
content: "\e6d2"; |
||||
|
} |
||||
|
|
||||
|
.uniui-arrowthinup:before { |
||||
|
content: "\e6d3"; |
||||
|
} |
||||
|
|
||||
|
.uniui-arrowthindown:before { |
||||
|
content: "\e6d4"; |
||||
|
} |
||||
|
|
||||
|
.uniui-back:before { |
||||
|
content: "\e6b9"; |
||||
|
} |
||||
|
|
||||
|
.uniui-forward:before { |
||||
|
content: "\e6ba"; |
||||
|
} |
||||
|
|
||||
|
.uniui-arrow-right:before { |
||||
|
content: "\e6bb"; |
||||
|
} |
||||
|
|
||||
|
.uniui-arrow-left:before { |
||||
|
content: "\e6bc"; |
||||
|
} |
||||
|
|
||||
|
.uniui-arrow-up:before { |
||||
|
content: "\e6bd"; |
||||
|
} |
||||
|
|
||||
|
.uniui-arrow-down:before { |
||||
|
content: "\e6be"; |
||||
|
} |
||||
|
|
||||
|
.uniui-arrowthinright:before { |
||||
|
content: "\e6d1"; |
||||
|
} |
||||
|
|
||||
|
.uniui-down:before { |
||||
|
content: "\e6b8"; |
||||
|
} |
||||
|
|
||||
|
.uniui-bottom:before { |
||||
|
content: "\e6b8"; |
||||
|
} |
||||
|
|
||||
|
.uniui-arrowright:before { |
||||
|
content: "\e6d5"; |
||||
|
} |
||||
|
|
||||
|
.uniui-right:before { |
||||
|
content: "\e6b5"; |
||||
|
} |
||||
|
|
||||
|
.uniui-up:before { |
||||
|
content: "\e6b6"; |
||||
|
} |
||||
|
|
||||
|
.uniui-top:before { |
||||
|
content: "\e6b6"; |
||||
|
} |
||||
|
|
||||
|
.uniui-left:before { |
||||
|
content: "\e6b7"; |
||||
|
} |
||||
|
|
||||
|
.uniui-arrowup:before { |
||||
|
content: "\e6d6"; |
||||
|
} |
||||
|
|
||||
|
.uniui-eye:before { |
||||
|
content: "\e651"; |
||||
|
} |
||||
|
|
||||
|
.uniui-eye-filled:before { |
||||
|
content: "\e66a"; |
||||
|
} |
||||
|
|
||||
|
.uniui-eye-slash:before { |
||||
|
content: "\e6b3"; |
||||
|
} |
||||
|
|
||||
|
.uniui-eye-slash-filled:before { |
||||
|
content: "\e6b4"; |
||||
|
} |
||||
|
|
||||
|
.uniui-info-filled:before { |
||||
|
content: "\e649"; |
||||
|
} |
||||
|
|
||||
|
.uniui-reload:before { |
||||
|
content: "\e6b2"; |
||||
|
} |
||||
|
|
||||
|
.uniui-micoff-filled:before { |
||||
|
content: "\e6b0"; |
||||
|
} |
||||
|
|
||||
|
.uniui-map-pin-ellipse:before { |
||||
|
content: "\e6ac"; |
||||
|
} |
||||
|
|
||||
|
.uniui-map-pin:before { |
||||
|
content: "\e6ad"; |
||||
|
} |
||||
|
|
||||
|
.uniui-location:before { |
||||
|
content: "\e6ae"; |
||||
|
} |
||||
|
|
||||
|
.uniui-starhalf:before { |
||||
|
content: "\e683"; |
||||
|
} |
||||
|
|
||||
|
.uniui-star:before { |
||||
|
content: "\e688"; |
||||
|
} |
||||
|
|
||||
|
.uniui-star-filled:before { |
||||
|
content: "\e68f"; |
||||
|
} |
||||
|
|
||||
|
.uniui-calendar:before { |
||||
|
content: "\e6a0"; |
||||
|
} |
||||
|
|
||||
|
.uniui-fire:before { |
||||
|
content: "\e6a1"; |
||||
|
} |
||||
|
|
||||
|
.uniui-medal:before { |
||||
|
content: "\e6a2"; |
||||
|
} |
||||
|
|
||||
|
.uniui-font:before { |
||||
|
content: "\e6a3"; |
||||
|
} |
||||
|
|
||||
|
.uniui-gift:before { |
||||
|
content: "\e6a4"; |
||||
|
} |
||||
|
|
||||
|
.uniui-link:before { |
||||
|
content: "\e6a5"; |
||||
|
} |
||||
|
|
||||
|
.uniui-notification:before { |
||||
|
content: "\e6a6"; |
||||
|
} |
||||
|
|
||||
|
.uniui-staff:before { |
||||
|
content: "\e6a7"; |
||||
|
} |
||||
|
|
||||
|
.uniui-vip:before { |
||||
|
content: "\e6a8"; |
||||
|
} |
||||
|
|
||||
|
.uniui-folder-add:before { |
||||
|
content: "\e6a9"; |
||||
|
} |
||||
|
|
||||
|
.uniui-tune:before { |
||||
|
content: "\e6aa"; |
||||
|
} |
||||
|
|
||||
|
.uniui-auth:before { |
||||
|
content: "\e6ab"; |
||||
|
} |
||||
|
|
||||
|
.uniui-person:before { |
||||
|
content: "\e699"; |
||||
|
} |
||||
|
|
||||
|
.uniui-email-filled:before { |
||||
|
content: "\e69a"; |
||||
|
} |
||||
|
|
||||
|
.uniui-phone-filled:before { |
||||
|
content: "\e69b"; |
||||
|
} |
||||
|
|
||||
|
.uniui-phone:before { |
||||
|
content: "\e69c"; |
||||
|
} |
||||
|
|
||||
|
.uniui-email:before { |
||||
|
content: "\e69e"; |
||||
|
} |
||||
|
|
||||
|
.uniui-personadd:before { |
||||
|
content: "\e69f"; |
||||
|
} |
||||
|
|
||||
|
.uniui-chatboxes-filled:before { |
||||
|
content: "\e692"; |
||||
|
} |
||||
|
|
||||
|
.uniui-contact:before { |
||||
|
content: "\e693"; |
||||
|
} |
||||
|
|
||||
|
.uniui-chatbubble-filled:before { |
||||
|
content: "\e694"; |
||||
|
} |
||||
|
|
||||
|
.uniui-contact-filled:before { |
||||
|
content: "\e695"; |
||||
|
} |
||||
|
|
||||
|
.uniui-chatboxes:before { |
||||
|
content: "\e696"; |
||||
|
} |
||||
|
|
||||
|
.uniui-chatbubble:before { |
||||
|
content: "\e697"; |
||||
|
} |
||||
|
|
||||
|
.uniui-upload-filled:before { |
||||
|
content: "\e68e"; |
||||
|
} |
||||
|
|
||||
|
.uniui-upload:before { |
||||
|
content: "\e690"; |
||||
|
} |
||||
|
|
||||
|
.uniui-weixin:before { |
||||
|
content: "\e691"; |
||||
|
} |
||||
|
|
||||
|
.uniui-compose:before { |
||||
|
content: "\e67f"; |
||||
|
} |
||||
|
|
||||
|
.uniui-qq:before { |
||||
|
content: "\e680"; |
||||
|
} |
||||
|
|
||||
|
.uniui-download-filled:before { |
||||
|
content: "\e681"; |
||||
|
} |
||||
|
|
||||
|
.uniui-pyq:before { |
||||
|
content: "\e682"; |
||||
|
} |
||||
|
|
||||
|
.uniui-sound:before { |
||||
|
content: "\e684"; |
||||
|
} |
||||
|
|
||||
|
.uniui-trash-filled:before { |
||||
|
content: "\e685"; |
||||
|
} |
||||
|
|
||||
|
.uniui-sound-filled:before { |
||||
|
content: "\e686"; |
||||
|
} |
||||
|
|
||||
|
.uniui-trash:before { |
||||
|
content: "\e687"; |
||||
|
} |
||||
|
|
||||
|
.uniui-videocam-filled:before { |
||||
|
content: "\e689"; |
||||
|
} |
||||
|
|
||||
|
.uniui-spinner-cycle:before { |
||||
|
content: "\e68a"; |
||||
|
} |
||||
|
|
||||
|
.uniui-weibo:before { |
||||
|
content: "\e68b"; |
||||
|
} |
||||
|
|
||||
|
.uniui-videocam:before { |
||||
|
content: "\e68c"; |
||||
|
} |
||||
|
|
||||
|
.uniui-download:before { |
||||
|
content: "\e68d"; |
||||
|
} |
||||
|
|
||||
|
.uniui-help:before { |
||||
|
content: "\e679"; |
||||
|
} |
||||
|
|
||||
|
.uniui-navigate-filled:before { |
||||
|
content: "\e67a"; |
||||
|
} |
||||
|
|
||||
|
.uniui-plusempty:before { |
||||
|
content: "\e67b"; |
||||
|
} |
||||
|
|
||||
|
.uniui-smallcircle:before { |
||||
|
content: "\e67c"; |
||||
|
} |
||||
|
|
||||
|
.uniui-minus-filled:before { |
||||
|
content: "\e67d"; |
||||
|
} |
||||
|
|
||||
|
.uniui-micoff:before { |
||||
|
content: "\e67e"; |
||||
|
} |
||||
|
|
||||
|
.uniui-closeempty:before { |
||||
|
content: "\e66c"; |
||||
|
} |
||||
|
|
||||
|
.uniui-clear:before { |
||||
|
content: "\e66d"; |
||||
|
} |
||||
|
|
||||
|
.uniui-navigate:before { |
||||
|
content: "\e66e"; |
||||
|
} |
||||
|
|
||||
|
.uniui-minus:before { |
||||
|
content: "\e66f"; |
||||
|
} |
||||
|
|
||||
|
.uniui-image:before { |
||||
|
content: "\e670"; |
||||
|
} |
||||
|
|
||||
|
.uniui-mic:before { |
||||
|
content: "\e671"; |
||||
|
} |
||||
|
|
||||
|
.uniui-paperplane:before { |
||||
|
content: "\e672"; |
||||
|
} |
||||
|
|
||||
|
.uniui-close:before { |
||||
|
content: "\e673"; |
||||
|
} |
||||
|
|
||||
|
.uniui-help-filled:before { |
||||
|
content: "\e674"; |
||||
|
} |
||||
|
|
||||
|
.uniui-paperplane-filled:before { |
||||
|
content: "\e675"; |
||||
|
} |
||||
|
|
||||
|
.uniui-plus:before { |
||||
|
content: "\e676"; |
||||
|
} |
||||
|
|
||||
|
.uniui-mic-filled:before { |
||||
|
content: "\e677"; |
||||
|
} |
||||
|
|
||||
|
.uniui-image-filled:before { |
||||
|
content: "\e678"; |
||||
|
} |
||||
|
|
||||
|
.uniui-locked-filled:before { |
||||
|
content: "\e668"; |
||||
|
} |
||||
|
|
||||
|
.uniui-info:before { |
||||
|
content: "\e669"; |
||||
|
} |
||||
|
|
||||
|
.uniui-locked:before { |
||||
|
content: "\e66b"; |
||||
|
} |
||||
|
|
||||
|
.uniui-camera-filled:before { |
||||
|
content: "\e658"; |
||||
|
} |
||||
|
|
||||
|
.uniui-chat-filled:before { |
||||
|
content: "\e659"; |
||||
|
} |
||||
|
|
||||
|
.uniui-camera:before { |
||||
|
content: "\e65a"; |
||||
|
} |
||||
|
|
||||
|
.uniui-circle:before { |
||||
|
content: "\e65b"; |
||||
|
} |
||||
|
|
||||
|
.uniui-checkmarkempty:before { |
||||
|
content: "\e65c"; |
||||
|
} |
||||
|
|
||||
|
.uniui-chat:before { |
||||
|
content: "\e65d"; |
||||
|
} |
||||
|
|
||||
|
.uniui-circle-filled:before { |
||||
|
content: "\e65e"; |
||||
|
} |
||||
|
|
||||
|
.uniui-flag:before { |
||||
|
content: "\e65f"; |
||||
|
} |
||||
|
|
||||
|
.uniui-flag-filled:before { |
||||
|
content: "\e660"; |
||||
|
} |
||||
|
|
||||
|
.uniui-gear-filled:before { |
||||
|
content: "\e661"; |
||||
|
} |
||||
|
|
||||
|
.uniui-home:before { |
||||
|
content: "\e662"; |
||||
|
} |
||||
|
|
||||
|
.uniui-home-filled:before { |
||||
|
content: "\e663"; |
||||
|
} |
||||
|
|
||||
|
.uniui-gear:before { |
||||
|
content: "\e664"; |
||||
|
} |
||||
|
|
||||
|
.uniui-smallcircle-filled:before { |
||||
|
content: "\e665"; |
||||
|
} |
||||
|
|
||||
|
.uniui-map-filled:before { |
||||
|
content: "\e666"; |
||||
|
} |
||||
|
|
||||
|
.uniui-map:before { |
||||
|
content: "\e667"; |
||||
|
} |
||||
|
|
||||
|
.uniui-refresh-filled:before { |
||||
|
content: "\e656"; |
||||
|
} |
||||
|
|
||||
|
.uniui-refresh:before { |
||||
|
content: "\e657"; |
||||
|
} |
||||
|
|
||||
|
.uniui-cloud-upload:before { |
||||
|
content: "\e645"; |
||||
|
} |
||||
|
|
||||
|
.uniui-cloud-download-filled:before { |
||||
|
content: "\e646"; |
||||
|
} |
||||
|
|
||||
|
.uniui-cloud-download:before { |
||||
|
content: "\e647"; |
||||
|
} |
||||
|
|
||||
|
.uniui-cloud-upload-filled:before { |
||||
|
content: "\e648"; |
||||
|
} |
||||
|
|
||||
|
.uniui-redo:before { |
||||
|
content: "\e64a"; |
||||
|
} |
||||
|
|
||||
|
.uniui-images-filled:before { |
||||
|
content: "\e64b"; |
||||
|
} |
||||
|
|
||||
|
.uniui-undo-filled:before { |
||||
|
content: "\e64c"; |
||||
|
} |
||||
|
|
||||
|
.uniui-more:before { |
||||
|
content: "\e64d"; |
||||
|
} |
||||
|
|
||||
|
.uniui-more-filled:before { |
||||
|
content: "\e64e"; |
||||
|
} |
||||
|
|
||||
|
.uniui-undo:before { |
||||
|
content: "\e64f"; |
||||
|
} |
||||
|
|
||||
|
.uniui-images:before { |
||||
|
content: "\e650"; |
||||
|
} |
||||
|
|
||||
|
.uniui-paperclip:before { |
||||
|
content: "\e652"; |
||||
|
} |
||||
|
|
||||
|
.uniui-settings:before { |
||||
|
content: "\e653"; |
||||
|
} |
||||
|
|
||||
|
.uniui-search:before { |
||||
|
content: "\e654"; |
||||
|
} |
||||
|
|
||||
|
.uniui-redo-filled:before { |
||||
|
content: "\e655"; |
||||
|
} |
||||
|
|
||||
|
.uniui-list:before { |
||||
|
content: "\e644"; |
||||
|
} |
||||
|
|
||||
|
.uniui-mail-open-filled:before { |
||||
|
content: "\e63a"; |
||||
|
} |
||||
|
|
||||
|
.uniui-hand-down-filled:before { |
||||
|
content: "\e63c"; |
||||
|
} |
||||
|
|
||||
|
.uniui-hand-down:before { |
||||
|
content: "\e63d"; |
||||
|
} |
||||
|
|
||||
|
.uniui-hand-up-filled:before { |
||||
|
content: "\e63e"; |
||||
|
} |
||||
|
|
||||
|
.uniui-hand-up:before { |
||||
|
content: "\e63f"; |
||||
|
} |
||||
|
|
||||
|
.uniui-heart-filled:before { |
||||
|
content: "\e641"; |
||||
|
} |
||||
|
|
||||
|
.uniui-mail-open:before { |
||||
|
content: "\e643"; |
||||
|
} |
||||
|
|
||||
|
.uniui-heart:before { |
||||
|
content: "\e639"; |
||||
|
} |
||||
|
|
||||
|
.uniui-loop:before { |
||||
|
content: "\e633"; |
||||
|
} |
||||
|
|
||||
|
.uniui-pulldown:before { |
||||
|
content: "\e632"; |
||||
|
} |
||||
|
|
||||
|
.uniui-scan:before { |
||||
|
content: "\e62a"; |
||||
|
} |
||||
|
|
||||
|
.uniui-bars:before { |
||||
|
content: "\e627"; |
||||
|
} |
||||
|
|
||||
|
.uniui-checkbox:before { |
||||
|
content: "\e62b"; |
||||
|
} |
||||
|
|
||||
|
.uniui-checkbox-filled:before { |
||||
|
content: "\e62c"; |
||||
|
} |
||||
|
|
||||
|
.uniui-shop:before { |
||||
|
content: "\e62f"; |
||||
|
} |
||||
|
|
||||
|
.uniui-headphones:before { |
||||
|
content: "\e630"; |
||||
|
} |
||||
|
|
||||
|
.uniui-cart:before { |
||||
|
content: "\e631"; |
||||
|
} |
||||
Binary file not shown.
@ -0,0 +1,664 @@ |
|||||
|
|
||||
|
export type IconsData = { |
||||
|
id : string |
||||
|
name : string |
||||
|
font_family : string |
||||
|
css_prefix_text : string |
||||
|
description : string |
||||
|
glyphs : Array<IconsDataItem> |
||||
|
} |
||||
|
|
||||
|
export type IconsDataItem = { |
||||
|
font_class : string |
||||
|
unicode : string |
||||
|
} |
||||
|
|
||||
|
|
||||
|
export const fontData = [ |
||||
|
{ |
||||
|
"font_class": "arrow-down", |
||||
|
"unicode": "\ue6be" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "arrow-left", |
||||
|
"unicode": "\ue6bc" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "arrow-right", |
||||
|
"unicode": "\ue6bb" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "arrow-up", |
||||
|
"unicode": "\ue6bd" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "auth", |
||||
|
"unicode": "\ue6ab" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "auth-filled", |
||||
|
"unicode": "\ue6cc" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "back", |
||||
|
"unicode": "\ue6b9" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "bars", |
||||
|
"unicode": "\ue627" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "calendar", |
||||
|
"unicode": "\ue6a0" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "calendar-filled", |
||||
|
"unicode": "\ue6c0" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "camera", |
||||
|
"unicode": "\ue65a" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "camera-filled", |
||||
|
"unicode": "\ue658" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "cart", |
||||
|
"unicode": "\ue631" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "cart-filled", |
||||
|
"unicode": "\ue6d0" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "chat", |
||||
|
"unicode": "\ue65d" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "chat-filled", |
||||
|
"unicode": "\ue659" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "chatboxes", |
||||
|
"unicode": "\ue696" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "chatboxes-filled", |
||||
|
"unicode": "\ue692" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "chatbubble", |
||||
|
"unicode": "\ue697" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "chatbubble-filled", |
||||
|
"unicode": "\ue694" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "checkbox", |
||||
|
"unicode": "\ue62b" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "checkbox-filled", |
||||
|
"unicode": "\ue62c" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "checkmarkempty", |
||||
|
"unicode": "\ue65c" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "circle", |
||||
|
"unicode": "\ue65b" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "circle-filled", |
||||
|
"unicode": "\ue65e" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "clear", |
||||
|
"unicode": "\ue66d" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "close", |
||||
|
"unicode": "\ue673" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "closeempty", |
||||
|
"unicode": "\ue66c" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "cloud-download", |
||||
|
"unicode": "\ue647" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "cloud-download-filled", |
||||
|
"unicode": "\ue646" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "cloud-upload", |
||||
|
"unicode": "\ue645" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "cloud-upload-filled", |
||||
|
"unicode": "\ue648" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "color", |
||||
|
"unicode": "\ue6cf" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "color-filled", |
||||
|
"unicode": "\ue6c9" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "compose", |
||||
|
"unicode": "\ue67f" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "contact", |
||||
|
"unicode": "\ue693" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "contact-filled", |
||||
|
"unicode": "\ue695" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "down", |
||||
|
"unicode": "\ue6b8" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "bottom", |
||||
|
"unicode": "\ue6b8" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "download", |
||||
|
"unicode": "\ue68d" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "download-filled", |
||||
|
"unicode": "\ue681" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "email", |
||||
|
"unicode": "\ue69e" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "email-filled", |
||||
|
"unicode": "\ue69a" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "eye", |
||||
|
"unicode": "\ue651" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "eye-filled", |
||||
|
"unicode": "\ue66a" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "eye-slash", |
||||
|
"unicode": "\ue6b3" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "eye-slash-filled", |
||||
|
"unicode": "\ue6b4" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "fire", |
||||
|
"unicode": "\ue6a1" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "fire-filled", |
||||
|
"unicode": "\ue6c5" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "flag", |
||||
|
"unicode": "\ue65f" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "flag-filled", |
||||
|
"unicode": "\ue660" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "folder-add", |
||||
|
"unicode": "\ue6a9" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "folder-add-filled", |
||||
|
"unicode": "\ue6c8" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "font", |
||||
|
"unicode": "\ue6a3" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "forward", |
||||
|
"unicode": "\ue6ba" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "gear", |
||||
|
"unicode": "\ue664" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "gear-filled", |
||||
|
"unicode": "\ue661" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "gift", |
||||
|
"unicode": "\ue6a4" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "gift-filled", |
||||
|
"unicode": "\ue6c4" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "hand-down", |
||||
|
"unicode": "\ue63d" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "hand-down-filled", |
||||
|
"unicode": "\ue63c" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "hand-up", |
||||
|
"unicode": "\ue63f" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "hand-up-filled", |
||||
|
"unicode": "\ue63e" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "headphones", |
||||
|
"unicode": "\ue630" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "heart", |
||||
|
"unicode": "\ue639" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "heart-filled", |
||||
|
"unicode": "\ue641" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "help", |
||||
|
"unicode": "\ue679" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "help-filled", |
||||
|
"unicode": "\ue674" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "home", |
||||
|
"unicode": "\ue662" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "home-filled", |
||||
|
"unicode": "\ue663" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "image", |
||||
|
"unicode": "\ue670" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "image-filled", |
||||
|
"unicode": "\ue678" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "images", |
||||
|
"unicode": "\ue650" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "images-filled", |
||||
|
"unicode": "\ue64b" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "info", |
||||
|
"unicode": "\ue669" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "info-filled", |
||||
|
"unicode": "\ue649" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "left", |
||||
|
"unicode": "\ue6b7" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "link", |
||||
|
"unicode": "\ue6a5" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "list", |
||||
|
"unicode": "\ue644" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "location", |
||||
|
"unicode": "\ue6ae" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "location-filled", |
||||
|
"unicode": "\ue6af" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "locked", |
||||
|
"unicode": "\ue66b" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "locked-filled", |
||||
|
"unicode": "\ue668" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "loop", |
||||
|
"unicode": "\ue633" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "mail-open", |
||||
|
"unicode": "\ue643" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "mail-open-filled", |
||||
|
"unicode": "\ue63a" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "map", |
||||
|
"unicode": "\ue667" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "map-filled", |
||||
|
"unicode": "\ue666" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "map-pin", |
||||
|
"unicode": "\ue6ad" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "map-pin-ellipse", |
||||
|
"unicode": "\ue6ac" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "medal", |
||||
|
"unicode": "\ue6a2" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "medal-filled", |
||||
|
"unicode": "\ue6c3" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "mic", |
||||
|
"unicode": "\ue671" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "mic-filled", |
||||
|
"unicode": "\ue677" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "micoff", |
||||
|
"unicode": "\ue67e" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "micoff-filled", |
||||
|
"unicode": "\ue6b0" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "minus", |
||||
|
"unicode": "\ue66f" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "minus-filled", |
||||
|
"unicode": "\ue67d" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "more", |
||||
|
"unicode": "\ue64d" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "more-filled", |
||||
|
"unicode": "\ue64e" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "navigate", |
||||
|
"unicode": "\ue66e" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "navigate-filled", |
||||
|
"unicode": "\ue67a" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "notification", |
||||
|
"unicode": "\ue6a6" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "notification-filled", |
||||
|
"unicode": "\ue6c1" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "paperclip", |
||||
|
"unicode": "\ue652" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "paperplane", |
||||
|
"unicode": "\ue672" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "paperplane-filled", |
||||
|
"unicode": "\ue675" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "person", |
||||
|
"unicode": "\ue699" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "person-filled", |
||||
|
"unicode": "\ue69d" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "personadd", |
||||
|
"unicode": "\ue69f" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "personadd-filled", |
||||
|
"unicode": "\ue698" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "personadd-filled-copy", |
||||
|
"unicode": "\ue6d1" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "phone", |
||||
|
"unicode": "\ue69c" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "phone-filled", |
||||
|
"unicode": "\ue69b" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "plus", |
||||
|
"unicode": "\ue676" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "plus-filled", |
||||
|
"unicode": "\ue6c7" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "plusempty", |
||||
|
"unicode": "\ue67b" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "pulldown", |
||||
|
"unicode": "\ue632" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "pyq", |
||||
|
"unicode": "\ue682" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "qq", |
||||
|
"unicode": "\ue680" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "redo", |
||||
|
"unicode": "\ue64a" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "redo-filled", |
||||
|
"unicode": "\ue655" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "refresh", |
||||
|
"unicode": "\ue657" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "refresh-filled", |
||||
|
"unicode": "\ue656" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "refreshempty", |
||||
|
"unicode": "\ue6bf" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "reload", |
||||
|
"unicode": "\ue6b2" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "right", |
||||
|
"unicode": "\ue6b5" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "scan", |
||||
|
"unicode": "\ue62a" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "search", |
||||
|
"unicode": "\ue654" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "settings", |
||||
|
"unicode": "\ue653" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "settings-filled", |
||||
|
"unicode": "\ue6ce" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "shop", |
||||
|
"unicode": "\ue62f" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "shop-filled", |
||||
|
"unicode": "\ue6cd" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "smallcircle", |
||||
|
"unicode": "\ue67c" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "smallcircle-filled", |
||||
|
"unicode": "\ue665" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "sound", |
||||
|
"unicode": "\ue684" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "sound-filled", |
||||
|
"unicode": "\ue686" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "spinner-cycle", |
||||
|
"unicode": "\ue68a" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "staff", |
||||
|
"unicode": "\ue6a7" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "staff-filled", |
||||
|
"unicode": "\ue6cb" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "star", |
||||
|
"unicode": "\ue688" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "star-filled", |
||||
|
"unicode": "\ue68f" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "starhalf", |
||||
|
"unicode": "\ue683" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "trash", |
||||
|
"unicode": "\ue687" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "trash-filled", |
||||
|
"unicode": "\ue685" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "tune", |
||||
|
"unicode": "\ue6aa" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "tune-filled", |
||||
|
"unicode": "\ue6ca" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "undo", |
||||
|
"unicode": "\ue64f" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "undo-filled", |
||||
|
"unicode": "\ue64c" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "up", |
||||
|
"unicode": "\ue6b6" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "top", |
||||
|
"unicode": "\ue6b6" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "upload", |
||||
|
"unicode": "\ue690" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "upload-filled", |
||||
|
"unicode": "\ue68e" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "videocam", |
||||
|
"unicode": "\ue68c" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "videocam-filled", |
||||
|
"unicode": "\ue689" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "vip", |
||||
|
"unicode": "\ue6a8" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "vip-filled", |
||||
|
"unicode": "\ue6c6" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "wallet", |
||||
|
"unicode": "\ue6b1" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "wallet-filled", |
||||
|
"unicode": "\ue6c2" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "weibo", |
||||
|
"unicode": "\ue68b" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "weixin", |
||||
|
"unicode": "\ue691" |
||||
|
} |
||||
|
] as IconsDataItem[] |
||||
|
|
||||
|
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
||||
@ -0,0 +1,649 @@ |
|||||
|
|
||||
|
export const fontData = [ |
||||
|
{ |
||||
|
"font_class": "arrow-down", |
||||
|
"unicode": "\ue6be" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "arrow-left", |
||||
|
"unicode": "\ue6bc" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "arrow-right", |
||||
|
"unicode": "\ue6bb" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "arrow-up", |
||||
|
"unicode": "\ue6bd" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "auth", |
||||
|
"unicode": "\ue6ab" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "auth-filled", |
||||
|
"unicode": "\ue6cc" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "back", |
||||
|
"unicode": "\ue6b9" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "bars", |
||||
|
"unicode": "\ue627" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "calendar", |
||||
|
"unicode": "\ue6a0" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "calendar-filled", |
||||
|
"unicode": "\ue6c0" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "camera", |
||||
|
"unicode": "\ue65a" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "camera-filled", |
||||
|
"unicode": "\ue658" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "cart", |
||||
|
"unicode": "\ue631" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "cart-filled", |
||||
|
"unicode": "\ue6d0" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "chat", |
||||
|
"unicode": "\ue65d" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "chat-filled", |
||||
|
"unicode": "\ue659" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "chatboxes", |
||||
|
"unicode": "\ue696" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "chatboxes-filled", |
||||
|
"unicode": "\ue692" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "chatbubble", |
||||
|
"unicode": "\ue697" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "chatbubble-filled", |
||||
|
"unicode": "\ue694" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "checkbox", |
||||
|
"unicode": "\ue62b" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "checkbox-filled", |
||||
|
"unicode": "\ue62c" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "checkmarkempty", |
||||
|
"unicode": "\ue65c" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "circle", |
||||
|
"unicode": "\ue65b" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "circle-filled", |
||||
|
"unicode": "\ue65e" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "clear", |
||||
|
"unicode": "\ue66d" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "close", |
||||
|
"unicode": "\ue673" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "closeempty", |
||||
|
"unicode": "\ue66c" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "cloud-download", |
||||
|
"unicode": "\ue647" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "cloud-download-filled", |
||||
|
"unicode": "\ue646" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "cloud-upload", |
||||
|
"unicode": "\ue645" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "cloud-upload-filled", |
||||
|
"unicode": "\ue648" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "color", |
||||
|
"unicode": "\ue6cf" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "color-filled", |
||||
|
"unicode": "\ue6c9" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "compose", |
||||
|
"unicode": "\ue67f" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "contact", |
||||
|
"unicode": "\ue693" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "contact-filled", |
||||
|
"unicode": "\ue695" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "down", |
||||
|
"unicode": "\ue6b8" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "bottom", |
||||
|
"unicode": "\ue6b8" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "download", |
||||
|
"unicode": "\ue68d" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "download-filled", |
||||
|
"unicode": "\ue681" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "email", |
||||
|
"unicode": "\ue69e" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "email-filled", |
||||
|
"unicode": "\ue69a" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "eye", |
||||
|
"unicode": "\ue651" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "eye-filled", |
||||
|
"unicode": "\ue66a" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "eye-slash", |
||||
|
"unicode": "\ue6b3" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "eye-slash-filled", |
||||
|
"unicode": "\ue6b4" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "fire", |
||||
|
"unicode": "\ue6a1" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "fire-filled", |
||||
|
"unicode": "\ue6c5" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "flag", |
||||
|
"unicode": "\ue65f" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "flag-filled", |
||||
|
"unicode": "\ue660" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "folder-add", |
||||
|
"unicode": "\ue6a9" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "folder-add-filled", |
||||
|
"unicode": "\ue6c8" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "font", |
||||
|
"unicode": "\ue6a3" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "forward", |
||||
|
"unicode": "\ue6ba" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "gear", |
||||
|
"unicode": "\ue664" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "gear-filled", |
||||
|
"unicode": "\ue661" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "gift", |
||||
|
"unicode": "\ue6a4" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "gift-filled", |
||||
|
"unicode": "\ue6c4" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "hand-down", |
||||
|
"unicode": "\ue63d" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "hand-down-filled", |
||||
|
"unicode": "\ue63c" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "hand-up", |
||||
|
"unicode": "\ue63f" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "hand-up-filled", |
||||
|
"unicode": "\ue63e" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "headphones", |
||||
|
"unicode": "\ue630" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "heart", |
||||
|
"unicode": "\ue639" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "heart-filled", |
||||
|
"unicode": "\ue641" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "help", |
||||
|
"unicode": "\ue679" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "help-filled", |
||||
|
"unicode": "\ue674" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "home", |
||||
|
"unicode": "\ue662" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "home-filled", |
||||
|
"unicode": "\ue663" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "image", |
||||
|
"unicode": "\ue670" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "image-filled", |
||||
|
"unicode": "\ue678" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "images", |
||||
|
"unicode": "\ue650" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "images-filled", |
||||
|
"unicode": "\ue64b" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "info", |
||||
|
"unicode": "\ue669" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "info-filled", |
||||
|
"unicode": "\ue649" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "left", |
||||
|
"unicode": "\ue6b7" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "link", |
||||
|
"unicode": "\ue6a5" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "list", |
||||
|
"unicode": "\ue644" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "location", |
||||
|
"unicode": "\ue6ae" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "location-filled", |
||||
|
"unicode": "\ue6af" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "locked", |
||||
|
"unicode": "\ue66b" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "locked-filled", |
||||
|
"unicode": "\ue668" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "loop", |
||||
|
"unicode": "\ue633" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "mail-open", |
||||
|
"unicode": "\ue643" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "mail-open-filled", |
||||
|
"unicode": "\ue63a" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "map", |
||||
|
"unicode": "\ue667" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "map-filled", |
||||
|
"unicode": "\ue666" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "map-pin", |
||||
|
"unicode": "\ue6ad" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "map-pin-ellipse", |
||||
|
"unicode": "\ue6ac" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "medal", |
||||
|
"unicode": "\ue6a2" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "medal-filled", |
||||
|
"unicode": "\ue6c3" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "mic", |
||||
|
"unicode": "\ue671" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "mic-filled", |
||||
|
"unicode": "\ue677" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "micoff", |
||||
|
"unicode": "\ue67e" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "micoff-filled", |
||||
|
"unicode": "\ue6b0" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "minus", |
||||
|
"unicode": "\ue66f" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "minus-filled", |
||||
|
"unicode": "\ue67d" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "more", |
||||
|
"unicode": "\ue64d" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "more-filled", |
||||
|
"unicode": "\ue64e" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "navigate", |
||||
|
"unicode": "\ue66e" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "navigate-filled", |
||||
|
"unicode": "\ue67a" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "notification", |
||||
|
"unicode": "\ue6a6" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "notification-filled", |
||||
|
"unicode": "\ue6c1" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "paperclip", |
||||
|
"unicode": "\ue652" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "paperplane", |
||||
|
"unicode": "\ue672" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "paperplane-filled", |
||||
|
"unicode": "\ue675" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "person", |
||||
|
"unicode": "\ue699" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "person-filled", |
||||
|
"unicode": "\ue69d" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "personadd", |
||||
|
"unicode": "\ue69f" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "personadd-filled", |
||||
|
"unicode": "\ue698" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "personadd-filled-copy", |
||||
|
"unicode": "\ue6d1" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "phone", |
||||
|
"unicode": "\ue69c" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "phone-filled", |
||||
|
"unicode": "\ue69b" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "plus", |
||||
|
"unicode": "\ue676" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "plus-filled", |
||||
|
"unicode": "\ue6c7" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "plusempty", |
||||
|
"unicode": "\ue67b" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "pulldown", |
||||
|
"unicode": "\ue632" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "pyq", |
||||
|
"unicode": "\ue682" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "qq", |
||||
|
"unicode": "\ue680" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "redo", |
||||
|
"unicode": "\ue64a" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "redo-filled", |
||||
|
"unicode": "\ue655" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "refresh", |
||||
|
"unicode": "\ue657" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "refresh-filled", |
||||
|
"unicode": "\ue656" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "refreshempty", |
||||
|
"unicode": "\ue6bf" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "reload", |
||||
|
"unicode": "\ue6b2" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "right", |
||||
|
"unicode": "\ue6b5" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "scan", |
||||
|
"unicode": "\ue62a" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "search", |
||||
|
"unicode": "\ue654" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "settings", |
||||
|
"unicode": "\ue653" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "settings-filled", |
||||
|
"unicode": "\ue6ce" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "shop", |
||||
|
"unicode": "\ue62f" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "shop-filled", |
||||
|
"unicode": "\ue6cd" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "smallcircle", |
||||
|
"unicode": "\ue67c" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "smallcircle-filled", |
||||
|
"unicode": "\ue665" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "sound", |
||||
|
"unicode": "\ue684" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "sound-filled", |
||||
|
"unicode": "\ue686" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "spinner-cycle", |
||||
|
"unicode": "\ue68a" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "staff", |
||||
|
"unicode": "\ue6a7" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "staff-filled", |
||||
|
"unicode": "\ue6cb" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "star", |
||||
|
"unicode": "\ue688" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "star-filled", |
||||
|
"unicode": "\ue68f" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "starhalf", |
||||
|
"unicode": "\ue683" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "trash", |
||||
|
"unicode": "\ue687" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "trash-filled", |
||||
|
"unicode": "\ue685" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "tune", |
||||
|
"unicode": "\ue6aa" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "tune-filled", |
||||
|
"unicode": "\ue6ca" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "undo", |
||||
|
"unicode": "\ue64f" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "undo-filled", |
||||
|
"unicode": "\ue64c" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "up", |
||||
|
"unicode": "\ue6b6" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "top", |
||||
|
"unicode": "\ue6b6" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "upload", |
||||
|
"unicode": "\ue690" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "upload-filled", |
||||
|
"unicode": "\ue68e" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "videocam", |
||||
|
"unicode": "\ue68c" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "videocam-filled", |
||||
|
"unicode": "\ue689" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "vip", |
||||
|
"unicode": "\ue6a8" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "vip-filled", |
||||
|
"unicode": "\ue6c6" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "wallet", |
||||
|
"unicode": "\ue6b1" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "wallet-filled", |
||||
|
"unicode": "\ue6c2" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "weibo", |
||||
|
"unicode": "\ue68b" |
||||
|
}, |
||||
|
{ |
||||
|
"font_class": "weixin", |
||||
|
"unicode": "\ue691" |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
||||
@ -0,0 +1,89 @@ |
|||||
|
{ |
||||
|
"id": "uni-icons", |
||||
|
"displayName": "uni-icons 图标", |
||||
|
"version": "2.0.10", |
||||
|
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。", |
||||
|
"keywords": [ |
||||
|
"uni-ui", |
||||
|
"uniui", |
||||
|
"icon", |
||||
|
"图标" |
||||
|
], |
||||
|
"repository": "https://github.com/dcloudio/uni-ui", |
||||
|
"engines": { |
||||
|
"HBuilderX": "^3.2.14" |
||||
|
}, |
||||
|
"directories": { |
||||
|
"example": "../../temps/example_temps" |
||||
|
}, |
||||
|
"dcloudext": { |
||||
|
"sale": { |
||||
|
"regular": { |
||||
|
"price": "0.00" |
||||
|
}, |
||||
|
"sourcecode": { |
||||
|
"price": "0.00" |
||||
|
} |
||||
|
}, |
||||
|
"contact": { |
||||
|
"qq": "" |
||||
|
}, |
||||
|
"declaration": { |
||||
|
"ads": "无", |
||||
|
"data": "无", |
||||
|
"permissions": "无" |
||||
|
}, |
||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", |
||||
|
"type": "component-vue" |
||||
|
}, |
||||
|
"uni_modules": { |
||||
|
"dependencies": ["uni-scss"], |
||||
|
"encrypt": [], |
||||
|
"platforms": { |
||||
|
"cloud": { |
||||
|
"tcb": "y", |
||||
|
"aliyun": "y", |
||||
|
"alipay": "n" |
||||
|
}, |
||||
|
"client": { |
||||
|
"App": { |
||||
|
"app-vue": "y", |
||||
|
"app-nvue": "y", |
||||
|
"app-uvue": "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", |
||||
|
"飞书": "y", |
||||
|
"京东": "y" |
||||
|
}, |
||||
|
"快应用": { |
||||
|
"华为": "y", |
||||
|
"联盟": "y" |
||||
|
}, |
||||
|
"Vue": { |
||||
|
"vue2": "y", |
||||
|
"vue3": "y" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,8 @@ |
|||||
|
## Icons 图标 |
||||
|
> **组件名：uni-icons** |
||||
|
> 代码块： `uIcons` |
||||
|
|
||||
|
用于展示 icons 图标 。 |
||||
|
|
||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons) |
||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
||||
@ -0,0 +1,8 @@ |
|||||
|
## 1.0.3（2022-01-21） |
||||
|
- 优化 组件示例 |
||||
|
## 1.0.2（2021-11-22） |
||||
|
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题 |
||||
|
## 1.0.1（2021-11-22） |
||||
|
- 修复 vue3中scss语法兼容问题 |
||||
|
## 1.0.0（2021-11-18） |
||||
|
- init |
||||
@ -0,0 +1 @@ |
|||||
|
@import './styles/index.scss'; |
||||
@ -0,0 +1,82 @@ |
|||||
|
{ |
||||
|
"id": "uni-scss", |
||||
|
"displayName": "uni-scss 辅助样式", |
||||
|
"version": "1.0.3", |
||||
|
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。", |
||||
|
"keywords": [ |
||||
|
"uni-scss", |
||||
|
"uni-ui", |
||||
|
"辅助样式" |
||||
|
], |
||||
|
"repository": "https://github.com/dcloudio/uni-ui", |
||||
|
"engines": { |
||||
|
"HBuilderX": "^3.1.0" |
||||
|
}, |
||||
|
"dcloudext": { |
||||
|
"category": [ |
||||
|
"JS SDK", |
||||
|
"通用 SDK" |
||||
|
], |
||||
|
"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": "u" |
||||
|
}, |
||||
|
"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" |
||||
|
}, |
||||
|
"快应用": { |
||||
|
"华为": "n", |
||||
|
"联盟": "n" |
||||
|
}, |
||||
|
"Vue": { |
||||
|
"vue2": "y", |
||||
|
"vue3": "y" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。 |
||||
|
|
||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass) |
||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
||||
@ -0,0 +1,7 @@ |
|||||
|
@import './setting/_variables.scss'; |
||||
|
@import './setting/_border.scss'; |
||||
|
@import './setting/_color.scss'; |
||||
|
@import './setting/_space.scss'; |
||||
|
@import './setting/_radius.scss'; |
||||
|
@import './setting/_text.scss'; |
||||
|
@import './setting/_styles.scss'; |
||||
@ -0,0 +1,3 @@ |
|||||
|
.uni-border { |
||||
|
border: 1px $uni-border-1 solid; |
||||
|
} |
||||
@ -0,0 +1,66 @@ |
|||||
|
|
||||
|
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐 |
||||
|
// @mixin get-styles($k,$c) { |
||||
|
// @if $k == size or $k == weight{ |
||||
|
// font-#{$k}:#{$c} |
||||
|
// }@else{ |
||||
|
// #{$k}:#{$c} |
||||
|
// } |
||||
|
// } |
||||
|
$uni-ui-color:( |
||||
|
// 主色 |
||||
|
primary: $uni-primary, |
||||
|
primary-disable: $uni-primary-disable, |
||||
|
primary-light: $uni-primary-light, |
||||
|
// 辅助色 |
||||
|
success: $uni-success, |
||||
|
success-disable: $uni-success-disable, |
||||
|
success-light: $uni-success-light, |
||||
|
warning: $uni-warning, |
||||
|
warning-disable: $uni-warning-disable, |
||||
|
warning-light: $uni-warning-light, |
||||
|
error: $uni-error, |
||||
|
error-disable: $uni-error-disable, |
||||
|
error-light: $uni-error-light, |
||||
|
info: $uni-info, |
||||
|
info-disable: $uni-info-disable, |
||||
|
info-light: $uni-info-light, |
||||
|
// 中性色 |
||||
|
main-color: $uni-main-color, |
||||
|
base-color: $uni-base-color, |
||||
|
secondary-color: $uni-secondary-color, |
||||
|
extra-color: $uni-extra-color, |
||||
|
// 背景色 |
||||
|
bg-color: $uni-bg-color, |
||||
|
// 边框颜色 |
||||
|
border-1: $uni-border-1, |
||||
|
border-2: $uni-border-2, |
||||
|
border-3: $uni-border-3, |
||||
|
border-4: $uni-border-4, |
||||
|
// 黑色 |
||||
|
black:$uni-black, |
||||
|
// 白色 |
||||
|
white:$uni-white, |
||||
|
// 透明 |
||||
|
transparent:$uni-transparent |
||||
|
) !default; |
||||
|
@each $key, $child in $uni-ui-color { |
||||
|
.uni-#{"" + $key} { |
||||
|
color: $child; |
||||
|
} |
||||
|
.uni-#{"" + $key}-bg { |
||||
|
background-color: $child; |
||||
|
} |
||||
|
} |
||||
|
.uni-shadow-sm { |
||||
|
box-shadow: $uni-shadow-sm; |
||||
|
} |
||||
|
.uni-shadow-base { |
||||
|
box-shadow: $uni-shadow-base; |
||||
|
} |
||||
|
.uni-shadow-lg { |
||||
|
box-shadow: $uni-shadow-lg; |
||||
|
} |
||||
|
.uni-mask { |
||||
|
background-color:$uni-mask; |
||||
|
} |
||||
@ -0,0 +1,55 @@ |
|||||
|
@mixin radius($r,$d:null ,$important: false){ |
||||
|
$radius-value:map-get($uni-radius, $r) if($important, !important, null); |
||||
|
// Key exists within the $uni-radius variable |
||||
|
@if (map-has-key($uni-radius, $r) and $d){ |
||||
|
@if $d == t { |
||||
|
border-top-left-radius:$radius-value; |
||||
|
border-top-right-radius:$radius-value; |
||||
|
}@else if $d == r { |
||||
|
border-top-right-radius:$radius-value; |
||||
|
border-bottom-right-radius:$radius-value; |
||||
|
}@else if $d == b { |
||||
|
border-bottom-left-radius:$radius-value; |
||||
|
border-bottom-right-radius:$radius-value; |
||||
|
}@else if $d == l { |
||||
|
border-top-left-radius:$radius-value; |
||||
|
border-bottom-left-radius:$radius-value; |
||||
|
}@else if $d == tl { |
||||
|
border-top-left-radius:$radius-value; |
||||
|
}@else if $d == tr { |
||||
|
border-top-right-radius:$radius-value; |
||||
|
}@else if $d == br { |
||||
|
border-bottom-right-radius:$radius-value; |
||||
|
}@else if $d == bl { |
||||
|
border-bottom-left-radius:$radius-value; |
||||
|
} |
||||
|
}@else{ |
||||
|
border-radius:$radius-value; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@each $key, $child in $uni-radius { |
||||
|
@if($key){ |
||||
|
.uni-radius-#{"" + $key} { |
||||
|
@include radius($key) |
||||
|
} |
||||
|
}@else{ |
||||
|
.uni-radius { |
||||
|
@include radius($key) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@each $direction in t, r, b, l,tl, tr, br, bl { |
||||
|
@each $key, $child in $uni-radius { |
||||
|
@if($key){ |
||||
|
.uni-radius-#{"" + $direction}-#{"" + $key} { |
||||
|
@include radius($key,$direction,false) |
||||
|
} |
||||
|
}@else{ |
||||
|
.uni-radius-#{$direction} { |
||||
|
@include radius($key,$direction,false) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,56 @@ |
|||||
|
|
||||
|
@mixin fn($space,$direction,$size,$n) { |
||||
|
@if $n { |
||||
|
#{$space}-#{$direction}: #{$size*$uni-space-root}px |
||||
|
} @else { |
||||
|
#{$space}-#{$direction}: #{-$size*$uni-space-root}px |
||||
|
} |
||||
|
} |
||||
|
@mixin get-styles($direction,$i,$space,$n){ |
||||
|
@if $direction == t { |
||||
|
@include fn($space, top,$i,$n); |
||||
|
} |
||||
|
@if $direction == r { |
||||
|
@include fn($space, right,$i,$n); |
||||
|
} |
||||
|
@if $direction == b { |
||||
|
@include fn($space, bottom,$i,$n); |
||||
|
} |
||||
|
@if $direction == l { |
||||
|
@include fn($space, left,$i,$n); |
||||
|
} |
||||
|
@if $direction == x { |
||||
|
@include fn($space, left,$i,$n); |
||||
|
@include fn($space, right,$i,$n); |
||||
|
} |
||||
|
@if $direction == y { |
||||
|
@include fn($space, top,$i,$n); |
||||
|
@include fn($space, bottom,$i,$n); |
||||
|
} |
||||
|
@if $direction == a { |
||||
|
@if $n { |
||||
|
#{$space}:#{$i*$uni-space-root}px; |
||||
|
} @else { |
||||
|
#{$space}:#{-$i*$uni-space-root}px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@each $orientation in m,p { |
||||
|
$space: margin; |
||||
|
@if $orientation == m { |
||||
|
$space: margin; |
||||
|
} @else { |
||||
|
$space: padding; |
||||
|
} |
||||
|
@for $i from 0 through 16 { |
||||
|
@each $direction in t, r, b, l, x, y, a { |
||||
|
.uni-#{$orientation}#{$direction}-#{$i} { |
||||
|
@include get-styles($direction,$i,$space,true); |
||||
|
} |
||||
|
.uni-#{$orientation}#{$direction}-n#{$i} { |
||||
|
@include get-styles($direction,$i,$space,false); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,167 @@ |
|||||
|
/* #ifndef APP-NVUE */ |
||||
|
|
||||
|
$-color-white:#fff; |
||||
|
$-color-black:#000; |
||||
|
@mixin base-style($color) { |
||||
|
color: #fff; |
||||
|
background-color: $color; |
||||
|
border-color: mix($-color-black, $color, 8%); |
||||
|
&:not([hover-class]):active { |
||||
|
background: mix($-color-black, $color, 10%); |
||||
|
border-color: mix($-color-black, $color, 20%); |
||||
|
color: $-color-white; |
||||
|
outline: none; |
||||
|
} |
||||
|
} |
||||
|
@mixin is-color($color) { |
||||
|
@include base-style($color); |
||||
|
&[loading] { |
||||
|
@include base-style($color); |
||||
|
&::before { |
||||
|
margin-right:5px; |
||||
|
} |
||||
|
} |
||||
|
&[disabled] { |
||||
|
&, |
||||
|
&[loading], |
||||
|
&:not([hover-class]):active { |
||||
|
color: $-color-white; |
||||
|
border-color: mix(darken($color,10%), $-color-white); |
||||
|
background-color: mix($color, $-color-white); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
@mixin base-plain-style($color) { |
||||
|
color:$color; |
||||
|
background-color: mix($-color-white, $color, 90%); |
||||
|
border-color: mix($-color-white, $color, 70%); |
||||
|
&:not([hover-class]):active { |
||||
|
background: mix($-color-white, $color, 80%); |
||||
|
color: $color; |
||||
|
outline: none; |
||||
|
border-color: mix($-color-white, $color, 50%); |
||||
|
} |
||||
|
} |
||||
|
@mixin is-plain($color){ |
||||
|
&[plain] { |
||||
|
@include base-plain-style($color); |
||||
|
&[loading] { |
||||
|
@include base-plain-style($color); |
||||
|
&::before { |
||||
|
margin-right:5px; |
||||
|
} |
||||
|
} |
||||
|
&[disabled] { |
||||
|
&, |
||||
|
&:active { |
||||
|
color: mix($-color-white, $color, 40%); |
||||
|
background-color: mix($-color-white, $color, 90%); |
||||
|
border-color: mix($-color-white, $color, 80%); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.uni-btn { |
||||
|
margin: 5px; |
||||
|
color: #393939; |
||||
|
border:1px solid #ccc; |
||||
|
font-size: 16px; |
||||
|
font-weight: 200; |
||||
|
background-color: #F9F9F9; |
||||
|
// TODO 暂时处理边框隐藏一边的问题 |
||||
|
overflow: visible; |
||||
|
&::after{ |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
&:not([type]),&[type=default] { |
||||
|
color: #999; |
||||
|
&[loading] { |
||||
|
background: none; |
||||
|
&::before { |
||||
|
margin-right:5px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
&[disabled]{ |
||||
|
color: mix($-color-white, #999, 60%); |
||||
|
&, |
||||
|
&[loading], |
||||
|
&:active { |
||||
|
color: mix($-color-white, #999, 60%); |
||||
|
background-color: mix($-color-white,$-color-black , 98%); |
||||
|
border-color: mix($-color-white, #999, 85%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&[plain] { |
||||
|
color: #999; |
||||
|
background: none; |
||||
|
border-color: $uni-border-1; |
||||
|
&:not([hover-class]):active { |
||||
|
background: none; |
||||
|
color: mix($-color-white, $-color-black, 80%); |
||||
|
border-color: mix($-color-white, $-color-black, 90%); |
||||
|
outline: none; |
||||
|
} |
||||
|
&[disabled]{ |
||||
|
&, |
||||
|
&[loading], |
||||
|
&:active { |
||||
|
background: none; |
||||
|
color: mix($-color-white, #999, 60%); |
||||
|
border-color: mix($-color-white, #999, 85%); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:not([hover-class]):active { |
||||
|
color: mix($-color-white, $-color-black, 50%); |
||||
|
} |
||||
|
|
||||
|
&[size=mini] { |
||||
|
font-size: 16px; |
||||
|
font-weight: 200; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
&.uni-btn-small { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
&.uni-btn-mini { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
&.uni-btn-radius { |
||||
|
border-radius: 999px; |
||||
|
} |
||||
|
&[type=primary] { |
||||
|
@include is-color($uni-primary); |
||||
|
@include is-plain($uni-primary) |
||||
|
} |
||||
|
&[type=success] { |
||||
|
@include is-color($uni-success); |
||||
|
@include is-plain($uni-success) |
||||
|
} |
||||
|
&[type=error] { |
||||
|
@include is-color($uni-error); |
||||
|
@include is-plain($uni-error) |
||||
|
} |
||||
|
&[type=warning] { |
||||
|
@include is-color($uni-warning); |
||||
|
@include is-plain($uni-warning) |
||||
|
} |
||||
|
&[type=info] { |
||||
|
@include is-color($uni-info); |
||||
|
@include is-plain($uni-info) |
||||
|
} |
||||
|
} |
||||
|
/* #endif */ |
||||
@ -0,0 +1,24 @@ |
|||||
|
@mixin get-styles($k,$c) { |
||||
|
@if $k == size or $k == weight{ |
||||
|
font-#{$k}:#{$c} |
||||
|
}@else{ |
||||
|
#{$k}:#{$c} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@each $key, $child in $uni-headings { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
.uni-#{$key} { |
||||
|
@each $k, $c in $child { |
||||
|
@include get-styles($k,$c) |
||||
|
} |
||||
|
} |
||||
|
/* #endif */ |
||||
|
/* #ifdef APP-NVUE */ |
||||
|
.container .uni-#{$key} { |
||||
|
@each $k, $c in $child { |
||||
|
@include get-styles($k,$c) |
||||
|
} |
||||
|
} |
||||
|
/* #endif */ |
||||
|
} |
||||
@ -0,0 +1,146 @@ |
|||||
|
// @use "sass:math"; |
||||
|
@import '../tools/functions.scss'; |
||||
|
// 间距基础倍数 |
||||
|
$uni-space-root: 2 !default; |
||||
|
// 边框半径默认值 |
||||
|
$uni-radius-root:5px !default; |
||||
|
$uni-radius: () !default; |
||||
|
// 边框半径断点 |
||||
|
$uni-radius: map-deep-merge( |
||||
|
( |
||||
|
0: 0, |
||||
|
// TODO 当前版本暂时不支持 sm 属性 |
||||
|
// 'sm': math.div($uni-radius-root, 2), |
||||
|
null: $uni-radius-root, |
||||
|
'lg': $uni-radius-root * 2, |
||||
|
'xl': $uni-radius-root * 6, |
||||
|
'pill': 9999px, |
||||
|
'circle': 50% |
||||
|
), |
||||
|
$uni-radius |
||||
|
); |
||||
|
// 字体家族 |
||||
|
$body-font-family: 'Roboto', sans-serif !default; |
||||
|
// 文本 |
||||
|
$heading-font-family: $body-font-family !default; |
||||
|
$uni-headings: () !default; |
||||
|
$letterSpacing: -0.01562em; |
||||
|
$uni-headings: map-deep-merge( |
||||
|
( |
||||
|
'h1': ( |
||||
|
size: 32px, |
||||
|
weight: 300, |
||||
|
line-height: 50px, |
||||
|
// letter-spacing:-0.01562em |
||||
|
), |
||||
|
'h2': ( |
||||
|
size: 28px, |
||||
|
weight: 300, |
||||
|
line-height: 40px, |
||||
|
// letter-spacing: -0.00833em |
||||
|
), |
||||
|
'h3': ( |
||||
|
size: 24px, |
||||
|
weight: 400, |
||||
|
line-height: 32px, |
||||
|
// letter-spacing: normal |
||||
|
), |
||||
|
'h4': ( |
||||
|
size: 20px, |
||||
|
weight: 400, |
||||
|
line-height: 30px, |
||||
|
// letter-spacing: 0.00735em |
||||
|
), |
||||
|
'h5': ( |
||||
|
size: 16px, |
||||
|
weight: 400, |
||||
|
line-height: 24px, |
||||
|
// letter-spacing: normal |
||||
|
), |
||||
|
'h6': ( |
||||
|
size: 14px, |
||||
|
weight: 500, |
||||
|
line-height: 18px, |
||||
|
// letter-spacing: 0.0125em |
||||
|
), |
||||
|
'subtitle': ( |
||||
|
size: 12px, |
||||
|
weight: 400, |
||||
|
line-height: 20px, |
||||
|
// letter-spacing: 0.00937em |
||||
|
), |
||||
|
'body': ( |
||||
|
font-size: 14px, |
||||
|
font-weight: 400, |
||||
|
line-height: 22px, |
||||
|
// letter-spacing: 0.03125em |
||||
|
), |
||||
|
'caption': ( |
||||
|
'size': 12px, |
||||
|
'weight': 400, |
||||
|
'line-height': 20px, |
||||
|
// 'letter-spacing': 0.03333em, |
||||
|
// 'text-transform': false |
||||
|
) |
||||
|
), |
||||
|
$uni-headings |
||||
|
); |
||||
|
|
||||
|
|
||||
|
|
||||
|
// 主色 |
||||
|
$uni-primary: #2979ff !default; |
||||
|
$uni-primary-disable:lighten($uni-primary,20%) !default; |
||||
|
$uni-primary-light: lighten($uni-primary,25%) !default; |
||||
|
|
||||
|
// 辅助色 |
||||
|
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 |
||||
|
$uni-success: #18bc37 !default; |
||||
|
$uni-success-disable:lighten($uni-success,20%) !default; |
||||
|
$uni-success-light: lighten($uni-success,25%) !default; |
||||
|
|
||||
|
$uni-warning: #f3a73f !default; |
||||
|
$uni-warning-disable:lighten($uni-warning,20%) !default; |
||||
|
$uni-warning-light: lighten($uni-warning,25%) !default; |
||||
|
|
||||
|
$uni-error: #e43d33 !default; |
||||
|
$uni-error-disable:lighten($uni-error,20%) !default; |
||||
|
$uni-error-light: lighten($uni-error,25%) !default; |
||||
|
|
||||
|
$uni-info: #8f939c !default; |
||||
|
$uni-info-disable:lighten($uni-info,20%) !default; |
||||
|
$uni-info-light: lighten($uni-info,25%) !default; |
||||
|
|
||||
|
// 中性色 |
||||
|
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 |
||||
|
$uni-main-color: #3a3a3a !default; // 主要文字 |
||||
|
$uni-base-color: #6a6a6a !default; // 常规文字 |
||||
|
$uni-secondary-color: #909399 !default; // 次要文字 |
||||
|
$uni-extra-color: #c7c7c7 !default; // 辅助说明 |
||||
|
|
||||
|
// 边框颜色 |
||||
|
$uni-border-1: #F0F0F0 !default; |
||||
|
$uni-border-2: #EDEDED !default; |
||||
|
$uni-border-3: #DCDCDC !default; |
||||
|
$uni-border-4: #B9B9B9 !default; |
||||
|
|
||||
|
// 常规色 |
||||
|
$uni-black: #000000 !default; |
||||
|
$uni-white: #ffffff !default; |
||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0) !default; |
||||
|
|
||||
|
// 背景色 |
||||
|
$uni-bg-color: #f7f7f7 !default; |
||||
|
|
||||
|
/* 水平间距 */ |
||||
|
$uni-spacing-sm: 8px !default; |
||||
|
$uni-spacing-base: 15px !default; |
||||
|
$uni-spacing-lg: 30px !default; |
||||
|
|
||||
|
// 阴影 |
||||
|
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default; |
||||
|
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; |
||||
|
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default; |
||||
|
|
||||
|
// 蒙版 |
||||
|
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default; |
||||
@ -0,0 +1,19 @@ |
|||||
|
// 合并 map |
||||
|
@function map-deep-merge($parent-map, $child-map){ |
||||
|
$result: $parent-map; |
||||
|
@each $key, $child in $child-map { |
||||
|
$parent-has-key: map-has-key($result, $key); |
||||
|
$parent-value: map-get($result, $key); |
||||
|
$parent-type: type-of($parent-value); |
||||
|
$child-type: type-of($child); |
||||
|
$parent-is-map: $parent-type == map; |
||||
|
$child-is-map: $child-type == map; |
||||
|
|
||||
|
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){ |
||||
|
$result: map-merge($result, ( $key: $child )); |
||||
|
}@else { |
||||
|
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) )); |
||||
|
} |
||||
|
} |
||||
|
@return $result; |
||||
|
}; |
||||
@ -0,0 +1,31 @@ |
|||||
|
// 间距基础倍数 |
||||
|
$uni-space-root: 2; |
||||
|
// 边框半径默认值 |
||||
|
$uni-radius-root:5px; |
||||
|
// 主色 |
||||
|
$uni-primary: #2979ff; |
||||
|
// 辅助色 |
||||
|
$uni-success: #4cd964; |
||||
|
// 警告色 |
||||
|
$uni-warning: #f0ad4e; |
||||
|
// 错误色 |
||||
|
$uni-error: #dd524d; |
||||
|
// 描述色 |
||||
|
$uni-info: #909399; |
||||
|
// 中性色 |
||||
|
$uni-main-color: #303133; |
||||
|
$uni-base-color: #606266; |
||||
|
$uni-secondary-color: #909399; |
||||
|
$uni-extra-color: #C0C4CC; |
||||
|
// 背景色 |
||||
|
$uni-bg-color: #f5f5f5; |
||||
|
// 边框颜色 |
||||
|
$uni-border-1: #DCDFE6; |
||||
|
$uni-border-2: #E4E7ED; |
||||
|
$uni-border-3: #EBEEF5; |
||||
|
$uni-border-4: #F2F6FC; |
||||
|
|
||||
|
// 常规色 |
||||
|
$uni-black: #000000; |
||||
|
$uni-white: #ffffff; |
||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0); |
||||
@ -0,0 +1,62 @@ |
|||||
|
@import './styles/setting/_variables.scss'; |
||||
|
// 间距基础倍数 |
||||
|
$uni-space-root: 2; |
||||
|
// 边框半径默认值 |
||||
|
$uni-radius-root:5px; |
||||
|
|
||||
|
// 主色 |
||||
|
$uni-primary: #2979ff; |
||||
|
$uni-primary-disable:mix(#fff,$uni-primary,50%); |
||||
|
$uni-primary-light: mix(#fff,$uni-primary,80%); |
||||
|
|
||||
|
// 辅助色 |
||||
|
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 |
||||
|
$uni-success: #18bc37; |
||||
|
$uni-success-disable:mix(#fff,$uni-success,50%); |
||||
|
$uni-success-light: mix(#fff,$uni-success,80%); |
||||
|
|
||||
|
$uni-warning: #f3a73f; |
||||
|
$uni-warning-disable:mix(#fff,$uni-warning,50%); |
||||
|
$uni-warning-light: mix(#fff,$uni-warning,80%); |
||||
|
|
||||
|
$uni-error: #e43d33; |
||||
|
$uni-error-disable:mix(#fff,$uni-error,50%); |
||||
|
$uni-error-light: mix(#fff,$uni-error,80%); |
||||
|
|
||||
|
$uni-info: #8f939c; |
||||
|
$uni-info-disable:mix(#fff,$uni-info,50%); |
||||
|
$uni-info-light: mix(#fff,$uni-info,80%); |
||||
|
|
||||
|
// 中性色 |
||||
|
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 |
||||
|
$uni-main-color: #3a3a3a; // 主要文字 |
||||
|
$uni-base-color: #6a6a6a; // 常规文字 |
||||
|
$uni-secondary-color: #909399; // 次要文字 |
||||
|
$uni-extra-color: #c7c7c7; // 辅助说明 |
||||
|
|
||||
|
// 边框颜色 |
||||
|
$uni-border-1: #F0F0F0; |
||||
|
$uni-border-2: #EDEDED; |
||||
|
$uni-border-3: #DCDCDC; |
||||
|
$uni-border-4: #B9B9B9; |
||||
|
|
||||
|
// 常规色 |
||||
|
$uni-black: #000000; |
||||
|
$uni-white: #ffffff; |
||||
|
$uni-transparent: rgba($color: #000000, $alpha: 0); |
||||
|
|
||||
|
// 背景色 |
||||
|
$uni-bg-color: #f7f7f7; |
||||
|
|
||||
|
/* 水平间距 */ |
||||
|
$uni-spacing-sm: 8px; |
||||
|
$uni-spacing-base: 15px; |
||||
|
$uni-spacing-lg: 30px; |
||||
|
|
||||
|
// 阴影 |
||||
|
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5); |
||||
|
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2); |
||||
|
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5); |
||||
|
|
||||
|
// 蒙版 |
||||
|
$uni-mask: rgba($color: #000000, $alpha: 0.4); |
||||
Loading…
Reference in new issue