first commit
This commit is contained in:
PC-202306242200\Administrator
320
uni_modules/qiun-data-charts/changelog.md
Normal file
320
uni_modules/qiun-data-charts/changelog.md
Normal file
@@ -0,0 +1,320 @@
|
||||
## 2.5.0-20230101（2023-01-01）
|
||||
- 秋云图表组件 修改条件编译顺序，确保uniapp的cli方式的项目依赖不完整时可以正常显示
|
||||
- 秋云图表组件 恢复props属性directory的使用，以修复vue3项目中，开启echarts后，echarts目录识别错误的bug
|
||||
- uCharts.js 修复区域图、混合图只有一个数据时图表显示不正确的bug
|
||||
- uCharts.js 修复折线图、区域图中时间轴类别图表tooltip指示点显示不正确的bug
|
||||
- uCharts.js 修复x轴使用labelCount时，并且boundaryGap = 'justify' 并且关闭Y轴显示的时候，最后一个坐标值不显示的bug
|
||||
- uCharts.js 修复折线图只有一组数据时 ios16 渲染颜色不正确的bug
|
||||
- uCharts.js 修复玫瑰图半径显示不正确的bug
|
||||
- uCharts.js 柱状图、山峰图增加正负图功能，y轴网格如果需要显示0轴则由 min max 及 splitNumber 确定，后续版本优化自动显示0轴
|
||||
- uCharts.js 柱状图column增加 opts.extra.column.labelPosition，数据标签位置，有效值为 outside外部, insideTop内顶部, center内中间, bottom内底部
|
||||
- uCharts.js 雷达图radar增加 opts.extra.radar.labelShow，否显示各项标识文案是，默认true
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.boxPadding，提示窗边框填充距离，默认3px
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.fontSize，提示窗字体大小配置，默认13px
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.lineHeight，提示窗文字行高，默认20px
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.legendShow，是否显示左侧图例，默认true
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.legendShape，图例形状，图例标识样式，有效值为 auto自动跟随图例, diamond◆, circle●, triangle▲, square■, rect▬, line-
|
||||
- uCharts.js 标记线markLine增加 opts.extra.markLine.labelFontSize，字体大小配置，默认13px
|
||||
- uCharts.js 标记线markLine增加 opts.extra.markLine.labelPadding，标签边框内填充距离，默认6px
|
||||
- uCharts.js 折线图line增加 opts.extra.line.linearType，渐变色类型，可选值 none关闭渐变色，custom 自定义渐变色。使用自定义渐变色时请赋值serie.linearColor作为颜色值
|
||||
- uCharts.js 折线图line增加 serie.linearColor，渐变色数组，格式为2维数组[起始位置，颜色值]，例如[[0,'#0EE2F8'],[0.3,'#2BDCA8'],[0.6,'#1890FF'],[1,'#9A60B4']]
|
||||
- uCharts.js 折线图line增加 opts.extra.line.onShadow，是否开启折线阴影，开启后请赋值serie.setShadow阴影设置
|
||||
- uCharts.js 折线图line增加 serie.setShadow，阴影配置，格式为4位数组：[offsetX,offsetY,blur,color]
|
||||
- uCharts.js 折线图line增加 opts.extra.line.animation，动画效果方向，可选值为vertical 垂直动画效果，horizontal 水平动画效果
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.lineHeight，X轴字体行高，默认20px
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.marginTop，X轴文字距离轴线的距离，默认0px
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.title，当前X轴标题
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.titleFontSize，标题字体大小，默认13px
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.titleOffsetY，标题纵向偏移距离，负数为向上偏移，正数向下偏移
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.titleOffsetX，标题横向偏移距离，负数为向左偏移，正数向右偏移
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.titleFontColor，标题字体颜色，默认#666666
|
||||
|
||||
## 报错TypeError: Cannot read properties of undefined (reading 'length')
|
||||
- 如果是uni-modules版本组件，请先登录HBuilderX账号；
|
||||
- 在HBuilderX中的manifest.json，点击重新获取uniapp的appid，或者删除appid重新粘贴，重新运行；
|
||||
- 如果是cli项目请使用码云上的非uniCloud版本组件；
|
||||
- 或者添加uniCloud的依赖；
|
||||
- 或者使用原生uCharts；
|
||||
## 2.4.5-20221130（2022-11-30）
|
||||
- uCharts.js 优化tooltip当文字很多变为左侧显示时，如果画布仍显显示不下，提示框错位置变为以左侧0位置起画
|
||||
- uCharts.js 折线图修复特殊情况下只有单点数据，并改变线宽后点变为圆形的bug
|
||||
- uCharts.js 修复Y轴disabled启用后无效并报错的bug
|
||||
- uCharts.js 修复仪表盘起始结束角度特殊情况下显示不正确的bug
|
||||
- uCharts.js 雷达图新增参数 opts.extra.radar.radius , 自定义雷达图半径
|
||||
- uCharts.js 折线图、区域图增加tooltip指示点，opts.extra.line.activeType/opts.extra.area.activeType，可选值"none"不启用激活指示点,"hollow"空心点模式,"solid"实心点模式
|
||||
## 2.4.4-20221102（2022-11-02）
|
||||
- 秋云图表组件 修复使用echarts时reload、reshow无法调用重新渲染的bug，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/40)
|
||||
- 秋云图表组件 修复使用echarts时，初始化时宽高不正确的bug，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/42)
|
||||
- 秋云图表组件 修复uniapp的h5使用history模式时，无法加载echarts的bug
|
||||
- 秋云图表组件 小程序端@complete、@scrollLeft、@scrollRight、@getTouchStart、@getTouchMove、@getTouchEnd事件增加opts参数传出，方便一些特殊需求的交互获取数据。
|
||||
|
||||
- uCharts.js 修复calTooltipYAxisData方法内formatter格式化方法未与y轴方法同步的问题，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/43)
|
||||
- uCharts.js 地图新增参数opts.series[i].fillOpacity，以透明度方式来设置颜色过度效果，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/38)
|
||||
- uCharts.js 地图新增参数opts.extra.map.active，是否启用点击激活变色
|
||||
- uCharts.js 地图新增参数opts.extra.map.activeTextColor，是否启用点击激活变色
|
||||
- uCharts.js 地图新增渲染完成事件renderComplete
|
||||
- uCharts.js 漏斗图修复当部分数据相同时tooltip提示窗点击错误的bug
|
||||
- uCharts.js 漏斗图新增参数series.data[i].centerText 居中标签文案
|
||||
- uCharts.js 漏斗图新增参数series.data[i].centerTextSize 居中标签文案字体大小，默认opts.fontSize
|
||||
- uCharts.js 漏斗图新增参数series.data[i].centerTextColor 居中标签文案字体颜色，默认#FFFFFF
|
||||
- uCharts.js 漏斗图新增参数opts.extra.funnel.minSize 最小值的最小宽度，默认0
|
||||
- uCharts.js 进度条新增参数opts.extra.arcbar.direction，动画方向，可选值为cw顺时针、ccw逆时针
|
||||
- uCharts.js 混合图新增参数opts.extra.mix.line.width，折线的宽度，默认2
|
||||
- uCharts.js 修复tooltip开启horizentalLine水平横线标注时，图表显示错位的bug
|
||||
- uCharts.js 优化tooltip当文字很多变为左侧显示时，如果画布仍显显示不下，提示框错位置变为以左侧0位置起画
|
||||
- uCharts.js 修复开启滚动条后X轴文字超出绘图区域后的隐藏逻辑
|
||||
- uCharts.js 柱状图、条状图修复堆叠模式不能通过{value,color}赋值单个柱子颜色的问题
|
||||
- uCharts.js 气泡图修复不识别series.textSize和series.textColor的bug
|
||||
|
||||
## 报错TypeError: Cannot read properties of undefined (reading 'length')
|
||||
1. 如果是uni-modules版本组件，请先登录HBuilderX账号；
|
||||
2. 在HBuilderX中的manifest.json，点击重新获取uniapp的appid，或者删除appid重新粘贴，重新运行；
|
||||
3. 如果是cli项目请使用码云上的非uniCloud版本组件；
|
||||
4. 或者添加uniCloud的依赖；
|
||||
5. 或者使用原生uCharts；
|
||||
## 2.4.3-20220505（2022-05-05）
|
||||
- 秋云图表组件 修复开启canvas2d后将series赋值为空数组显示加载图标时，再次赋值后画布闪动的bug
|
||||
- 秋云图表组件 修复升级hbx最新版后ECharts的highlight方法报错的bug
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.gridEval，数据点位网格抽希，默认1
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabel， 是否显示刻度点值，默认false
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabelTofix，刻度点值小数位数，默认0
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointShow，是否显示末端刻度圆点，默认false
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointRadius，刻度圆点的半径，默认3
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointColor，刻度圆点的颜色，默认#cccccc
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.linearType，渐变色类型，可选值"none"关闭渐变,"custom"开启渐变
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.customColor，自定义渐变颜色，数组类型对应series的数组长度以匹配不同series颜色的不同配色方案，例如["#FA7D8D", "#EB88E2"]
|
||||
- uCharts.js 雷达图优化支持series.textColor、series.textSize属性
|
||||
- uCharts.js 柱状图中温度计式图标，优化支持全圆角类型，修复边框有缝隙的bug，详见官网【演示】中的温度计图表
|
||||
- uCharts.js 柱状图新增参数opts.extra.column.activeWidth，当前点击柱状图的背景宽度，默认一个单元格单位
|
||||
- uCharts.js 混合图增加opts.extra.mix.area.gradient 区域图是否开启渐变色
|
||||
- uCharts.js 混合图增加opts.extra.mix.area.opacity 区域图透明度，默认0.2
|
||||
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图，增加opts.series[0].data[i].labelText，自定义标签文字，避免formatter格式化的繁琐，详见官网【演示】中的饼图
|
||||
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图，增加opts.series[0].data[i].labelShow，自定义是否显示某一个指示标签，避免因饼图类别太多导致标签重复或者居多导致图形变形的问题，详见官网【演示】中的饼图
|
||||
- uCharts.js 增加opts.series[i].legendText/opts.series[0].data[i].legendText（与series.name同级）自定义图例显示文字的方法
|
||||
- uCharts.js 优化X轴、Y轴formatter格式化方法增加形参，统一为fromatter:function(value,index,opts){}
|
||||
- uCharts.js 修复横屏模式下无法使用双指缩放方法的bug
|
||||
- uCharts.js 修复当只有一条数据或者多条数据值相等的时候Y轴自动计算的最大值错误的bug
|
||||
- 【官网模板】增加外部自定义图例与图表交互的例子，[点击跳转](https://www.ucharts.cn/v2/#/layout/info?id=2)
|
||||
|
||||
## 注意：非unimodules 版本如因更新 hbx 至 3.4.7 导致报错如下，请到码云更新非 unimodules 版本组件，[点击跳转](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6)
|
||||
> Error in callback for immediate watcher "uchartsOpts": "SyntaxError: Unexpected token u in JSON at position 0"
|
||||
## 2.4.2-20220421（2022-04-21）
|
||||
- 秋云图表组件 修复HBX升级3.4.6.20220420版本后echarts报错的问题
|
||||
## 2.4.2-20220420（2022-04-20）
|
||||
## 重要！此版本uCharts新增了很多功能，修复了诸多已知问题
|
||||
- 秋云图表组件 新增onzoom开启双指缩放功能（仅uCharts），前提需要直角坐标系类图表类型，并且ontouch为true、opts.enableScroll为true，详见实例项目K线图
|
||||
- 秋云图表组件 新增optsWatch是否监听opts变化，关闭optsWatch后，动态修改opts不会触发图表重绘
|
||||
- 秋云图表组件 修复开启canvas2d功能后，动态更新数据后画布闪动的bug
|
||||
- 秋云图表组件 去除directory属性，改为自动获取echarts.min.js路径（升级不受影响）
|
||||
- 秋云图表组件 增加getImage()方法及@getImage事件，通过ref调用getImage()方法获，触发@getImage事件获取当前画布的base64图片文件流。
|
||||
- 秋云图表组件 支付宝、字节跳动、飞书、快手小程序支持开启canvas2d同层渲染设置。
|
||||
- 秋云图表组件 新增加【非uniCloud】版本组件，避免有些不需要uniCloud的使用组件发布至小程序需要提交隐私声明问题，请到码云[【非uniCloud版本】](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6)，或npm[【非uniCloud版本】](https://www.npmjs.com/package/@qiun/uni-ucharts)下载使用。
|
||||
- uCharts.js 新增dobuleZoom双指缩放功能
|
||||
- uCharts.js 新增山峰图type="mount"，数据格式为饼图类格式，不需要传入categories，具体详见新版官网在线演示
|
||||
- uCharts.js 修复折线图当数据中存在null时tooltip报错的bug
|
||||
- uCharts.js 修复饼图类当画布比较小时自动计算的半径是负数报错的bug
|
||||
- uCharts.js 统一各图表类型的series.formatter格式化方法的形参为(val, index, series, opts)，方便格式化时有更多参数可用
|
||||
- uCharts.js 标记线功能增加labelText自定义显示文字，增加labelAlign标签显示位置（左侧或右侧），增加标签显示位置微调labelOffsetX、labelOffsetY
|
||||
- uCharts.js 修复条状图当数值很小时开启圆角后样式错误的bug
|
||||
- uCharts.js 修复X轴开启disabled后，X轴仍占用空间的bug
|
||||
- uCharts.js 修复X轴开启滚动条并且开启rotateLabel后，X轴文字与滚动条重叠的bug
|
||||
- uCharts.js 增加X轴rotateAngle文字旋转自定义角度，取值范围(-90至90)
|
||||
- uCharts.js 修复地图文字标签层级显示不正确的bug
|
||||
- uCharts.js 修复饼图、圆环图、玫瑰图当数据全部为0的时候不显示数据标签的bug
|
||||
- uCharts.js 修复当opts.padding上边距为0时，Y轴顶部刻度标签位置不正确的bug
|
||||
|
||||
## 另外我们还开发了各大原生小程序组件，已发布至码云和npm
|
||||
[https://gitee.com/uCharts/uCharts](https://gitee.com/uCharts/uCharts)
|
||||
[https://www.npmjs.com/~qiun](https://www.npmjs.com/~qiun)
|
||||
|
||||
## 对于原生uCharts文档我们已上线新版官方网站，详情点击下面链接进入官网
|
||||
[https://www.uCharts.cn/v2/](https://www.ucharts.cn/v2/)
|
||||
## 2.3.7-20220122（2022-01-22）
|
||||
## 重要！使用vue3编译，请使用cli模式并升级至最新依赖，HbuilderX编译需要使用3.3.8以上版本
|
||||
- uCharts.js 修复uni-app平台组件模式使用vue3编译到小程序报错的bug。
|
||||
## 2.3.7-20220118（2022-01-18）
|
||||
## 注意，使用vue3的前提是需要3.3.8.20220114-alpha版本的HBuilder！
|
||||
## 2.3.67-20220118（2022-01-18）
|
||||
- 秋云图表组件 组件初步支持vue3，全端编译会有些问题，具体详见下面修改：
|
||||
1. 小程序端运行时，在uni_modules文件夹的qiun-data-charts.js中搜索 new uni_modules_qiunDataCharts_js_sdk_uCharts_uCharts.uCharts，将.uCharts去掉。
|
||||
2. 小程序端发行时，在uni_modules文件夹的qiun-data-charts.js中搜索 new e.uCharts，将.uCharts去掉，变为 new e。
|
||||
3. 如果觉得上述步骤比较麻烦，如果您的项目只编译到小程序端，可以修改u-charts.js最后一行导出方式，将 export default uCharts;变更为 export default { uCharts: uCharts }; 这样变更后，H5和App端的renderjs会有问题，请开发者自行选择。（此问题非组件问题，请等待DC官方修复Vue3的小程序端）
|
||||
## 2.3.6-20220111（2022-01-11）
|
||||
- 秋云图表组件 修改组件 props 属性中的 background 默认值为 rgba(0,0,0,0)
|
||||
## 2.3.6-20211201（2021-12-01）
|
||||
- uCharts.js 修复bar条状图开启圆角模式时，值很小时圆角渲染错误的bug
|
||||
## 2.3.5-20211014（2021-10-15）
|
||||
- uCharts.js 增加vue3的编译支持（仅原生uCharts，qiun-data-charts组件后续会支持，请关注更新）
|
||||
## 2.3.4-20211012（2021-10-12）
|
||||
- 秋云图表组件 修复 mac os x 系统 mouseover 事件丢失的 bug
|
||||
## 2.3.3-20210706（2021-07-06）
|
||||
- uCharts.js 增加雷达图开启数据点值（opts.dataLabel）的显示
|
||||
## 2.3.2-20210627（2021-06-27）
|
||||
- 秋云图表组件 修复tooltipCustom个别情况下传值不正确报错TypeError: Cannot read property 'name' of undefined的bug
|
||||
## 2.3.1-20210616（2021-06-16）
|
||||
- uCharts.js 修复圆角柱状图使用4角圆角时，当数值过大时不正确的bug
|
||||
## 2.3.0-20210612（2021-06-12）
|
||||
- uCharts.js 【重要】uCharts增加nvue兼容，可在nvue项目中使用gcanvas组件渲染uCharts，[详见码云uCharts-demo-nvue](https://gitee.com/uCharts/uCharts)
|
||||
- 秋云图表组件 增加tapLegend属性，是否开启图例点击交互事件
|
||||
- 秋云图表组件 getIndex事件中增加返回uCharts实例中的opts参数，以便在页面中调用参数
|
||||
- 示例项目 pages/other/other.vue增加app端自定义tooltip的方法，详见showOptsTooltip方法
|
||||
## 2.2.1-20210603（2021-06-03）
|
||||
- uCharts.js 修复饼图、圆环图、玫瑰图，当起始角度不为0时，tooltip位置不准确的bug
|
||||
- uCharts.js 增加温度计式柱状图开启顶部半圆形的配置
|
||||
## 2.2.0-20210529（2021-05-29）
|
||||
- uCharts.js 增加条状图type="bar"
|
||||
- 示例项目 pages/ucharts/ucharts.vue增加条状图的demo
|
||||
## 2.1.7-20210524（2021-05-24）
|
||||
- uCharts.js 修复大数据量模式下曲线图不平滑的bug
|
||||
## 2.1.6-20210523（2021-05-23）
|
||||
- 秋云图表组件 修复小程序端开启滚动条更新数据后滚动条位置不符合预期的bug
|
||||
## 2.1.5-2021051702（2021-05-17）
|
||||
- uCharts.js 修复自定义Y轴min和max值为0时不能正确显示的bug
|
||||
## 2.1.5-20210517（2021-05-17）
|
||||
- uCharts.js 修复Y轴自定义min和max时，未按指定的最大值最小值显示坐标轴刻度的bug
|
||||
## 2.1.4-20210516（2021-05-16）
|
||||
- 秋云图表组件 优化onWindowResize防抖方法
|
||||
- 秋云图表组件 修复APP端uCharts更新数据时，清空series显示loading图标后再显示图表，图表抖动的bug
|
||||
- uCharts.js 修复开启canvas2d后，x轴、y轴、series自定义字体大小未按比例缩放的bug
|
||||
- 示例项目 修复format-e.vue拼写错误导致app端使用uCharts渲染图表
|
||||
## 2.1.3-20210513（2021-05-13）
|
||||
- 秋云图表组件 修改uCharts变更chartData数据为updateData方法，支持带滚动条的数据动态打点
|
||||
- 秋云图表组件 增加onWindowResize防抖方法 fix by ど誓言，如尘般染指流年づ
|
||||
- 秋云图表组件 H5或者APP变更chartData数据显示loading图表时，原数据闪现的bug
|
||||
- 秋云图表组件 props增加errorReload禁用错误点击重新加载的方法
|
||||
- uCharts.js 增加tooltip显示category（x轴对应点位）标题的功能，opts.extra.tooltip.showCategory，默认为false
|
||||
- uCharts.js 修复mix混合图只有柱状图时，tooltip的分割线显示位置不正确的bug
|
||||
- uCharts.js 修复开启滚动条，图表在拖动中动态打点，滚动条位置不正确的bug
|
||||
- uCharts.js 修复饼图类数据格式为echarts数据格式，series为空数组报错的bug
|
||||
- 示例项目 修改uCharts.js更新到v2.1.2版本后，@getIndex方法获取索引值变更为e.currentIndex.index
|
||||
- 示例项目 pages/updata/updata.vue增加滚动条拖动更新（数据动态打点）的demo
|
||||
- 示例项目 pages/other/other.vue增加errorReload禁用错误点击重新加载的demo
|
||||
## 2.1.2-20210509（2021-05-09）
|
||||
秋云图表组件 修复APP端初始化时就传入chartData或lacaldata不显示图表的bug
|
||||
## 2.1.1-20210509（2021-05-09）
|
||||
- 秋云图表组件 变更ECharts的eopts配置在renderjs内执行，支持在config-echarts.js配置文件内写function配置。
|
||||
- 秋云图表组件 修复APP端报错Prop being mutated: "onmouse"错误的bug。
|
||||
- 秋云图表组件 修复APP端报错Error: Not Found：Page[6][-1,27] at view.umd.min.js:1的bug。
|
||||
## 2.1.0-20210507（2021-05-07）
|
||||
- 秋云图表组件 修复初始化时就有数据或者数据更新的时候loading加载动画闪动的bug
|
||||
- uCharts.js 修复x轴format方法categories为字符串类型时返回NaN的bug
|
||||
- uCharts.js 修复series.textColor、legend.fontColor未执行全局默认颜色的bug
|
||||
## 2.1.0-20210506（2021-05-06）
|
||||
- 秋云图表组件 修复极个别情况下报错item.properties undefined的bug
|
||||
- 秋云图表组件 修复极个别情况下关闭加载动画reshow不起作用，无法显示图表的bug
|
||||
- 示例项目 pages/ucharts/ucharts.vue 增加时间轴折线图（type="tline"）、时间轴区域图（type="tarea"）、散点图（type="scatter"）、气泡图demo（type="bubble"）、倒三角形漏斗图（opts.extra.funnel.type="triangle"）、金字塔形漏斗图（opts.extra.funnel.type="pyramid"）
|
||||
- 示例项目 pages/format-u/format-u.vue 增加X轴format格式化示例
|
||||
- uCharts.js 升级至v2.1.0版本
|
||||
- uCharts.js 修复 玫瑰图面积模式点击tooltip位置不正确的bug
|
||||
- uCharts.js 修复 玫瑰图点击图例，只剩一个类别显示空白的bug
|
||||
- uCharts.js 修复 饼图类图点击图例，其他图表tooltip位置某些情况下不准的bug
|
||||
- uCharts.js 修复 x轴为矢量轴（时间轴）情况下，点击tooltip位置不正确的bug
|
||||
- uCharts.js 修复 词云图获取点击索引偶尔不准的bug
|
||||
- uCharts.js 增加 直角坐标系图表X轴format格式化方法（原生uCharts.js用法请使用formatter）
|
||||
- uCharts.js 增加 漏斗图扩展配置，倒三角形（opts.extra.funnel.type="triangle"），金字塔形（opts.extra.funnel.type="pyramid"）
|
||||
- uCharts.js 增加 散点图（opts.type="scatter"）、气泡图（opts.type="bubble"）
|
||||
- 后期计划 完善散点图、气泡图，增加markPoints标记点，增加横向条状图。
|
||||
## 2.0.0-20210502（2021-05-02）
|
||||
- uCharts.js 修复词云图获取点击索引不正确的bug
|
||||
## 2.0.0-20210501（2021-05-01）
|
||||
- 秋云图表组件 修复QQ小程序、百度小程序在关闭动画效果情况下，v-for循环使用图表，显示不正确的bug
|
||||
## 2.0.0-20210426（2021-04-26）
|
||||
- 秋云图表组件 修复QQ小程序不支持canvas2d的bug
|
||||
- 秋云图表组件 修复钉钉小程序某些情况点击坐标计算错误的bug
|
||||
- uCharts.js 增加 extra.column.categoryGap 参数，柱状图类每个category点位（X轴点）柱子组之间的间距
|
||||
- uCharts.js 增加 yAxis.data[i].titleOffsetY 参数，标题纵向偏移距离，负数为向上偏移，正数向下偏移
|
||||
- uCharts.js 增加 yAxis.data[i].titleOffsetX 参数，标题横向偏移距离，负数为向左偏移，正数向右偏移
|
||||
- uCharts.js 增加 extra.gauge.labelOffset 参数，仪表盘标签文字径向便宜距离，默认13px
|
||||
## 2.0.0-20210422-2（2021-04-22）
|
||||
秋云图表组件 修复 formatterAssign 未判断 args[key] == null 的情况导致栈溢出的 bug
|
||||
## 2.0.0-20210422（2021-04-22）
|
||||
- 秋云图表组件 修复H5、APP、支付宝小程序、微信小程序canvas2d模式下横屏模式的bug
|
||||
## 2.0.0-20210421（2021-04-21）
|
||||
- uCharts.js 修复多行图例的情况下，图例在上方或者下方时，图例float为左侧或者右侧时，第二行及以后的图例对齐方式不正确的bug
|
||||
## 2.0.0-20210420（2021-04-20）
|
||||
- 秋云图表组件 修复微信小程序开启canvas2d模式后，windows版微信小程序不支持canvas2d模式的bug
|
||||
- 秋云图表组件 修改非uni_modules版本为v2.0版本qiun-data-charts组件
|
||||
## 2.0.0-20210419（2021-04-19）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX，如仍不好用，请重启电脑；
|
||||
## 如果是cli项目，请尝试清理node_modules，重新install，还不行就删除项目，再重新install。
|
||||
## 此问题已于DCloud官方确认，HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍，右侧蓝色按钮示例项目请看2遍！ </font>
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 修复混合图中柱状图单独设置颜色不生效的bug
|
||||
- uCharts.js 修复多Y轴单独设置fontSize时，开启canvas2d后，未对应放大字体的bug
|
||||
## 2.0.0-20210418（2021-04-18）
|
||||
- 秋云图表组件 增加directory配置，修复H5端history模式下如果发布到二级目录无法正确加载echarts.min.js的bug
|
||||
## 2.0.0-20210416（2021-04-16）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX，如仍不好用，请重启电脑；
|
||||
## 如果是cli项目，请尝试清理node_modules，重新install，还不行就删除项目，再重新install。
|
||||
## 此问题已于DCloud官方确认，HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍，右侧蓝色按钮示例项目请看2遍！ </font>
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复APP端某些情况下报错`Not Found Page`的bug，fix by 高级bug开发技术员
|
||||
- 示例项目 修复APP端v-for循环某些情况下报错`Not Found Page`的bug，fix by 高级bug开发技术员
|
||||
- uCharts.js 修复非直角坐标系tooltip提示窗右侧超出未变换方向显示的bug
|
||||
## 2.0.0-20210415（2021-04-15）
|
||||
- 秋云图表组件 修复H5端发布到二级目录下echarts无法加载的bug
|
||||
- 秋云图表组件 修复某些情况下echarts.off('finished')移除监听事件报错的bug
|
||||
## 2.0.0-20210414（2021-04-14）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX，如仍不好用，请重启电脑；
|
||||
## 如果是cli项目，请尝试清理node_modules，重新install，还不行就删除项目，再重新install。
|
||||
## 此问题已于DCloud官方确认，HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍，右侧蓝色按钮示例项目请看2遍！ </font>
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复H5端在cli项目下ECharts引用地址错误的bug
|
||||
- 示例项目 增加ECharts的formatter用法的示例(详见示例项目format-e.vue)
|
||||
- uCharts.js 增加圆环图中心背景色的配置extra.ring.centerColor
|
||||
- uCharts.js 修复微信小程序安卓端柱状图开启透明色后显示不正确的bug
|
||||
## 2.0.0-20210413（2021-04-13）
|
||||
- 秋云图表组件 修复百度小程序多个图表真机未能正确获取根元素dom尺寸的bug
|
||||
- 秋云图表组件 修复百度小程序横屏模式方向不正确的bug
|
||||
- 秋云图表组件 修改ontouch时，@getTouchStart@getTouchMove@getTouchEnd的触发条件
|
||||
- uCharts.js 修复饼图类数据格式series属性不生效的bug
|
||||
- uCharts.js 增加时序区域图 详见示例项目中ucharts.vue
|
||||
## 2.0.0-20210412-2（2021-04-12）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX。如仍不好用，请重启电脑，此问题已于DCloud官方确认，HBuilderX下个版本会修复。
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复uCharts在APP端横屏模式下不能正确渲染的bug
|
||||
- 示例项目 增加ECharts柱状图渐变色、圆角柱状图、横向柱状图（条状图）的示例
|
||||
## 2.0.0-20210412（2021-04-12）
|
||||
- 秋云图表组件 修复created中判断echarts导致APP端无法识别，改回mounted中判断echarts初始化
|
||||
- uCharts.js 修复2d模式下series.textOffset未乘像素比的bug
|
||||
## 2.0.0-20210411（2021-04-11）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX，并清空小程序开发者工具缓存。
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 折线图区域图增加connectNulls断点续连的功能，详见示例项目中ucharts.vue
|
||||
- 秋云图表组件 变更初始化方法为created，变更type2d默认值为true，优化2d模式下组件初始化后dom获取不到的bug
|
||||
- 秋云图表组件 修复左右布局时，右侧图表点击坐标错误的bug，修复tooltip柱状图自定义颜色显示object的bug
|
||||
## 2.0.0-20210410（2021-04-10）
|
||||
- 修复左右布局时，右侧图表点击坐标错误的bug，修复柱状图自定义颜色tooltip显示object的bug
|
||||
- 增加标记线及柱状图自定义颜色的demo
|
||||
## 2.0.0-20210409（2021-04-08）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧【使用HBuilderX导入插件】即可体验，DEMO演示及在线生成工具（v2.0文档）[https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 修复钉钉小程序百度小程序measureText不准确的bug，修复2d模式下饼图类activeRadius为按比例放大的bug
|
||||
- 修复组件在支付宝小程序端点击位置不准确的bug
|
||||
## 2.0.0-20210408（2021-04-07）
|
||||
- 修复组件在支付宝小程序端不能显示的bug（目前支付宝小程不能点击交互，后续修复）
|
||||
- uCharts.js 修复高分屏下柱状图类，圆弧进度条 自定义宽度不能按比例放大的bug
|
||||
## 2.0.0-20210407（2021-04-06）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧【使用HBuilderX导入插件】即可体验，DEMO演示及在线生成工具（v2.0文档）[https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## 增加 通过tofix和unit快速格式化y轴的demo add by `howcode`
|
||||
## 增加 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
## 2.0.0-20210406（2021-04-05）
|
||||
# 秋云图表组件+uCharts v2.0版本同步上线，使用方法详见https://demo.ucharts.cn帮助页
|
||||
## 2.0.0（2021-04-05）
|
||||
# 秋云图表组件+uCharts v2.0版本同步上线，使用方法详见https://demo.ucharts.cn帮助页
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<view class="container loading1">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading1',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.container.loading1 {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading1 .shape1 {
|
||||
-webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, 16px);
|
||||
transform: translate(16px, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, 16px);
|
||||
transform: translate(16px, 16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape2 {
|
||||
-webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, 16px);
|
||||
transform: translate(-16px, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, 16px);
|
||||
transform: translate(-16px, 16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape3 {
|
||||
-webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, -16px);
|
||||
transform: translate(16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, -16px);
|
||||
transform: translate(16px, -16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape4 {
|
||||
-webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, -16px);
|
||||
transform: translate(-16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, -16px);
|
||||
transform: translate(-16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<view class="container loading2">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading2',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading2 {
|
||||
-webkit-transform: rotate(10deg);
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
.container.loading2 .shape {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.container.loading2{
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
|
||||
.loading2 .shape1 {
|
||||
-webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, 20px);
|
||||
transform: translate(20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, 20px);
|
||||
transform: translate(20px, 20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape2 {
|
||||
-webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, 20px);
|
||||
transform: translate(-20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, 20px);
|
||||
transform: translate(-20px, 20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape3 {
|
||||
-webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, -20px);
|
||||
transform: translate(20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, -20px);
|
||||
transform: translate(20px, -20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape4 {
|
||||
-webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, -20px);
|
||||
transform: translate(-20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, -20px);
|
||||
transform: translate(-20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<view class="container loading3">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading3',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading3 {
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
.container.loading3 .shape1 {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape2 {
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape3 {
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape4 {
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading3 .shape1 {
|
||||
-webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, 5px);
|
||||
transform: translate(5px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, 5px);
|
||||
transform: translate(5px, 5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape2 {
|
||||
-webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, 5px);
|
||||
transform: translate(-5px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, 5px);
|
||||
transform: translate(-5px, 5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape3 {
|
||||
-webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, -5px);
|
||||
transform: translate(5px, -5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, -5px);
|
||||
transform: translate(5px, -5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape4 {
|
||||
-webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, -5px);
|
||||
transform: translate(-5px, -5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, -5px);
|
||||
transform: translate(-5px, -5px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<view class="container loading5">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading5',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading5 .shape {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading5 .shape1 {
|
||||
animation: animation5shape1 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, 15px);
|
||||
transform: translate(15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, 15px);
|
||||
transform: translate(15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
}
|
||||
.loading5 .shape2 {
|
||||
animation: animation5shape2 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, 15px);
|
||||
transform: translate(-15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, 15px);
|
||||
transform: translate(-15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
}
|
||||
.loading5 .shape3 {
|
||||
animation: animation5shape3 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, -15px);
|
||||
transform: translate(15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, -15px);
|
||||
transform: translate(15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
}
|
||||
.loading5 .shape4 {
|
||||
animation: animation5shape4 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, -15px);
|
||||
transform: translate(-15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, -15px);
|
||||
transform: translate(-15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<view class="container loading6">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading6',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading6 {
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
.container.loading6 .shape {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
|
||||
.loading6 .shape1 {
|
||||
-webkit-animation: animation6shape1 2s linear 0s infinite normal;
|
||||
animation: animation6shape1 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, 18px);
|
||||
transform: translate(18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, 18px);
|
||||
transform: translate(18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
}
|
||||
.loading6 .shape2 {
|
||||
-webkit-animation: animation6shape2 2s linear 0s infinite normal;
|
||||
animation: animation6shape2 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, 18px);
|
||||
transform: translate(-18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, 18px);
|
||||
transform: translate(-18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
}
|
||||
.loading6 .shape3 {
|
||||
-webkit-animation: animation6shape3 2s linear 0s infinite normal;
|
||||
animation: animation6shape3 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, -18px);
|
||||
transform: translate(18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, -18px);
|
||||
transform: translate(18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
}
|
||||
.loading6 .shape4 {
|
||||
-webkit-animation: animation6shape4 2s linear 0s infinite normal;
|
||||
animation: animation6shape4 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, -18px);
|
||||
transform: translate(-18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, -18px);
|
||||
transform: translate(-18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<view>
|
||||
<Loading1 v-if="loadingType==1"/>
|
||||
<Loading2 v-if="loadingType==2"/>
|
||||
<Loading3 v-if="loadingType==3"/>
|
||||
<Loading4 v-if="loadingType==4"/>
|
||||
<Loading5 v-if="loadingType==5"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Loading1 from "./loading1.vue";
|
||||
import Loading2 from "./loading2.vue";
|
||||
import Loading3 from "./loading3.vue";
|
||||
import Loading4 from "./loading4.vue";
|
||||
import Loading5 from "./loading5.vue";
|
||||
export default {
|
||||
components:{Loading1,Loading2,Loading3,Loading4,Loading5},
|
||||
name: 'qiun-loading',
|
||||
props: {
|
||||
loadingType: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
422
uni_modules/qiun-data-charts/js_sdk/u-charts/config-echarts.js
Normal file
422
uni_modules/qiun-data-charts/js_sdk/u-charts/config-echarts.js
Normal file
@@ -0,0 +1,422 @@
|
||||
/*
|
||||
* uCharts®
|
||||
* 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
|
||||
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
|
||||
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
|
||||
* 复制使用请保留本段注释，感谢支持开源！
|
||||
*
|
||||
* uCharts®官方网站
|
||||
* https://www.uCharts.cn
|
||||
*
|
||||
* 开源地址:
|
||||
* https://gitee.com/uCharts/uCharts
|
||||
*
|
||||
* uni-app插件市场地址：
|
||||
* http://ext.dcloud.net.cn/plugin?id=271
|
||||
*
|
||||
*/
|
||||
|
||||
// 通用配置项
|
||||
|
||||
// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
|
||||
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
|
||||
|
||||
const cfe = {
|
||||
//demotype为自定义图表类型
|
||||
"type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge","candle","demotype"],
|
||||
//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型例如最后的"demotype"
|
||||
"categories": ["line", "column", "area", "radar", "gauge", "candle","demotype"],
|
||||
//instance为实例变量承载属性，option为eopts承载属性，不要删除
|
||||
"instance": {},
|
||||
"option": {},
|
||||
//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
|
||||
"formatter":{
|
||||
"tooltipDemo1":function(res){
|
||||
let result = ''
|
||||
for (let i in res) {
|
||||
if (i == 0) {
|
||||
result += res[i].axisValueLabel + '年销售额'
|
||||
}
|
||||
let value = '--'
|
||||
if (res[i].data !== null) {
|
||||
value = res[i].data
|
||||
}
|
||||
// #ifdef H5
|
||||
result += '\n' + res[i].seriesName + '：' + value + ' 万元'
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
result += '<br/>' + res[i].marker + res[i].seriesName + '：' + value + ' 万元'
|
||||
// #endif
|
||||
}
|
||||
return result;
|
||||
},
|
||||
legendFormat:function(name){
|
||||
return "自定义图例+"+name;
|
||||
},
|
||||
yAxisFormatDemo:function (value, index) {
|
||||
return value + '元';
|
||||
},
|
||||
seriesFormatDemo:function(res){
|
||||
return res.name + '年' + res.value + '元';
|
||||
}
|
||||
},
|
||||
//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在eopts参数，会将demotype与eopts中option合并后渲染图表。
|
||||
"demotype":{
|
||||
"color": color,
|
||||
//在这里填写echarts的option即可
|
||||
|
||||
},
|
||||
//下面是自定义配置，请添加项目所需的通用配置
|
||||
"column": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'axis'
|
||||
},
|
||||
"grid": {
|
||||
"top": 30,
|
||||
"bottom": 50,
|
||||
"right": 15,
|
||||
"left": 40
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"toolbox": {
|
||||
"show": false,
|
||||
},
|
||||
"xAxis": {
|
||||
"type": 'category',
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
"boundaryGap": true,
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {
|
||||
"type": 'value',
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'bar',
|
||||
"data": [],
|
||||
"barwidth": 20,
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"line": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'axis'
|
||||
},
|
||||
"grid": {
|
||||
"top": 30,
|
||||
"bottom": 50,
|
||||
"right": 15,
|
||||
"left": 40
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"toolbox": {
|
||||
"show": false,
|
||||
},
|
||||
"xAxis": {
|
||||
"type": 'category',
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
"boundaryGap": true,
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {
|
||||
"type": 'value',
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'line',
|
||||
"data": [],
|
||||
"barwidth": 20,
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"area": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'axis'
|
||||
},
|
||||
"grid": {
|
||||
"top": 30,
|
||||
"bottom": 50,
|
||||
"right": 15,
|
||||
"left": 40
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"toolbox": {
|
||||
"show": false,
|
||||
},
|
||||
"xAxis": {
|
||||
"type": 'category',
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
"boundaryGap": true,
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {
|
||||
"type": 'value',
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'line',
|
||||
"data": [],
|
||||
"areaStyle": {},
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"pie": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item'
|
||||
},
|
||||
"grid": {
|
||||
"top": 40,
|
||||
"bottom": 30,
|
||||
"right": 15,
|
||||
"left": 15
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'pie',
|
||||
"data": [],
|
||||
"radius": '50%',
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"ring": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item'
|
||||
},
|
||||
"grid": {
|
||||
"top": 40,
|
||||
"bottom": 30,
|
||||
"right": 15,
|
||||
"left": 15
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'pie',
|
||||
"data": [],
|
||||
"radius": ['40%', '70%'],
|
||||
"avoidLabelOverlap": false,
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
"labelLine": {
|
||||
"show": true
|
||||
},
|
||||
},
|
||||
},
|
||||
"rose": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item'
|
||||
},
|
||||
"legend": {
|
||||
"top": 'bottom'
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'pie',
|
||||
"data": [],
|
||||
"radius": "55%",
|
||||
"center": ['50%', '50%'],
|
||||
"roseType": 'area',
|
||||
},
|
||||
},
|
||||
"funnel": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item',
|
||||
"formatter": "{b} : {c}%"
|
||||
},
|
||||
"legend": {
|
||||
"top": 'bottom'
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'funnel',
|
||||
"left": '10%',
|
||||
"top": 60,
|
||||
"bottom": 60,
|
||||
"width": '80%',
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"minSize": '0%',
|
||||
"maxSize": '100%',
|
||||
"sort": 'descending',
|
||||
"gap": 2,
|
||||
"label": {
|
||||
"show": true,
|
||||
"position": 'inside'
|
||||
},
|
||||
"labelLine": {
|
||||
"length": 10,
|
||||
"lineStyle": {
|
||||
"width": 1,
|
||||
"type": 'solid'
|
||||
}
|
||||
},
|
||||
"itemStyle": {
|
||||
"bordercolor": '#fff',
|
||||
"borderwidth": 1
|
||||
},
|
||||
"emphasis": {
|
||||
"label": {
|
||||
"fontSize": 20
|
||||
}
|
||||
},
|
||||
"data": [],
|
||||
},
|
||||
},
|
||||
"gauge": {
|
||||
"color": color,
|
||||
"tooltip": {
|
||||
"formatter": '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '业务指标',
|
||||
"type": 'gauge',
|
||||
"detail": {"formatter": '{value}%'},
|
||||
"data": [{"value": 50, "name": '完成率'}]
|
||||
},
|
||||
},
|
||||
"candle": {
|
||||
"xAxis": {
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {},
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"dataZoom": [{
|
||||
"type": 'inside',
|
||||
"xAxisIndex": [0, 1],
|
||||
"start": 10,
|
||||
"end": 100
|
||||
},
|
||||
{
|
||||
"show": true,
|
||||
"xAxisIndex": [0, 1],
|
||||
"type": 'slider',
|
||||
"bottom": 10,
|
||||
"start": 10,
|
||||
"end": 100
|
||||
}
|
||||
],
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'k',
|
||||
"data": [],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default cfe;
|
||||
606
uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js
Normal file
606
uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js
Normal file
@@ -0,0 +1,606 @@
|
||||
/*
|
||||
* uCharts®
|
||||
* 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
|
||||
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
|
||||
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
|
||||
* 复制使用请保留本段注释，感谢支持开源！
|
||||
*
|
||||
* uCharts®官方网站
|
||||
* https://www.uCharts.cn
|
||||
*
|
||||
* 开源地址:
|
||||
* https://gitee.com/uCharts/uCharts
|
||||
*
|
||||
* uni-app插件市场地址：
|
||||
* http://ext.dcloud.net.cn/plugin?id=271
|
||||
*
|
||||
*/
|
||||
|
||||
// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
|
||||
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
|
||||
|
||||
//事件转换函数，主要用作格式化x轴为时间轴，根据需求自行修改
|
||||
const formatDateTime = (timeStamp, returnType)=>{
|
||||
var date = new Date();
|
||||
date.setTime(timeStamp * 1000);
|
||||
var y = date.getFullYear();
|
||||
var m = date.getMonth() + 1;
|
||||
m = m < 10 ? ('0' + m) : m;
|
||||
var d = date.getDate();
|
||||
d = d < 10 ? ('0' + d) : d;
|
||||
var h = date.getHours();
|
||||
h = h < 10 ? ('0' + h) : h;
|
||||
var minute = date.getMinutes();
|
||||
var second = date.getSeconds();
|
||||
minute = minute < 10 ? ('0' + minute) : minute;
|
||||
second = second < 10 ? ('0' + second) : second;
|
||||
if(returnType == 'full'){return y + '-' + m + '-' + d + ' '+ h +':' + minute + ':' + second;}
|
||||
if(returnType == 'y-m-d'){return y + '-' + m + '-' + d;}
|
||||
if(returnType == 'h:m'){return h +':' + minute;}
|
||||
if(returnType == 'h:m:s'){return h +':' + minute +':' + second;}
|
||||
return [y, m, d, h, minute, second];
|
||||
}
|
||||
|
||||
const cfu = {
|
||||
//demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可
|
||||
"type":["pie","ring","rose","word","funnel","map","arcbar","line","column","mount","bar","area","radar","gauge","candle","mix","tline","tarea","scatter","bubble","demotype"],
|
||||
"range":["饼状图","圆环图","玫瑰图","词云图","漏斗图","地图","圆弧进度条","折线图","柱状图","山峰图","条状图","区域图","雷达图","仪表盘","K线图","混合图","时间轴折线","时间轴区域","散点图","气泡图","自定义类型"],
|
||||
//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
|
||||
//自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
|
||||
"categories":["line","column","mount","bar","area","radar","gauge","candle","mix","demotype"],
|
||||
//instance为实例变量承载属性，不要删除
|
||||
"instance":{},
|
||||
//option为opts及eopts承载属性，不要删除
|
||||
"option":{},
|
||||
//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
|
||||
"formatter":{
|
||||
"yAxisDemo1":function(val, index, opts){return val+'元'},
|
||||
"yAxisDemo2":function(val, index, opts){return val.toFixed(2)},
|
||||
"xAxisDemo1":function(val, index, opts){return val+'年';},
|
||||
"xAxisDemo2":function(val, index, opts){return formatDateTime(val,'h:m')},
|
||||
"seriesDemo1":function(val, index, series, opts){return val+'元'},
|
||||
"tooltipDemo1":function(item, category, index, opts){
|
||||
if(index==0){
|
||||
return '随便用'+item.data+'年'
|
||||
}else{
|
||||
return '其他我没改'+item.data+'天'
|
||||
}
|
||||
},
|
||||
"pieDemo":function(val, index, series, opts){
|
||||
if(index !== undefined){
|
||||
return series[index].name+'：'+series[index].data+'元'
|
||||
}
|
||||
},
|
||||
},
|
||||
//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
|
||||
"demotype":{
|
||||
//我这里把曲线图当做了自定义图表类型，您可以根据需要随意指定类型或配置
|
||||
"type": "line",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"line": {
|
||||
"type": "curve",
|
||||
"width": 2
|
||||
},
|
||||
}
|
||||
},
|
||||
//下面是自定义配置，请添加项目所需的通用配置
|
||||
"pie":{
|
||||
"type": "pie",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"extra": {
|
||||
"pie": {
|
||||
"activeOpacity": 0.5,
|
||||
"activeRadius": 10,
|
||||
"offsetAngle": 0,
|
||||
"labelWidth": 15,
|
||||
"border": true,
|
||||
"borderWidth": 3,
|
||||
"borderColor": "#FFFFFF"
|
||||
},
|
||||
}
|
||||
},
|
||||
"ring":{
|
||||
"type": "ring",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"rotate": false,
|
||||
"dataLabel": true,
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "right",
|
||||
"lineHeight": 25,
|
||||
},
|
||||
"title": {
|
||||
"name": "收益率",
|
||||
"fontSize": 15,
|
||||
"color": "#666666"
|
||||
},
|
||||
"subtitle": {
|
||||
"name": "70%",
|
||||
"fontSize": 25,
|
||||
"color": "#7cb5ec"
|
||||
},
|
||||
"extra": {
|
||||
"ring": {
|
||||
"ringWidth":30,
|
||||
"activeOpacity": 0.5,
|
||||
"activeRadius": 10,
|
||||
"offsetAngle": 0,
|
||||
"labelWidth": 15,
|
||||
"border": true,
|
||||
"borderWidth": 3,
|
||||
"borderColor": "#FFFFFF"
|
||||
},
|
||||
},
|
||||
},
|
||||
"rose":{
|
||||
"type": "rose",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "left",
|
||||
"lineHeight": 25,
|
||||
},
|
||||
"extra": {
|
||||
"rose": {
|
||||
"type": "area",
|
||||
"minRadius": 50,
|
||||
"activeOpacity": 0.5,
|
||||
"activeRadius": 10,
|
||||
"offsetAngle": 0,
|
||||
"labelWidth": 15,
|
||||
"border": false,
|
||||
"borderWidth": 2,
|
||||
"borderColor": "#FFFFFF"
|
||||
},
|
||||
}
|
||||
},
|
||||
"word":{
|
||||
"type": "word",
|
||||
"color": color,
|
||||
"extra": {
|
||||
"word": {
|
||||
"type": "normal",
|
||||
"autoColors": false
|
||||
}
|
||||
}
|
||||
},
|
||||
"funnel":{
|
||||
"type": "funnel",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"extra": {
|
||||
"funnel": {
|
||||
"activeOpacity": 0.3,
|
||||
"activeWidth": 10,
|
||||
"border": true,
|
||||
"borderWidth": 2,
|
||||
"borderColor": "#FFFFFF",
|
||||
"fillOpacity": 1,
|
||||
"labelAlign": "right"
|
||||
},
|
||||
}
|
||||
},
|
||||
"map":{
|
||||
"type": "map",
|
||||
"color": color,
|
||||
"padding": [0,0,0,0],
|
||||
"dataLabel": true,
|
||||
"extra": {
|
||||
"map": {
|
||||
"border": true,
|
||||
"borderWidth": 1,
|
||||
"borderColor": "#666666",
|
||||
"fillOpacity": 0.6,
|
||||
"activeBorderColor": "#F04864",
|
||||
"activeFillColor": "#FACC14",
|
||||
"activeFillOpacity": 1
|
||||
},
|
||||
}
|
||||
},
|
||||
"arcbar":{
|
||||
"type": "arcbar",
|
||||
"color": color,
|
||||
"title": {
|
||||
"name": "百分比",
|
||||
"fontSize": 25,
|
||||
"color": "#00FF00"
|
||||
},
|
||||
"subtitle": {
|
||||
"name": "默认标题",
|
||||
"fontSize": 15,
|
||||
"color": "#666666"
|
||||
},
|
||||
"extra": {
|
||||
"arcbar": {
|
||||
"type": "default",
|
||||
"width": 12,
|
||||
"backgroundColor": "#E9E9E9",
|
||||
"startAngle": 0.75,
|
||||
"endAngle": 0.25,
|
||||
"gap": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"line":{
|
||||
"type": "line",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"line": {
|
||||
"type": "straight",
|
||||
"width": 2,
|
||||
"activeType": "hollow"
|
||||
},
|
||||
}
|
||||
},
|
||||
"tline":{
|
||||
"type": "line",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": false,
|
||||
"boundaryGap":"justify",
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
"data":[
|
||||
{
|
||||
"min":0,
|
||||
"max":80
|
||||
}
|
||||
]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"line": {
|
||||
"type": "curve",
|
||||
"width": 2,
|
||||
"activeType": "hollow"
|
||||
},
|
||||
}
|
||||
},
|
||||
"tarea":{
|
||||
"type": "area",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
"boundaryGap":"justify",
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
"data":[
|
||||
{
|
||||
"min":0,
|
||||
"max":80
|
||||
}
|
||||
]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"area": {
|
||||
"type": "curve",
|
||||
"opacity": 0.2,
|
||||
"addLine": true,
|
||||
"width": 2,
|
||||
"gradient": true,
|
||||
"activeType": "hollow"
|
||||
},
|
||||
}
|
||||
},
|
||||
"column":{
|
||||
"type": "column",
|
||||
"color": color,
|
||||
"padding": [15,15,0,5],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"data":[{"min":0}]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"column": {
|
||||
"type": "group",
|
||||
"width": 30,
|
||||
"activeBgColor": "#000000",
|
||||
"activeBgOpacity": 0.08
|
||||
},
|
||||
}
|
||||
},
|
||||
"mount":{
|
||||
"type": "mount",
|
||||
"color": color,
|
||||
"padding": [15,15,0,5],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"data":[{"min":0}]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"mount": {
|
||||
"type": "mount",
|
||||
"widthRatio": 1.5,
|
||||
},
|
||||
}
|
||||
},
|
||||
"bar":{
|
||||
"type": "bar",
|
||||
"color": color,
|
||||
"padding": [15,30,0,5],
|
||||
"xAxis": {
|
||||
"boundaryGap":"justify",
|
||||
"disableGrid":false,
|
||||
"min":0,
|
||||
"axisLine":false
|
||||
},
|
||||
"yAxis": {
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"bar": {
|
||||
"type": "group",
|
||||
"width": 30,
|
||||
"meterBorde": 1,
|
||||
"meterFillColor": "#FFFFFF",
|
||||
"activeBgColor": "#000000",
|
||||
"activeBgOpacity": 0.08
|
||||
},
|
||||
}
|
||||
},
|
||||
"area":{
|
||||
"type": "area",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"area": {
|
||||
"type": "straight",
|
||||
"opacity": 0.2,
|
||||
"addLine": true,
|
||||
"width": 2,
|
||||
"gradient": false,
|
||||
"activeType": "hollow"
|
||||
},
|
||||
}
|
||||
},
|
||||
"radar":{
|
||||
"type": "radar",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"dataLabel": false,
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "right",
|
||||
"lineHeight": 25,
|
||||
},
|
||||
"extra": {
|
||||
"radar": {
|
||||
"gridType": "radar",
|
||||
"gridColor": "#CCCCCC",
|
||||
"gridCount": 3,
|
||||
"opacity": 0.2,
|
||||
"max": 200,
|
||||
"labelShow": true
|
||||
},
|
||||
}
|
||||
},
|
||||
"gauge":{
|
||||
"type": "gauge",
|
||||
"color": color,
|
||||
"title": {
|
||||
"name": "66Km/H",
|
||||
"fontSize": 25,
|
||||
"color": "#2fc25b",
|
||||
"offsetY": 50
|
||||
},
|
||||
"subtitle": {
|
||||
"name": "实时速度",
|
||||
"fontSize": 15,
|
||||
"color": "#1890ff",
|
||||
"offsetY": -50
|
||||
},
|
||||
"extra": {
|
||||
"gauge": {
|
||||
"type": "default",
|
||||
"width": 30,
|
||||
"labelColor": "#666666",
|
||||
"startAngle": 0.75,
|
||||
"endAngle": 0.25,
|
||||
"startNumber": 0,
|
||||
"endNumber": 100,
|
||||
"labelFormat": "",
|
||||
"splitLine": {
|
||||
"fixRadius": 0,
|
||||
"splitNumber": 10,
|
||||
"width": 30,
|
||||
"color": "#FFFFFF",
|
||||
"childNumber": 5,
|
||||
"childWidth": 12
|
||||
},
|
||||
"pointer": {
|
||||
"width": 24,
|
||||
"color": "auto"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"candle":{
|
||||
"type": "candle",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"enableScroll": true,
|
||||
"enableMarkLine": true,
|
||||
"dataLabel": false,
|
||||
"xAxis": {
|
||||
"labelCount": 4,
|
||||
"itemCount": 40,
|
||||
"disableGrid": true,
|
||||
"gridColor": "#CCCCCC",
|
||||
"gridType": "solid",
|
||||
"dashLength": 4,
|
||||
"scrollShow": true,
|
||||
"scrollAlign": "left",
|
||||
"scrollColor": "#A6A6A6",
|
||||
"scrollBackgroundColor": "#EFEBEF"
|
||||
},
|
||||
"yAxis": {
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"candle": {
|
||||
"color": {
|
||||
"upLine": "#f04864",
|
||||
"upFill": "#f04864",
|
||||
"downLine": "#2fc25b",
|
||||
"downFill": "#2fc25b"
|
||||
},
|
||||
"average": {
|
||||
"show": true,
|
||||
"name": ["MA5","MA10","MA30"],
|
||||
"day": [5,10,20],
|
||||
"color": ["#1890ff","#2fc25b","#facc14"]
|
||||
}
|
||||
},
|
||||
"markLine": {
|
||||
"type": "dash",
|
||||
"dashLength": 5,
|
||||
"data": [
|
||||
{
|
||||
"value": 2150,
|
||||
"lineColor": "#f04864",
|
||||
"showLabel": true
|
||||
},
|
||||
{
|
||||
"value": 2350,
|
||||
"lineColor": "#f04864",
|
||||
"showLabel": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"mix":{
|
||||
"type": "mix",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"disabled": false,
|
||||
"disableGrid": false,
|
||||
"splitNumber": 5,
|
||||
"gridType": "dash",
|
||||
"dashLength": 4,
|
||||
"gridColor": "#CCCCCC",
|
||||
"padding": 10,
|
||||
"showTitle": true,
|
||||
"data": []
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"mix": {
|
||||
"column": {
|
||||
"width": 20
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
"scatter":{
|
||||
"type": "scatter",
|
||||
"color":color,
|
||||
"padding":[15,15,0,15],
|
||||
"dataLabel":false,
|
||||
"xAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
"splitNumber":5,
|
||||
"boundaryGap":"justify",
|
||||
"min":0
|
||||
},
|
||||
"yAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"scatter": {
|
||||
},
|
||||
}
|
||||
},
|
||||
"bubble":{
|
||||
"type": "bubble",
|
||||
"color":color,
|
||||
"padding":[15,15,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
"splitNumber":5,
|
||||
"boundaryGap":"justify",
|
||||
"min":0,
|
||||
"max":250
|
||||
},
|
||||
"yAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
"data":[{
|
||||
"min":0,
|
||||
"max":150
|
||||
}]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"bubble": {
|
||||
"border":2,
|
||||
"opacity": 0.5,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default cfu;
|
||||
5
uni_modules/qiun-data-charts/js_sdk/u-charts/readme.md
Normal file
5
uni_modules/qiun-data-charts/js_sdk/u-charts/readme.md
Normal file
@@ -0,0 +1,5 @@
|
||||
# uCharts JSSDK说明
|
||||
1、如不使用uCharts组件，可直接引用u-charts.js，打包编译后会`自动压缩`，压缩后体积约为`120kb`。
|
||||
2、如果120kb的体积仍需压缩，请手到uCharts官网通过在线定制选择您需要的图表。
|
||||
3、config-ucharts.js为uCharts组件的用户配置文件，升级前请`自行备份config-ucharts.js`文件，以免被强制覆盖。
|
||||
4、config-echarts.js为ECharts组件的用户配置文件，升级前请`自行备份config-echarts.js`文件，以免被强制覆盖。
|
||||
7706
uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js
Normal file
7706
uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js
Normal file
File diff suppressed because it is too large
Load Diff
18
uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.min.js
vendored
Normal file
18
uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
201
uni_modules/qiun-data-charts/license.md
Normal file
201
uni_modules/qiun-data-charts/license.md
Normal file
@@ -0,0 +1,201 @@
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [yyyy] [name of copyright owner]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
80
uni_modules/qiun-data-charts/package.json
Normal file
80
uni_modules/qiun-data-charts/package.json
Normal file
@@ -0,0 +1,80 @@
|
||||
{
|
||||
"id": "qiun-data-charts",
|
||||
"displayName": "秋云 ucharts echarts 高性能跨全端图表组件",
|
||||
"version": "2.5.0-20230101",
|
||||
"description": "uCharts 新增正负柱状图！支持H5及APP用 ucharts echarts 渲染图表，uniapp可视化首选组件",
|
||||
"keywords": [
|
||||
"ucharts",
|
||||
"echarts",
|
||||
"f2",
|
||||
"图表",
|
||||
"可视化"
|
||||
],
|
||||
"repository": "https://gitee.com/uCharts/uCharts",
|
||||
"engines": {
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": "474119"
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/~qiun",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
84
uni_modules/qiun-data-charts/readme.md
Normal file
84
uni_modules/qiun-data-charts/readme.md
Normal file
@@ -0,0 +1,84 @@
|
||||
|
||||
|
||||
|
||||
[](https://gitee.com/uCharts/uCharts/stargazers)
|
||||
[](https://gitee.com/uCharts/uCharts/members)
|
||||
[](https://www.apache.org/licenses/LICENSE-2.0.html)
|
||||
[](https://www.npmjs.com/~qiun)
|
||||
|
||||
|
||||
## uCharts简介
|
||||
|
||||
`uCharts`是一款基于`canvas API`开发的适用于所有前端应用的图表库，开发者编写一套代码，可运行到 Web、iOS、Android（基于 uni-app / taro ）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等更多支持 canvas API 的平台。
|
||||
|
||||
## 官方网站
|
||||
|
||||
## [https://www.ucharts.cn](https://www.ucharts.cn)
|
||||
|
||||
## 快速体验
|
||||
|
||||
一套代码编到多个平台，依次扫描二维码，亲自体验uCharts图表跨平台效果！其他平台请自行编译。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 致开发者
|
||||
|
||||
感谢各位开发者`五年`来对秋云及uCharts的支持，uCharts的进步离不开各位开发者的鼓励与贡献。为更好的帮助各位开发者使用图表工具，我们推出了新版官网，增加了在线定制、问答社区、在线配置等一些增值服务，为确保您能更好的应用图表组件，建议您先`仔细阅读官网指南`以及`常见问题`，而不是下载下来`直接使用`。如仍然不能解决，请到`官网社区`或开通会员后加入`专属VIP会员群`提问将会很快得到回答。
|
||||
|
||||
## 视频教程
|
||||
|
||||
## [uCharts新手入门教程](https://www.bilibili.com/video/BV1qA411Q7se/?share_source=copy_web&vd_source=42a1242f9aaade6427736af69eb2e1d9)
|
||||
|
||||
|
||||
## 社群支持
|
||||
|
||||
uCharts官方拥有5个2000人的QQ群及专属VIP会员群支持，庞大的用户量证明我们一直在努力，请各位放心使用！uCharts的开源图表组件的开发，团队付出了大量的时间与精力，经过四来的考验，不会有比较明显的bug，请各位放心使用。如果您有更好的想法，可以在`码云提交Pull Requests`以帮助更多开发者完成需求，再次感谢各位对uCharts的鼓励与支持！
|
||||
|
||||
#### 官方交流群
|
||||
- 交流群1：371774600（已满）
|
||||
- 交流群2：619841586（已满）
|
||||
- 交流群3：955340127（已满）
|
||||
- 交流群4：641669795（已满）
|
||||
- 交流群5：236294809（只能扫码加入）
|
||||
|
||||
|
||||
|
||||
- 口令`uniapp`
|
||||
|
||||
#### 专属VIP会员群
|
||||
- 开通会员后详见【账号详情】页面中顶部的滚动通知
|
||||
- 口令`您的用户ID`
|
||||
|
||||
## 版权信息
|
||||
|
||||
uCharts始终坚持开源，遵循 [Apache Licence 2.0](https://www.apache.org/licenses/LICENSE-2.0.html) 开源协议，意味着您无需支付任何费用，即可将uCharts应用到您的产品中。
|
||||
|
||||
注意：这并不意味着您可以将uCharts应用到非法的领域，比如涉及赌博，暴力等方面。如因此产生纠纷或法律问题，uCharts相关方及秋云科技不承担任何责任。
|
||||
|
||||
## 合作伙伴
|
||||
|
||||
[](https://www.diygw.com/)
|
||||
[](https://gitee.com/howcode/has-chat)
|
||||
[](https://www.uviewui.com/)
|
||||
[](https://ext.dcloud.net.cn/plugin?id=7088)
|
||||
[](https://ext.dcloud.net.cn/publisher?id=202)
|
||||
[](https://www.firstui.cn/)
|
||||
[](https://ext.dcloud.net.cn/plugin?id=5169)
|
||||
[](https://www.graceui.com/)
|
||||
|
||||
|
||||
## 更新记录
|
||||
|
||||
详见官网指南中说明，[点击此处查看](https://www.ucharts.cn/v2/#/guide/index?id=100)
|
||||
|
||||
|
||||
## 相关链接
|
||||
- [uCharts官网](https://www.ucharts.cn)
|
||||
- [DCloud插件市场地址](https://ext.dcloud.net.cn/plugin?id=271)
|
||||
- [uCharts码云开源托管地址](https://gitee.com/uCharts/uCharts) [](https://gitee.com/uCharts/uCharts/stargazers)
|
||||
- [uCharts npm开源地址](https://www.ucharts.cn)
|
||||
- [ECharts官网](https://echarts.apache.org/zh/index.html)
|
||||
- [ECharts配置手册](https://echarts.apache.org/zh/option.html)
|
||||
- [图表组件在项目中的应用 ReportPlus数据报表](https://www.ucharts.cn/v2/#/layout/info?id=1)
|
||||
23
uni_modules/qiun-data-charts/static/app-plus/echarts.min.js
vendored
Normal file
23
uni_modules/qiun-data-charts/static/app-plus/echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
23
uni_modules/qiun-data-charts/static/h5/echarts.min.js
vendored
Normal file
23
uni_modules/qiun-data-charts/static/h5/echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
168
uni_modules/uni-datetime-picker/changelog.md
Normal file
168
uni_modules/uni-datetime-picker/changelog.md
Normal file
@@ -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
Load Diff
@@ -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
|
||||
}
|
||||
88
uni_modules/uni-datetime-picker/package.json
Normal file
88
uni_modules/uni-datetime-picker/package.json
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
21
uni_modules/uni-datetime-picker/readme.md
Normal file
21
uni_modules/uni-datetime-picker/readme.md
Normal file
@@ -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
|
||||
42
uni_modules/uni-icons/changelog.md
Normal file
42
uni_modules/uni-icons/changelog.md
Normal file
@@ -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目录规范
|
||||
91
uni_modules/uni-icons/components/uni-icons/uni-icons.uvue
Normal file
91
uni_modules/uni-icons/components/uni-icons/uni-icons.uvue
Normal file
@@ -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>
|
||||
110
uni_modules/uni-icons/components/uni-icons/uni-icons.vue
Normal file
110
uni_modules/uni-icons/components/uni-icons/uni-icons.vue
Normal file
@@ -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>
|
||||
664
uni_modules/uni-icons/components/uni-icons/uniicons.css
Normal file
664
uni_modules/uni-icons/components/uni-icons/uniicons.css
Normal file
@@ -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";
|
||||
}
|
||||
BIN
uni_modules/uni-icons/components/uni-icons/uniicons.ttf
Normal file
BIN
uni_modules/uni-icons/components/uni-icons/uniicons.ttf
Normal file
Binary file not shown.
664
uni_modules/uni-icons/components/uni-icons/uniicons_file.ts
Normal file
664
uni_modules/uni-icons/components/uni-icons/uniicons_file.ts
Normal file
@@ -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)
|
||||
649
uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js
Normal file
649
uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js
Normal file
@@ -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)
|
||||
89
uni_modules/uni-icons/package.json
Normal file
89
uni_modules/uni-icons/package.json
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
uni_modules/uni-icons/readme.md
Normal file
8
uni_modules/uni-icons/readme.md
Normal file
@@ -0,0 +1,8 @@
|
||||
## Icons 图标
|
||||
> **组件名：uni-icons**
|
||||
> 代码块： `uIcons`
|
||||
|
||||
用于展示 icons 图标 。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
8
uni_modules/uni-scss/changelog.md
Normal file
8
uni_modules/uni-scss/changelog.md
Normal file
@@ -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
|
||||
1
uni_modules/uni-scss/index.scss
Normal file
1
uni_modules/uni-scss/index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import './styles/index.scss';
|
||||
82
uni_modules/uni-scss/package.json
Normal file
82
uni_modules/uni-scss/package.json
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
4
uni_modules/uni-scss/readme.md
Normal file
4
uni_modules/uni-scss/readme.md
Normal file
@@ -0,0 +1,4 @@
|
||||
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
7
uni_modules/uni-scss/styles/index.scss
Normal file
7
uni_modules/uni-scss/styles/index.scss
Normal file
@@ -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';
|
||||
3
uni_modules/uni-scss/styles/setting/_border.scss
Normal file
3
uni_modules/uni-scss/styles/setting/_border.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.uni-border {
|
||||
border: 1px $uni-border-1 solid;
|
||||
}
|
||||
66
uni_modules/uni-scss/styles/setting/_color.scss
Normal file
66
uni_modules/uni-scss/styles/setting/_color.scss
Normal file
@@ -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;
|
||||
}
|
||||
55
uni_modules/uni-scss/styles/setting/_radius.scss
Normal file
55
uni_modules/uni-scss/styles/setting/_radius.scss
Normal file
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
56
uni_modules/uni-scss/styles/setting/_space.scss
Normal file
56
uni_modules/uni-scss/styles/setting/_space.scss
Normal file
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
167
uni_modules/uni-scss/styles/setting/_styles.scss
Normal file
167
uni_modules/uni-scss/styles/setting/_styles.scss
Normal file
@@ -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 */
|
||||
24
uni_modules/uni-scss/styles/setting/_text.scss
Normal file
24
uni_modules/uni-scss/styles/setting/_text.scss
Normal file
@@ -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 */
|
||||
}
|
||||
146
uni_modules/uni-scss/styles/setting/_variables.scss
Normal file
146
uni_modules/uni-scss/styles/setting/_variables.scss
Normal file
@@ -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;
|
||||
19
uni_modules/uni-scss/styles/tools/functions.scss
Normal file
19
uni_modules/uni-scss/styles/tools/functions.scss
Normal file
@@ -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;
|
||||
};
|
||||
31
uni_modules/uni-scss/theme.scss
Normal file
31
uni_modules/uni-scss/theme.scss
Normal file
@@ -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);
|
||||
62
uni_modules/uni-scss/variables.scss
Normal file
62
uni_modules/uni-scss/variables.scss
Normal file
@@ -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);
|
||||
21
uni_modules/uview-ui/LICENSE
Normal file
21
uni_modules/uview-ui/LICENSE
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2023 www.uviewui.com
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
66
uni_modules/uview-ui/README.md
Normal file
66
uni_modules/uview-ui/README.md
Normal file
@@ -0,0 +1,66 @@
|
||||
<p align="center">
|
||||
<img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;">
|
||||
</p>
|
||||
<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView 2.0</h3>
|
||||
<h3 align="center">多平台快速开发的UI框架</h3>
|
||||
|
||||
[](https://github.com/umicro/uView2.0)
|
||||
[](https://github.com/umicro/uView2.0)
|
||||
[](https://github.com/umicro/uView2.0/issues)
|
||||
[](https://uviewui.com)
|
||||
[](https://gitee.com/umicro/uView2.0/releases)
|
||||
[](https://en.wikipedia.org/wiki/MIT_License)
|
||||
|
||||
## 说明
|
||||
|
||||
uView UI，是[uni-app](https://uniapp.dcloud.io/)全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
|
||||
|
||||
## [官方文档：https://uviewui.com](https://uviewui.com)
|
||||
|
||||
|
||||
## 预览
|
||||
|
||||
您可以通过**微信**扫码，查看最佳的演示效果。
|
||||
<br>
|
||||
<br>
|
||||
<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" >
|
||||
|
||||
|
||||
## 链接
|
||||
|
||||
- [官方文档](https://www.uviewui.com/)
|
||||
- [更新日志](https://www.uviewui.com/components/changelog.html)
|
||||
- [升级指南](https://www.uviewui.com/components/changeGuide.html)
|
||||
- [关于我们](https://www.uviewui.com/cooperation/about.html)
|
||||
|
||||
## 交流反馈
|
||||
|
||||
欢迎加入我们的QQ群交流反馈：[点此跳转](https://www.uviewui.com/components/addQQGroup.html)
|
||||
|
||||
## 关于PR
|
||||
|
||||
> 我们非常乐意接受各位的优质PR，但在此之前我希望您了解uView2.0是一个需要兼容多个平台的（小程序、h5、ios app、android app）包括nvue页面、vue页面。
|
||||
> 所以希望在您修复bug并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢！
|
||||
|
||||
## 安装
|
||||
|
||||
#### **uni-app插件市场链接** —— [https://ext.dcloud.net.cn/plugin?id=1593](https://ext.dcloud.net.cn/plugin?id=1593)
|
||||
|
||||
请通过[官网安装文档](https://www.uviewui.com/components/install.html)了解更详细的内容
|
||||
|
||||
## 快速上手
|
||||
|
||||
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容
|
||||
|
||||
## 使用方法
|
||||
配置easycom规则后，自动按需引入，无需`import`组件，直接引用即可。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<u-button text="按钮"></u-button>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 版权信息
|
||||
uView遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将uView应用到您的产品中。
|
||||
|
||||
376
uni_modules/uview-ui/changelog.md
Normal file
376
uni_modules/uview-ui/changelog.md
Normal file
@@ -0,0 +1,376 @@
|
||||
## 2.0.38（2024-06-12）
|
||||
插件市场处理
|
||||
## 2.0.37（2024-03-17）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 修复表单校验`trigger`触发器参数无效问题
|
||||
2. 修复`u-input`组件的`password`属性在动态切换为`false`时失效的问题
|
||||
3. 添加微信小程序用户同意隐私协议事件回调
|
||||
4. 修复支付宝小程序picker样式问题
|
||||
5. `u-modal`添加`duration`字段控制动画过度时间
|
||||
6. 修复`picker` `lastIndex`异常导致的`column`异常问题
|
||||
7. `tabs`增加长按事件支持
|
||||
8. 修复`u-avatar` `square`属性在小程序`open-data`下无效问题
|
||||
9. 其他一些修复
|
||||
## 2.0.36（2023-03-27）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 重构`deepClone` & `deepMerge`方法
|
||||
2. 其他优化
|
||||
## 2.0.34（2022-09-24）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. `u-input`、`u-textarea`增加`ignoreCompositionEvent`属性
|
||||
2. 修复`route`方法调用可能报错的问题
|
||||
3. 修复`u-no-network`组件`z-index`无效的问题
|
||||
4. 修复`textarea`组件在h5上confirmType=""报错的问题
|
||||
5. `u-rate`适配`nvue`
|
||||
6. 优化验证手机号码的正则表达式(根据工信部发布的《电信网编号计划（2017年版）》进行修改。)
|
||||
7. `form-item`添加`labelPosition`属性
|
||||
8. `u-calendar`修复`maxDate`设置为当前日期，并且当前时间大于08：00时无法显示日期列表的问题 (#724)
|
||||
9. `u-radio`增加一个默认插槽用于自定义修改label内容 (#680)
|
||||
10. 修复`timeFormat`函数在safari重的兼容性问题 (#664)
|
||||
## 2.0.33（2022-06-17）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 修复`loadmore`组件`lineColor`类型错误问题
|
||||
2. 修复`u-parse`组件`imgtap`、`linktap`不生效问题
|
||||
## 2.0.32（2022-06-16）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
1. `u-loadmore`新增自定义颜色、虚/实线
|
||||
2. 修复`u-swiper-action`组件部分平台不能上下滑动的问题
|
||||
3. 修复`u-list`回弹问题
|
||||
4. 修复`notice-bar`组件动画在低端安卓机可能会抖动的问题
|
||||
5. `u-loading-page`添加控制图标大小的属性`iconSize`
|
||||
6. 修复`u-tooltip`组件`color`参数不生效的问题
|
||||
7. 修复`u--input`组件使用`blur`事件输出为`undefined`的bug
|
||||
8. `u-code-input`组件新增键盘弹起时，是否自动上推页面参数`adjustPosition`
|
||||
9. 修复`image`组件`load`事件无回调对象问题
|
||||
10. 修复`button`组件`loadingSize`设置无效问题
|
||||
10. 其他修复
|
||||
## 2.0.31（2022-04-19）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 修复`upload`在`vue`页面上传成功后没有成功标志的问题
|
||||
2. 解决演示项目中微信小程序模拟上传图片一直出于上传中问题
|
||||
3. 修复`u-code-input`组件在`nvue`页面编译到`app`平台上光标异常问题（`app`去除此功能）
|
||||
4. 修复`actionSheet`组件标题关闭按钮点击事件名称错误的问题
|
||||
5. 其他修复
|
||||
## 2.0.30（2022-04-04）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. `u-rate`增加`readonly`属性
|
||||
2. `tabs`滑块支持设置背景图片
|
||||
3. 修复`u-subsection` `mode`为`subsection`时，滑块样式不正确的问题
|
||||
4. `u-code-input`添加光标效果动画
|
||||
5. 修复`popup`的`open`事件不触发
|
||||
6. 修复`u-flex-column`无效的问题
|
||||
7. 修复`u-datetime-picker`索引在特定场合异常问题
|
||||
8. 修复`u-datetime-picker`最小时间字符串模板错误问题
|
||||
9. `u-swiper`添加`m3u8`验证
|
||||
10. `u-swiper`修改判断image和video逻辑
|
||||
11. 修复`swiper`无法使用本地图片问题，增加`type`参数
|
||||
12. 修复`u-row-notice`格式错误问题
|
||||
13. 修复`u-switch`组件当`unit`为`rpx`时,`nodeStyle`消失的问题
|
||||
14. 修复`datetime-picker`组件`showToolbar`与`visibleItemCount`属性无效的问题
|
||||
15. 修复`upload`组件条件编译位置判断错误，导致`previewImage`属性设置为`false`时，整个组件都会被隐藏的问题
|
||||
16. 修复`u-checkbox-group`设置`shape`属性无效的问题
|
||||
17. 修复`u-upload`的`capture`传入字符串的时候不生效的问题
|
||||
18. 修复`u-action-sheet`组件，关闭事件逻辑错误的问题
|
||||
19. 修复`u-list`触顶事件的触发错误的问题
|
||||
20. 修复`u-text`只有手机号可拨打的问题
|
||||
21. 修复`u-textarea`不能换行的问题
|
||||
22. 其他修复
|
||||
## 2.0.29（2022-03-13）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 修复`u--text`组件设置`decoration`属性未生效的问题
|
||||
2. 修复`u-datetime-picker`使用`formatter`后返回值不正确
|
||||
3. 修复`u-datetime-picker` `intercept` 可能为undefined
|
||||
4. 修复已设置单位 uni..config.unit = 'rpx'时，线型指示器 `transform` 的位置翻倍，导致指示器超出宽度
|
||||
5. 修复mixin中bem方法生成的类名在支付宝和字节小程序中失效
|
||||
6. 修复默认值传值为空的时候，打开`u-datetime-picker`报错，不能选中第一列时间的bug
|
||||
7. 修复`u-datetime-picker`使用`formatter`后返回值不正确
|
||||
8. 修复`u-image`组件`loading`无效果的问题
|
||||
9. 修复`config.unit`属性设为`rpx`时，导航栏占用高度不足导致塌陷的问题
|
||||
10. 修复`u-datetime-picker`组件`itemHeight`无效问题
|
||||
11. 其他修复
|
||||
## 2.0.28（2022-02-22）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. search组件新增searchIconSize属性
|
||||
2. 兼容Safari/Webkit中传入时间格式如2022-02-17 12:00:56
|
||||
3. 修复text value.js 判断日期出format错误问题
|
||||
4. priceFormat格式化金额出现精度错误
|
||||
5. priceFormat在部分情况下出现精度损失问题
|
||||
6. 优化表单rules提示
|
||||
7. 修复avatar组件src为空时，展示状态不对
|
||||
8. 其他修复
|
||||
## 2.0.27（2022-01-28）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1.样式修复
|
||||
## 2.0.26（2022-01-28）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1.样式修复
|
||||
## 2.0.25（2022-01-27）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 修复text组件mode=price时，可能会导致精度错误的问题
|
||||
2. 添加$u.setConfig()方法，可设置uView内置的config, props, zIndex, color属性，详见：[修改uView内置配置方案](https://uviewui.com/components/setting.html#%E9%BB%98%E8%AE%A4%E5%8D%95%E4%BD%8D%E9%85%8D%E7%BD%AE)
|
||||
3. 优化form组件在errorType=toast时，如果输入错误页面会有抖动的问题
|
||||
4. 修复$u.addUnit()对配置默认单位可能无效的问题
|
||||
## 2.0.24（2022-01-25）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 修复swiper在current指定非0时缩放有误
|
||||
2. 修复u-icon添加stop属性的时候报错
|
||||
3. 优化遗留的通过正则判断rpx单位的问题
|
||||
4. 优化Layout布局 vue使用gutter时，会超出固定区域
|
||||
5. 优化search组件高度单位问题（rpx -> px）
|
||||
6. 修复u-image slot 加载和错误的图片失去了高度
|
||||
7. 修复u-index-list中footer插槽与header插槽存在性判断错误
|
||||
8. 修复部分机型下u-popup关闭时会闪烁
|
||||
9. 修复u-image在nvue-app下失去宽高
|
||||
10. 修复u-popup运行报错
|
||||
11. 修复u-tooltip报错
|
||||
12. 修复box-sizing在app下的警告
|
||||
13. 修复u-navbar在小程序中报运行时错误
|
||||
14. 其他修复
|
||||
## 2.0.23（2022-01-24）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 修复image组件在hx3.3.9的nvue下可能会显示异常的问题
|
||||
2. 修复col组件gutter参数带rpx单位处理不正确的问题
|
||||
3. 修复text组件单行时无法显示省略号的问题
|
||||
4. navbar添加titleStyle参数
|
||||
5. 升级到hx3.3.9可消除nvue下控制台样式警告的问题
|
||||
## 2.0.22（2022-01-19）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. $u.page()方法优化，避免在特殊场景可能报错的问题
|
||||
2. picker组件添加immediateChange参数
|
||||
3. 新增$u.pages()方法
|
||||
## 2.0.21（2022-01-19）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 优化：form组件在用户设置rules的时候提示用户model必传
|
||||
2. 优化遗留的通过正则判断rpx单位的问题
|
||||
3. 修复微信小程序环境中tabbar组件开启safeAreaInsetBottom属性后，placeholder高度填充不正确
|
||||
4. 修复swiper在current指定非0时缩放有误
|
||||
5. 修复u-icon添加stop属性的时候报错
|
||||
6. 修复upload组件在accept=all的时候没有作用
|
||||
7. 修复在text组件mode为phone时call属性无效的问题
|
||||
8. 处理u-form clearValidate方法
|
||||
9. 其他修复
|
||||
## 2.0.20（2022-01-14）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 修复calendar默认会选择一个日期，如果直接点确定的话，无法取到值的问题
|
||||
2. 修复Slider缺少disabled props 还有注释
|
||||
3. 修复u-notice-bar点击事件无法拿到index索引值的问题
|
||||
4. 修复u-collapse-item在vue文件下，app端自定义插槽不生效的问题
|
||||
5. 优化头像为空时显示默认头像
|
||||
6. 修复图片地址赋值后判断加载状态为完成问题
|
||||
7. 修复日历滚动到默认日期月份区域
|
||||
8. search组件暴露点击左边icon事件
|
||||
9. 修复u-form clearValidate方法不生效
|
||||
10. upload h5端增加返回文件参数（文件的name参数）
|
||||
11. 处理upload选择文件后url为blob类型无法预览的问题
|
||||
12. u-code-input 修复输入框没有往左移出一半屏幕
|
||||
13. 修复Upload上传 disabled为true时，控制台报hoverClass类型错误
|
||||
14. 临时处理ios app下grid点击坍塌问题
|
||||
15. 其他修复
|
||||
## 2.0.19（2021-12-29）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 优化微信小程序包体积可在微信中预览，请升级HbuilderX3.3.4，同时在“运行->运行到小程序模拟器”中勾选“运行时是否压缩代码”
|
||||
2. 优化微信小程序setData性能，处理某些方法如$u.route()无法在模板中使用的问题
|
||||
3. navbar添加autoBack参数
|
||||
4. 允许avatar组件的事件冒泡
|
||||
5. 修复cell组件报错问题
|
||||
6. 其他修复
|
||||
## 2.0.18（2021-12-28）
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 修复app端编译报错问题
|
||||
2. 重新处理微信小程序端setData过大的性能问题
|
||||
3. 修复边框问题
|
||||
4. 修复最大最小月份不大于0则没有数据出现的问题
|
||||
5. 修复SwipeAction微信小程序端无法上下滑动问题
|
||||
6. 修复input的placeholder在小程序端默认显示为true问题
|
||||
7. 修复divider组件click事件无效问题
|
||||
8. 修复u-code-input maxlength 属性值为 String 类型时显示异常
|
||||
9. 修复当 grid只有 1到2时 在小程序端algin设置无效的问题
|
||||
10. 处理form-item的label为top时，取消错误提示的左边距
|
||||
11. 其他修复
|
||||
## 2.0.17（2021-12-26）
|
||||
## uView正在参与开源中国的“年度最佳项目”评选，之前投过票的现在也可以投票，恳请同学们投一票，[点此帮助uView](https://www.oschina.net/project/top_cn_2021/?id=583)
|
||||
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 解决HBuilderX3.3.3.20211225版本导致的样式问题
|
||||
2. calendar日历添加monthNum参数
|
||||
3. navbar添加center slot
|
||||
## 2.0.16（2021-12-25）
|
||||
## uView正在参与开源中国的“年度最佳项目”评选，之前投过票的现在也可以投票，恳请同学们投一票，[点此帮助uView](https://www.oschina.net/project/top_cn_2021/?id=583)
|
||||
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 解决微信小程序setData性能问题
|
||||
2. 修复count-down组件change事件不触发问题
|
||||
## 2.0.15（2021-12-21）
|
||||
## uView正在参与开源中国的“年度最佳项目”评选，之前投过票的现在也可以投票，恳请同学们投一票，[点此帮助uView](https://www.oschina.net/project/top_cn_2021/?id=583)
|
||||
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 修复Cell单元格titleWidth无效
|
||||
2. 修复cheakbox组件ischecked不更新
|
||||
3. 修复keyboard是否显示"."按键默认值问题
|
||||
4. 修复number-keyboard是否显示键盘的"."符号问题
|
||||
5. 修复Input输入框 readonly无效
|
||||
6. 修复u-avatar 导致打包app、H5时候报错问题
|
||||
7. 修复Upload上传deletable无效
|
||||
8. 修复upload当设置maxSize时无效的问题
|
||||
9. 修复tabs lineWidth传入带单位的字符串的时候偏移量计算错误问题
|
||||
10. 修复rate组件在有padding的view内，显示的星星位置和可触摸区域不匹配，无法正常选中星星
|
||||
## 2.0.13（2021-12-14）
|
||||
## [点击加群交流反馈：364463526](https://jq.qq.com/?_chanwv=1027&k=mCxS3TGY)
|
||||
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 修复配置默认单位为rpx可能会导致自定义导航栏高度异常的问题
|
||||
## 2.0.12（2021-12-14）
|
||||
## [点击加群交流反馈：364463526](https://jq.qq.com/?_chanwv=1027&k=mCxS3TGY)
|
||||
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 修复tabs组件在vue环境下划线消失的问题
|
||||
2. 修复upload组件在安卓小程序无法选择视频的问题
|
||||
3. 添加uni.$u.config.unit配置，用于配置参数默认单位，详见：[默认单位配置](https://www.uviewui.com/components/setting.html#%E9%BB%98%E8%AE%A4%E5%8D%95%E4%BD%8D%E9%85%8D%E7%BD%AE)
|
||||
4. 修复textarea组件在没绑定v-model时，字符统计不生效问题
|
||||
5. 修复nvue下控制是否出现滚动条失效问题
|
||||
## 2.0.11（2021-12-13）
|
||||
## [点击加群交流反馈：364463526](https://jq.qq.com/?_chanwv=1027&k=mCxS3TGY)
|
||||
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. text组件align参数无效的问题
|
||||
2. subsection组件添加keyName参数
|
||||
3. upload组件无法判断[Object file]类型的问题
|
||||
4. 处理notify层级过低问题
|
||||
5. codeInput组件添加disabledDot参数
|
||||
6. 处理actionSheet组件round参数无效的问题
|
||||
7. calendar组件添加round参数用于控制圆角值
|
||||
8. 处理swipeAction组件在vue环境下默认被打开的问题
|
||||
9. button组件的throttleTime节流参数无效的问题
|
||||
10. 解决u-notify手动关闭方法close()无效的问题
|
||||
11. input组件readonly不生效问题
|
||||
12. tag组件type参数为info不生效问题
|
||||
## 2.0.10（2021-12-08）
|
||||
## [点击加群交流反馈：364463526](https://jq.qq.com/?_chanwv=1027&k=mCxS3TGY)
|
||||
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 修复button sendMessagePath属性不生效
|
||||
2. 修复DatetimePicker选择器title无效
|
||||
3. 修复u-toast设置loading=true不生效
|
||||
4. 修复u-text金额模式传0报错
|
||||
5. 修复u-toast组件的icon属性配置不生效
|
||||
6. button的icon在特殊场景下的颜色优化
|
||||
7. IndexList优化，增加#
|
||||
## 2.0.9（2021-12-01）
|
||||
## [点击加群交流反馈：232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU)
|
||||
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 优化swiper的height支持100%值(仅vue有效)，修复嵌入视频时click事件无法触发的问题
|
||||
2. 优化tabs组件对list值为空的判断，或者动态变化list时重新计算相关尺寸的问题
|
||||
3. 优化datetime-picker组件逻辑，让其后续打开的默认值为上一次的选中值，需要通过v-model绑定值才有效
|
||||
4. 修复upload内嵌在其他组件中，选择图片可能不会换行的问题
|
||||
## 2.0.8（2021-12-01）
|
||||
## [点击加群交流反馈：232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU)
|
||||
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 修复toast的position参数无效问题
|
||||
2. 处理input在ios nvue上无法获得焦点的问题
|
||||
3. avatar-group组件添加extraValue参数，让剩余展示数量可手动控制
|
||||
4. tabs组件添加keyName参数用于配置从对象中读取的键名
|
||||
5. 处理text组件名字脱敏默认配置无效的问题
|
||||
6. 处理picker组件item文本太长换行问题
|
||||
## 2.0.7（2021-11-30）
|
||||
## [点击加群交流反馈：232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU)
|
||||
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 修复radio和checkbox动态改变v-model无效的问题。
|
||||
2. 优化form规则validator在微信小程序用法
|
||||
3. 修复backtop组件mode参数在微信小程序无效的问题
|
||||
4. 处理Album的previewFullImage属性无效的问题
|
||||
5. 处理u-datetime-picker组件mode='time'在选择改变时间时，控制台报错的问题
|
||||
## 2.0.6（2021-11-27）
|
||||
## [点击加群交流反馈：232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU)
|
||||
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. 处理tag组件在vue下边框无效的问题。
|
||||
2. 处理popup组件圆角参数可能无效的问题。
|
||||
3. 处理tabs组件lineColor参数可能无效的问题。
|
||||
4. propgress组件在值很小时，显示异常的问题。
|
||||
## 2.0.5（2021-11-25）
|
||||
## [点击加群交流反馈：232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU)
|
||||
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. calendar在vue下显示异常问题。
|
||||
2. form组件labelPosition和errorType参数无效的问题
|
||||
3. input组件inputAlign无效的问题
|
||||
4. 其他一些修复
|
||||
## 2.0.4（2021-11-23）
|
||||
## [点击加群交流反馈：232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU)
|
||||
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
0. input组件缺失@confirm事件，以及subfix和prefix无效问题
|
||||
1. component.scss文件样式在vue下干扰全局布局问题
|
||||
2. 修复subsection在vue环境下表现异常的问题
|
||||
3. tag组件的bgColor等参数无效的问题
|
||||
4. upload组件不换行的问题
|
||||
5. 其他的一些修复处理
|
||||
## 2.0.3（2021-11-16）
|
||||
## [点击加群交流反馈：1129077272](https://jq.qq.com/?_wv=1027&k=KnbeceDU)
|
||||
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. uView2.0已实现全面兼容nvue
|
||||
2. uView2.0对1.x进行了架构重构，细节和性能都有极大提升
|
||||
3. 目前uView2.0为公测阶段，相关细节可能会有变动
|
||||
4. 我们写了一份与1.x的对比指南，详见[对比1.x](https://www.uviewui.com/components/diff1.x.html)
|
||||
5. 处理modal的confirm回调事件拼写错误问题
|
||||
6. 处理input组件@input事件参数错误问题
|
||||
7. 其他一些修复
|
||||
## 2.0.2（2021-11-16）
|
||||
## [点击加群交流反馈：1129077272](https://jq.qq.com/?_wv=1027&k=KnbeceDU)
|
||||
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. uView2.0已实现全面兼容nvue
|
||||
2. uView2.0对1.x进行了架构重构，细节和性能都有极大提升
|
||||
3. 目前uView2.0为公测阶段，相关细节可能会有变动
|
||||
4. 我们写了一份与1.x的对比指南，详见[对比1.x](https://www.uviewui.com/components/diff1.x.html)
|
||||
5. 修复input组件formatter参数缺失问题
|
||||
6. 优化loading-icon组件的scss写法问题，防止不兼容新版本scss
|
||||
## 2.0.0(2020-11-15)
|
||||
## [点击加群交流反馈：1129077272](https://jq.qq.com/?_wv=1027&k=KnbeceDU)
|
||||
|
||||
# uView2.0重磅发布，利剑出鞘，一统江湖
|
||||
|
||||
1. uView2.0已实现全面兼容nvue
|
||||
2. uView2.0对1.x进行了架构重构，细节和性能都有极大提升
|
||||
3. 目前uView2.0为公测阶段，相关细节可能会有变动
|
||||
4. 我们写了一份与1.x的对比指南，详见[对比1.x](https://www.uviewui.com/components/diff1.x.html)
|
||||
5. 修复input组件formatter参数缺失问题
|
||||
|
||||
|
||||
46
uni_modules/uview-ui/components/u-button/nvue.scss
Normal file
46
uni_modules/uview-ui/components/u-button/nvue.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
$u-button-active-opacity:0.75 !default;
|
||||
$u-button-loading-text-margin-left:4px !default;
|
||||
$u-button-text-color: #FFFFFF !default;
|
||||
$u-button-text-plain-error-color:$u-error !default;
|
||||
$u-button-text-plain-warning-color:$u-warning !default;
|
||||
$u-button-text-plain-success-color:$u-success !default;
|
||||
$u-button-text-plain-info-color:$u-info !default;
|
||||
$u-button-text-plain-primary-color:$u-primary !default;
|
||||
.u-button {
|
||||
&--active {
|
||||
opacity: $u-button-active-opacity;
|
||||
}
|
||||
|
||||
&--active--plain {
|
||||
background-color: rgb(217, 217, 217);
|
||||
}
|
||||
|
||||
&__loading-text {
|
||||
margin-left:$u-button-loading-text-margin-left;
|
||||
}
|
||||
|
||||
&__text,
|
||||
&__loading-text {
|
||||
color:$u-button-text-color;
|
||||
}
|
||||
|
||||
&__text--plain--error {
|
||||
color:$u-button-text-plain-error-color;
|
||||
}
|
||||
|
||||
&__text--plain--warning {
|
||||
color:$u-button-text-plain-warning-color;
|
||||
}
|
||||
|
||||
&__text--plain--success{
|
||||
color:$u-button-text-plain-success-color;
|
||||
}
|
||||
|
||||
&__text--plain--info {
|
||||
color:$u-button-text-plain-info-color;
|
||||
}
|
||||
|
||||
&__text--plain--primary {
|
||||
color:$u-button-text-plain-primary-color;
|
||||
}
|
||||
}
|
||||
161
uni_modules/uview-ui/components/u-button/props.js
Normal file
161
uni_modules/uview-ui/components/u-button/props.js
Normal file
@@ -0,0 +1,161 @@
|
||||
/*
|
||||
* @Author : LQ
|
||||
* @Description :
|
||||
* @version : 1.0
|
||||
* @Date : 2021-08-16 10:04:04
|
||||
* @LastAuthor : LQ
|
||||
* @lastTime : 2021-08-16 10:04:24
|
||||
* @FilePath : /u-view2.0/uview-ui/components/u-button/props.js
|
||||
*/
|
||||
export default {
|
||||
props: {
|
||||
// 是否细边框
|
||||
hairline: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.button.hairline
|
||||
},
|
||||
// 按钮的预置样式，info，primary，error，warning，success
|
||||
type: {
|
||||
type: String,
|
||||
default: uni.$u.props.button.type
|
||||
},
|
||||
// 按钮尺寸，large，normal，small，mini
|
||||
size: {
|
||||
type: String,
|
||||
default: uni.$u.props.button.size
|
||||
},
|
||||
// 按钮形状，circle（两边为半圆），square（带圆角）
|
||||
shape: {
|
||||
type: String,
|
||||
default: uni.$u.props.button.shape
|
||||
},
|
||||
// 按钮是否镂空
|
||||
plain: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.button.plain
|
||||
},
|
||||
// 是否禁止状态
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.button.disabled
|
||||
},
|
||||
// 是否加载中
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.button.loading
|
||||
},
|
||||
// 加载中提示文字
|
||||
loadingText: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.button.loadingText
|
||||
},
|
||||
// 加载状态图标类型
|
||||
loadingMode: {
|
||||
type: String,
|
||||
default: uni.$u.props.button.loadingMode
|
||||
},
|
||||
// 加载图标大小
|
||||
loadingSize: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.button.loadingSize
|
||||
},
|
||||
// 开放能力，具体请看uniapp稳定关于button组件部分说明
|
||||
// https://uniapp.dcloud.io/component/button
|
||||
openType: {
|
||||
type: String,
|
||||
default: uni.$u.props.button.openType
|
||||
},
|
||||
// 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
|
||||
// 取值为submit（提交表单），reset（重置表单）
|
||||
formType: {
|
||||
type: String,
|
||||
default: uni.$u.props.button.formType
|
||||
},
|
||||
// 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
|
||||
// 只微信小程序、QQ小程序有效
|
||||
appParameter: {
|
||||
type: String,
|
||||
default: uni.$u.props.button.appParameter
|
||||
},
|
||||
// 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
|
||||
hoverStopPropagation: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.button.hoverStopPropagation
|
||||
},
|
||||
// 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效
|
||||
lang: {
|
||||
type: String,
|
||||
default: uni.$u.props.button.lang
|
||||
},
|
||||
// 会话来源，open-type="contact"时有效。只微信小程序有效
|
||||
sessionFrom: {
|
||||
type: String,
|
||||
default: uni.$u.props.button.sessionFrom
|
||||
},
|
||||
// 会话内消息卡片标题，open-type="contact"时有效
|
||||
// 默认当前标题，只微信小程序有效
|
||||
sendMessageTitle: {
|
||||
type: String,
|
||||
default: uni.$u.props.button.sendMessageTitle
|
||||
},
|
||||
// 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
|
||||
// 默认当前分享路径，只微信小程序有效
|
||||
sendMessagePath: {
|
||||
type: String,
|
||||
default: uni.$u.props.button.sendMessagePath
|
||||
},
|
||||
// 会话内消息卡片图片，open-type="contact"时有效
|
||||
// 默认当前页面截图，只微信小程序有效
|
||||
sendMessageImg: {
|
||||
type: String,
|
||||
default: uni.$u.props.button.sendMessageImg
|
||||
},
|
||||
// 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
|
||||
// 用户点击后可以快速发送小程序消息，open-type="contact"时有效
|
||||
showMessageCard: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.button.showMessageCard
|
||||
},
|
||||
// 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
|
||||
dataName: {
|
||||
type: String,
|
||||
default: uni.$u.props.button.dataName
|
||||
},
|
||||
// 节流，一定时间内只能触发一次
|
||||
throttleTime: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.button.throttleTime
|
||||
},
|
||||
// 按住后多久出现点击态，单位毫秒
|
||||
hoverStartTime: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.button.hoverStartTime
|
||||
},
|
||||
// 手指松开后点击态保留时间，单位毫秒
|
||||
hoverStayTime: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.button.hoverStayTime
|
||||
},
|
||||
// 按钮文字，之所以通过props传入，是因为slot传入的话
|
||||
// nvue中无法控制文字的样式
|
||||
text: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.button.text
|
||||
},
|
||||
// 按钮图标
|
||||
icon: {
|
||||
type: String,
|
||||
default: uni.$u.props.button.icon
|
||||
},
|
||||
// 按钮图标
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.button.icon
|
||||
},
|
||||
// 按钮颜色，支持传入linear-gradient渐变色
|
||||
color: {
|
||||
type: String,
|
||||
default: uni.$u.props.button.color
|
||||
}
|
||||
}
|
||||
}
|
||||
495
uni_modules/uview-ui/components/u-button/u-button.vue
Normal file
495
uni_modules/uview-ui/components/u-button/u-button.vue
Normal file
@@ -0,0 +1,495 @@
|
||||
<template>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<button
|
||||
:hover-start-time="Number(hoverStartTime)"
|
||||
:hover-stay-time="Number(hoverStayTime)"
|
||||
:form-type="formType"
|
||||
:open-type="openType"
|
||||
:app-parameter="appParameter"
|
||||
:hover-stop-propagation="hoverStopPropagation"
|
||||
:send-message-title="sendMessageTitle"
|
||||
:send-message-path="sendMessagePath"
|
||||
:lang="lang"
|
||||
:data-name="dataName"
|
||||
:session-from="sessionFrom"
|
||||
:send-message-img="sendMessageImg"
|
||||
:show-message-card="showMessageCard"
|
||||
@getphonenumber="getphonenumber"
|
||||
@getuserinfo="getuserinfo"
|
||||
@error="error"
|
||||
@opensetting="opensetting"
|
||||
@launchapp="launchapp"
|
||||
@agreeprivacyauthorization="agreeprivacyauthorization"
|
||||
:hover-class="!disabled && !loading ? 'u-button--active' : ''"
|
||||
class="u-button u-reset-button"
|
||||
:style="[baseColor, $u.addStyle(customStyle)]"
|
||||
@tap="clickHandler"
|
||||
:class="bemClass"
|
||||
>
|
||||
<template v-if="loading">
|
||||
<u-loading-icon
|
||||
:mode="loadingMode"
|
||||
:size="loadingSize * 1.15"
|
||||
:color="loadingColor"
|
||||
></u-loading-icon>
|
||||
<text
|
||||
class="u-button__loading-text"
|
||||
:style="[{ fontSize: textSize + 'px' }]"
|
||||
>{{ loadingText || text }}</text
|
||||
>
|
||||
</template>
|
||||
<template v-else>
|
||||
<u-icon
|
||||
v-if="icon"
|
||||
:name="icon"
|
||||
:color="iconColorCom"
|
||||
:size="textSize * 1.35"
|
||||
:customStyle="{ marginRight: '2px' }"
|
||||
></u-icon>
|
||||
<slot>
|
||||
<text
|
||||
class="u-button__text"
|
||||
:style="[{ fontSize: textSize + 'px' }]"
|
||||
>{{ text }}</text
|
||||
>
|
||||
</slot>
|
||||
</template>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view
|
||||
:hover-start-time="Number(hoverStartTime)"
|
||||
:hover-stay-time="Number(hoverStayTime)"
|
||||
class="u-button"
|
||||
:hover-class="
|
||||
!disabled && !loading && !color && (plain || type === 'info')
|
||||
? 'u-button--active--plain'
|
||||
: !disabled && !loading && !plain
|
||||
? 'u-button--active'
|
||||
: ''
|
||||
"
|
||||
@tap="clickHandler"
|
||||
:class="bemClass"
|
||||
:style="[baseColor, $u.addStyle(customStyle)]"
|
||||
>
|
||||
<template v-if="loading">
|
||||
<u-loading-icon
|
||||
:mode="loadingMode"
|
||||
:size="loadingSize * 1.15"
|
||||
:color="loadingColor"
|
||||
></u-loading-icon>
|
||||
<text
|
||||
class="u-button__loading-text"
|
||||
:style="[nvueTextStyle]"
|
||||
:class="[plain && `u-button__text--plain--${type}`]"
|
||||
>{{ loadingText || text }}</text
|
||||
>
|
||||
</template>
|
||||
<template v-else>
|
||||
<u-icon
|
||||
v-if="icon"
|
||||
:name="icon"
|
||||
:color="iconColorCom"
|
||||
:size="textSize * 1.35"
|
||||
></u-icon>
|
||||
<text
|
||||
class="u-button__text"
|
||||
:style="[
|
||||
{
|
||||
marginLeft: icon ? '2px' : 0,
|
||||
},
|
||||
nvueTextStyle,
|
||||
]"
|
||||
:class="[plain && `u-button__text--plain--${type}`]"
|
||||
>{{ text }}</text
|
||||
>
|
||||
</template>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import button from "../../libs/mixin/button.js";
|
||||
import openType from "../../libs/mixin/openType.js";
|
||||
import props from "./props.js";
|
||||
/**
|
||||
* button 按钮
|
||||
* @description Button 按钮
|
||||
* @tutorial https://www.uviewui.com/components/button.html
|
||||
*
|
||||
* @property {Boolean} hairline 是否显示按钮的细边框 (默认 true )
|
||||
* @property {String} type 按钮的预置样式，info，primary，error，warning，success (默认 'info' )
|
||||
* @property {String} size 按钮尺寸，large，normal，mini （默认 normal）
|
||||
* @property {String} shape 按钮形状，circle（两边为半圆），square（带圆角） （默认 'square' ）
|
||||
* @property {Boolean} plain 按钮是否镂空，背景色透明 （默认 false）
|
||||
* @property {Boolean} disabled 是否禁用 （默认 false）
|
||||
* @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈) （默认 false）
|
||||
* @property {String | Number} loadingText 加载中提示文字
|
||||
* @property {String} loadingMode 加载状态图标类型 （默认 'spinner' ）
|
||||
* @property {String | Number} loadingSize 加载图标大小 （默认 15 ）
|
||||
* @property {String} openType 开放能力，具体请看uniapp稳定关于button组件部分说明
|
||||
* @property {String} formType 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
|
||||
* @property {String} appParameter 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效）
|
||||
* @property {Boolean} hoverStopPropagation 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效（默认 true ）
|
||||
* @property {String} lang 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ）
|
||||
* @property {String} sessionFrom 会话来源，openType="contact"时有效
|
||||
* @property {String} sendMessageTitle 会话内消息卡片标题，openType="contact"时有效
|
||||
* @property {String} sendMessagePath 会话内消息卡片点击跳转小程序路径，openType="contact"时有效
|
||||
* @property {String} sendMessageImg 会话内消息卡片图片，openType="contact"时有效
|
||||
* @property {Boolean} showMessageCard 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效（默认false）
|
||||
* @property {String} dataName 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
|
||||
* @property {String | Number} throttleTime 节流，一定时间内只能触发一次 （默认 0 )
|
||||
* @property {String | Number} hoverStartTime 按住后多久出现点击态，单位毫秒 （默认 0 )
|
||||
* @property {String | Number} hoverStayTime 手指松开后点击态保留时间，单位毫秒 （默认 200 )
|
||||
* @property {String | Number} text 按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式）
|
||||
* @property {String} icon 按钮图标
|
||||
* @property {String} iconColor 按钮图标颜色
|
||||
* @property {String} color 按钮颜色，支持传入linear-gradient渐变色
|
||||
* @property {Object} customStyle 定义需要用到的外部样式
|
||||
*
|
||||
* @event {Function} click 非禁止并且非加载中，才能点击
|
||||
* @event {Function} getphonenumber open-type="getPhoneNumber"时有效
|
||||
* @event {Function} getuserinfo 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
|
||||
* @event {Function} error 当使用开放能力时，发生错误的回调
|
||||
* @event {Function} opensetting 在打开授权设置页并关闭后回调
|
||||
* @event {Function} launchapp 打开 APP 成功的回调
|
||||
* @event {Function} agreeprivacyauthorization 用户同意隐私协议事件回调
|
||||
* @example <u-button>月落</u-button>
|
||||
*/
|
||||
export default {
|
||||
name: "u-button",
|
||||
// #ifdef MP
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, button, openType, props],
|
||||
// #endif
|
||||
// #ifndef MP
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
// #endif
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
// 生成bem风格的类名
|
||||
bemClass() {
|
||||
// this.bem为一个computed变量，在mixin中
|
||||
if (!this.color) {
|
||||
return this.bem(
|
||||
"button",
|
||||
["type", "shape", "size"],
|
||||
["disabled", "plain", "hairline"]
|
||||
);
|
||||
} else {
|
||||
// 由于nvue的原因，在有color参数时，不需要传入type，否则会生成type相关的类型，影响最终的样式
|
||||
return this.bem(
|
||||
"button",
|
||||
["shape", "size"],
|
||||
["disabled", "plain", "hairline"]
|
||||
);
|
||||
}
|
||||
},
|
||||
loadingColor() {
|
||||
if (this.plain) {
|
||||
// 如果有设置color值，则用color值，否则使用type主题颜色
|
||||
return this.color
|
||||
? this.color
|
||||
: uni.$u.config.color[`u-${this.type}`];
|
||||
}
|
||||
if (this.type === "info") {
|
||||
return "#c9c9c9";
|
||||
}
|
||||
return "rgb(200, 200, 200)";
|
||||
},
|
||||
iconColorCom() {
|
||||
// 如果是镂空状态，设置了color就用color值，否则使用主题颜色，
|
||||
// u-icon的color能接受一个主题颜色的值
|
||||
if (this.iconColor) return this.iconColor;
|
||||
if (this.plain) {
|
||||
return this.color ? this.color : this.type;
|
||||
} else {
|
||||
return this.type === "info" ? "#000000" : "#ffffff";
|
||||
}
|
||||
},
|
||||
baseColor() {
|
||||
let style = {};
|
||||
if (this.color) {
|
||||
// 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
|
||||
style.color = this.plain ? this.color : "white";
|
||||
if (!this.plain) {
|
||||
// 非镂空，背景色使用自定义的颜色
|
||||
style["background-color"] = this.color;
|
||||
}
|
||||
if (this.color.indexOf("gradient") !== -1) {
|
||||
// 如果自定义的颜色为渐变色，不显示边框，以及通过backgroundImage设置渐变色
|
||||
// weex文档说明可以写borderWidth的形式，为什么这里需要分开写？
|
||||
// 因为weex是阿里巴巴为了部门业绩考核而做的你懂的东西，所以需要这么写才有效
|
||||
style.borderTopWidth = 0;
|
||||
style.borderRightWidth = 0;
|
||||
style.borderBottomWidth = 0;
|
||||
style.borderLeftWidth = 0;
|
||||
if (!this.plain) {
|
||||
style.backgroundImage = this.color;
|
||||
}
|
||||
} else {
|
||||
// 非渐变色，则设置边框相关的属性
|
||||
style.borderColor = this.color;
|
||||
style.borderWidth = "1px";
|
||||
style.borderStyle = "solid";
|
||||
}
|
||||
}
|
||||
return style;
|
||||
},
|
||||
// nvue版本按钮的字体不会继承父组件的颜色，需要对每一个text组件进行单独的设置
|
||||
nvueTextStyle() {
|
||||
let style = {};
|
||||
// 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
|
||||
if (this.type === "info") {
|
||||
style.color = "#323233";
|
||||
}
|
||||
if (this.color) {
|
||||
style.color = this.plain ? this.color : "white";
|
||||
}
|
||||
style.fontSize = this.textSize + "px";
|
||||
return style;
|
||||
},
|
||||
// 字体大小
|
||||
textSize() {
|
||||
let fontSize = 14,
|
||||
{ size } = this;
|
||||
if (size === "large") fontSize = 16;
|
||||
if (size === "normal") fontSize = 14;
|
||||
if (size === "small") fontSize = 12;
|
||||
if (size === "mini") fontSize = 10;
|
||||
return fontSize;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickHandler() {
|
||||
// 非禁止并且非加载中，才能点击
|
||||
if (!this.disabled && !this.loading) {
|
||||
// 进行节流控制，每this.throttle毫秒内，只在开始处执行
|
||||
uni.$u.throttle(() => {
|
||||
this.$emit("click");
|
||||
}, this.throttleTime);
|
||||
}
|
||||
},
|
||||
// 下面为对接uniapp官方按钮开放能力事件回调的对接
|
||||
getphonenumber(res) {
|
||||
this.$emit("getphonenumber", res);
|
||||
},
|
||||
getuserinfo(res) {
|
||||
this.$emit("getuserinfo", res);
|
||||
},
|
||||
error(res) {
|
||||
this.$emit("error", res);
|
||||
},
|
||||
opensetting(res) {
|
||||
this.$emit("opensetting", res);
|
||||
},
|
||||
launchapp(res) {
|
||||
this.$emit("launchapp", res);
|
||||
},
|
||||
agreeprivacyauthorization(res) {
|
||||
this.$emit("agreeprivacyauthorization", res);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
@import "./vue.scss";
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
@import "./nvue.scss";
|
||||
/* #endif */
|
||||
|
||||
$u-button-u-button-height: 40px !default;
|
||||
$u-button-text-font-size: 15px !default;
|
||||
$u-button-loading-text-font-size: 15px !default;
|
||||
$u-button-loading-text-margin-left: 4px !default;
|
||||
$u-button-large-width: 100% !default;
|
||||
$u-button-large-height: 50px !default;
|
||||
$u-button-normal-padding: 0 12px !default;
|
||||
$u-button-large-padding: 0 15px !default;
|
||||
$u-button-normal-font-size: 14px !default;
|
||||
$u-button-small-min-width: 60px !default;
|
||||
$u-button-small-height: 30px !default;
|
||||
$u-button-small-padding: 0px 8px !default;
|
||||
$u-button-mini-padding: 0px 8px !default;
|
||||
$u-button-small-font-size: 12px !default;
|
||||
$u-button-mini-height: 22px !default;
|
||||
$u-button-mini-font-size: 10px !default;
|
||||
$u-button-mini-min-width: 50px !default;
|
||||
$u-button-disabled-opacity: 0.5 !default;
|
||||
$u-button-info-color: #323233 !default;
|
||||
$u-button-info-background-color: #fff !default;
|
||||
$u-button-info-border-color: #ebedf0 !default;
|
||||
$u-button-info-border-width: 1px !default;
|
||||
$u-button-info-border-style: solid !default;
|
||||
$u-button-success-color: #fff !default;
|
||||
$u-button-success-background-color: $u-success !default;
|
||||
$u-button-success-border-color: $u-button-success-background-color !default;
|
||||
$u-button-success-border-width: 1px !default;
|
||||
$u-button-success-border-style: solid !default;
|
||||
$u-button-primary-color: #fff !default;
|
||||
$u-button-primary-background-color: $u-primary !default;
|
||||
$u-button-primary-border-color: $u-button-primary-background-color !default;
|
||||
$u-button-primary-border-width: 1px !default;
|
||||
$u-button-primary-border-style: solid !default;
|
||||
$u-button-error-color: #fff !default;
|
||||
$u-button-error-background-color: $u-error !default;
|
||||
$u-button-error-border-color: $u-button-error-background-color !default;
|
||||
$u-button-error-border-width: 1px !default;
|
||||
$u-button-error-border-style: solid !default;
|
||||
$u-button-warning-color: #fff !default;
|
||||
$u-button-warning-background-color: $u-warning !default;
|
||||
$u-button-warning-border-color: $u-button-warning-background-color !default;
|
||||
$u-button-warning-border-width: 1px !default;
|
||||
$u-button-warning-border-style: solid !default;
|
||||
$u-button-block-width: 100% !default;
|
||||
$u-button-circle-border-top-right-radius: 100px !default;
|
||||
$u-button-circle-border-top-left-radius: 100px !default;
|
||||
$u-button-circle-border-bottom-left-radius: 100px !default;
|
||||
$u-button-circle-border-bottom-right-radius: 100px !default;
|
||||
$u-button-square-border-top-right-radius: 3px !default;
|
||||
$u-button-square-border-top-left-radius: 3px !default;
|
||||
$u-button-square-border-bottom-left-radius: 3px !default;
|
||||
$u-button-square-border-bottom-right-radius: 3px !default;
|
||||
$u-button-icon-min-width: 1em !default;
|
||||
$u-button-plain-background-color: #fff !default;
|
||||
$u-button-hairline-border-width: 0.5px !default;
|
||||
|
||||
.u-button {
|
||||
height: $u-button-u-button-height;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include flex;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
|
||||
&__text {
|
||||
font-size: $u-button-text-font-size;
|
||||
}
|
||||
|
||||
&__loading-text {
|
||||
font-size: $u-button-loading-text-font-size;
|
||||
margin-left: $u-button-loading-text-margin-left;
|
||||
}
|
||||
|
||||
&--large {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: $u-button-large-width;
|
||||
/* #endif */
|
||||
height: $u-button-large-height;
|
||||
padding: $u-button-large-padding;
|
||||
}
|
||||
|
||||
&--normal {
|
||||
padding: $u-button-normal-padding;
|
||||
font-size: $u-button-normal-font-size;
|
||||
}
|
||||
|
||||
&--small {
|
||||
/* #ifndef APP-NVUE */
|
||||
min-width: $u-button-small-min-width;
|
||||
/* #endif */
|
||||
height: $u-button-small-height;
|
||||
padding: $u-button-small-padding;
|
||||
font-size: $u-button-small-font-size;
|
||||
}
|
||||
|
||||
&--mini {
|
||||
height: $u-button-mini-height;
|
||||
font-size: $u-button-mini-font-size;
|
||||
/* #ifndef APP-NVUE */
|
||||
min-width: $u-button-mini-min-width;
|
||||
/* #endif */
|
||||
padding: $u-button-mini-padding;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: $u-button-disabled-opacity;
|
||||
}
|
||||
|
||||
&--info {
|
||||
color: $u-button-info-color;
|
||||
background-color: $u-button-info-background-color;
|
||||
border-color: $u-button-info-border-color;
|
||||
border-width: $u-button-info-border-width;
|
||||
border-style: $u-button-info-border-style;
|
||||
}
|
||||
|
||||
&--success {
|
||||
color: $u-button-success-color;
|
||||
background-color: $u-button-success-background-color;
|
||||
border-color: $u-button-success-border-color;
|
||||
border-width: $u-button-success-border-width;
|
||||
border-style: $u-button-success-border-style;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
color: $u-button-primary-color;
|
||||
background-color: $u-button-primary-background-color;
|
||||
border-color: $u-button-primary-border-color;
|
||||
border-width: $u-button-primary-border-width;
|
||||
border-style: $u-button-primary-border-style;
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: $u-button-error-color;
|
||||
background-color: $u-button-error-background-color;
|
||||
border-color: $u-button-error-border-color;
|
||||
border-width: $u-button-error-border-width;
|
||||
border-style: $u-button-error-border-style;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: $u-button-warning-color;
|
||||
background-color: $u-button-warning-background-color;
|
||||
border-color: $u-button-warning-border-color;
|
||||
border-width: $u-button-warning-border-width;
|
||||
border-style: $u-button-warning-border-style;
|
||||
}
|
||||
|
||||
&--block {
|
||||
@include flex;
|
||||
width: $u-button-block-width;
|
||||
}
|
||||
|
||||
&--circle {
|
||||
border-top-right-radius: $u-button-circle-border-top-right-radius;
|
||||
border-top-left-radius: $u-button-circle-border-top-left-radius;
|
||||
border-bottom-left-radius: $u-button-circle-border-bottom-left-radius;
|
||||
border-bottom-right-radius: $u-button-circle-border-bottom-right-radius;
|
||||
}
|
||||
|
||||
&--square {
|
||||
border-bottom-left-radius: $u-button-square-border-top-right-radius;
|
||||
border-bottom-right-radius: $u-button-square-border-top-left-radius;
|
||||
border-top-left-radius: $u-button-square-border-bottom-left-radius;
|
||||
border-top-right-radius: $u-button-square-border-bottom-right-radius;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
/* #ifndef APP-NVUE */
|
||||
min-width: $u-button-icon-min-width;
|
||||
line-height: inherit !important;
|
||||
vertical-align: top;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
&--plain {
|
||||
background-color: $u-button-plain-background-color;
|
||||
}
|
||||
|
||||
&--hairline {
|
||||
border-width: $u-button-hairline-border-width !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
80
uni_modules/uview-ui/components/u-button/vue.scss
Normal file
80
uni_modules/uview-ui/components/u-button/vue.scss
Normal file
@@ -0,0 +1,80 @@
|
||||
// nvue下hover-class无效
|
||||
$u-button-before-top:50% !default;
|
||||
$u-button-before-left:50% !default;
|
||||
$u-button-before-width:100% !default;
|
||||
$u-button-before-height:100% !default;
|
||||
$u-button-before-transform:translate(-50%, -50%) !default;
|
||||
$u-button-before-opacity:0 !default;
|
||||
$u-button-before-background-color:#000 !default;
|
||||
$u-button-before-border-color:#000 !default;
|
||||
$u-button-active-before-opacity:.15 !default;
|
||||
$u-button-icon-margin-left:4px !default;
|
||||
$u-button-plain-u-button-info-color:$u-info;
|
||||
$u-button-plain-u-button-success-color:$u-success;
|
||||
$u-button-plain-u-button-error-color:$u-error;
|
||||
$u-button-plain-u-button-warning-color:$u-error;
|
||||
|
||||
.u-button {
|
||||
width: 100%;
|
||||
|
||||
&__text {
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top:$u-button-before-top;
|
||||
left:$u-button-before-left;
|
||||
width:$u-button-before-width;
|
||||
height:$u-button-before-height;
|
||||
border: inherit;
|
||||
border-radius: inherit;
|
||||
transform:$u-button-before-transform;
|
||||
opacity:$u-button-before-opacity;
|
||||
content: " ";
|
||||
background-color:$u-button-before-background-color;
|
||||
border-color:$u-button-before-border-color;
|
||||
}
|
||||
|
||||
&--active {
|
||||
&:before {
|
||||
opacity: .15
|
||||
}
|
||||
}
|
||||
|
||||
&__icon+&__text:not(:empty),
|
||||
&__loading-text {
|
||||
margin-left:$u-button-icon-margin-left;
|
||||
}
|
||||
|
||||
&--plain {
|
||||
&.u-button--primary {
|
||||
color: $u-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&--plain {
|
||||
&.u-button--info {
|
||||
color:$u-button-plain-u-button-info-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--plain {
|
||||
&.u-button--success {
|
||||
color:$u-button-plain-u-button-success-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--plain {
|
||||
&.u-button--error {
|
||||
color:$u-button-plain-u-button-error-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--plain {
|
||||
&.u-button--warning {
|
||||
color:$u-button-plain-u-button-warning-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
34
uni_modules/uview-ui/components/u-code/props.js
Normal file
34
uni_modules/uview-ui/components/u-code/props.js
Normal file
@@ -0,0 +1,34 @@
|
||||
export default {
|
||||
props: {
|
||||
// 倒计时总秒数
|
||||
seconds: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.code.seconds
|
||||
},
|
||||
// 尚未开始时提示
|
||||
startText: {
|
||||
type: String,
|
||||
default: uni.$u.props.code.startText
|
||||
},
|
||||
// 正在倒计时中的提示
|
||||
changeText: {
|
||||
type: String,
|
||||
default: uni.$u.props.code.changeText
|
||||
},
|
||||
// 倒计时结束时的提示
|
||||
endText: {
|
||||
type: String,
|
||||
default: uni.$u.props.code.endText
|
||||
},
|
||||
// 是否在H5刷新或各端返回再进入时继续倒计时
|
||||
keepRunning: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.code.keepRunning
|
||||
},
|
||||
// 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
|
||||
uniqueKey: {
|
||||
type: String,
|
||||
default: uni.$u.props.code.uniqueKey
|
||||
}
|
||||
}
|
||||
}
|
||||
129
uni_modules/uview-ui/components/u-code/u-code.vue
Normal file
129
uni_modules/uview-ui/components/u-code/u-code.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<view class="u-code">
|
||||
<!-- 此组件功能由js完成，无需写html逻辑 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import props from './props.js';
|
||||
/**
|
||||
* Code 验证码输入框
|
||||
* @description 考虑到用户实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件 不提供界面显示，只提供提示语，由用户将提示语嵌入到具体的场景
|
||||
* @tutorial https://www.uviewui.com/components/code.html
|
||||
* @property {String | Number} seconds 倒计时所需的秒数（默认 60 ）
|
||||
* @property {String} startText 开始前的提示语，见官网说明（默认 '获取验证码' ）
|
||||
* @property {String} changeText 倒计时期间的提示语，必须带有字母"x"，见官网说明（默认 'X秒重新获取' ）
|
||||
* @property {String} endText 倒计结束的提示语，见官网说明（默认 '重新获取' ）
|
||||
* @property {Boolean} keepRunning 是否在H5刷新或各端返回再进入时继续倒计时（ 默认false ）
|
||||
* @property {String} uniqueKey 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
|
||||
*
|
||||
* @event {Function} change 倒计时期间，每秒触发一次
|
||||
* @event {Function} start 开始倒计时触发
|
||||
* @event {Function} end 结束倒计时触发
|
||||
* @example <u-code ref="uCode" @change="codeChange" seconds="20"></u-code>
|
||||
*/
|
||||
export default {
|
||||
name: "u-code",
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
|
||||
data() {
|
||||
return {
|
||||
secNum: this.seconds,
|
||||
timer: null,
|
||||
canGetCode: true, // 是否可以执行验证码操作
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.checkKeepRunning()
|
||||
},
|
||||
watch: {
|
||||
seconds: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.secNum = n
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkKeepRunning() {
|
||||
// 获取上一次退出页面(H5还包括刷新)时的时间戳，如果没有上次的保存，此值可能为空
|
||||
let lastTimestamp = Number(uni.getStorageSync(this.uniqueKey + '_$uCountDownTimestamp'))
|
||||
if(!lastTimestamp) return this.changeEvent(this.startText)
|
||||
// 当前秒的时间戳
|
||||
let nowTimestamp = Math.floor((+ new Date()) / 1000)
|
||||
// 判断当前的时间戳，是否小于上一次的本该按设定结束，却提前结束的时间戳
|
||||
if(this.keepRunning && lastTimestamp && lastTimestamp > nowTimestamp) {
|
||||
// 剩余尚未执行完的倒计秒数
|
||||
this.secNum = lastTimestamp - nowTimestamp
|
||||
// 清除本地保存的变量
|
||||
uni.removeStorageSync(this.uniqueKey + '_$uCountDownTimestamp')
|
||||
// 开始倒计时
|
||||
this.start()
|
||||
} else {
|
||||
// 如果不存在需要继续上一次的倒计时，执行正常的逻辑
|
||||
this.changeEvent(this.startText)
|
||||
}
|
||||
},
|
||||
// 开始倒计时
|
||||
start() {
|
||||
// 防止快速点击获取验证码的按钮而导致内部产生多个定时器导致混乱
|
||||
if(this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
this.$emit('start')
|
||||
this.canGetCode = false
|
||||
// 这里放这句，是为了一开始时就提示，否则要等setInterval的1秒后才会有提示
|
||||
this.changeEvent(this.changeText.replace(/x|X/, this.secNum))
|
||||
this.timer = setInterval(() => {
|
||||
if (--this.secNum) {
|
||||
// 用当前倒计时的秒数替换提示字符串中的"x"字母
|
||||
this.changeEvent(this.changeText.replace(/x|X/, this.secNum))
|
||||
} else {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
this.changeEvent(this.endText)
|
||||
this.secNum = this.seconds
|
||||
this.$emit('end')
|
||||
this.canGetCode = true
|
||||
}
|
||||
}, 1000)
|
||||
this.setTimeToStorage()
|
||||
},
|
||||
// 重置，可以让用户再次获取验证码
|
||||
reset() {
|
||||
this.canGetCode = true
|
||||
clearInterval(this.timer)
|
||||
this.secNum = this.seconds
|
||||
this.changeEvent(this.endText)
|
||||
},
|
||||
changeEvent(text) {
|
||||
this.$emit('change', text)
|
||||
},
|
||||
// 保存时间戳，为了防止倒计时尚未结束，H5刷新或者各端的右上角返回上一页再进来
|
||||
setTimeToStorage() {
|
||||
if(!this.keepRunning || !this.timer) return
|
||||
// 记录当前的时间戳，为了下次进入页面，如果还在倒计时内的话，继续倒计时
|
||||
// 倒计时尚未结束，结果大于0；倒计时已经开始，就会小于初始值，如果等于初始值，说明没有开始倒计时，无需处理
|
||||
if(this.secNum > 0 && this.secNum <= this.seconds) {
|
||||
// 获取当前时间戳(+ new Date()为特殊写法)，除以1000变成秒，再去除小数部分
|
||||
let nowTimestamp = Math.floor((+ new Date()) / 1000)
|
||||
// 将本该结束时候的时间戳保存起来 => 当前时间戳 + 剩余的秒数
|
||||
uni.setStorage({
|
||||
key: this.uniqueKey + '_$uCountDownTimestamp',
|
||||
data: nowTimestamp + Number(this.secNum)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 组件销毁的时候，清除定时器，否则定时器会继续存在，系统不会自动清除
|
||||
beforeDestroy() {
|
||||
this.setTimeToStorage()
|
||||
clearTimeout(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
</style>
|
||||
116
uni_modules/uview-ui/components/u-datetime-picker/props.js
Normal file
116
uni_modules/uview-ui/components/u-datetime-picker/props.js
Normal file
@@ -0,0 +1,116 @@
|
||||
export default {
|
||||
props: {
|
||||
// 是否打开组件
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.datetimePicker.show
|
||||
},
|
||||
// 是否展示顶部的操作栏
|
||||
showToolbar: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.datetimePicker.showToolbar
|
||||
},
|
||||
// 绑定值
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.datetimePicker.value
|
||||
},
|
||||
// 顶部标题
|
||||
title: {
|
||||
type: String,
|
||||
default: uni.$u.props.datetimePicker.title
|
||||
},
|
||||
// 展示格式，mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择
|
||||
mode: {
|
||||
type: String,
|
||||
default: uni.$u.props.datetimePicker.mode
|
||||
},
|
||||
// 可选的最大时间
|
||||
maxDate: {
|
||||
type: Number,
|
||||
// 最大默认值为后10年
|
||||
default: uni.$u.props.datetimePicker.maxDate
|
||||
},
|
||||
// 可选的最小时间
|
||||
minDate: {
|
||||
type: Number,
|
||||
// 最小默认值为前10年
|
||||
default: uni.$u.props.datetimePicker.minDate
|
||||
},
|
||||
// 可选的最小小时，仅mode=time有效
|
||||
minHour: {
|
||||
type: Number,
|
||||
default: uni.$u.props.datetimePicker.minHour
|
||||
},
|
||||
// 可选的最大小时，仅mode=time有效
|
||||
maxHour: {
|
||||
type: Number,
|
||||
default: uni.$u.props.datetimePicker.maxHour
|
||||
},
|
||||
// 可选的最小分钟，仅mode=time有效
|
||||
minMinute: {
|
||||
type: Number,
|
||||
default: uni.$u.props.datetimePicker.minMinute
|
||||
},
|
||||
// 可选的最大分钟，仅mode=time有效
|
||||
maxMinute: {
|
||||
type: Number,
|
||||
default: uni.$u.props.datetimePicker.maxMinute
|
||||
},
|
||||
// 选项过滤函数
|
||||
filter: {
|
||||
type: [Function, null],
|
||||
default: uni.$u.props.datetimePicker.filter
|
||||
},
|
||||
// 选项格式化函数
|
||||
formatter: {
|
||||
type: [Function, null],
|
||||
default: uni.$u.props.datetimePicker.formatter
|
||||
},
|
||||
// 是否显示加载中状态
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.datetimePicker.loading
|
||||
},
|
||||
// 各列中，单个选项的高度
|
||||
itemHeight: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.datetimePicker.itemHeight
|
||||
},
|
||||
// 取消按钮的文字
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: uni.$u.props.datetimePicker.cancelText
|
||||
},
|
||||
// 确认按钮的文字
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: uni.$u.props.datetimePicker.confirmText
|
||||
},
|
||||
// 取消按钮的颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.datetimePicker.cancelColor
|
||||
},
|
||||
// 确认按钮的颜色
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.datetimePicker.confirmColor
|
||||
},
|
||||
// 每列中可见选项的数量
|
||||
visibleItemCount: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.datetimePicker.visibleItemCount
|
||||
},
|
||||
// 是否允许点击遮罩关闭选择器
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.datetimePicker.closeOnClickOverlay
|
||||
},
|
||||
// 各列的默认索引
|
||||
defaultIndex: {
|
||||
type: Array,
|
||||
default: uni.$u.props.datetimePicker.defaultIndex
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<u-picker
|
||||
ref="picker"
|
||||
:show="show"
|
||||
:closeOnClickOverlay="closeOnClickOverlay"
|
||||
:columns="columns"
|
||||
:title="title"
|
||||
:itemHeight="itemHeight"
|
||||
:showToolbar="showToolbar"
|
||||
:visibleItemCount="visibleItemCount"
|
||||
:defaultIndex="innerDefaultIndex"
|
||||
:cancelText="cancelText"
|
||||
:confirmText="confirmText"
|
||||
:cancelColor="cancelColor"
|
||||
:confirmColor="confirmColor"
|
||||
@close="close"
|
||||
@cancel="cancel"
|
||||
@confirm="confirm"
|
||||
@change="change"
|
||||
>
|
||||
</u-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
function times(n, iteratee) {
|
||||
let index = -1
|
||||
const result = Array(n < 0 ? 0 : n)
|
||||
while (++index < n) {
|
||||
result[index] = iteratee(index)
|
||||
}
|
||||
return result
|
||||
}
|
||||
import props from './props.js';
|
||||
import dayjs from '../../libs/util/dayjs.js';
|
||||
/**
|
||||
* DatetimePicker 时间日期选择器
|
||||
* @description 此选择器用于时间日期
|
||||
* @tutorial https://www.uviewui.com/components/datetimePicker.html
|
||||
* @property {Boolean} show 用于控制选择器的弹出与收起 ( 默认 false )
|
||||
* @property {Boolean} showToolbar 是否显示顶部的操作栏 ( 默认 true )
|
||||
* @property {String | Number} value 绑定值
|
||||
* @property {String} title 顶部标题
|
||||
* @property {String} mode 展示格式 mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择 ( 默认 ‘datetime )
|
||||
* @property {Number} maxDate 可选的最大时间 默认值为后10年
|
||||
* @property {Number} minDate 可选的最小时间 默认值为前10年
|
||||
* @property {Number} minHour 可选的最小小时，仅mode=time有效 ( 默认 0 )
|
||||
* @property {Number} maxHour 可选的最大小时，仅mode=time有效 ( 默认 23 )
|
||||
* @property {Number} minMinute 可选的最小分钟，仅mode=time有效 ( 默认 0 )
|
||||
* @property {Number} maxMinute 可选的最大分钟，仅mode=time有效 ( 默认 59 )
|
||||
* @property {Function} filter 选项过滤函数
|
||||
* @property {Function} formatter 选项格式化函数
|
||||
* @property {Boolean} loading 是否显示加载中状态 ( 默认 false )
|
||||
* @property {String | Number} itemHeight 各列中，单个选项的高度 ( 默认 44 )
|
||||
* @property {String} cancelText 取消按钮的文字 ( 默认 '取消' )
|
||||
* @property {String} confirmText 确认按钮的文字 ( 默认 '确认' )
|
||||
* @property {String} cancelColor 取消按钮的颜色 ( 默认 '#909193' )
|
||||
* @property {String} confirmColor 确认按钮的颜色 ( 默认 '#3c9cff' )
|
||||
* @property {String | Number} visibleItemCount 每列中可见选项的数量 ( 默认 5 )
|
||||
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭选择器 ( 默认 false )
|
||||
* @property {Array} defaultIndex 各列的默认索引
|
||||
* @event {Function} close 关闭选择器时触发
|
||||
* @event {Function} confirm 点击确定按钮，返回当前选择的值
|
||||
* @event {Function} change 当选择值变化时触发
|
||||
* @event {Function} cancel 点击取消按钮
|
||||
* @example <u-datetime-picker :show="show" :value="value1" mode="datetime" ></u-datetime-picker>
|
||||
*/
|
||||
export default {
|
||||
name: 'datetime-picker',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
data() {
|
||||
return {
|
||||
columns: [],
|
||||
innerDefaultIndex: [],
|
||||
innerFormatter: (type, value) => value
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(newValue, oldValue) {
|
||||
if (newValue) {
|
||||
this.updateColumnValue(this.innerValue)
|
||||
}
|
||||
},
|
||||
propsChange() {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 如果以下这些变量发生了变化，意味着需要重新初始化各列的值
|
||||
propsChange() {
|
||||
return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.filter, ]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.innerValue = this.correctValue(this.value)
|
||||
this.updateColumnValue(this.innerValue)
|
||||
},
|
||||
// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
|
||||
setFormatter(e) {
|
||||
this.innerFormatter = e
|
||||
},
|
||||
// 关闭选择器
|
||||
close() {
|
||||
if (this.closeOnClickOverlay) {
|
||||
this.$emit('close')
|
||||
}
|
||||
},
|
||||
// 点击工具栏的取消按钮
|
||||
cancel() {
|
||||
this.$emit('cancel')
|
||||
},
|
||||
// 点击工具栏的确定按钮
|
||||
confirm() {
|
||||
this.$emit('confirm', {
|
||||
value: this.innerValue,
|
||||
mode: this.mode
|
||||
})
|
||||
this.$emit('input', this.innerValue)
|
||||
},
|
||||
//用正则截取输出值,当出现多组数字时,抛出错误
|
||||
intercept(e,type){
|
||||
let judge = e.match(/\d+/g)
|
||||
//判断是否掺杂数字
|
||||
if(judge.length>1){
|
||||
uni.$u.error("请勿在过滤或格式化函数时添加数字")
|
||||
return 0
|
||||
}else if(type&&judge[0].length==4){//判断是否是年份
|
||||
return judge[0]
|
||||
}else if(judge[0].length>2){
|
||||
uni.$u.error("请勿在过滤或格式化函数时添加数字")
|
||||
return 0
|
||||
}else{
|
||||
return judge[0]
|
||||
}
|
||||
},
|
||||
// 列发生变化时触发
|
||||
change(e) {
|
||||
const { indexs, values } = e
|
||||
let selectValue = ''
|
||||
if(this.mode === 'time') {
|
||||
// 根据value各列索引，从各列数组中，取出当前时间的选中值
|
||||
selectValue = `${this.intercept(values[0][indexs[0]])}:${this.intercept(values[1][indexs[1]])}`
|
||||
} else {
|
||||
// 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
|
||||
const year = parseInt(this.intercept(values[0][indexs[0]],'year'))
|
||||
const month = parseInt(this.intercept(values[1][indexs[1]]))
|
||||
let date = parseInt(values[2] ? this.intercept(values[2][indexs[2]]) : 1)
|
||||
let hour = 0, minute = 0
|
||||
// 此月份的最大天数
|
||||
const maxDate = dayjs(`${year}-${month}`).daysInMonth()
|
||||
// year-month模式下，date不会出现在列中，设置为1，为了符合后边需要减1的需求
|
||||
if (this.mode === 'year-month') {
|
||||
date = 1
|
||||
}
|
||||
// 不允许超过maxDate值
|
||||
date = Math.min(maxDate, date)
|
||||
if (this.mode === 'datetime') {
|
||||
hour = parseInt(this.intercept(values[3][indexs[3]]))
|
||||
minute = parseInt(this.intercept(values[4][indexs[4]]))
|
||||
}
|
||||
// 转为时间模式
|
||||
selectValue = Number(new Date(year, month - 1, date, hour, minute))
|
||||
}
|
||||
// 取出准确的合法值，防止超越边界的情况
|
||||
selectValue = this.correctValue(selectValue)
|
||||
this.innerValue = selectValue
|
||||
this.updateColumnValue(selectValue)
|
||||
// 发出change时间，value为当前选中的时间戳
|
||||
this.$emit('change', {
|
||||
value: selectValue,
|
||||
// #ifndef MP-WEIXIN || MP-TOUTIAO
|
||||
// 微信小程序不能传递this实例，会因为循环引用而报错
|
||||
picker: this.$refs.picker,
|
||||
// #endif
|
||||
mode: this.mode
|
||||
})
|
||||
},
|
||||
// 更新各列的值，进行补0、格式化等操作
|
||||
updateColumnValue(value) {
|
||||
this.innerValue = value
|
||||
this.updateColumns()
|
||||
this.updateIndexs(value)
|
||||
},
|
||||
// 更新索引
|
||||
updateIndexs(value) {
|
||||
let values = []
|
||||
const formatter = this.formatter || this.innerFormatter
|
||||
const padZero = uni.$u.padZero
|
||||
if (this.mode === 'time') {
|
||||
// 将time模式的时间用:分隔成数组
|
||||
const timeArr = value.split(':')
|
||||
// 使用formatter格式化方法进行管道处理
|
||||
values = [formatter('hour', timeArr[0]), formatter('minute', timeArr[1])]
|
||||
} else {
|
||||
const date = new Date(value)
|
||||
values = [
|
||||
formatter('year', `${dayjs(value).year()}`),
|
||||
// 月份补0
|
||||
formatter('month', padZero(dayjs(value).month() + 1))
|
||||
]
|
||||
if (this.mode === 'date') {
|
||||
// date模式，需要添加天列
|
||||
values.push(formatter('day', padZero(dayjs(value).date())))
|
||||
}
|
||||
if (this.mode === 'datetime') {
|
||||
// 数组的push方法，可以写入多个参数
|
||||
values.push(formatter('day', padZero(dayjs(value).date())), formatter('hour', padZero(dayjs(value).hour())), formatter('minute', padZero(dayjs(value).minute())))
|
||||
}
|
||||
}
|
||||
|
||||
// 根据当前各列的所有值，从各列默认值中找到默认值在各列中的索引
|
||||
const indexs = this.columns.map((column, index) => {
|
||||
// 通过取大值，可以保证不会出现找不到索引的-1情况
|
||||
return Math.max(0, column.findIndex(item => item === values[index]))
|
||||
})
|
||||
this.innerDefaultIndex = indexs
|
||||
},
|
||||
// 更新各列的值
|
||||
updateColumns() {
|
||||
const formatter = this.formatter || this.innerFormatter
|
||||
// 获取各列的值，并且map后，对各列的具体值进行补0操作
|
||||
const results = this.getOriginColumns().map((column) => column.values.map((value) => formatter(column.type, value)))
|
||||
this.columns = results
|
||||
},
|
||||
getOriginColumns() {
|
||||
// 生成各列的值
|
||||
const results = this.getRanges().map(({ type, range }) => {
|
||||
let values = times(range[1] - range[0] + 1, (index) => {
|
||||
let value = range[0] + index
|
||||
value = type === 'year' ? `${value}` : uni.$u.padZero(value)
|
||||
return value
|
||||
})
|
||||
// 进行过滤
|
||||
if (this.filter) {
|
||||
values = this.filter(type, values)
|
||||
}
|
||||
return { type, values }
|
||||
})
|
||||
return results
|
||||
},
|
||||
// 通过最大值和最小值生成数组
|
||||
generateArray(start, end) {
|
||||
return Array.from(new Array(end + 1).keys()).slice(start)
|
||||
},
|
||||
// 得出合法的时间
|
||||
correctValue(value) {
|
||||
const isDateMode = this.mode !== 'time'
|
||||
if (isDateMode && !uni.$u.test.date(value)) {
|
||||
// 如果是日期类型，但是又没有设置合法的当前时间的话，使用最小时间为当前时间
|
||||
value = this.minDate
|
||||
} else if (!isDateMode && !value) {
|
||||
// 如果是时间类型，而又没有默认值的话，就用最小时间
|
||||
value = `${uni.$u.padZero(this.minHour)}:${uni.$u.padZero(this.minMinute)}`
|
||||
}
|
||||
// 时间类型
|
||||
if (!isDateMode) {
|
||||
if (String(value).indexOf(':') === -1) return uni.$u.error('时间错误，请传递如12:24的格式')
|
||||
let [hour, minute] = value.split(':')
|
||||
// 对时间补零，同时控制在最小值和最大值之间
|
||||
hour = uni.$u.padZero(uni.$u.range(this.minHour, this.maxHour, Number(hour)))
|
||||
minute = uni.$u.padZero(uni.$u.range(this.minMinute, this.maxMinute, Number(minute)))
|
||||
return `${ hour }:${ minute }`
|
||||
} else {
|
||||
// 如果是日期格式，控制在最小日期和最大日期之间
|
||||
value = dayjs(value).isBefore(dayjs(this.minDate)) ? this.minDate : value
|
||||
value = dayjs(value).isAfter(dayjs(this.maxDate)) ? this.maxDate : value
|
||||
return value
|
||||
}
|
||||
},
|
||||
// 获取每列的最大和最小值
|
||||
getRanges() {
|
||||
if (this.mode === 'time') {
|
||||
return [
|
||||
{
|
||||
type: 'hour',
|
||||
range: [this.minHour, this.maxHour],
|
||||
},
|
||||
{
|
||||
type: 'minute',
|
||||
range: [this.minMinute, this.maxMinute],
|
||||
},
|
||||
];
|
||||
}
|
||||
const { maxYear, maxDate, maxMonth, maxHour, maxMinute, } = this.getBoundary('max', this.innerValue);
|
||||
const { minYear, minDate, minMonth, minHour, minMinute, } = this.getBoundary('min', this.innerValue);
|
||||
const result = [
|
||||
{
|
||||
type: 'year',
|
||||
range: [minYear, maxYear],
|
||||
},
|
||||
{
|
||||
type: 'month',
|
||||
range: [minMonth, maxMonth],
|
||||
},
|
||||
{
|
||||
type: 'day',
|
||||
range: [minDate, maxDate],
|
||||
},
|
||||
{
|
||||
type: 'hour',
|
||||
range: [minHour, maxHour],
|
||||
},
|
||||
{
|
||||
type: 'minute',
|
||||
range: [minMinute, maxMinute],
|
||||
},
|
||||
];
|
||||
if (this.mode === 'date')
|
||||
result.splice(3, 2);
|
||||
if (this.mode === 'year-month')
|
||||
result.splice(2, 3);
|
||||
return result;
|
||||
},
|
||||
// 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
|
||||
getBoundary(type, innerValue) {
|
||||
const value = new Date(innerValue)
|
||||
const boundary = new Date(this[`${type}Date`])
|
||||
const year = dayjs(boundary).year()
|
||||
let month = 1
|
||||
let date = 1
|
||||
let hour = 0
|
||||
let minute = 0
|
||||
if (type === 'max') {
|
||||
month = 12
|
||||
// 月份的天数
|
||||
date = dayjs(value).daysInMonth()
|
||||
hour = 23
|
||||
minute = 59
|
||||
}
|
||||
// 获取边界值，逻辑是：当年达到了边界值(最大或最小年)，就检查月允许的最大和最小值，以此类推
|
||||
if (dayjs(value).year() === year) {
|
||||
month = dayjs(boundary).month() + 1
|
||||
if (dayjs(value).month() + 1 === month) {
|
||||
date = dayjs(boundary).date()
|
||||
if (dayjs(value).date() === date) {
|
||||
hour = dayjs(boundary).hour()
|
||||
if (dayjs(value).hour() === hour) {
|
||||
minute = dayjs(boundary).minute()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
[`${type}Year`]: year,
|
||||
[`${type}Month`]: month,
|
||||
[`${type}Date`]: date,
|
||||
[`${type}Hour`]: hour,
|
||||
[`${type}Minute`]: minute
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../libs/css/components.scss';
|
||||
</style>
|
||||
214
uni_modules/uview-ui/components/u-icon/icons.js
Normal file
214
uni_modules/uview-ui/components/u-icon/icons.js
Normal file
@@ -0,0 +1,214 @@
|
||||
export default {
|
||||
'uicon-level': '\ue693',
|
||||
'uicon-column-line': '\ue68e',
|
||||
'uicon-checkbox-mark': '\ue807',
|
||||
'uicon-folder': '\ue7f5',
|
||||
'uicon-movie': '\ue7f6',
|
||||
'uicon-star-fill': '\ue669',
|
||||
'uicon-star': '\ue65f',
|
||||
'uicon-phone-fill': '\ue64f',
|
||||
'uicon-phone': '\ue622',
|
||||
'uicon-apple-fill': '\ue881',
|
||||
'uicon-chrome-circle-fill': '\ue885',
|
||||
'uicon-backspace': '\ue67b',
|
||||
'uicon-attach': '\ue632',
|
||||
'uicon-cut': '\ue948',
|
||||
'uicon-empty-car': '\ue602',
|
||||
'uicon-empty-coupon': '\ue682',
|
||||
'uicon-empty-address': '\ue646',
|
||||
'uicon-empty-favor': '\ue67c',
|
||||
'uicon-empty-permission': '\ue686',
|
||||
'uicon-empty-news': '\ue687',
|
||||
'uicon-empty-search': '\ue664',
|
||||
'uicon-github-circle-fill': '\ue887',
|
||||
'uicon-rmb': '\ue608',
|
||||
'uicon-person-delete-fill': '\ue66a',
|
||||
'uicon-reload': '\ue788',
|
||||
'uicon-order': '\ue68f',
|
||||
'uicon-server-man': '\ue6bc',
|
||||
'uicon-search': '\ue62a',
|
||||
'uicon-fingerprint': '\ue955',
|
||||
'uicon-more-dot-fill': '\ue630',
|
||||
'uicon-scan': '\ue662',
|
||||
'uicon-share-square': '\ue60b',
|
||||
'uicon-map': '\ue61d',
|
||||
'uicon-map-fill': '\ue64e',
|
||||
'uicon-tags': '\ue629',
|
||||
'uicon-tags-fill': '\ue651',
|
||||
'uicon-bookmark-fill': '\ue63b',
|
||||
'uicon-bookmark': '\ue60a',
|
||||
'uicon-eye': '\ue613',
|
||||
'uicon-eye-fill': '\ue641',
|
||||
'uicon-mic': '\ue64a',
|
||||
'uicon-mic-off': '\ue649',
|
||||
'uicon-calendar': '\ue66e',
|
||||
'uicon-calendar-fill': '\ue634',
|
||||
'uicon-trash': '\ue623',
|
||||
'uicon-trash-fill': '\ue658',
|
||||
'uicon-play-left': '\ue66d',
|
||||
'uicon-play-right': '\ue610',
|
||||
'uicon-minus': '\ue618',
|
||||
'uicon-plus': '\ue62d',
|
||||
'uicon-info': '\ue653',
|
||||
'uicon-info-circle': '\ue7d2',
|
||||
'uicon-info-circle-fill': '\ue64b',
|
||||
'uicon-question': '\ue715',
|
||||
'uicon-error': '\ue6d3',
|
||||
'uicon-close': '\ue685',
|
||||
'uicon-checkmark': '\ue6a8',
|
||||
'uicon-android-circle-fill': '\ue67e',
|
||||
'uicon-android-fill': '\ue67d',
|
||||
'uicon-ie': '\ue87b',
|
||||
'uicon-IE-circle-fill': '\ue889',
|
||||
'uicon-google': '\ue87a',
|
||||
'uicon-google-circle-fill': '\ue88a',
|
||||
'uicon-setting-fill': '\ue872',
|
||||
'uicon-setting': '\ue61f',
|
||||
'uicon-minus-square-fill': '\ue855',
|
||||
'uicon-plus-square-fill': '\ue856',
|
||||
'uicon-heart': '\ue7df',
|
||||
'uicon-heart-fill': '\ue851',
|
||||
'uicon-camera': '\ue7d7',
|
||||
'uicon-camera-fill': '\ue870',
|
||||
'uicon-more-circle': '\ue63e',
|
||||
'uicon-more-circle-fill': '\ue645',
|
||||
'uicon-chat': '\ue620',
|
||||
'uicon-chat-fill': '\ue61e',
|
||||
'uicon-bag-fill': '\ue617',
|
||||
'uicon-bag': '\ue619',
|
||||
'uicon-error-circle-fill': '\ue62c',
|
||||
'uicon-error-circle': '\ue624',
|
||||
'uicon-close-circle': '\ue63f',
|
||||
'uicon-close-circle-fill': '\ue637',
|
||||
'uicon-checkmark-circle': '\ue63d',
|
||||
'uicon-checkmark-circle-fill': '\ue635',
|
||||
'uicon-question-circle-fill': '\ue666',
|
||||
'uicon-question-circle': '\ue625',
|
||||
'uicon-share': '\ue631',
|
||||
'uicon-share-fill': '\ue65e',
|
||||
'uicon-shopping-cart': '\ue621',
|
||||
'uicon-shopping-cart-fill': '\ue65d',
|
||||
'uicon-bell': '\ue609',
|
||||
'uicon-bell-fill': '\ue640',
|
||||
'uicon-list': '\ue650',
|
||||
'uicon-list-dot': '\ue616',
|
||||
'uicon-zhihu': '\ue6ba',
|
||||
'uicon-zhihu-circle-fill': '\ue709',
|
||||
'uicon-zhifubao': '\ue6b9',
|
||||
'uicon-zhifubao-circle-fill': '\ue6b8',
|
||||
'uicon-weixin-circle-fill': '\ue6b1',
|
||||
'uicon-weixin-fill': '\ue6b2',
|
||||
'uicon-twitter-circle-fill': '\ue6ab',
|
||||
'uicon-twitter': '\ue6aa',
|
||||
'uicon-taobao-circle-fill': '\ue6a7',
|
||||
'uicon-taobao': '\ue6a6',
|
||||
'uicon-weibo-circle-fill': '\ue6a5',
|
||||
'uicon-weibo': '\ue6a4',
|
||||
'uicon-qq-fill': '\ue6a1',
|
||||
'uicon-qq-circle-fill': '\ue6a0',
|
||||
'uicon-moments-circel-fill': '\ue69a',
|
||||
'uicon-moments': '\ue69b',
|
||||
'uicon-qzone': '\ue695',
|
||||
'uicon-qzone-circle-fill': '\ue696',
|
||||
'uicon-baidu-circle-fill': '\ue680',
|
||||
'uicon-baidu': '\ue681',
|
||||
'uicon-facebook-circle-fill': '\ue68a',
|
||||
'uicon-facebook': '\ue689',
|
||||
'uicon-car': '\ue60c',
|
||||
'uicon-car-fill': '\ue636',
|
||||
'uicon-warning-fill': '\ue64d',
|
||||
'uicon-warning': '\ue694',
|
||||
'uicon-clock-fill': '\ue638',
|
||||
'uicon-clock': '\ue60f',
|
||||
'uicon-edit-pen': '\ue612',
|
||||
'uicon-edit-pen-fill': '\ue66b',
|
||||
'uicon-email': '\ue611',
|
||||
'uicon-email-fill': '\ue642',
|
||||
'uicon-minus-circle': '\ue61b',
|
||||
'uicon-minus-circle-fill': '\ue652',
|
||||
'uicon-plus-circle': '\ue62e',
|
||||
'uicon-plus-circle-fill': '\ue661',
|
||||
'uicon-file-text': '\ue663',
|
||||
'uicon-file-text-fill': '\ue665',
|
||||
'uicon-pushpin': '\ue7e3',
|
||||
'uicon-pushpin-fill': '\ue86e',
|
||||
'uicon-grid': '\ue673',
|
||||
'uicon-grid-fill': '\ue678',
|
||||
'uicon-play-circle': '\ue647',
|
||||
'uicon-play-circle-fill': '\ue655',
|
||||
'uicon-pause-circle-fill': '\ue654',
|
||||
'uicon-pause': '\ue8fa',
|
||||
'uicon-pause-circle': '\ue643',
|
||||
'uicon-eye-off': '\ue648',
|
||||
'uicon-eye-off-outline': '\ue62b',
|
||||
'uicon-gift-fill': '\ue65c',
|
||||
'uicon-gift': '\ue65b',
|
||||
'uicon-rmb-circle-fill': '\ue657',
|
||||
'uicon-rmb-circle': '\ue677',
|
||||
'uicon-kefu-ermai': '\ue656',
|
||||
'uicon-server-fill': '\ue751',
|
||||
'uicon-coupon-fill': '\ue8c4',
|
||||
'uicon-coupon': '\ue8ae',
|
||||
'uicon-integral': '\ue704',
|
||||
'uicon-integral-fill': '\ue703',
|
||||
'uicon-home-fill': '\ue964',
|
||||
'uicon-home': '\ue965',
|
||||
'uicon-hourglass-half-fill': '\ue966',
|
||||
'uicon-hourglass': '\ue967',
|
||||
'uicon-account': '\ue628',
|
||||
'uicon-plus-people-fill': '\ue626',
|
||||
'uicon-minus-people-fill': '\ue615',
|
||||
'uicon-account-fill': '\ue614',
|
||||
'uicon-thumb-down-fill': '\ue726',
|
||||
'uicon-thumb-down': '\ue727',
|
||||
'uicon-thumb-up': '\ue733',
|
||||
'uicon-thumb-up-fill': '\ue72f',
|
||||
'uicon-lock-fill': '\ue979',
|
||||
'uicon-lock-open': '\ue973',
|
||||
'uicon-lock-opened-fill': '\ue974',
|
||||
'uicon-lock': '\ue97a',
|
||||
'uicon-red-packet-fill': '\ue690',
|
||||
'uicon-photo-fill': '\ue98b',
|
||||
'uicon-photo': '\ue98d',
|
||||
'uicon-volume-off-fill': '\ue659',
|
||||
'uicon-volume-off': '\ue644',
|
||||
'uicon-volume-fill': '\ue670',
|
||||
'uicon-volume': '\ue633',
|
||||
'uicon-red-packet': '\ue691',
|
||||
'uicon-download': '\ue63c',
|
||||
'uicon-arrow-up-fill': '\ue6b0',
|
||||
'uicon-arrow-down-fill': '\ue600',
|
||||
'uicon-play-left-fill': '\ue675',
|
||||
'uicon-play-right-fill': '\ue676',
|
||||
'uicon-rewind-left-fill': '\ue679',
|
||||
'uicon-rewind-right-fill': '\ue67a',
|
||||
'uicon-arrow-downward': '\ue604',
|
||||
'uicon-arrow-leftward': '\ue601',
|
||||
'uicon-arrow-rightward': '\ue603',
|
||||
'uicon-arrow-upward': '\ue607',
|
||||
'uicon-arrow-down': '\ue60d',
|
||||
'uicon-arrow-right': '\ue605',
|
||||
'uicon-arrow-left': '\ue60e',
|
||||
'uicon-arrow-up': '\ue606',
|
||||
'uicon-skip-back-left': '\ue674',
|
||||
'uicon-skip-forward-right': '\ue672',
|
||||
'uicon-rewind-right': '\ue66f',
|
||||
'uicon-rewind-left': '\ue671',
|
||||
'uicon-arrow-right-double': '\ue68d',
|
||||
'uicon-arrow-left-double': '\ue68c',
|
||||
'uicon-wifi-off': '\ue668',
|
||||
'uicon-wifi': '\ue667',
|
||||
'uicon-empty-data': '\ue62f',
|
||||
'uicon-empty-history': '\ue684',
|
||||
'uicon-empty-list': '\ue68b',
|
||||
'uicon-empty-page': '\ue627',
|
||||
'uicon-empty-order': '\ue639',
|
||||
'uicon-man': '\ue697',
|
||||
'uicon-woman': '\ue69c',
|
||||
'uicon-man-add': '\ue61c',
|
||||
'uicon-man-add-fill': '\ue64c',
|
||||
'uicon-man-delete': '\ue61a',
|
||||
'uicon-man-delete-fill': '\ue66a',
|
||||
'uicon-zh': '\ue70a',
|
||||
'uicon-en': '\ue692'
|
||||
}
|
||||
89
uni_modules/uview-ui/components/u-icon/props.js
Normal file
89
uni_modules/uview-ui/components/u-icon/props.js
Normal file
@@ -0,0 +1,89 @@
|
||||
export default {
|
||||
props: {
|
||||
// 图标类名
|
||||
name: {
|
||||
type: String,
|
||||
default: uni.$u.props.icon.name
|
||||
},
|
||||
// 图标颜色，可接受主题色
|
||||
color: {
|
||||
type: String,
|
||||
default: uni.$u.props.icon.color
|
||||
},
|
||||
// 字体大小，单位px
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.icon.size
|
||||
},
|
||||
// 是否显示粗体
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.icon.bold
|
||||
},
|
||||
// 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
|
||||
index: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.icon.index
|
||||
},
|
||||
// 触摸图标时的类名
|
||||
hoverClass: {
|
||||
type: String,
|
||||
default: uni.$u.props.icon.hoverClass
|
||||
},
|
||||
// 自定义扩展前缀，方便用户扩展自己的图标库
|
||||
customPrefix: {
|
||||
type: String,
|
||||
default: uni.$u.props.icon.customPrefix
|
||||
},
|
||||
// 图标右边或者下面的文字
|
||||
label: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.icon.label
|
||||
},
|
||||
// label的位置，只能右边或者下边
|
||||
labelPos: {
|
||||
type: String,
|
||||
default: uni.$u.props.icon.labelPos
|
||||
},
|
||||
// label的大小
|
||||
labelSize: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.icon.labelSize
|
||||
},
|
||||
// label的颜色
|
||||
labelColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.icon.labelColor
|
||||
},
|
||||
// label与图标的距离
|
||||
space: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.icon.space
|
||||
},
|
||||
// 图片的mode
|
||||
imgMode: {
|
||||
type: String,
|
||||
default: uni.$u.props.icon.imgMode
|
||||
},
|
||||
// 用于显示图片小图标时，图片的宽度
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.icon.width
|
||||
},
|
||||
// 用于显示图片小图标时，图片的高度
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.icon.height
|
||||
},
|
||||
// 用于解决某些情况下，让图标垂直居中的用途
|
||||
top: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.icon.top
|
||||
},
|
||||
// 是否阻止事件传播
|
||||
stop: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.icon.stop
|
||||
}
|
||||
}
|
||||
}
|
||||
234
uni_modules/uview-ui/components/u-icon/u-icon.vue
Normal file
234
uni_modules/uview-ui/components/u-icon/u-icon.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<view
|
||||
class="u-icon"
|
||||
@tap="clickHandler"
|
||||
:class="['u-icon--' + labelPos]"
|
||||
>
|
||||
<image
|
||||
class="u-icon__img"
|
||||
v-if="isImg"
|
||||
:src="name"
|
||||
:mode="imgMode"
|
||||
:style="[imgStyle, $u.addStyle(customStyle)]"
|
||||
></image>
|
||||
<text
|
||||
v-else
|
||||
class="u-icon__icon"
|
||||
:class="uClasses"
|
||||
:style="[iconStyle, $u.addStyle(customStyle)]"
|
||||
:hover-class="hoverClass"
|
||||
>{{icon}}</text>
|
||||
<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
|
||||
<text
|
||||
v-if="label !== ''"
|
||||
class="u-icon__label"
|
||||
:style="{
|
||||
color: labelColor,
|
||||
fontSize: $u.addUnit(labelSize),
|
||||
marginLeft: labelPos == 'right' ? $u.addUnit(space) : 0,
|
||||
marginTop: labelPos == 'bottom' ? $u.addUnit(space) : 0,
|
||||
marginRight: labelPos == 'left' ? $u.addUnit(space) : 0,
|
||||
marginBottom: labelPos == 'top' ? $u.addUnit(space) : 0,
|
||||
}"
|
||||
>{{ label }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
// nvue通过weex的dom模块引入字体，相关文档地址如下：
|
||||
// https://weex.apache.org/zh/docs/modules/dom.html#addrule
|
||||
const fontUrl = 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf'
|
||||
const domModule = weex.requireModule('dom')
|
||||
domModule.addRule('fontFace', {
|
||||
'fontFamily': "uicon-iconfont",
|
||||
'src': `url('${fontUrl}')`
|
||||
})
|
||||
// #endif
|
||||
|
||||
// 引入图标名称，已经对应的unicode
|
||||
import icons from './icons'
|
||||
|
||||
import props from './props.js';;
|
||||
|
||||
/**
|
||||
* icon 图标
|
||||
* @description 基于字体的图标集，包含了大多数常见场景的图标。
|
||||
* @tutorial https://www.uviewui.com/components/icon.html
|
||||
* @property {String} name 图标名称，见示例图标集
|
||||
* @property {String} color 图标颜色,可接受主题色 （默认 color['u-content-color'] ）
|
||||
* @property {String | Number} size 图标字体大小，单位px （默认 '16px' ）
|
||||
* @property {Boolean} bold 是否显示粗体 （默认 false ）
|
||||
* @property {String | Number} index 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
|
||||
* @property {String} hoverClass 图标按下去的样式类，用法同uni的view组件的hoverClass参数，详情见官网
|
||||
* @property {String} customPrefix 自定义扩展前缀，方便用户扩展自己的图标库 （默认 'uicon' ）
|
||||
* @property {String | Number} label 图标右侧的label文字
|
||||
* @property {String} labelPos label相对于图标的位置，只能right或bottom （默认 'right' ）
|
||||
* @property {String | Number} labelSize label字体大小，单位px （默认 '15px' ）
|
||||
* @property {String} labelColor 图标右侧的label文字颜色 （ 默认 color['u-content-color'] ）
|
||||
* @property {String | Number} space label与图标的距离，单位px （默认 '3px' ）
|
||||
* @property {String} imgMode 图片的mode
|
||||
* @property {String | Number} width 显示图片小图标时的宽度
|
||||
* @property {String | Number} height 显示图片小图标时的高度
|
||||
* @property {String | Number} top 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途 （默认 0 ）
|
||||
* @property {Boolean} stop 是否阻止事件传播 （默认 false ）
|
||||
* @property {Object} customStyle icon的样式，对象形式
|
||||
* @event {Function} click 点击图标时触发
|
||||
* @event {Function} touchstart 事件触摸时触发
|
||||
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-icon',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
|
||||
computed: {
|
||||
uClasses() {
|
||||
let classes = []
|
||||
classes.push(this.customPrefix + '-' + this.name)
|
||||
// // uView的自定义图标类名为u-iconfont
|
||||
// if (this.customPrefix == 'uicon') {
|
||||
// classes.push('u-iconfont')
|
||||
// } else {
|
||||
// classes.push(this.customPrefix)
|
||||
// }
|
||||
// 主题色，通过类配置
|
||||
if (this.color && uni.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
|
||||
// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
|
||||
// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
|
||||
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
|
||||
classes = classes.join(' ')
|
||||
//#endif
|
||||
return classes
|
||||
},
|
||||
iconStyle() {
|
||||
let style = {}
|
||||
style = {
|
||||
fontSize: uni.$u.addUnit(this.size),
|
||||
lineHeight: uni.$u.addUnit(this.size),
|
||||
fontWeight: this.bold ? 'bold' : 'normal',
|
||||
// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
|
||||
top: uni.$u.addUnit(this.top)
|
||||
}
|
||||
// 非主题色值时，才当作颜色值
|
||||
if (this.color && !uni.$u.config.type.includes(this.color)) style.color = this.color
|
||||
|
||||
return style
|
||||
},
|
||||
// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
|
||||
isImg() {
|
||||
return this.name.indexOf('/') !== -1
|
||||
},
|
||||
imgStyle() {
|
||||
let style = {}
|
||||
// 如果设置width和height属性，则优先使用，否则使用size属性
|
||||
style.width = this.width ? uni.$u.addUnit(this.width) : uni.$u.addUnit(this.size)
|
||||
style.height = this.height ? uni.$u.addUnit(this.height) : uni.$u.addUnit(this.size)
|
||||
return style
|
||||
},
|
||||
// 通过图标名，查找对应的图标
|
||||
icon() {
|
||||
// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
|
||||
return icons['uicon-' + this.name] || this.name
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickHandler(e) {
|
||||
this.$emit('click', this.index)
|
||||
// 是否阻止事件冒泡
|
||||
this.stop && this.preventEvent(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
|
||||
// 变量定义
|
||||
$u-icon-primary: $u-primary !default;
|
||||
$u-icon-success: $u-success !default;
|
||||
$u-icon-info: $u-info !default;
|
||||
$u-icon-warning: $u-warning !default;
|
||||
$u-icon-error: $u-error !default;
|
||||
$u-icon-label-line-height:1 !default;
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
// 非nvue下加载字体
|
||||
@font-face {
|
||||
font-family: 'uicon-iconfont';
|
||||
src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype');
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.u-icon {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
|
||||
&--left {
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&--right {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&--top {
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-family: uicon-iconfont;
|
||||
position: relative;
|
||||
@include flex;
|
||||
align-items: center;
|
||||
|
||||
&--primary {
|
||||
color: $u-icon-primary;
|
||||
}
|
||||
|
||||
&--success {
|
||||
color: $u-icon-success;
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: $u-icon-error;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: $u-icon-warning;
|
||||
}
|
||||
|
||||
&--info {
|
||||
color: $u-icon-info;
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
/* #ifndef APP-NVUE */
|
||||
height: auto;
|
||||
will-change: transform;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
&__label {
|
||||
/* #ifndef APP-NVUE */
|
||||
line-height: $u-icon-label-line-height;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
84
uni_modules/uview-ui/components/u-image/props.js
Normal file
84
uni_modules/uview-ui/components/u-image/props.js
Normal file
@@ -0,0 +1,84 @@
|
||||
export default {
|
||||
props: {
|
||||
// 图片地址
|
||||
src: {
|
||||
type: String,
|
||||
default: uni.$u.props.image.src
|
||||
},
|
||||
// 裁剪模式
|
||||
mode: {
|
||||
type: String,
|
||||
default: uni.$u.props.image.mode
|
||||
},
|
||||
// 宽度，单位任意
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.image.width
|
||||
},
|
||||
// 高度，单位任意
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.image.height
|
||||
},
|
||||
// 图片形状，circle-圆形，square-方形
|
||||
shape: {
|
||||
type: String,
|
||||
default: uni.$u.props.image.shape
|
||||
},
|
||||
// 圆角，单位任意
|
||||
radius: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.image.radius
|
||||
},
|
||||
// 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
|
||||
lazyLoad: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.image.lazyLoad
|
||||
},
|
||||
// 开启长按图片显示识别微信小程序码菜单
|
||||
showMenuByLongpress: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.image.showMenuByLongpress
|
||||
},
|
||||
// 加载中的图标，或者小图片
|
||||
loadingIcon: {
|
||||
type: String,
|
||||
default: uni.$u.props.image.loadingIcon
|
||||
},
|
||||
// 加载失败的图标，或者小图片
|
||||
errorIcon: {
|
||||
type: String,
|
||||
default: uni.$u.props.image.errorIcon
|
||||
},
|
||||
// 是否显示加载中的图标或者自定义的slot
|
||||
showLoading: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.image.showLoading
|
||||
},
|
||||
// 是否显示加载错误的图标或者自定义的slot
|
||||
showError: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.image.showError
|
||||
},
|
||||
// 是否需要淡入效果
|
||||
fade: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.image.fade
|
||||
},
|
||||
// 只支持网络资源，只对微信小程序有效
|
||||
webp: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.image.webp
|
||||
},
|
||||
// 过渡时间，单位ms
|
||||
duration: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.image.duration
|
||||
},
|
||||
// 背景颜色，用于深色页面加载图片时，为了和背景色融合
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.image.bgColor
|
||||
}
|
||||
}
|
||||
}
|
||||
232
uni_modules/uview-ui/components/u-image/u-image.vue
Normal file
232
uni_modules/uview-ui/components/u-image/u-image.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<u-transition
|
||||
mode="fade"
|
||||
:show="show"
|
||||
:duration="fade ? 1000 : 0"
|
||||
>
|
||||
<view
|
||||
class="u-image"
|
||||
@tap="onClick"
|
||||
:style="[wrapStyle, backgroundStyle]"
|
||||
>
|
||||
<image
|
||||
v-if="!isError"
|
||||
:src="src"
|
||||
:mode="mode"
|
||||
@error="onErrorHandler"
|
||||
@load="onLoadHandler"
|
||||
:show-menu-by-longpress="showMenuByLongpress"
|
||||
:lazy-load="lazyLoad"
|
||||
class="u-image__image"
|
||||
:style="{
|
||||
borderRadius: shape == 'circle' ? '10000px' : $u.addUnit(radius),
|
||||
width: $u.addUnit(width),
|
||||
height: $u.addUnit(height)
|
||||
}"
|
||||
></image>
|
||||
<view
|
||||
v-if="showLoading && loading"
|
||||
class="u-image__loading"
|
||||
:style="{
|
||||
borderRadius: shape == 'circle' ? '50%' : $u.addUnit(radius),
|
||||
backgroundColor: this.bgColor,
|
||||
width: $u.addUnit(width),
|
||||
height: $u.addUnit(height)
|
||||
}"
|
||||
>
|
||||
<slot name="loading">
|
||||
<u-icon
|
||||
:name="loadingIcon"
|
||||
:width="width"
|
||||
:height="height"
|
||||
></u-icon>
|
||||
</slot>
|
||||
</view>
|
||||
<view
|
||||
v-if="showError && isError && !loading"
|
||||
class="u-image__error"
|
||||
:style="{
|
||||
borderRadius: shape == 'circle' ? '50%' : $u.addUnit(radius),
|
||||
width: $u.addUnit(width),
|
||||
height: $u.addUnit(height)
|
||||
}"
|
||||
>
|
||||
<slot name="error">
|
||||
<u-icon
|
||||
:name="errorIcon"
|
||||
:width="width"
|
||||
:height="height"
|
||||
></u-icon>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</u-transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import props from './props.js';
|
||||
/**
|
||||
* Image 图片
|
||||
* @description 此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
|
||||
* @tutorial https://uviewui.com/components/image.html
|
||||
* @property {String} src 图片地址
|
||||
* @property {String} mode 裁剪模式，见官网说明 （默认 'aspectFill' ）
|
||||
* @property {String | Number} width 宽度，单位任意，如果为数值，则为px单位 （默认 '300' ）
|
||||
* @property {String | Number} height 高度，单位任意，如果为数值，则为px单位 （默认 '225' ）
|
||||
* @property {String} shape 图片形状，circle-圆形，square-方形 （默认 'square' ）
|
||||
* @property {String | Number} radius 圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
|
||||
* @property {Boolean} lazyLoad 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效 （默认 true ）
|
||||
* @property {Boolean} showMenuByLongpress 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效 （默认 true ）
|
||||
* @property {String} loadingIcon 加载中的图标，或者小图片 （默认 'photo' ）
|
||||
* @property {String} errorIcon 加载失败的图标，或者小图片 （默认 'error-circle' ）
|
||||
* @property {Boolean} showLoading 是否显示加载中的图标或者自定义的slot （默认 true ）
|
||||
* @property {Boolean} showError 是否显示加载错误的图标或者自定义的slot （默认 true ）
|
||||
* @property {Boolean} fade 是否需要淡入效果 （默认 true ）
|
||||
* @property {Boolean} webp 只支持网络资源，只对微信小程序有效 （默认 false ）
|
||||
* @property {String | Number} duration 搭配fade参数的过渡时间，单位ms （默认 500 ）
|
||||
* @property {String} bgColor 背景颜色，用于深色页面加载图片时，为了和背景色融合 (默认 '#f3f4f6' )
|
||||
* @property {Object} customStyle 定义需要用到的外部样式
|
||||
* @event {Function} click 点击图片时触发
|
||||
* @event {Function} error 图片加载失败时触发
|
||||
* @event {Function} load 图片加载成功时触发
|
||||
* @example <u-image width="100%" height="300px" :src="src"></u-image>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-image',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
data() {
|
||||
return {
|
||||
// 图片是否加载错误，如果是，则显示错误占位图
|
||||
isError: false,
|
||||
// 初始化组件时，默认为加载中状态
|
||||
loading: true,
|
||||
// 不透明度，为了实现淡入淡出的效果
|
||||
opacity: 1,
|
||||
// 过渡时间，因为props的值无法修改，故需要一个中间值
|
||||
durationTime: this.duration,
|
||||
// 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
|
||||
backgroundStyle: {},
|
||||
// 用于fade模式的控制组件显示与否
|
||||
show: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
src: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
if (!n) {
|
||||
// 如果传入null或者''，或者false，或者undefined，标记为错误状态
|
||||
this.isError = true
|
||||
|
||||
} else {
|
||||
this.isError = false;
|
||||
this.loading = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
wrapStyle() {
|
||||
let style = {};
|
||||
// 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
|
||||
style.width = this.$u.addUnit(this.width);
|
||||
style.height = this.$u.addUnit(this.height);
|
||||
// 如果是显示圆形，设置一个很多的半径值即可
|
||||
style.borderRadius = this.shape == 'circle' ? '10000px' : uni.$u.addUnit(this.radius)
|
||||
// 如果设置圆角，必须要有hidden，否则可能圆角无效
|
||||
style.overflow = this.borderRadius > 0 ? 'hidden' : 'visible'
|
||||
// if (this.fade) {
|
||||
// style.opacity = this.opacity
|
||||
// // nvue下，这几个属性必须要分开写
|
||||
// style.transitionDuration = `${this.durationTime}ms`
|
||||
// style.transitionTimingFunction = 'ease-in-out'
|
||||
// style.transitionProperty = 'opacity'
|
||||
// }
|
||||
return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.show = true
|
||||
},
|
||||
methods: {
|
||||
// 点击图片
|
||||
onClick() {
|
||||
this.$emit('click')
|
||||
},
|
||||
// 图片加载失败
|
||||
onErrorHandler(err) {
|
||||
this.loading = false
|
||||
this.isError = true
|
||||
this.$emit('error', err)
|
||||
},
|
||||
// 图片加载完成，标记loading结束
|
||||
onLoadHandler(event) {
|
||||
this.loading = false
|
||||
this.isError = false
|
||||
this.$emit('load', event)
|
||||
this.removeBgColor()
|
||||
// 如果不需要动画效果，就不执行下方代码，同时移除加载时的背景颜色
|
||||
// 否则无需fade效果时，png图片依然能看到下方的背景色
|
||||
// if (!this.fade) return this.removeBgColor();
|
||||
// // 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的灰色)，再改成1，是为了获得过渡效果
|
||||
// this.opacity = 0;
|
||||
// // 这里设置为0，是为了图片展示到背景全透明这个过程时间为0，延时之后延时之后重新设置为duration，是为了获得背景透明(灰色)
|
||||
// // 到图片展示的过程中的淡入效果
|
||||
// this.durationTime = 0;
|
||||
// // 延时50ms，否则在浏览器H5，过渡效果无效
|
||||
// setTimeout(() => {
|
||||
// this.durationTime = this.duration;
|
||||
// this.opacity = 1;
|
||||
// setTimeout(() => {
|
||||
// this.removeBgColor();
|
||||
// }, this.durationTime);
|
||||
// }, 50);
|
||||
},
|
||||
// 移除图片的背景色
|
||||
removeBgColor() {
|
||||
// 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
|
||||
this.backgroundStyle = {
|
||||
backgroundColor: 'transparent'
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../libs/css/components.scss';
|
||||
|
||||
$u-image-error-top:0px !default;
|
||||
$u-image-error-left:0px !default;
|
||||
$u-image-error-width:100% !default;
|
||||
$u-image-error-hight:100% !default;
|
||||
$u-image-error-background-color:$u-bg-color !default;
|
||||
$u-image-error-color:$u-tips-color !default;
|
||||
$u-image-error-font-size: 46rpx !default;
|
||||
|
||||
.u-image {
|
||||
position: relative;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__loading,
|
||||
&__error {
|
||||
position: absolute;
|
||||
top: $u-image-error-top;
|
||||
left: $u-image-error-left;
|
||||
width: $u-image-error-width;
|
||||
height: $u-image-error-hight;
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $u-image-error-background-color;
|
||||
color: $u-image-error-color;
|
||||
font-size: $u-image-error-font-size;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
187
uni_modules/uview-ui/components/u-input/props.js
Normal file
187
uni_modules/uview-ui/components/u-input/props.js
Normal file
@@ -0,0 +1,187 @@
|
||||
export default {
|
||||
props: {
|
||||
// 输入的值
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.input.value
|
||||
},
|
||||
// 输入框类型
|
||||
// number-数字输入键盘，app-vue下可以输入浮点数，app-nvue和小程序平台下只能输入整数
|
||||
// idcard-身份证输入键盘，微信、支付宝、百度、QQ小程序
|
||||
// digit-带小数点的数字键盘，App的nvue页面、微信、支付宝、百度、头条、QQ小程序
|
||||
// text-文本输入键盘
|
||||
type: {
|
||||
type: String,
|
||||
default: uni.$u.props.input.type
|
||||
},
|
||||
// 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true，
|
||||
// 兼容性：微信小程序、百度小程序、字节跳动小程序、QQ小程序
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.input.fixed
|
||||
},
|
||||
// 是否禁用输入框
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.input.disabled
|
||||
},
|
||||
// 禁用状态时的背景色
|
||||
disabledColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.input.disabledColor
|
||||
},
|
||||
// 是否显示清除控件
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.input.clearable
|
||||
},
|
||||
// 是否密码类型
|
||||
password: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.input.password
|
||||
},
|
||||
// 最大输入长度，设置为 -1 的时候不限制最大长度
|
||||
maxlength: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.input.maxlength
|
||||
},
|
||||
// 输入框为空时的占位符
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: uni.$u.props.input.placeholder
|
||||
},
|
||||
// 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
|
||||
placeholderClass: {
|
||||
type: String,
|
||||
default: uni.$u.props.input.placeholderClass
|
||||
},
|
||||
// 指定placeholder的样式
|
||||
placeholderStyle: {
|
||||
type: [String, Object],
|
||||
default: uni.$u.props.input.placeholderStyle
|
||||
},
|
||||
// 是否显示输入字数统计，只在 type ="text"或type ="textarea"时有效
|
||||
showWordLimit: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.input.showWordLimit
|
||||
},
|
||||
// 设置右下角按钮的文字，有效值：send|search|next|go|done，兼容性详见uni-app文档
|
||||
// https://uniapp.dcloud.io/component/input
|
||||
// https://uniapp.dcloud.io/component/textarea
|
||||
confirmType: {
|
||||
type: String,
|
||||
default: uni.$u.props.input.confirmType
|
||||
},
|
||||
// 点击键盘右下角按钮时是否保持键盘不收起，H5无效
|
||||
confirmHold: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.input.confirmHold
|
||||
},
|
||||
// focus时，点击页面的时候不收起键盘，微信小程序有效
|
||||
holdKeyboard: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.input.holdKeyboard
|
||||
},
|
||||
// 自动获取焦点
|
||||
// 在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点
|
||||
focus: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.input.focus
|
||||
},
|
||||
// 键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效
|
||||
autoBlur: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.input.autoBlur
|
||||
},
|
||||
// 是否去掉 iOS 下的默认内边距，仅微信小程序，且type=textarea时有效
|
||||
disableDefaultPadding: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.input.disableDefaultPadding
|
||||
},
|
||||
// 指定focus时光标的位置
|
||||
cursor: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.input.cursor
|
||||
},
|
||||
// 输入框聚焦时底部与键盘的距离
|
||||
cursorSpacing: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.input.cursorSpacing
|
||||
},
|
||||
// 光标起始位置，自动聚集时有效，需与selection-end搭配使用
|
||||
selectionStart: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.input.selectionStart
|
||||
},
|
||||
// 光标结束位置，自动聚集时有效，需与selection-start搭配使用
|
||||
selectionEnd: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.input.selectionEnd
|
||||
},
|
||||
// 键盘弹起时，是否自动上推页面
|
||||
adjustPosition: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.input.adjustPosition
|
||||
},
|
||||
// 输入框内容对齐方式，可选值为：left|center|right
|
||||
inputAlign: {
|
||||
type: String,
|
||||
default: uni.$u.props.input.inputAlign
|
||||
},
|
||||
// 输入框字体的大小
|
||||
fontSize: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.input.fontSize
|
||||
},
|
||||
// 输入框字体颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: uni.$u.props.input.color
|
||||
},
|
||||
// 输入框前置图标
|
||||
prefixIcon: {
|
||||
type: String,
|
||||
default: uni.$u.props.input.prefixIcon
|
||||
},
|
||||
// 前置图标样式，对象或字符串
|
||||
prefixIconStyle: {
|
||||
type: [String, Object],
|
||||
default: uni.$u.props.input.prefixIconStyle
|
||||
},
|
||||
// 输入框后置图标
|
||||
suffixIcon: {
|
||||
type: String,
|
||||
default: uni.$u.props.input.suffixIcon
|
||||
},
|
||||
// 后置图标样式，对象或字符串
|
||||
suffixIconStyle: {
|
||||
type: [String, Object],
|
||||
default: uni.$u.props.input.suffixIconStyle
|
||||
},
|
||||
// 边框类型，surround-四周边框，bottom-底部边框，none-无边框
|
||||
border: {
|
||||
type: String,
|
||||
default: uni.$u.props.input.border
|
||||
},
|
||||
// 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.input.readonly
|
||||
},
|
||||
// 输入框形状，circle-圆形，square-方形
|
||||
shape: {
|
||||
type: String,
|
||||
default: uni.$u.props.input.shape
|
||||
},
|
||||
// 用于处理或者过滤输入框内容的方法
|
||||
formatter: {
|
||||
type: [Function, null],
|
||||
default: uni.$u.props.input.formatter
|
||||
},
|
||||
// 是否忽略组件内对文本合成系统事件的处理
|
||||
ignoreCompositionEvent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
}
|
||||
354
uni_modules/uview-ui/components/u-input/u-input.vue
Normal file
354
uni_modules/uview-ui/components/u-input/u-input.vue
Normal file
@@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<view class="u-input" :class="inputClass" :style="[wrapperStyle]">
|
||||
<view class="u-input__content">
|
||||
<view
|
||||
class="u-input__content__prefix-icon"
|
||||
v-if="prefixIcon || $slots.prefix"
|
||||
>
|
||||
<slot name="prefix">
|
||||
<u-icon
|
||||
:name="prefixIcon"
|
||||
size="18"
|
||||
:customStyle="prefixIconStyle"
|
||||
></u-icon>
|
||||
</slot>
|
||||
</view>
|
||||
<view class="u-input__content__field-wrapper" @tap="clickHandler">
|
||||
<!-- 根据uni-app的input组件文档，H5和APP中只要声明了password参数(无论true还是false)，type均失效，此时
|
||||
为了防止type=number时，又存在password属性，type无效，此时需要设置password为undefined
|
||||
-->
|
||||
<input
|
||||
class="u-input__content__field-wrapper__field"
|
||||
:style="[inputStyle]"
|
||||
:type="type"
|
||||
:focus="focus"
|
||||
:cursor="cursor"
|
||||
:value="innerValue"
|
||||
:auto-blur="autoBlur"
|
||||
:disabled="disabled || readonly"
|
||||
:maxlength="maxlength"
|
||||
:placeholder="placeholder"
|
||||
:placeholder-style="placeholderStyle"
|
||||
:placeholder-class="placeholderClass"
|
||||
:confirm-type="confirmType"
|
||||
:confirm-hold="confirmHold"
|
||||
:hold-keyboard="holdKeyboard"
|
||||
:cursor-spacing="cursorSpacing"
|
||||
:adjust-position="adjustPosition"
|
||||
:selection-end="selectionEnd"
|
||||
:selection-start="selectionStart"
|
||||
:password="password || type === 'password' || false"
|
||||
:ignoreCompositionEvent="ignoreCompositionEvent"
|
||||
@input="onInput"
|
||||
@blur="onBlur"
|
||||
@focus="onFocus"
|
||||
@confirm="onConfirm"
|
||||
@keyboardheightchange="onkeyboardheightchange"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
class="u-input__content__clear"
|
||||
v-if="isShowClear"
|
||||
@tap="onClear"
|
||||
>
|
||||
<u-icon
|
||||
name="close"
|
||||
size="11"
|
||||
color="#ffffff"
|
||||
customStyle="line-height: 12px"
|
||||
></u-icon>
|
||||
</view>
|
||||
<view
|
||||
class="u-input__content__subfix-icon"
|
||||
v-if="suffixIcon || $slots.suffix"
|
||||
>
|
||||
<slot name="suffix">
|
||||
<u-icon
|
||||
:name="suffixIcon"
|
||||
size="18"
|
||||
:customStyle="suffixIconStyle"
|
||||
></u-icon>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import props from "./props.js";
|
||||
/**
|
||||
* Input 输入框
|
||||
* @description 此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件u-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
|
||||
* @tutorial https://uviewui.com/components/input.html
|
||||
* @property {String | Number} value 输入的值
|
||||
* @property {String} type 输入框类型，见上方说明 （ 默认 'text' ）
|
||||
* @property {Boolean} fixed 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true，兼容性：微信小程序、百度小程序、字节跳动小程序、QQ小程序 （ 默认 false ）
|
||||
* @property {Boolean} disabled 是否禁用输入框 （ 默认 false ）
|
||||
* @property {String} disabledColor 禁用状态时的背景色（ 默认 '#f5f7fa' ）
|
||||
* @property {Boolean} clearable 是否显示清除控件 （ 默认 false ）
|
||||
* @property {Boolean} password 是否密码类型 （ 默认 false ）
|
||||
* @property {String | Number} maxlength 最大输入长度，设置为 -1 的时候不限制最大长度 （ 默认 -1 ）
|
||||
* @property {String} placeholder 输入框为空时的占位符
|
||||
* @property {String} placeholderClass 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ （ 默认 'input-placeholder' ）
|
||||
* @property {String | Object} placeholderStyle 指定placeholder的样式，字符串/对象形式，如"color: red;"
|
||||
* @property {Boolean} showWordLimit 是否显示输入字数统计，只在 type ="text"或type ="textarea"时有效 （ 默认 false ）
|
||||
* @property {String} confirmType 设置右下角按钮的文字，兼容性详见uni-app文档 （ 默认 'done' ）
|
||||
* @property {Boolean} confirmHold 点击键盘右下角按钮时是否保持键盘不收起，H5无效 （ 默认 false ）
|
||||
* @property {Boolean} holdKeyboard focus时，点击页面的时候不收起键盘，微信小程序有效 （ 默认 false ）
|
||||
* @property {Boolean} focus 自动获取焦点，在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点 （ 默认 false ）
|
||||
* @property {Boolean} autoBlur 键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效 （ 默认 false ）
|
||||
* @property {Boolean} disableDefaultPadding 是否去掉 iOS 下的默认内边距，仅微信小程序，且type=textarea时有效 （ 默认 false ）
|
||||
* @property {String ｜ Number} cursor 指定focus时光标的位置（ 默认 -1 ）
|
||||
* @property {String ｜ Number} cursorSpacing 输入框聚焦时底部与键盘的距离 （ 默认 30 ）
|
||||
* @property {String ｜ Number} selectionStart 光标起始位置，自动聚集时有效，需与selection-end搭配使用 （ 默认 -1 ）
|
||||
* @property {String ｜ Number} selectionEnd 光标结束位置，自动聚集时有效，需与selection-start搭配使用 （ 默认 -1 ）
|
||||
* @property {Boolean} adjustPosition 键盘弹起时，是否自动上推页面 （ 默认 true ）
|
||||
* @property {String} inputAlign 输入框内容对齐方式（ 默认 'left' ）
|
||||
* @property {String | Number} fontSize 输入框字体的大小 （ 默认 '15px' ）
|
||||
* @property {String} color 输入框字体颜色 （ 默认 '#303133' ）
|
||||
* @property {Function} formatter 内容式化函数
|
||||
* @property {String} prefixIcon 输入框前置图标
|
||||
* @property {String | Object} prefixIconStyle 前置图标样式，对象或字符串
|
||||
* @property {String} suffixIcon 输入框后置图标
|
||||
* @property {String | Object} suffixIconStyle 后置图标样式，对象或字符串
|
||||
* @property {String} border 边框类型，surround-四周边框，bottom-底部边框，none-无边框 （ 默认 'surround' ）
|
||||
* @property {Boolean} readonly 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会 （ 默认 false ）
|
||||
* @property {String} shape 输入框形状，circle-圆形，square-方形 （ 默认 'square' ）
|
||||
* @property {Object} customStyle 定义需要用到的外部样式
|
||||
* @property {Boolean} ignoreCompositionEvent 是否忽略组件内对文本合成系统事件的处理。
|
||||
* @example <u-input v-model="value" :password="true" suffix-icon="lock-fill" />
|
||||
*/
|
||||
export default {
|
||||
name: "u-input",
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
data() {
|
||||
return {
|
||||
// 输入框的值
|
||||
innerValue: "",
|
||||
// 是否处于获得焦点状态
|
||||
focused: false,
|
||||
// value是否第一次变化，在watch中，由于加入immediate属性，会在第一次触发，此时不应该认为value发生了变化
|
||||
firstChange: true,
|
||||
// value绑定值的变化是由内部还是外部引起的
|
||||
changeFromInner: false,
|
||||
// 过滤处理方法
|
||||
innerFormatter: value => value
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
this.innerValue = newVal;
|
||||
/* #ifdef H5 */
|
||||
// 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
|
||||
if (
|
||||
this.firstChange === false &&
|
||||
this.changeFromInner === false
|
||||
) {
|
||||
this.valueChange();
|
||||
}
|
||||
/* #endif */
|
||||
this.firstChange = false;
|
||||
// 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
|
||||
this.changeFromInner = false;
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
// 是否显示清除控件
|
||||
isShowClear() {
|
||||
const { clearable, readonly, focused, innerValue } = this;
|
||||
return !!clearable && !readonly && !!focused && innerValue !== "";
|
||||
},
|
||||
// 组件的类名
|
||||
inputClass() {
|
||||
let classes = [],
|
||||
{ border, disabled, shape } = this;
|
||||
border === "surround" &&
|
||||
(classes = classes.concat(["u-border", "u-input--radius"]));
|
||||
classes.push(`u-input--${shape}`);
|
||||
border === "bottom" &&
|
||||
(classes = classes.concat([
|
||||
"u-border-bottom",
|
||||
"u-input--no-radius",
|
||||
]));
|
||||
return classes.join(" ");
|
||||
},
|
||||
// 组件的样式
|
||||
wrapperStyle() {
|
||||
const style = {};
|
||||
// 禁用状态下，被背景色加上对应的样式
|
||||
if (this.disabled) {
|
||||
style.backgroundColor = this.disabledColor;
|
||||
}
|
||||
// 无边框时，去除内边距
|
||||
if (this.border === "none") {
|
||||
style.padding = "0";
|
||||
} else {
|
||||
// 由于uni-app的iOS开发者能力有限，导致需要分开写才有效
|
||||
style.paddingTop = "6px";
|
||||
style.paddingBottom = "6px";
|
||||
style.paddingLeft = "9px";
|
||||
style.paddingRight = "9px";
|
||||
}
|
||||
return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
|
||||
},
|
||||
// 输入框的样式
|
||||
inputStyle() {
|
||||
const style = {
|
||||
color: this.color,
|
||||
fontSize: uni.$u.addUnit(this.fontSize),
|
||||
textAlign: this.inputAlign
|
||||
};
|
||||
return style;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
|
||||
setFormatter(e) {
|
||||
this.innerFormatter = e
|
||||
},
|
||||
// 当键盘输入时，触发input事件
|
||||
onInput(e) {
|
||||
let { value = "" } = e.detail || {};
|
||||
// 格式化过滤方法
|
||||
const formatter = this.formatter || this.innerFormatter
|
||||
const formatValue = formatter(value)
|
||||
// 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
|
||||
this.innerValue = value
|
||||
this.$nextTick(() => {
|
||||
this.innerValue = formatValue;
|
||||
this.valueChange();
|
||||
})
|
||||
},
|
||||
// 输入框失去焦点时触发
|
||||
onBlur(event) {
|
||||
this.$emit("blur", event.detail.value);
|
||||
// H5端的blur会先于点击清除控件的点击click事件触发，导致focused
|
||||
// 瞬间为false，从而隐藏了清除控件而无法被点击到
|
||||
uni.$u.sleep(50).then(() => {
|
||||
this.focused = false;
|
||||
});
|
||||
// 尝试调用u-form的验证方法
|
||||
uni.$u.formValidate(this, "blur");
|
||||
},
|
||||
// 输入框聚焦时触发
|
||||
onFocus(event) {
|
||||
this.focused = true;
|
||||
this.$emit("focus");
|
||||
},
|
||||
// 点击完成按钮时触发
|
||||
onConfirm(event) {
|
||||
this.$emit("confirm", this.innerValue);
|
||||
},
|
||||
// 键盘高度发生变化的时候触发此事件
|
||||
// 兼容性：微信小程序2.7.0+、App 3.1.0+
|
||||
onkeyboardheightchange() {
|
||||
this.$emit("keyboardheightchange");
|
||||
},
|
||||
// 内容发生变化，进行处理
|
||||
valueChange() {
|
||||
const value = this.innerValue;
|
||||
this.$nextTick(() => {
|
||||
this.$emit("input", value);
|
||||
// 标识value值的变化是由内部引起的
|
||||
this.changeFromInner = true;
|
||||
this.$emit("change", value);
|
||||
// 尝试调用u-form的验证方法
|
||||
uni.$u.formValidate(this, "change");
|
||||
});
|
||||
},
|
||||
// 点击清除控件
|
||||
onClear() {
|
||||
this.innerValue = "";
|
||||
this.$nextTick(() => {
|
||||
this.valueChange();
|
||||
this.$emit("clear");
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 在安卓nvue上，事件无法冒泡
|
||||
* 在某些时间，我们希望监听u-from-item的点击事件，此时会导致点击u-form-item内的u-input后
|
||||
* 无法触发u-form-item的点击事件，这里通过手动调用u-form-item的方法进行触发
|
||||
*/
|
||||
clickHandler() {
|
||||
// #ifdef APP-NVUE
|
||||
if (uni.$u.os() === "android") {
|
||||
const formItem = uni.$u.$parent.call(this, "u-form-item");
|
||||
if (formItem) {
|
||||
formItem.clickHandler();
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
|
||||
.u-input {
|
||||
@include flex(row);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
|
||||
&--radius,
|
||||
&--square {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&--no-radius {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&--circle {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
@include flex(row);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&__field-wrapper {
|
||||
position: relative;
|
||||
@include flex(row);
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
|
||||
&__field {
|
||||
line-height: 26px;
|
||||
text-align: left;
|
||||
color: $u-main-color;
|
||||
height: 24px;
|
||||
font-size: 15px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__clear {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100px;
|
||||
background-color: #c6c7cb;
|
||||
@include flex(row);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: scale(0.82);
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&__subfix-icon {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&__prefix-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
24
uni_modules/uview-ui/components/u-overlay/props.js
Normal file
24
uni_modules/uview-ui/components/u-overlay/props.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export default {
|
||||
props: {
|
||||
// 是否显示遮罩
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.overlay.show
|
||||
},
|
||||
// 层级z-index
|
||||
zIndex: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.overlay.zIndex
|
||||
},
|
||||
// 遮罩的过渡时间，单位为ms
|
||||
duration: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.overlay.duration
|
||||
},
|
||||
// 不透明度值，当做rgba的第四个参数
|
||||
opacity: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.overlay.opacity
|
||||
}
|
||||
}
|
||||
}
|
||||
68
uni_modules/uview-ui/components/u-overlay/u-overlay.vue
Normal file
68
uni_modules/uview-ui/components/u-overlay/u-overlay.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<u-transition
|
||||
:show="show"
|
||||
custom-class="u-overlay"
|
||||
:duration="duration"
|
||||
:custom-style="overlayStyle"
|
||||
@click="clickHandler"
|
||||
>
|
||||
<slot />
|
||||
</u-transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import props from './props.js';
|
||||
|
||||
/**
|
||||
* overlay 遮罩
|
||||
* @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
|
||||
* @tutorial https://www.uviewui.com/components/overlay.html
|
||||
* @property {Boolean} show 是否显示遮罩（默认 false ）
|
||||
* @property {String | Number} zIndex zIndex 层级（默认 10070 ）
|
||||
* @property {String | Number} duration 动画时长，单位毫秒（默认 300 ）
|
||||
* @property {String | Number} opacity 不透明度值，当做rgba的第四个参数 （默认 0.5 ）
|
||||
* @property {Object} customStyle 定义需要用到的外部样式
|
||||
* @event {Function} click 点击遮罩发送事件
|
||||
* @example <u-overlay :show="show" @click="show = false"></u-overlay>
|
||||
*/
|
||||
export default {
|
||||
name: "u-overlay",
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
|
||||
computed: {
|
||||
overlayStyle() {
|
||||
const style = {
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: this.zIndex,
|
||||
bottom: 0,
|
||||
'background-color': `rgba(0, 0, 0, ${this.opacity})`
|
||||
}
|
||||
return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickHandler() {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
$u-overlay-top:0 !default;
|
||||
$u-overlay-left:0 !default;
|
||||
$u-overlay-width:100% !default;
|
||||
$u-overlay-height:100% !default;
|
||||
$u-overlay-background-color:rgba(0, 0, 0, .7) !default;
|
||||
.u-overlay {
|
||||
position: fixed;
|
||||
top:$u-overlay-top;
|
||||
left:$u-overlay-left;
|
||||
width: $u-overlay-width;
|
||||
height:$u-overlay-height;
|
||||
background-color:$u-overlay-background-color;
|
||||
}
|
||||
</style>
|
||||
499
uni_modules/uview-ui/components/u-parse/node/node.vue
Normal file
499
uni_modules/uview-ui/components/u-parse/node/node.vue
Normal file
@@ -0,0 +1,499 @@
|
||||
<template>
|
||||
<view :id="attrs.id" :class="'_'+name+' '+attrs.class" :style="attrs.style">
|
||||
<block v-for="(n, i) in childs" v-bind:key="i">
|
||||
<!-- 图片 -->
|
||||
<!-- 占位图 -->
|
||||
<image v-if="n.name=='img'&&((opts[1]&&!ctrl[i])||ctrl[i]<0)" class="_img" :style="n.attrs.style" :src="ctrl[i]<0?opts[2]:opts[1]" mode="widthFix" />
|
||||
<!-- 显示图片 -->
|
||||
<!-- #ifdef H5 || APP-PLUS -->
|
||||
<img v-if="n.name=='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]==-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap"/>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 || APP-PLUS -->
|
||||
<image v-if="n.name=='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]==-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;height:1px;'+n.attrs.style" :src="n.attrs.src" :mode="n.h?'':'widthFix'" :lazy-load="opts[0]" :webp="n.webp" :show-menu-by-longpress="opts[3]&&!n.attrs.ignore" :image-menu-prevent="!opts[3]||n.attrs.ignore" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
|
||||
<!-- #endif -->
|
||||
<!-- 文本 -->
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<text v-else-if="n.type=='text'" decode>{{n.text}}</text>
|
||||
<!-- #endif -->
|
||||
<text v-else-if="n.name=='br'">\n</text>
|
||||
<!-- 链接 -->
|
||||
<view v-else-if="n.name=='a'" :id="n.attrs.id" :class="(n.attrs.href?'_a ':'')+n.attrs.class" hover-class="_hover" :style="'display:inline;'+n.attrs.style" :data-i="i" @tap.stop="linkTap">
|
||||
<node name="span" :childs="n.children" :opts="opts" style="display:inherit" />
|
||||
</view>
|
||||
<!-- 视频 -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view v-else-if="n.html" :id="n.attrs.id" :class="'_video '+n.attrs.class" :style="n.attrs.style" v-html="n.html" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<video v-else-if="n.name=='video'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay" :controls="n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" @play="play" @error="mediaError" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 || APP-PLUS -->
|
||||
<iframe v-else-if="n.name=='iframe'" :style="n.attrs.style" :allowfullscreen="n.attrs.allowfullscreen" :frameborder="n.attrs.frameborder" :src="n.attrs.src" />
|
||||
<embed v-else-if="n.name=='embed'" :style="n.attrs.style" :src="n.attrs.src" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-TOUTIAO -->
|
||||
<!-- 音频 -->
|
||||
<audio v-else-if="n.name=='audio'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :author="n.attrs.author" :controls="n.attrs.controls" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" @play="play" @error="mediaError" />
|
||||
<!-- #endif -->
|
||||
<view v-else-if="(n.name=='table'&&n.c)||n.name=='li'" :id="n.attrs.id" :class="'_'+n.name+' '+n.attrs.class" :style="n.attrs.style">
|
||||
<node v-if="n.name=='li'" :childs="n.children" :opts="opts" />
|
||||
<view v-else v-for="(tbody, x) in n.children" v-bind:key="x" :class="'_'+tbody.name+' '+tbody.attrs.class" :style="tbody.attrs.style">
|
||||
<node v-if="tbody.name=='td'||tbody.name=='th'" :childs="tbody.children" :opts="opts" />
|
||||
<block v-else v-for="(tr, y) in tbody.children" v-bind:key="y">
|
||||
<view v-if="tr.name=='td'||tr.name=='th'" :class="'_'+tr.name+' '+tr.attrs.class" :style="tr.attrs.style">
|
||||
<node :childs="tr.children" :opts="opts" />
|
||||
</view>
|
||||
<view v-else :class="'_'+tr.name+' '+tr.attrs.class" :style="tr.attrs.style">
|
||||
<view v-for="(td, z) in tr.children" v-bind:key="z" :class="'_'+td.name+' '+td.attrs.class" :style="td.attrs.style">
|
||||
<node :childs="td.children" :opts="opts" />
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 富文本 -->
|
||||
<!-- #ifdef H5 || MP-WEIXIN || MP-QQ || APP-PLUS || MP-360 -->
|
||||
<rich-text v-else-if="handler.use(n)" :id="n.attrs.id" :style="n.f" :nodes="[n]" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 || MP-WEIXIN || MP-QQ || APP-PLUS || MP-360 -->
|
||||
<rich-text v-else-if="!n.c" :id="n.attrs.id" :style="n.f+';display:inline'" :preview="false" :nodes="[n]" />
|
||||
<!-- #endif -->
|
||||
<!-- 继续递归 -->
|
||||
<view v-else-if="n.c==2" :id="n.attrs.id" :class="'_'+n.name+' '+n.attrs.class" :style="n.f+';'+n.attrs.style">
|
||||
<node v-for="(n2, j) in n.children" v-bind:key="j" :style="n2.f" :name="n2.name" :attrs="n2.attrs" :childs="n2.children" :opts="opts" />
|
||||
</view>
|
||||
<node v-else :style="n.f" :name="n.name" :attrs="n.attrs" :childs="n.children" :opts="opts" />
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
<script module="handler" lang="wxs">
|
||||
// 行内标签列表
|
||||
var inlineTags = {
|
||||
abbr: true,
|
||||
b: true,
|
||||
big: true,
|
||||
code: true,
|
||||
del: true,
|
||||
em: true,
|
||||
i: true,
|
||||
ins: true,
|
||||
label: true,
|
||||
q: true,
|
||||
small: true,
|
||||
span: true,
|
||||
strong: true,
|
||||
sub: true,
|
||||
sup: true
|
||||
}
|
||||
/**
|
||||
* @description 是否使用 rich-text 显示剩余内容
|
||||
*/
|
||||
module.exports = {
|
||||
use: function (item) {
|
||||
// 微信和 QQ 的 rich-text inline 布局无效
|
||||
if (inlineTags[item.name] || (item.attrs.style || '').indexOf('display:inline') != -1)
|
||||
return false
|
||||
return !item.c
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
|
||||
import node from './node'
|
||||
export default {
|
||||
name: 'node',
|
||||
// #ifdef MP-WEIXIN
|
||||
options: {
|
||||
virtualHost: true
|
||||
},
|
||||
// #endif
|
||||
data() {
|
||||
return {
|
||||
ctrl: {}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
name: String,
|
||||
attrs: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
childs: Array,
|
||||
opts: Array
|
||||
},
|
||||
components: {
|
||||
|
||||
node
|
||||
},
|
||||
mounted() {
|
||||
for (this.root = this.$parent; this.root.$options.name != 'mp-html'; this.root = this.root.$parent);
|
||||
// #ifdef H5 || APP-PLUS
|
||||
if (this.opts[0]) {
|
||||
for (var i = this.childs.length; i--;)
|
||||
if (this.childs[i].name == 'img')
|
||||
break
|
||||
if (i != -1) {
|
||||
this.observer = uni.createIntersectionObserver(this).relativeToViewport({
|
||||
top: 500,
|
||||
bottom: 500
|
||||
})
|
||||
this.observer.observe('._img', res => {
|
||||
if (res.intersectionRatio) {
|
||||
this.$set(this.ctrl, 'load', 1)
|
||||
this.observer.disconnect()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
beforeDestroy() {
|
||||
// #ifdef H5 || APP-PLUS
|
||||
if (this.observer)
|
||||
this.observer.disconnect()
|
||||
// #endif
|
||||
},
|
||||
methods:{
|
||||
// #ifdef MP-WEIXIN
|
||||
toJSON() { },
|
||||
// #endif
|
||||
/**
|
||||
* @description 播放视频事件
|
||||
* @param {Event} e
|
||||
*/
|
||||
play(e) {
|
||||
// #ifndef APP-PLUS
|
||||
if (this.root.pauseVideo) {
|
||||
var flag = false, id = e.target.id
|
||||
for (var i = this.root._videos.length; i--;) {
|
||||
if (this.root._videos[i].id == id)
|
||||
flag = true
|
||||
else
|
||||
this.root._videos[i].pause() // 自动暂停其他视频
|
||||
}
|
||||
// 将自己加入列表
|
||||
if (!flag) {
|
||||
var ctx = uni.createVideoContext(id
|
||||
// #ifndef MP-BAIDU
|
||||
, this
|
||||
// #endif
|
||||
)
|
||||
ctx.id = id
|
||||
this.root._videos.push(ctx)
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 图片点击事件
|
||||
* @param {Event} e
|
||||
*/
|
||||
imgTap(e) {
|
||||
var node = this.childs[e.currentTarget.dataset.i]
|
||||
if (node.a)
|
||||
return this.linkTap(node.a)
|
||||
if (node.attrs.ignore)
|
||||
return
|
||||
// #ifdef H5 || APP-PLUS
|
||||
node.attrs.src = node.attrs.src || node.attrs['data-src']
|
||||
// #endif
|
||||
this.root.$emit('imgTap', node.attrs)
|
||||
// 自动预览图片
|
||||
if (this.root.previewImg)
|
||||
uni.previewImage({
|
||||
current: parseInt(node.attrs.i),
|
||||
urls: this.root.imgList
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 图片长按
|
||||
*/
|
||||
imgLongTap(e) {
|
||||
// #ifdef APP-PLUS
|
||||
var attrs = this.childs[e.currentTarget.dataset.i].attrs
|
||||
if (!attrs.ignore)
|
||||
uni.showActionSheet({
|
||||
itemList: ['保存图片'],
|
||||
success: () => {
|
||||
uni.downloadFile({
|
||||
url: this.root.imgList[attrs.i],
|
||||
success: res => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success() {
|
||||
uni.showToast({
|
||||
title: '保存成功'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 图片加载完成事件
|
||||
* @param {Event} e
|
||||
*/
|
||||
imgLoad(e) {
|
||||
var i = e.currentTarget.dataset.i
|
||||
// #ifndef H5 || APP-PLUS
|
||||
// 设置原宽度
|
||||
if (!this.childs[i].w)
|
||||
this.$set(this.ctrl, i, e.detail.width)
|
||||
else
|
||||
// #endif
|
||||
// 加载完毕，取消加载中占位图
|
||||
if ((this.opts[1] && !this.ctrl[i]) || this.ctrl[i] == -1)
|
||||
this.$set(this.ctrl, i, 1)
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 链接点击事件
|
||||
* @param {Event} e
|
||||
*/
|
||||
linkTap(e) {
|
||||
var attrs = e.currentTarget ? this.childs[e.currentTarget.dataset.i].attrs : e,
|
||||
href = attrs.href
|
||||
this.root.$emit('linkTap', attrs)
|
||||
if (href) {
|
||||
// 跳转锚点
|
||||
if (href[0] == '#')
|
||||
this.root.navigateTo(href.substring(1)).catch(() => { })
|
||||
// 复制外部链接
|
||||
else if (href.includes('://')) {
|
||||
if (this.root.copyLink) {
|
||||
// #ifdef H5
|
||||
window.open(href)
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
uni.setClipboardData({
|
||||
data: href,
|
||||
success: () =>
|
||||
uni.showToast({
|
||||
title: '链接已复制'
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
plus.runtime.openWeb(href)
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
// 跳转页面
|
||||
else
|
||||
uni.navigateTo({
|
||||
url: href,
|
||||
fail() {
|
||||
uni.switchTab({
|
||||
url: href,
|
||||
fail() { }
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 错误事件
|
||||
* @param {Event} e
|
||||
*/
|
||||
mediaError(e) {
|
||||
var i = e.currentTarget.dataset.i,
|
||||
node = this.childs[i]
|
||||
// 加载其他源
|
||||
if (node.name == 'video' || node.name == 'audio') {
|
||||
var index = (this.ctrl[i] || 0) + 1
|
||||
if (index > node.src.length)
|
||||
index = 0
|
||||
if (index < node.src.length)
|
||||
return this.$set(this.ctrl, i, index)
|
||||
}
|
||||
// 显示错误占位图
|
||||
else if (node.name == 'img' && this.opts[2])
|
||||
this.$set(this.ctrl, i, -1)
|
||||
if (this.root)
|
||||
this.root.$emit('error', {
|
||||
source: node.name,
|
||||
attrs: node.attrs,
|
||||
errMsg: e.detail.errMsg
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/* a 标签默认效果 */
|
||||
._a {
|
||||
padding: 1.5px 0 1.5px 0;
|
||||
color: #366092;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* a 标签点击态效果 */
|
||||
._hover {
|
||||
text-decoration: underline;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 图片默认效果 */
|
||||
._img {
|
||||
max-width: 100%;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
/* 内部样式 */
|
||||
|
||||
._b,
|
||||
._strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
._code {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
._del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
._em,
|
||||
._i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
._h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
._h2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
._h3 {
|
||||
font-size: 1.17em;
|
||||
}
|
||||
|
||||
._h5 {
|
||||
font-size: 0.83em;
|
||||
}
|
||||
|
||||
._h6 {
|
||||
font-size: 0.67em;
|
||||
}
|
||||
|
||||
._h1,
|
||||
._h2,
|
||||
._h3,
|
||||
._h4,
|
||||
._h5,
|
||||
._h6 {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
._image {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
._ins {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
._li {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
._ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
._ol,
|
||||
._ul {
|
||||
display: block;
|
||||
padding-left: 40px;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
._q::before {
|
||||
content: '"';
|
||||
}
|
||||
|
||||
._q::after {
|
||||
content: '"';
|
||||
}
|
||||
|
||||
._sub {
|
||||
font-size: smaller;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
._sup {
|
||||
font-size: smaller;
|
||||
vertical-align: super;
|
||||
}
|
||||
|
||||
._thead,
|
||||
._tbody,
|
||||
._tfoot {
|
||||
display: table-row-group;
|
||||
}
|
||||
|
||||
._tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
._td,
|
||||
._th {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
._th {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
._ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
._ul ._ul {
|
||||
margin: 0;
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
._ul ._ul ._ul {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
._abbr,
|
||||
._b,
|
||||
._code,
|
||||
._del,
|
||||
._em,
|
||||
._i,
|
||||
._ins,
|
||||
._label,
|
||||
._q,
|
||||
._span,
|
||||
._strong,
|
||||
._sub,
|
||||
._sup {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* #ifdef APP-PLUS */
|
||||
._video {
|
||||
width: 300px;
|
||||
height: 225px;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
1075
uni_modules/uview-ui/components/u-parse/parser.js
Normal file
1075
uni_modules/uview-ui/components/u-parse/parser.js
Normal file
File diff suppressed because it is too large
Load Diff
45
uni_modules/uview-ui/components/u-parse/props.js
Normal file
45
uni_modules/uview-ui/components/u-parse/props.js
Normal file
@@ -0,0 +1,45 @@
|
||||
export default {
|
||||
props: {
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
bgColor: String,
|
||||
// #endif
|
||||
content: String,
|
||||
copyLink: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.parse.copyLink
|
||||
},
|
||||
domain: String,
|
||||
errorImg: {
|
||||
type: String,
|
||||
default: uni.$u.props.parse.errorImg
|
||||
},
|
||||
lazyLoad: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.parse.lazyLoad
|
||||
},
|
||||
loadingImg: {
|
||||
type: String,
|
||||
default: uni.$u.props.parse.loadingImg
|
||||
},
|
||||
pauseVideo: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.parse.pauseVideo
|
||||
},
|
||||
previewImg: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.parse.previewImg
|
||||
},
|
||||
scrollTable: Boolean,
|
||||
selectable: Boolean,
|
||||
setTitle: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.parse.setTitle
|
||||
},
|
||||
showImgMenu: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.parse.showImgMenu
|
||||
},
|
||||
tagStyle: Object,
|
||||
useAnchor: null
|
||||
}
|
||||
}
|
||||
366
uni_modules/uview-ui/components/u-parse/u-parse.vue
Normal file
366
uni_modules/uview-ui/components/u-parse/u-parse.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<view id="_root" :class="(selectable?'_select ':'')+'_root'">
|
||||
<slot v-if="!nodes[0]" />
|
||||
<!-- #ifndef APP-PLUS-NVUE -->
|
||||
<node v-else :childs="nodes" :opts="[lazyLoad,loadingImg,errorImg,showImgMenu]" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS-NVUE -->
|
||||
<web-view ref="web" src="/static/app-plus/mp-html/local.html" :style="'margin-top:-2px;height:' + height + 'px'" @onPostMessage="_onMessage" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import props from './props.js';
|
||||
/**
|
||||
* mp-html v2.0.4
|
||||
* @description 富文本组件
|
||||
* @tutorial https://github.com/jin-yufeng/mp-html
|
||||
* @property {String} bgColor 背景颜色，只适用与APP-PLUS-NVUE
|
||||
* @property {String} content 用于渲染的富文本字符串（默认 true ）
|
||||
* @property {Boolean} copyLink 是否允许外部链接被点击时自动复制
|
||||
* @property {String} domain 主域名，用于拼接链接
|
||||
* @property {String} errorImg 图片出错时的占位图链接
|
||||
* @property {Boolean} lazyLoad 是否开启图片懒加载（默认 true ）
|
||||
* @property {string} loadingImg 图片加载过程中的占位图链接
|
||||
* @property {Boolean} pauseVideo 是否在播放一个视频时自动暂停其它视频（默认 true ）
|
||||
* @property {Boolean} previewImg 是否允许图片被点击时自动预览（默认 true ）
|
||||
* @property {Boolean} scrollTable 是否给每个表格添加一个滚动层使其能单独横向滚动
|
||||
* @property {Boolean} selectable 是否开启长按复制
|
||||
* @property {Boolean} setTitle 是否将 title 标签的内容设置到页面标题（默认 true ）
|
||||
* @property {Boolean} showImgMenu 是否允许图片被长按时显示菜单（默认 true ）
|
||||
* @property {Object} tagStyle 标签的默认样式
|
||||
* @property {Boolean | Number} useAnchor 是否使用锚点链接
|
||||
*
|
||||
* @event {Function} load dom 结构加载完毕时触发
|
||||
* @event {Function} ready 所有图片加载完毕时触发
|
||||
* @event {Function} imgTap 图片被点击时触发
|
||||
* @event {Function} linkTap 链接被点击时触发
|
||||
* @event {Function} error 媒体加载出错时触发
|
||||
*/
|
||||
const plugins=[]
|
||||
const parser = require('./parser')
|
||||
// #ifndef APP-PLUS-NVUE
|
||||
import node from './node/node'
|
||||
// #endif
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
const dom = weex.requireModule('dom')
|
||||
// #endif
|
||||
export default {
|
||||
name: 'mp-html',
|
||||
data() {
|
||||
return {
|
||||
nodes: [],
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
height: 0
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
mixins:[props],
|
||||
// #ifndef APP-PLUS-NVUE
|
||||
components: {
|
||||
node
|
||||
},
|
||||
// #endif
|
||||
watch: {
|
||||
content(content) {
|
||||
this.setContent(content)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.plugins = []
|
||||
for (let i = plugins.length; i--;)
|
||||
this.plugins.push(new plugins[i](this))
|
||||
},
|
||||
mounted() {
|
||||
if (this.content && !this.nodes.length)
|
||||
this.setContent(this.content)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this._hook('onDetached')
|
||||
clearInterval(this._timer)
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description 将锚点跳转的范围限定在一个 scroll-view 内
|
||||
* @param {Object} page scroll-view 所在页面的示例
|
||||
* @param {String} selector scroll-view 的选择器
|
||||
* @param {String} scrollTop scroll-view scroll-top 属性绑定的变量名
|
||||
*/
|
||||
in(page, selector, scrollTop) {
|
||||
// #ifndef APP-PLUS-NVUE
|
||||
if (page && selector && scrollTop)
|
||||
this._in = {
|
||||
page,
|
||||
selector,
|
||||
scrollTop
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 锚点跳转
|
||||
* @param {String} id 要跳转的锚点 id
|
||||
* @param {Number} offset 跳转位置的偏移量
|
||||
* @returns {Promise}
|
||||
*/
|
||||
navigateTo(id, offset) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!this.useAnchor)
|
||||
return reject('Anchor is disabled')
|
||||
offset = offset || parseInt(this.useAnchor) || 0
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
if (!id) {
|
||||
dom.scrollToElement(this.$refs.web, {
|
||||
offset
|
||||
})
|
||||
resolve()
|
||||
} else {
|
||||
this._navigateTo = {
|
||||
resolve,
|
||||
reject,
|
||||
offset
|
||||
}
|
||||
this.$refs.web.evalJs('uni.postMessage({data:{action:"getOffset",offset:(document.getElementById(' + id + ')||{}).offsetTop}})')
|
||||
}
|
||||
// #endif
|
||||
// #ifndef APP-PLUS-NVUE
|
||||
let deep = ' '
|
||||
// #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO
|
||||
deep = '>>>'
|
||||
// #endif
|
||||
const selector = uni.createSelectorQuery()
|
||||
// #ifndef MP-ALIPAY
|
||||
.in(this._in ? this._in.page : this)
|
||||
// #endif
|
||||
.select((this._in ? this._in.selector : '._root') + (id ? `${deep}#${id}` : '')).boundingClientRect()
|
||||
if (this._in)
|
||||
selector.select(this._in.selector).scrollOffset()
|
||||
.select(this._in.selector).boundingClientRect() // 获取 scroll-view 的位置和滚动距离
|
||||
else
|
||||
selector.selectViewport().scrollOffset() // 获取窗口的滚动距离
|
||||
selector.exec(res => {
|
||||
if (!res[0])
|
||||
return reject('Label not found')
|
||||
const scrollTop = res[1].scrollTop + res[0].top - (res[2] ? res[2].top : 0) + offset
|
||||
if (this._in)
|
||||
// scroll-view 跳转
|
||||
this._in.page[this._in.scrollTop] = scrollTop
|
||||
else
|
||||
// 页面跳转
|
||||
uni.pageScrollTo({
|
||||
scrollTop,
|
||||
duration: 300
|
||||
})
|
||||
resolve()
|
||||
})
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 获取文本内容
|
||||
* @return {String}
|
||||
*/
|
||||
getText() {
|
||||
let text = '';
|
||||
(function traversal(nodes) {
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const node = nodes[i]
|
||||
if (node.type == 'text')
|
||||
text += node.text.replace(/&/g, '&')
|
||||
else if (node.name == 'br')
|
||||
text += '\n'
|
||||
else {
|
||||
// 块级标签前后加换行
|
||||
const isBlock = node.name == 'p' || node.name == 'div' || node.name == 'tr' || node.name == 'li' || (node.name[0] == 'h' && node.name[1] > '0' && node.name[1] < '7')
|
||||
if (isBlock && text && text[text.length - 1] != '\n')
|
||||
text += '\n'
|
||||
// 递归获取子节点的文本
|
||||
if (node.children)
|
||||
traversal(node.children)
|
||||
if (isBlock && text[text.length - 1] != '\n')
|
||||
text += '\n'
|
||||
else if (node.name == 'td' || node.name == 'th')
|
||||
text += '\t'
|
||||
}
|
||||
}
|
||||
})(this.nodes)
|
||||
return text
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 获取内容大小和位置
|
||||
* @return {Promise}
|
||||
*/
|
||||
getRect() {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.createSelectorQuery()
|
||||
// #ifndef MP-ALIPAY
|
||||
.in(this)
|
||||
// #endif
|
||||
.select('#_root').boundingClientRect().exec(res => res[0] ? resolve(res[0]) : reject('Root label not found'))
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 设置内容
|
||||
* @param {String} content html 内容
|
||||
* @param {Boolean} append 是否在尾部追加
|
||||
*/
|
||||
setContent(content, append) {
|
||||
if (!append || !this.imgList)
|
||||
this.imgList = []
|
||||
const nodes = new parser(this).parse(content)
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
if (this._ready)
|
||||
this._set(nodes, append)
|
||||
// #endif
|
||||
this.$set(this, 'nodes', append ? (this.nodes || []).concat(nodes) : nodes)
|
||||
|
||||
// #ifndef APP-PLUS-NVUE
|
||||
this._videos = []
|
||||
this.$nextTick(() => {
|
||||
this._hook('onLoad')
|
||||
this.$emit('load')
|
||||
})
|
||||
|
||||
// 等待图片加载完毕
|
||||
let height
|
||||
clearInterval(this._timer)
|
||||
this._timer = setInterval(() => {
|
||||
this.getRect().then(rect => {
|
||||
// 350ms 总高度无变化就触发 ready 事件
|
||||
if (rect.height == height) {
|
||||
this.$emit('ready', rect)
|
||||
clearInterval(this._timer)
|
||||
}
|
||||
height = rect.height
|
||||
}).catch(() => { })
|
||||
}, 350)
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 调用插件钩子函数
|
||||
*/
|
||||
_hook(name) {
|
||||
for (let i = plugins.length; i--;)
|
||||
if (this.plugins[i][name])
|
||||
this.plugins[i][name]()
|
||||
},
|
||||
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
/**
|
||||
* @description 设置内容
|
||||
*/
|
||||
_set(nodes, append) {
|
||||
this.$refs.web.evalJs('setContent(' + JSON.stringify(nodes) + ',' + JSON.stringify([this.bgColor, this.errorImg, this.loadingImg, this.pauseVideo, this.scrollTable, this.selectable]) + ',' + append + ')')
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 接收到 web-view 消息
|
||||
*/
|
||||
_onMessage(e) {
|
||||
const message = e.detail.data[0]
|
||||
switch (message.action) {
|
||||
// web-view 初始化完毕
|
||||
case 'onJSBridgeReady':
|
||||
this._ready = true
|
||||
if (this.nodes)
|
||||
this._set(this.nodes)
|
||||
break
|
||||
// 内容 dom 加载完毕
|
||||
case 'onLoad':
|
||||
this.height = message.height
|
||||
this._hook('onLoad')
|
||||
this.$emit('load')
|
||||
break
|
||||
// 所有图片加载完毕
|
||||
case 'onReady':
|
||||
this.getRect().then(res => {
|
||||
this.$emit('ready', res)
|
||||
}).catch(() => { })
|
||||
break
|
||||
// 总高度发生变化
|
||||
case 'onHeightChange':
|
||||
this.height = message.height
|
||||
break
|
||||
// 图片点击
|
||||
case 'onImgTap':
|
||||
this.$emit('imgTap', message.attrs)
|
||||
if (this.previewImg)
|
||||
uni.previewImage({
|
||||
current: parseInt(message.attrs.i),
|
||||
urls: this.imgList
|
||||
})
|
||||
break
|
||||
// 链接点击
|
||||
case 'onLinkTap':
|
||||
const href = message.attrs.href
|
||||
this.$emit('linkTap', message.attrs)
|
||||
if (href) {
|
||||
// 锚点跳转
|
||||
if (href[0] == '#') {
|
||||
if (this.useAnchor)
|
||||
dom.scrollToElement(this.$refs.web, {
|
||||
offset: message.offset
|
||||
})
|
||||
}
|
||||
// 打开外链
|
||||
else if (href.includes('://')) {
|
||||
if (this.copyLink)
|
||||
plus.runtime.openWeb(href)
|
||||
}
|
||||
else
|
||||
uni.navigateTo({
|
||||
url: href,
|
||||
fail() {
|
||||
wx.switchTab({
|
||||
url: href
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
break
|
||||
// 获取到锚点的偏移量
|
||||
case 'getOffset':
|
||||
if (typeof message.offset == 'number') {
|
||||
dom.scrollToElement(this.$refs.web, {
|
||||
offset: message.offset + this._navigateTo.offset
|
||||
})
|
||||
this._navigateTo.resolve()
|
||||
} else
|
||||
this._navigateTo.reject('Label not found')
|
||||
break
|
||||
// 点击
|
||||
case 'onClick':
|
||||
this.$emit('tap')
|
||||
break
|
||||
// 出错
|
||||
case 'onError':
|
||||
this.$emit('error', {
|
||||
source: message.source,
|
||||
attrs: message.attrs
|
||||
})
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* #ifndef APP-PLUS-NVUE */
|
||||
/* 根节点样式 */
|
||||
._root {
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* 长按复制 */
|
||||
._select {
|
||||
user-select: text;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
5
uni_modules/uview-ui/components/u-picker-column/props.js
Normal file
5
uni_modules/uview-ui/components/u-picker-column/props.js
Normal file
@@ -0,0 +1,5 @@
|
||||
export default {
|
||||
props: {
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<picker-view-column>
|
||||
<view class="u-picker-column">
|
||||
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import props from './props.js';
|
||||
/**
|
||||
* PickerColumn
|
||||
* @description
|
||||
* @tutorial url
|
||||
* @property {String}
|
||||
* @event {Function}
|
||||
* @example
|
||||
*/
|
||||
export default {
|
||||
name: 'u-picker-column',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
</style>
|
||||
79
uni_modules/uview-ui/components/u-picker/props.js
Normal file
79
uni_modules/uview-ui/components/u-picker/props.js
Normal file
@@ -0,0 +1,79 @@
|
||||
export default {
|
||||
props: {
|
||||
// 是否展示picker弹窗
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.picker.show
|
||||
},
|
||||
// 是否展示顶部的操作栏
|
||||
showToolbar: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.picker.showToolbar
|
||||
},
|
||||
// 顶部标题
|
||||
title: {
|
||||
type: String,
|
||||
default: uni.$u.props.picker.title
|
||||
},
|
||||
// 对象数组，设置每一列的数据
|
||||
columns: {
|
||||
type: Array,
|
||||
default: uni.$u.props.picker.columns
|
||||
},
|
||||
// 是否显示加载中状态
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.picker.loading
|
||||
},
|
||||
// 各列中，单个选项的高度
|
||||
itemHeight: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.picker.itemHeight
|
||||
},
|
||||
// 取消按钮的文字
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: uni.$u.props.picker.cancelText
|
||||
},
|
||||
// 确认按钮的文字
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: uni.$u.props.picker.confirmText
|
||||
},
|
||||
// 取消按钮的颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.picker.cancelColor
|
||||
},
|
||||
// 确认按钮的颜色
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.picker.confirmColor
|
||||
},
|
||||
// 每列中可见选项的数量
|
||||
visibleItemCount: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.picker.visibleItemCount
|
||||
},
|
||||
// 选项对象中，需要展示的属性键名
|
||||
keyName: {
|
||||
type: String,
|
||||
default: uni.$u.props.picker.keyName
|
||||
},
|
||||
// 是否允许点击遮罩关闭选择器
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.picker.closeOnClickOverlay
|
||||
},
|
||||
// 各列的默认索引
|
||||
defaultIndex: {
|
||||
type: Array,
|
||||
default: uni.$u.props.picker.defaultIndex
|
||||
},
|
||||
// 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，只在微信2.21.1及以上有效
|
||||
immediateChange: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.picker.immediateChange
|
||||
}
|
||||
}
|
||||
}
|
||||
286
uni_modules/uview-ui/components/u-picker/u-picker.vue
Normal file
286
uni_modules/uview-ui/components/u-picker/u-picker.vue
Normal file
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<u-popup
|
||||
:show="show"
|
||||
@close="closeHandler"
|
||||
>
|
||||
<view class="u-picker">
|
||||
<u-toolbar
|
||||
v-if="showToolbar"
|
||||
:cancelColor="cancelColor"
|
||||
:confirmColor="confirmColor"
|
||||
:cancelText="cancelText"
|
||||
:confirmText="confirmText"
|
||||
:title="title"
|
||||
@cancel="cancel"
|
||||
@confirm="confirm"
|
||||
></u-toolbar>
|
||||
<picker-view
|
||||
class="u-picker__view"
|
||||
:indicatorStyle="`height: ${$u.addUnit(itemHeight)}`"
|
||||
:value="innerIndex"
|
||||
:immediateChange="immediateChange"
|
||||
:style="{
|
||||
height: `${$u.addUnit(visibleItemCount * itemHeight)}`
|
||||
}"
|
||||
@change="changeHandler"
|
||||
>
|
||||
<picker-view-column
|
||||
v-for="(item, index) in innerColumns"
|
||||
:key="index"
|
||||
class="u-picker__view__column"
|
||||
>
|
||||
<text
|
||||
v-if="$u.test.array(item)"
|
||||
class="u-picker__view__column__item u-line-1"
|
||||
v-for="(item1, index1) in item"
|
||||
:key="index1"
|
||||
:style="{
|
||||
height: $u.addUnit(itemHeight),
|
||||
lineHeight: $u.addUnit(itemHeight),
|
||||
fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal',
|
||||
display: 'block'
|
||||
}"
|
||||
>{{ getItemText(item1) }}</text>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<view
|
||||
v-if="loading"
|
||||
class="u-picker--loading"
|
||||
>
|
||||
<u-loading-icon mode="circle"></u-loading-icon>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* u-picker
|
||||
* @description 选择器
|
||||
* @property {Boolean} show 是否显示picker弹窗（默认 false ）
|
||||
* @property {Boolean} showToolbar 是否显示顶部的操作栏（默认 true ）
|
||||
* @property {String} title 顶部标题
|
||||
* @property {Array} columns 对象数组，设置每一列的数据
|
||||
* @property {Boolean} loading 是否显示加载中状态（默认 false ）
|
||||
* @property {String | Number} itemHeight 各列中，单个选项的高度（默认 44 ）
|
||||
* @property {String} cancelText 取消按钮的文字（默认 '取消' ）
|
||||
* @property {String} confirmText 确认按钮的文字（默认 '确定' ）
|
||||
* @property {String} cancelColor 取消按钮的颜色（默认 '#909193' ）
|
||||
* @property {String} confirmColor 确认按钮的颜色（默认 '#3c9cff' ）
|
||||
* @property {String | Number} visibleItemCount 每列中可见选项的数量（默认 5 ）
|
||||
* @property {String} keyName 选项对象中，需要展示的属性键名（默认 'text' ）
|
||||
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭选择器（默认 false ）
|
||||
* @property {Array} defaultIndex 各列的默认索引
|
||||
* @property {Boolean} immediateChange 是否在手指松开时立即触发change事件（默认 false ）
|
||||
* @event {Function} close 关闭选择器时触发
|
||||
* @event {Function} cancel 点击取消按钮触发
|
||||
* @event {Function} change 当选择值变化时触发
|
||||
* @event {Function} confirm 点击确定按钮，返回当前选择的值
|
||||
*/
|
||||
import props from './props.js';
|
||||
export default {
|
||||
name: 'u-picker',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
data() {
|
||||
return {
|
||||
// 上一次选择的列索引
|
||||
lastIndex: [],
|
||||
// 索引值 ，对应picker-view的value
|
||||
innerIndex: [],
|
||||
// 各列的值
|
||||
innerColumns: [],
|
||||
// 上一次的变化列索引
|
||||
columnIndex: 0,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听默认索引的变化，重新设置对应的值
|
||||
defaultIndex: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setIndexs(n, true)
|
||||
}
|
||||
},
|
||||
// 监听columns参数的变化
|
||||
columns: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setColumns(n)
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取item需要显示的文字，判别为对象还是文本
|
||||
getItemText(item) {
|
||||
if (uni.$u.test.object(item)) {
|
||||
return item[this.keyName]
|
||||
} else {
|
||||
return item
|
||||
}
|
||||
},
|
||||
// 关闭选择器
|
||||
closeHandler() {
|
||||
if (this.closeOnClickOverlay) {
|
||||
this.$emit('close')
|
||||
}
|
||||
},
|
||||
// 点击工具栏的取消按钮
|
||||
cancel() {
|
||||
this.$emit('cancel')
|
||||
},
|
||||
// 点击工具栏的确定按钮
|
||||
confirm() {
|
||||
this.$emit('confirm', {
|
||||
indexs: this.innerIndex,
|
||||
value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]),
|
||||
values: this.innerColumns
|
||||
})
|
||||
},
|
||||
// 选择器某一列的数据发生变化时触发
|
||||
changeHandler(e) {
|
||||
const {
|
||||
value
|
||||
} = e.detail
|
||||
let index = 0,
|
||||
columnIndex = 0
|
||||
// 通过对比前后两次的列索引，得出当前变化的是哪一列
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
let item = value[i]
|
||||
if (item !== (this.lastIndex[i] || 0)) { // 把undefined转为合法假值0
|
||||
// 设置columnIndex为当前变化列的索引
|
||||
columnIndex = i
|
||||
// index则为变化列中的变化项的索引
|
||||
index = item
|
||||
break // 终止循环，即使少一次循环，也是性能的提升
|
||||
}
|
||||
}
|
||||
this.columnIndex = columnIndex
|
||||
const values = this.innerColumns
|
||||
// 将当前的各项变化索引，设置为"上一次"的索引变化值
|
||||
this.setLastIndex(value)
|
||||
this.setIndexs(value)
|
||||
|
||||
this.$emit('change', {
|
||||
// #ifndef MP-WEIXIN || MP-LARK || MP-TOUTIAO
|
||||
// 微信小程序不能传递this，会因为循环引用而报错
|
||||
picker: this,
|
||||
// #endif
|
||||
value: this.innerColumns.map((item, index) => item[value[index]]),
|
||||
index,
|
||||
indexs: value,
|
||||
// values为当前变化列的数组内容
|
||||
values,
|
||||
columnIndex
|
||||
})
|
||||
},
|
||||
// 设置index索引，此方法可被外部调用设置
|
||||
setIndexs(index, setLastIndex) {
|
||||
this.innerIndex = uni.$u.deepClone(index)
|
||||
if (setLastIndex) {
|
||||
this.setLastIndex(index)
|
||||
}
|
||||
},
|
||||
// 记录上一次的各列索引位置
|
||||
setLastIndex(index) {
|
||||
// 当能进入此方法，意味着当前设置的各列默认索引，即为“上一次”的选中值，需要记录，是因为changeHandler中
|
||||
// 需要拿前后的变化值进行对比，得出当前发生改变的是哪一列
|
||||
this.lastIndex = uni.$u.deepClone(index)
|
||||
},
|
||||
// 设置对应列选项的所有值
|
||||
setColumnValues(columnIndex, values) {
|
||||
// 替换innerColumns数组中columnIndex索引的值为values，使用的是数组的splice方法
|
||||
this.innerColumns.splice(columnIndex, 1, values)
|
||||
// 替换完成之后将修改列之后的已选值置空
|
||||
this.setLastIndex(this.innerIndex.slice(0,columnIndex))
|
||||
// 拷贝一份原有的innerIndex做临时变量，将大于当前变化列的所有的列的默认索引设置为0
|
||||
let tmpIndex = uni.$u.deepClone(this.innerIndex)
|
||||
for (let i = 0; i < this.innerColumns.length; i++) {
|
||||
if (i > this.columnIndex) {
|
||||
tmpIndex[i] = 0
|
||||
}
|
||||
}
|
||||
// 一次性赋值，不能单个修改，否则无效
|
||||
this.setIndexs(tmpIndex)
|
||||
},
|
||||
// 获取对应列的所有选项
|
||||
getColumnValues(columnIndex) {
|
||||
// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
|
||||
// 索引如果在外部change的回调中调用getColumnValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
|
||||
(async () => {
|
||||
await uni.$u.sleep()
|
||||
})()
|
||||
return this.innerColumns[columnIndex]
|
||||
},
|
||||
// 设置整体各列的columns的值
|
||||
setColumns(columns) {
|
||||
this.innerColumns = uni.$u.deepClone(columns)
|
||||
// 如果在设置各列数据时，没有被设置默认的各列索引defaultIndex，那么用0去填充它，数组长度为列的数量
|
||||
if (this.innerIndex.length === 0) {
|
||||
this.innerIndex = new Array(columns.length).fill(0)
|
||||
}
|
||||
},
|
||||
// 获取各列选中值对应的索引
|
||||
getIndexs() {
|
||||
return this.innerIndex
|
||||
},
|
||||
// 获取各列选中的值
|
||||
getValues() {
|
||||
// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
|
||||
// 索引如果在外部change的回调中调用getValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
|
||||
(async () => {
|
||||
await uni.$u.sleep()
|
||||
})()
|
||||
return this.innerColumns.map((item, index) => item[this.innerIndex[index]])
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
|
||||
.u-picker {
|
||||
position: relative;
|
||||
|
||||
&__view {
|
||||
|
||||
&__column {
|
||||
@include flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
|
||||
&__item {
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
color: $u-main-color;
|
||||
|
||||
&--disabled {
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.87);
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
79
uni_modules/uview-ui/components/u-popup/props.js
Normal file
79
uni_modules/uview-ui/components/u-popup/props.js
Normal file
@@ -0,0 +1,79 @@
|
||||
export default {
|
||||
props: {
|
||||
// 是否展示弹窗
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.popup.show
|
||||
},
|
||||
// 是否显示遮罩
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.popup.overlay
|
||||
},
|
||||
// 弹出的方向，可选值为 top bottom right left center
|
||||
mode: {
|
||||
type: String,
|
||||
default: uni.$u.props.popup.mode
|
||||
},
|
||||
// 动画时长，单位ms
|
||||
duration: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.popup.duration
|
||||
},
|
||||
// 是否显示关闭图标
|
||||
closeable: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.popup.closeable
|
||||
},
|
||||
// 自定义遮罩的样式
|
||||
overlayStyle: {
|
||||
type: [Object, String],
|
||||
default: uni.$u.props.popup.overlayStyle
|
||||
},
|
||||
// 点击遮罩是否关闭弹窗
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.popup.closeOnClickOverlay
|
||||
},
|
||||
// 层级
|
||||
zIndex: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.popup.zIndex
|
||||
},
|
||||
// 是否为iPhoneX留出底部安全距离
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.popup.safeAreaInsetBottom
|
||||
},
|
||||
// 是否留出顶部安全距离（状态栏高度）
|
||||
safeAreaInsetTop: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.popup.safeAreaInsetTop
|
||||
},
|
||||
// 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
|
||||
closeIconPos: {
|
||||
type: String,
|
||||
default: uni.$u.props.popup.closeIconPos
|
||||
},
|
||||
// 是否显示圆角
|
||||
round: {
|
||||
type: [Boolean, String, Number],
|
||||
default: uni.$u.props.popup.round
|
||||
},
|
||||
// mode=center，也即中部弹出时，是否使用缩放模式
|
||||
zoom: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.popup.zoom
|
||||
},
|
||||
// 弹窗背景色，设置为transparent可去除白色背景
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.popup.bgColor
|
||||
},
|
||||
// 遮罩的透明度，0-1之间
|
||||
overlayOpacity: {
|
||||
type: [Number, String],
|
||||
default: uni.$u.props.popup.overlayOpacity
|
||||
}
|
||||
}
|
||||
}
|
||||
304
uni_modules/uview-ui/components/u-popup/u-popup.vue
Normal file
304
uni_modules/uview-ui/components/u-popup/u-popup.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<view class="u-popup">
|
||||
<u-overlay
|
||||
:show="show"
|
||||
@click="overlayClick"
|
||||
v-if="overlay"
|
||||
:duration="overlayDuration"
|
||||
:customStyle="overlayStyle"
|
||||
:opacity="overlayOpacity"
|
||||
></u-overlay>
|
||||
<u-transition
|
||||
:show="show"
|
||||
:customStyle="transitionStyle"
|
||||
:mode="position"
|
||||
:duration="duration"
|
||||
@afterEnter="afterEnter"
|
||||
@click="clickHandler"
|
||||
>
|
||||
<view
|
||||
class="u-popup__content"
|
||||
:style="[contentStyle]"
|
||||
@tap.stop="noop"
|
||||
>
|
||||
<u-status-bar v-if="safeAreaInsetTop"></u-status-bar>
|
||||
<slot></slot>
|
||||
<view
|
||||
v-if="closeable"
|
||||
@tap.stop="close"
|
||||
class="u-popup__content__close"
|
||||
:class="['u-popup__content__close--' + closeIconPos]"
|
||||
hover-class="u-popup__content__close--hover"
|
||||
hover-stay-time="150"
|
||||
>
|
||||
<u-icon
|
||||
name="close"
|
||||
color="#909399"
|
||||
size="18"
|
||||
bold
|
||||
></u-icon>
|
||||
</view>
|
||||
<u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import props from './props.js';
|
||||
|
||||
/**
|
||||
* popup 弹窗
|
||||
* @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
|
||||
* @tutorial https://www.uviewui.com/components/popup.html
|
||||
* @property {Boolean} show 是否展示弹窗 (默认 false )
|
||||
* @property {Boolean} overlay 是否显示遮罩 （默认 true ）
|
||||
* @property {String} mode 弹出方向（默认 'bottom' ）
|
||||
* @property {String | Number} duration 动画时长，单位ms （默认 300 ）
|
||||
* @property {String | Number} overlayDuration 遮罩层动画时长，单位ms （默认 350 ）
|
||||
* @property {Boolean} closeable 是否显示关闭图标（默认 false ）
|
||||
* @property {Object | String} overlayStyle 自定义遮罩的样式
|
||||
* @property {String | Number} overlayOpacity 遮罩透明度，0-1之间（默认 0.5）
|
||||
* @property {Boolean} closeOnClickOverlay 点击遮罩是否关闭弹窗 （默认 true ）
|
||||
* @property {String | Number} zIndex 层级 （默认 10075 ）
|
||||
* @property {Boolean} safeAreaInsetBottom 是否为iPhoneX留出底部安全距离 （默认 true ）
|
||||
* @property {Boolean} safeAreaInsetTop 是否留出顶部安全距离（状态栏高度） （默认 false ）
|
||||
* @property {String} closeIconPos 自定义关闭图标位置（默认 'top-right' ）
|
||||
* @property {String | Number} round 圆角值（默认 0）
|
||||
* @property {Boolean} zoom 当mode=center时 是否开启缩放（默认 true ）
|
||||
* @property {Object} customStyle 组件的样式，对象形式
|
||||
* @event {Function} open 弹出层打开
|
||||
* @event {Function} close 弹出层收起
|
||||
* @example <u-popup v-model="show"><text>出淤泥而不染，濯清涟而不妖</text></u-popup>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-popup',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
data() {
|
||||
return {
|
||||
overlayDuration: this.duration + 50
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(newValue, oldValue) {
|
||||
if (newValue === true) {
|
||||
// #ifdef MP-WEIXIN
|
||||
const children = this.$children
|
||||
this.retryComputedComponentRect(children)
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
transitionStyle() {
|
||||
const style = {
|
||||
zIndex: this.zIndex,
|
||||
position: 'fixed',
|
||||
display: 'flex',
|
||||
}
|
||||
style[this.mode] = 0
|
||||
if (this.mode === 'left') {
|
||||
return uni.$u.deepMerge(style, {
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
})
|
||||
} else if (this.mode === 'right') {
|
||||
return uni.$u.deepMerge(style, {
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
})
|
||||
} else if (this.mode === 'top') {
|
||||
return uni.$u.deepMerge(style, {
|
||||
left: 0,
|
||||
right: 0
|
||||
})
|
||||
} else if (this.mode === 'bottom') {
|
||||
return uni.$u.deepMerge(style, {
|
||||
left: 0,
|
||||
right: 0,
|
||||
})
|
||||
} else if (this.mode === 'center') {
|
||||
return uni.$u.deepMerge(style, {
|
||||
alignItems: 'center',
|
||||
'justify-content': 'center',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0
|
||||
})
|
||||
}
|
||||
},
|
||||
contentStyle() {
|
||||
const style = {}
|
||||
// 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
|
||||
// 不使用css方案，是因为nvue不支持css的iPhoneX安全区查询属性
|
||||
const {
|
||||
safeAreaInsets
|
||||
} = uni.$u.sys()
|
||||
if (this.mode !== 'center') {
|
||||
style.flex = 1
|
||||
}
|
||||
// 背景色，一般用于设置为transparent，去除默认的白色背景
|
||||
if (this.bgColor) {
|
||||
style.backgroundColor = this.bgColor
|
||||
}
|
||||
if(this.round) {
|
||||
const value = uni.$u.addUnit(this.round)
|
||||
if(this.mode === 'top') {
|
||||
style.borderBottomLeftRadius = value
|
||||
style.borderBottomRightRadius = value
|
||||
} else if(this.mode === 'bottom') {
|
||||
style.borderTopLeftRadius = value
|
||||
style.borderTopRightRadius = value
|
||||
} else if(this.mode === 'center') {
|
||||
style.borderRadius = value
|
||||
}
|
||||
}
|
||||
return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
|
||||
},
|
||||
position() {
|
||||
if (this.mode === 'center') {
|
||||
return this.zoom ? 'fade-zoom' : 'fade'
|
||||
}
|
||||
if (this.mode === 'left') {
|
||||
return 'slide-left'
|
||||
}
|
||||
if (this.mode === 'right') {
|
||||
return 'slide-right'
|
||||
}
|
||||
if (this.mode === 'bottom') {
|
||||
return 'slide-up'
|
||||
}
|
||||
if (this.mode === 'top') {
|
||||
return 'slide-down'
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 点击遮罩
|
||||
overlayClick() {
|
||||
if (this.closeOnClickOverlay) {
|
||||
this.$emit('close')
|
||||
}
|
||||
},
|
||||
close(e) {
|
||||
this.$emit('close')
|
||||
},
|
||||
afterEnter() {
|
||||
this.$emit('open')
|
||||
},
|
||||
clickHandler() {
|
||||
// 由于中部弹出时，其u-transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
|
||||
if(this.mode === 'center') {
|
||||
this.overlayClick()
|
||||
}
|
||||
this.$emit('click')
|
||||
},
|
||||
// #ifdef MP-WEIXIN
|
||||
retryComputedComponentRect(children) {
|
||||
// 组件内部需要计算节点的组件
|
||||
const names = ['u-calendar-month', 'u-album', 'u-collapse-item', 'u-dropdown', 'u-index-item', 'u-index-list',
|
||||
'u-line-progress', 'u-list-item', 'u-rate', 'u-read-more', 'u-row', 'u-row-notice', 'u-scroll-list',
|
||||
'u-skeleton', 'u-slider', 'u-steps-item', 'u-sticky', 'u-subsection', 'u-swipe-action-item', 'u-tabbar',
|
||||
'u-tabs', 'u-tooltip'
|
||||
]
|
||||
// 历遍所有的子组件节点
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const child = children[i]
|
||||
// 拿到子组件的子组件
|
||||
const grandChild = child.$children
|
||||
// 判断如果在需要重新初始化的组件数组中名中，并且存在init方法的话，则执行
|
||||
if (names.includes(child.$options.name) && typeof child?.init === 'function') {
|
||||
// 需要进行一定的延时，因为初始化页面需要时间
|
||||
uni.$u.sleep(50).then(() => {
|
||||
child.init()
|
||||
})
|
||||
}
|
||||
// 如果子组件还有孙组件，进行递归历遍
|
||||
if (grandChild.length) {
|
||||
this.retryComputedComponentRect(grandChild)
|
||||
}
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
$u-popup-flex:1 !default;
|
||||
$u-popup-content-background-color: #fff !default;
|
||||
|
||||
.u-popup {
|
||||
flex: $u-popup-flex;
|
||||
|
||||
&__content {
|
||||
background-color: $u-popup-content-background-color;
|
||||
position: relative;
|
||||
|
||||
&--round-top {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
&--round-left {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
&--round-right {
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&--round-bottom {
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&--round-center {
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
&__close {
|
||||
position: absolute;
|
||||
|
||||
&--hover {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
&__close--top-left {
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
&__close--top-right {
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
&__close--bottom-left {
|
||||
bottom: 15px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
&__close--bottom-right {
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
5
uni_modules/uview-ui/components/u-safe-bottom/props.js
Normal file
5
uni_modules/uview-ui/components/u-safe-bottom/props.js
Normal file
@@ -0,0 +1,5 @@
|
||||
export default {
|
||||
props: {
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<view
|
||||
class="u-safe-bottom"
|
||||
:style="[style]"
|
||||
:class="[!isNvue && 'u-safe-area-inset-bottom']"
|
||||
>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import props from "./props.js";
|
||||
/**
|
||||
* SafeBottom 底部安全区
|
||||
* @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
|
||||
* @tutorial https://www.uviewui.com/components/safeAreaInset.html
|
||||
* @property {type} prop_name
|
||||
* @property {Object} customStyle 定义需要用到的外部样式
|
||||
*
|
||||
* @event {Function()}
|
||||
* @example <u-status-bar></u-status-bar>
|
||||
*/
|
||||
export default {
|
||||
name: "u-safe-bottom",
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
data() {
|
||||
return {
|
||||
safeAreaBottomHeight: 0,
|
||||
isNvue: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
const style = {};
|
||||
// #ifdef APP-NVUE
|
||||
// nvue下，高度使用js计算填充
|
||||
style.height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px');
|
||||
// #endif
|
||||
return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef APP-NVUE
|
||||
// 标识为是否nvue
|
||||
this.isNvue = true;
|
||||
// #endif
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-safe-bottom {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
8
uni_modules/uview-ui/components/u-status-bar/props.js
Normal file
8
uni_modules/uview-ui/components/u-status-bar/props.js
Normal file
@@ -0,0 +1,8 @@
|
||||
export default {
|
||||
props: {
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.statusBar.bgColor
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<view
|
||||
:style="[style]"
|
||||
class="u-status-bar"
|
||||
>
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import props from './props.js';
|
||||
/**
|
||||
* StatbusBar 状态栏占位
|
||||
* @description 本组件主要用于状态填充，比如在自定导航栏的时候，它会自动适配一个恰当的状态栏高度。
|
||||
* @tutorial https://uviewui.com/components/statusBar.html
|
||||
* @property {String} bgColor 背景色 (默认 'transparent' )
|
||||
* @property {String | Object} customStyle 自定义样式
|
||||
* @example <u-status-bar></u-status-bar>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-status-bar',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
const style = {}
|
||||
// 状态栏高度，由于某些安卓和微信开发工具无法识别css的顶部状态栏变量，所以使用js获取的方式
|
||||
style.height = uni.$u.addUnit(uni.$u.sys().statusBarHeight, 'px')
|
||||
style.backgroundColor = this.bgColor
|
||||
return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-status-bar {
|
||||
// nvue会默认100%，如果nvue下，显式写100%的话，会导致宽度不为100%而异常
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
84
uni_modules/uview-ui/components/u-tag/props.js
Normal file
84
uni_modules/uview-ui/components/u-tag/props.js
Normal file
@@ -0,0 +1,84 @@
|
||||
export default {
|
||||
props: {
|
||||
// 标签类型info、primary、success、warning、error
|
||||
type: {
|
||||
type: String,
|
||||
default: uni.$u.props.tag.type
|
||||
},
|
||||
// 不可用
|
||||
disabled: {
|
||||
type: [Boolean, String],
|
||||
default: uni.$u.props.tag.disabled
|
||||
},
|
||||
// 标签的大小，large，medium，mini
|
||||
size: {
|
||||
type: String,
|
||||
default: uni.$u.props.tag.size
|
||||
},
|
||||
// tag的形状，circle（两边半圆形）, square（方形，带圆角）
|
||||
shape: {
|
||||
type: String,
|
||||
default: uni.$u.props.tag.shape
|
||||
},
|
||||
// 标签文字
|
||||
text: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.tag.text
|
||||
},
|
||||
// 背景颜色，默认为空字符串，即不处理
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.tag.bgColor
|
||||
},
|
||||
// 标签字体颜色，默认为空字符串，即不处理
|
||||
color: {
|
||||
type: String,
|
||||
default: uni.$u.props.tag.color
|
||||
},
|
||||
// 标签的边框颜色
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.tag.borderColor
|
||||
},
|
||||
// 关闭按钮图标的颜色
|
||||
closeColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.tag.closeColor
|
||||
},
|
||||
// 点击时返回的索引值，用于区分例遍的数组哪个元素被点击了
|
||||
name: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.tag.name
|
||||
},
|
||||
// // 模式选择，dark|light|plain
|
||||
// mode: {
|
||||
// type: String,
|
||||
// default: 'light'
|
||||
// },
|
||||
// 镂空时是否填充背景色
|
||||
plainFill: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.tag.plainFill
|
||||
},
|
||||
// 是否镂空
|
||||
plain: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.tag.plain
|
||||
},
|
||||
// 是否可关闭
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.tag.closable
|
||||
},
|
||||
// 是否显示
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.tag.show
|
||||
},
|
||||
// 内置图标，或绝对路径的图片
|
||||
icon: {
|
||||
type: String,
|
||||
default: uni.$u.props.tag.icon
|
||||
}
|
||||
}
|
||||
}
|
||||
358
uni_modules/uview-ui/components/u-tag/u-tag.vue
Normal file
358
uni_modules/uview-ui/components/u-tag/u-tag.vue
Normal file
@@ -0,0 +1,358 @@
|
||||
<template>
|
||||
<u-transition
|
||||
mode="fade"
|
||||
:show="show"
|
||||
>
|
||||
<view class="u-tag-wrapper">
|
||||
<view
|
||||
class="u-tag"
|
||||
:class="[`u-tag--${shape}`, !plain && `u-tag--${type}`, plain && `u-tag--${type}--plain`, `u-tag--${size}`, plain && plainFill && `u-tag--${type}--plain--fill`]"
|
||||
@tap.stop="clickHandler"
|
||||
:style="[{
|
||||
marginRight: closable ? '10px' : 0,
|
||||
marginTop: closable ? '10px' : 0,
|
||||
}, style]"
|
||||
>
|
||||
<slot name="icon">
|
||||
<view
|
||||
class="u-tag__icon"
|
||||
v-if="icon"
|
||||
>
|
||||
<image
|
||||
v-if="$u.test.image(icon)"
|
||||
:src="icon"
|
||||
:style="[imgStyle]"
|
||||
></image>
|
||||
<u-icon
|
||||
v-else
|
||||
:color="elIconColor"
|
||||
:name="icon"
|
||||
:size="iconSize"
|
||||
></u-icon>
|
||||
</view>
|
||||
</slot>
|
||||
<text
|
||||
class="u-tag__text"
|
||||
:style="[textColor]"
|
||||
:class="[`u-tag__text--${type}`, plain && `u-tag__text--${type}--plain`, `u-tag__text--${size}`]"
|
||||
>{{ text }}</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-tag__close"
|
||||
:class="[`u-tag__close--${size}`]"
|
||||
v-if="closable"
|
||||
@tap.stop="closeHandler"
|
||||
:style="{backgroundColor: closeColor}"
|
||||
>
|
||||
<u-icon
|
||||
name="close"
|
||||
:size="closeSize"
|
||||
color="#ffffff"
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</u-transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import props from './props.js';
|
||||
/**
|
||||
* Tag 标签
|
||||
* @description tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
|
||||
* @tutorial https://www.uviewui.com/components/tag.html
|
||||
* @property {String} type 标签类型info、primary、success、warning、error （默认 'primary' ）
|
||||
* @property {Boolean | String} disabled 不可用（默认 false ）
|
||||
* @property {String} size 标签的大小，large，medium，mini （默认 'medium' ）
|
||||
* @property {String} shape tag的形状，circle（两边半圆形）, square（方形，带圆角）（默认 'square' ）
|
||||
* @property {String | Number} text 标签的文字内容
|
||||
* @property {String} bgColor 背景颜色，默认为空字符串，即不处理
|
||||
* @property {String} color 标签字体颜色，默认为空字符串，即不处理
|
||||
* @property {String} borderColor 镂空形式标签的边框颜色
|
||||
* @property {String} closeColor 关闭按钮图标的颜色（默认 #C6C7CB）
|
||||
* @property {String | Number} name 点击时返回的索引值，用于区分例遍的数组哪个元素被点击了
|
||||
* @property {Boolean} plainFill 镂空时是否填充背景色（默认 false ）
|
||||
* @property {Boolean} plain 是否镂空（默认 false ）
|
||||
* @property {Boolean} closable 是否可关闭，设置为true，文字右边会出现一个关闭图标（默认 false ）
|
||||
* @property {Boolean} show 标签显示与否（默认 true ）
|
||||
* @property {String} icon 内置图标，或绝对路径的图片
|
||||
* @event {Function(index)} click 点击标签时触发 index: 传递的index参数值
|
||||
* @event {Function(index)} close closable为true时，点击标签关闭按钮触发 index: 传递的index参数值
|
||||
* @example <u-tag text="标签" type="error" plain plainFill></u-tag>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-tag',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
const style = {}
|
||||
if (this.bgColor) {
|
||||
style.backgroundColor = this.bgColor
|
||||
}
|
||||
if (this.color) {
|
||||
style.color = this.color
|
||||
}
|
||||
if(this.borderColor) {
|
||||
style.borderColor = this.borderColor
|
||||
}
|
||||
return style
|
||||
},
|
||||
// nvue下，文本颜色无法继承父元素
|
||||
textColor() {
|
||||
const style = {}
|
||||
if (this.color) {
|
||||
style.color = this.color
|
||||
}
|
||||
return style
|
||||
},
|
||||
imgStyle() {
|
||||
const width = this.size === 'large' ? '17px' : this.size === 'medium' ? '15px' : '13px'
|
||||
return {
|
||||
width,
|
||||
height: width
|
||||
}
|
||||
},
|
||||
// 文本的样式
|
||||
closeSize() {
|
||||
const size = this.size === 'large' ? 15 : this.size === 'medium' ? 13 : 12
|
||||
return size
|
||||
},
|
||||
// 图标大小
|
||||
iconSize() {
|
||||
const size = this.size === 'large' ? 21 : this.size === 'medium' ? 19 : 16
|
||||
return size
|
||||
},
|
||||
// 图标颜色
|
||||
elIconColor() {
|
||||
return this.iconColor ? this.iconColor : this.plain ? this.type : '#ffffff'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击关闭按钮
|
||||
closeHandler() {
|
||||
this.$emit('close', this.name)
|
||||
},
|
||||
// 点击标签
|
||||
clickHandler() {
|
||||
this.$emit('click', this.name)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style
|
||||
lang="scss"
|
||||
scoped
|
||||
>
|
||||
@import "../../libs/css/components.scss";
|
||||
|
||||
.u-tag-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.u-tag {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
border-style: solid;
|
||||
|
||||
&--circle {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
&--square {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
&--mini {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
&--medium {
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
&--large {
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&--mini {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
&--medium {
|
||||
height: 26px;
|
||||
line-height: 22px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
&--large {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background-color: $u-primary;
|
||||
border-width: 1px;
|
||||
border-color: $u-primary;
|
||||
}
|
||||
|
||||
&--primary--plain {
|
||||
border-width: 1px;
|
||||
border-color: $u-primary;
|
||||
}
|
||||
|
||||
&--primary--plain--fill {
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
&__text--primary {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
&__text--primary--plain {
|
||||
color: $u-primary;
|
||||
}
|
||||
|
||||
&--error {
|
||||
background-color: $u-error;
|
||||
border-width: 1px;
|
||||
border-color: $u-error;
|
||||
}
|
||||
|
||||
&--error--plain {
|
||||
border-width: 1px;
|
||||
border-color: $u-error;
|
||||
}
|
||||
|
||||
&--error--plain--fill {
|
||||
background-color: #fef0f0;
|
||||
}
|
||||
|
||||
&__text--error {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
&__text--error--plain {
|
||||
color: $u-error;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
background-color: $u-warning;
|
||||
border-width: 1px;
|
||||
border-color: $u-warning;
|
||||
}
|
||||
|
||||
&--warning--plain {
|
||||
border-width: 1px;
|
||||
border-color: $u-warning;
|
||||
}
|
||||
|
||||
&--warning--plain--fill {
|
||||
background-color: #fdf6ec;
|
||||
}
|
||||
|
||||
&__text--warning {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
&__text--warning--plain {
|
||||
color: $u-warning;
|
||||
}
|
||||
|
||||
&--success {
|
||||
background-color: $u-success;
|
||||
border-width: 1px;
|
||||
border-color: $u-success;
|
||||
}
|
||||
|
||||
&--success--plain {
|
||||
border-width: 1px;
|
||||
border-color: $u-success;
|
||||
}
|
||||
|
||||
&--success--plain--fill {
|
||||
background-color: #f5fff0;
|
||||
}
|
||||
|
||||
&__text--success {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
&__text--success--plain {
|
||||
color: $u-success;
|
||||
}
|
||||
|
||||
&--info {
|
||||
background-color: $u-info;
|
||||
border-width: 1px;
|
||||
border-color: $u-info;
|
||||
}
|
||||
|
||||
&--info--plain {
|
||||
border-width: 1px;
|
||||
border-color: $u-info;
|
||||
}
|
||||
|
||||
&--info--plain--fill {
|
||||
background-color: #f4f4f5;
|
||||
}
|
||||
|
||||
&__text--info {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
&__text--info--plain {
|
||||
color: $u-info;
|
||||
}
|
||||
|
||||
&__close {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
border-radius: 100px;
|
||||
background-color: #C6C7CB;
|
||||
@include flex(row);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
transform: scale(0.6) translate(80%, -80%);
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
transform: scale(0.6) translate(50%, -50%);
|
||||
/* #endif */
|
||||
|
||||
&--mini {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
&--medium {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
&--large {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
291
uni_modules/uview-ui/components/u-toast/u-toast.vue
Normal file
291
uni_modules/uview-ui/components/u-toast/u-toast.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<view class="u-toast">
|
||||
<u-overlay
|
||||
:show="isShow"
|
||||
:custom-style="overlayStyle"
|
||||
>
|
||||
<view
|
||||
class="u-toast__content"
|
||||
:style="[contentStyle]"
|
||||
:class="['u-type-' + tmpConfig.type, (tmpConfig.type === 'loading' || tmpConfig.loading) ? 'u-toast__content--loading' : '']"
|
||||
>
|
||||
<u-loading-icon
|
||||
v-if="tmpConfig.type === 'loading'"
|
||||
mode="circle"
|
||||
color="rgb(255, 255, 255)"
|
||||
inactiveColor="rgb(120, 120, 120)"
|
||||
size="25"
|
||||
></u-loading-icon>
|
||||
<u-icon
|
||||
v-else-if="tmpConfig.type !== 'defalut' && iconName"
|
||||
:name="iconName"
|
||||
size="17"
|
||||
:color="tmpConfig.type"
|
||||
:customStyle="iconStyle"
|
||||
></u-icon>
|
||||
<u-gap
|
||||
v-if="tmpConfig.type === 'loading' || tmpConfig.loading"
|
||||
height="12"
|
||||
bgColor="transparent"
|
||||
></u-gap>
|
||||
<text
|
||||
class="u-toast__content__text"
|
||||
:class="['u-toast__content__text--' + tmpConfig.type]"
|
||||
style="max-width: 400rpx;"
|
||||
>{{ tmpConfig.message }}</text>
|
||||
</view>
|
||||
</u-overlay>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* toast 消息提示
|
||||
* @description 此组件表现形式类似uni的uni.showToastAPI，但也有不同的地方。
|
||||
* @tutorial https://www.uviewui.com/components/toast.html
|
||||
* @property {String | Number} zIndex toast展示时的zIndex值 (默认 10090 )
|
||||
* @property {Boolean} loading 是否加载中 （默认 false ）
|
||||
* @property {String | Number} message 显示的文字内容
|
||||
* @property {String} icon 图标，或者绝对路径的图片
|
||||
* @property {String} type 主题类型 （默认 default）
|
||||
* @property {Boolean} show 是否显示该组件 （默认 false）
|
||||
* @property {Boolean} overlay 是否显示透明遮罩，防止点击穿透 （默认 false ）
|
||||
* @property {String} position 位置 （默认 'center' ）
|
||||
* @property {Object} params 跳转的参数
|
||||
* @property {String | Number} duration 展示时间，单位ms （默认 2000 ）
|
||||
* @property {Boolean} isTab 是否返回的为tab页面 （默认 false ）
|
||||
* @property {String} url toast消失后是否跳转页面，有则跳转，优先级高于back参数
|
||||
* @property {Function} complete 执行完后的回调函数
|
||||
* @property {Boolean} back 结束toast是否自动返回上一页 （默认 false ）
|
||||
* @property {Object} customStyle 组件的样式，对象形式
|
||||
* @event {Function} show 显示toast，如需一进入页面就显示toast，请在onReady生命周期调用
|
||||
* @example <u-toast ref="uToast" />
|
||||
*/
|
||||
export default {
|
||||
name: 'u-toast',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin],
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
timer: null, // 定时器
|
||||
config: {
|
||||
message: '', // 显示文本
|
||||
type: '', // 主题类型，primary，success，error，warning，black
|
||||
duration: 2000, // 显示的时间，毫秒
|
||||
icon: true, // 显示的图标
|
||||
position: 'center', // toast出现的位置
|
||||
complete: null, // 执行完后的回调函数
|
||||
overlay: false, // 是否防止触摸穿透
|
||||
loading: false, // 是否加载中状态
|
||||
},
|
||||
tmpConfig: {}, // 将用户配置和内置配置合并后的临时配置变量
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconName() {
|
||||
// 只有不为none，并且type为error|warning|succes|info时候，才显示图标
|
||||
if(!this.tmpConfig.icon || this.tmpConfig.icon == 'none') {
|
||||
return '';
|
||||
}
|
||||
if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) {
|
||||
return uni.$u.type2icon(this.tmpConfig.type)
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
overlayStyle() {
|
||||
const style = {
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
display: 'flex'
|
||||
}
|
||||
// 将遮罩设置为100%透明度，避免出现灰色背景
|
||||
style.backgroundColor = 'rgba(0, 0, 0, 0)'
|
||||
return style
|
||||
},
|
||||
iconStyle() {
|
||||
const style = {}
|
||||
// 图标需要一个右边距，以跟右边的文字有隔开的距离
|
||||
style.marginRight = '4px'
|
||||
// #ifdef APP-NVUE
|
||||
// iOSAPP下，图标有1px的向下偏移，这里进行修正
|
||||
if (uni.$u.os() === 'ios') {
|
||||
style.marginTop = '-1px'
|
||||
}
|
||||
// #endif
|
||||
return style
|
||||
},
|
||||
loadingIconColor() {
|
||||
let color = 'rgb(255, 255, 255)'
|
||||
if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) {
|
||||
// loading-icon组件内部会对color参数进行一个透明度处理，该方法要求传入的颜色值
|
||||
// 必须为rgb格式的，所以这里做一个处理
|
||||
color = uni.$u.hexToRgb(uni.$u.color[this.tmpConfig.type])
|
||||
}
|
||||
return color
|
||||
},
|
||||
// 内容盒子的样式
|
||||
contentStyle() {
|
||||
const windowHeight = uni.$u.sys().windowHeight, style = {}
|
||||
let value = 0
|
||||
// 根据top和bottom，对Y轴进行窗体高度的百分比偏移
|
||||
if(this.tmpConfig.position === 'top') {
|
||||
value = - windowHeight * 0.25
|
||||
} else if(this.tmpConfig.position === 'bottom') {
|
||||
value = windowHeight * 0.25
|
||||
}
|
||||
style.transform = `translateY(${value}px)`
|
||||
return style
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 通过主题的形式调用toast，批量生成方法函数
|
||||
['primary', 'success', 'error', 'warning', 'default', 'loading'].map(item => {
|
||||
this[item] = message => this.show({
|
||||
type: item,
|
||||
message
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 显示toast组件，由父组件通过this.$refs.xxx.show(options)形式调用
|
||||
show(options) {
|
||||
// 不将结果合并到this.config变量，避免多次调用u-toast，前后的配置造成混乱
|
||||
this.tmpConfig = uni.$u.deepMerge(this.config, options)
|
||||
// 清除定时器
|
||||
this.clearTimer()
|
||||
this.isShow = true
|
||||
this.timer = setTimeout(() => {
|
||||
// 倒计时结束，清除定时器，隐藏toast组件
|
||||
this.clearTimer()
|
||||
// 判断是否存在callback方法，如果存在就执行
|
||||
typeof(this.tmpConfig.complete) === 'function' && this.tmpConfig.complete()
|
||||
}, this.tmpConfig.duration)
|
||||
},
|
||||
// 隐藏toast组件，由父组件通过this.$refs.xxx.hide()形式调用
|
||||
hide() {
|
||||
this.clearTimer()
|
||||
},
|
||||
clearTimer() {
|
||||
this.isShow = false
|
||||
// 清除定时器
|
||||
clearTimeout(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearTimer()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
|
||||
$u-toast-color:#fff !default;
|
||||
$u-toast-border-radius:4px !default;
|
||||
$u-toast-border-background-color:#585858 !default;
|
||||
$u-toast-border-font-size:14px !default;
|
||||
$u-toast-border-padding:12px 20px !default;
|
||||
$u-toast-loading-border-padding: 20px 20px !default;
|
||||
$u-toast-content-text-color:#fff !default;
|
||||
$u-toast-content-text-font-size:15px !default;
|
||||
$u-toast-u-icon:10rpx !default;
|
||||
$u-toast-u-type-primary-color:$u-primary !default;
|
||||
$u-toast-u-type-primary-background-color:#ecf5ff !default;
|
||||
$u-toast-u-type-primary-border-color:rgb(215, 234, 254) !default;
|
||||
$u-toast-u-type-primary-border-width:1px !default;
|
||||
$u-toast-u-type-success-color: $u-success !default;
|
||||
$u-toast-u-type-success-background-color: #dbf1e1 !default;
|
||||
$u-toast-u-type-success-border-color: #BEF5C8 !default;
|
||||
$u-toast-u-type-success-border-width: 1px !default;
|
||||
$u-toast-u-type-error-color:$u-error !default;
|
||||
$u-toast-u-type-error-background-color:#fef0f0 !default;
|
||||
$u-toast-u-type-error-border-color:#fde2e2 !default;
|
||||
$u-toast-u-type-error-border-width: 1px !default;
|
||||
$u-toast-u-type-warning-color:$u-warning !default;
|
||||
$u-toast-u-type-warning-background-color:#fdf6ec !default;
|
||||
$u-toast-u-type-warning-border-color:#faecd8 !default;
|
||||
$u-toast-u-type-warning-border-width: 1px !default;
|
||||
$u-toast-u-type-default-color:#fff !default;
|
||||
$u-toast-u-type-default-background-color:#585858 !default;
|
||||
|
||||
.u-toast {
|
||||
&__content {
|
||||
@include flex;
|
||||
padding: $u-toast-border-padding;
|
||||
border-radius: $u-toast-border-radius;
|
||||
background-color: $u-toast-border-background-color;
|
||||
color: $u-toast-color;
|
||||
align-items: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 600rpx;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
|
||||
&--loading {
|
||||
flex-direction: column;
|
||||
padding: $u-toast-loading-border-padding;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: $u-toast-content-text-color;
|
||||
font-size: $u-toast-content-text-font-size;
|
||||
line-height: $u-toast-content-text-font-size;
|
||||
|
||||
&--default {
|
||||
color: $u-toast-content-text-color;
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: $u-error;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
color: $u-primary;
|
||||
}
|
||||
|
||||
&--success {
|
||||
color: $u-success;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: $u-warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-type-primary {
|
||||
color: $u-toast-u-type-primary-color;
|
||||
background-color: $u-toast-u-type-primary-background-color;
|
||||
border-color: $u-toast-u-type-primary-border-color;
|
||||
border-width: $u-toast-u-type-primary-border-width;
|
||||
}
|
||||
|
||||
.u-type-success {
|
||||
color: $u-toast-u-type-success-color;
|
||||
background-color: $u-toast-u-type-success-background-color;
|
||||
border-color: $u-toast-u-type-success-border-color;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.u-type-error {
|
||||
color: $u-toast-u-type-error-color;
|
||||
background-color: $u-toast-u-type-error-background-color;
|
||||
border-color: $u-toast-u-type-error-border-color;
|
||||
border-width: $u-toast-u-type-error-border-width;
|
||||
}
|
||||
|
||||
.u-type-warning {
|
||||
color: $u-toast-u-type-warning-color;
|
||||
background-color: $u-toast-u-type-warning-background-color;
|
||||
border-color: $u-toast-u-type-warning-border-color;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.u-type-default {
|
||||
color: $u-toast-u-type-default-color;
|
||||
background-color: $u-toast-u-type-default-background-color;
|
||||
}
|
||||
</style>
|
||||
34
uni_modules/uview-ui/components/u-toolbar/props.js
Normal file
34
uni_modules/uview-ui/components/u-toolbar/props.js
Normal file
@@ -0,0 +1,34 @@
|
||||
export default {
|
||||
props: {
|
||||
// 是否展示工具条
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.toolbar.show
|
||||
},
|
||||
// 取消按钮的文字
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: uni.$u.props.toolbar.cancelText
|
||||
},
|
||||
// 确认按钮的文字
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: uni.$u.props.toolbar.confirmText
|
||||
},
|
||||
// 取消按钮的颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.toolbar.cancelColor
|
||||
},
|
||||
// 确认按钮的颜色
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.toolbar.confirmColor
|
||||
},
|
||||
// 标题文字
|
||||
title: {
|
||||
type: String,
|
||||
default: uni.$u.props.toolbar.title
|
||||
}
|
||||
}
|
||||
}
|
||||
102
uni_modules/uview-ui/components/u-toolbar/u-toolbar.vue
Normal file
102
uni_modules/uview-ui/components/u-toolbar/u-toolbar.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<view
|
||||
class="u-toolbar"
|
||||
@touchmove.stop.prevent="noop"
|
||||
v-if="show"
|
||||
>
|
||||
<view
|
||||
class="u-toolbar__cancel__wrapper"
|
||||
hover-class="u-hover-class"
|
||||
>
|
||||
<text
|
||||
class="u-toolbar__wrapper__cancel"
|
||||
@tap="cancel"
|
||||
:style="{
|
||||
color: cancelColor
|
||||
}"
|
||||
>{{ cancelText }}</text>
|
||||
</view>
|
||||
<text
|
||||
class="u-toolbar__title u-line-1"
|
||||
v-if="title"
|
||||
>{{ title }}</text>
|
||||
<view
|
||||
class="u-toolbar__confirm__wrapper"
|
||||
hover-class="u-hover-class"
|
||||
>
|
||||
<text
|
||||
class="u-toolbar__wrapper__confirm"
|
||||
@tap="confirm"
|
||||
:style="{
|
||||
color: confirmColor
|
||||
}"
|
||||
>{{ confirmText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import props from './props.js';
|
||||
/**
|
||||
* Toolbar 工具条
|
||||
* @description
|
||||
* @tutorial https://www.uviewui.com/components/toolbar.html
|
||||
* @property {Boolean} show 是否展示工具条（默认 true ）
|
||||
* @property {String} cancelText 取消按钮的文字（默认 '取消' ）
|
||||
* @property {String} confirmText 确认按钮的文字（默认 '确认' ）
|
||||
* @property {String} cancelColor 取消按钮的颜色（默认 '#909193' ）
|
||||
* @property {String} confirmColor 确认按钮的颜色（默认 '#3c9cff' ）
|
||||
* @property {String} title 标题文字
|
||||
* @event {Function}
|
||||
* @example
|
||||
*/
|
||||
export default {
|
||||
name: 'u-toolbar',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
|
||||
methods: {
|
||||
// 点击取消按钮
|
||||
cancel() {
|
||||
this.$emit('cancel')
|
||||
},
|
||||
// 点击确定按钮
|
||||
confirm() {
|
||||
this.$emit('confirm')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
|
||||
.u-toolbar {
|
||||
height: 42px;
|
||||
@include flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&__wrapper {
|
||||
&__cancel {
|
||||
color: $u-tips-color;
|
||||
font-size: 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $u-main-color;
|
||||
padding: 0 60rpx;
|
||||
font-size: 16px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
&__confirm {
|
||||
color: $u-primary;
|
||||
font-size: 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
68
uni_modules/uview-ui/components/u-transition/nvue.ani-map.js
Normal file
68
uni_modules/uview-ui/components/u-transition/nvue.ani-map.js
Normal file
@@ -0,0 +1,68 @@
|
||||
export default {
|
||||
fade: {
|
||||
enter: { opacity: 0 },
|
||||
'enter-to': { opacity: 1 },
|
||||
leave: { opacity: 1 },
|
||||
'leave-to': { opacity: 0 }
|
||||
},
|
||||
'fade-up': {
|
||||
enter: { opacity: 0, transform: 'translateY(100%)' },
|
||||
'enter-to': { opacity: 1, transform: 'translateY(0)' },
|
||||
leave: { opacity: 1, transform: 'translateY(0)' },
|
||||
'leave-to': { opacity: 0, transform: 'translateY(100%)' }
|
||||
},
|
||||
'fade-down': {
|
||||
enter: { opacity: 0, transform: 'translateY(-100%)' },
|
||||
'enter-to': { opacity: 1, transform: 'translateY(0)' },
|
||||
leave: { opacity: 1, transform: 'translateY(0)' },
|
||||
'leave-to': { opacity: 0, transform: 'translateY(-100%)' }
|
||||
},
|
||||
'fade-left': {
|
||||
enter: { opacity: 0, transform: 'translateX(-100%)' },
|
||||
'enter-to': { opacity: 1, transform: 'translateY(0)' },
|
||||
leave: { opacity: 1, transform: 'translateY(0)' },
|
||||
'leave-to': { opacity: 0, transform: 'translateX(-100%)' }
|
||||
},
|
||||
'fade-right': {
|
||||
enter: { opacity: 0, transform: 'translateX(100%)' },
|
||||
'enter-to': { opacity: 1, transform: 'translateY(0)' },
|
||||
leave: { opacity: 1, transform: 'translateY(0)' },
|
||||
'leave-to': { opacity: 0, transform: 'translateX(100%)' }
|
||||
},
|
||||
'slide-up': {
|
||||
enter: { transform: 'translateY(100%)' },
|
||||
'enter-to': { transform: 'translateY(0)' },
|
||||
leave: { transform: 'translateY(0)' },
|
||||
'leave-to': { transform: 'translateY(100%)' }
|
||||
},
|
||||
'slide-down': {
|
||||
enter: { transform: 'translateY(-100%)' },
|
||||
'enter-to': { transform: 'translateY(0)' },
|
||||
leave: { transform: 'translateY(0)' },
|
||||
'leave-to': { transform: 'translateY(-100%)' }
|
||||
},
|
||||
'slide-left': {
|
||||
enter: { transform: 'translateX(-100%)' },
|
||||
'enter-to': { transform: 'translateY(0)' },
|
||||
leave: { transform: 'translateY(0)' },
|
||||
'leave-to': { transform: 'translateX(-100%)' }
|
||||
},
|
||||
'slide-right': {
|
||||
enter: { transform: 'translateX(100%)' },
|
||||
'enter-to': { transform: 'translateY(0)' },
|
||||
leave: { transform: 'translateY(0)' },
|
||||
'leave-to': { transform: 'translateX(100%)' }
|
||||
},
|
||||
zoom: {
|
||||
enter: { transform: 'scale(0.95)' },
|
||||
'enter-to': { transform: 'scale(1)' },
|
||||
leave: { transform: 'scale(1)' },
|
||||
'leave-to': { transform: 'scale(0.95)' }
|
||||
},
|
||||
'fade-zoom': {
|
||||
enter: { opacity: 0, transform: 'scale(0.95)' },
|
||||
'enter-to': { opacity: 1, transform: 'scale(1)' },
|
||||
leave: { opacity: 1, transform: 'scale(1)' },
|
||||
'leave-to': { opacity: 0, transform: 'scale(0.95)' }
|
||||
}
|
||||
}
|
||||
24
uni_modules/uview-ui/components/u-transition/props.js
Normal file
24
uni_modules/uview-ui/components/u-transition/props.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export default {
|
||||
props: {
|
||||
// 是否展示组件
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.transition.show
|
||||
},
|
||||
// 使用的动画模式
|
||||
mode: {
|
||||
type: String,
|
||||
default: uni.$u.props.transition.mode
|
||||
},
|
||||
// 动画的执行时间，单位ms
|
||||
duration: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.transition.duration
|
||||
},
|
||||
// 使用的动画过渡函数
|
||||
timingFunction: {
|
||||
type: String,
|
||||
default: uni.$u.props.transition.timingFunction
|
||||
}
|
||||
}
|
||||
}
|
||||
157
uni_modules/uview-ui/components/u-transition/transition.js
Normal file
157
uni_modules/uview-ui/components/u-transition/transition.js
Normal file
@@ -0,0 +1,157 @@
|
||||
// 定义一个一定时间后自动成功的promise，让调用nextTick方法处，进入下一个then方法
|
||||
const nextTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50))
|
||||
// nvue动画模块实现细节抽离在外部文件
|
||||
import animationMap from './nvue.ani-map.js'
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
// 定义类名，通过给元素动态切换类名，赋予元素一定的css动画样式
|
||||
const getClassNames = (name) => ({
|
||||
enter: `u-${name}-enter u-${name}-enter-active`,
|
||||
'enter-to': `u-${name}-enter-to u-${name}-enter-active`,
|
||||
leave: `u-${name}-leave u-${name}-leave-active`,
|
||||
'leave-to': `u-${name}-leave-to u-${name}-leave-active`
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
// 引入nvue(weex)的animation动画模块，文档见：
|
||||
// https://weex.apache.org/zh/docs/modules/animation.html#transition
|
||||
const animation = uni.requireNativePlugin('animation')
|
||||
const getStyle = (name) => animationMap[name]
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
// 组件被点击发出事件
|
||||
clickHandler() {
|
||||
this.$emit('click')
|
||||
},
|
||||
// #ifndef APP-NVUE
|
||||
// vue版本的组件进场处理
|
||||
vueEnter() {
|
||||
// 动画进入时的类名
|
||||
const classNames = getClassNames(this.mode)
|
||||
// 定义状态和发出动画进入前事件
|
||||
this.status = 'enter'
|
||||
this.$emit('beforeEnter')
|
||||
this.inited = true
|
||||
this.display = true
|
||||
this.classes = classNames.enter
|
||||
this.$nextTick(async () => {
|
||||
// #ifdef H5
|
||||
await uni.$u.sleep(20)
|
||||
// #endif
|
||||
// 标识动画尚未结束
|
||||
this.$emit('enter')
|
||||
this.transitionEnded = false
|
||||
// 组件动画进入后触发的事件
|
||||
this.$emit('afterEnter')
|
||||
// 赋予组件enter-to类名
|
||||
this.classes = classNames['enter-to']
|
||||
})
|
||||
},
|
||||
// 动画离场处理
|
||||
vueLeave() {
|
||||
// 如果不是展示状态，无需执行逻辑
|
||||
if (!this.display) return
|
||||
const classNames = getClassNames(this.mode)
|
||||
// 标记离开状态和发出事件
|
||||
this.status = 'leave'
|
||||
this.$emit('beforeLeave')
|
||||
// 获得类名
|
||||
this.classes = classNames.leave
|
||||
|
||||
this.$nextTick(() => {
|
||||
// 动画正在离场的状态
|
||||
this.transitionEnded = false
|
||||
this.$emit('leave')
|
||||
// 组件执行动画，到了执行的执行时间后，执行一些额外处理
|
||||
setTimeout(this.onTransitionEnd, this.duration)
|
||||
this.classes = classNames['leave-to']
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
// nvue版本动画进场
|
||||
nvueEnter() {
|
||||
// 获得样式的名称
|
||||
const currentStyle = getStyle(this.mode)
|
||||
// 组件动画状态和发出事件
|
||||
this.status = 'enter'
|
||||
this.$emit('beforeEnter')
|
||||
// 展示生成组件元素
|
||||
this.inited = true
|
||||
this.display = true
|
||||
// 在nvue安卓上，由于渲染速度慢，在弹窗，键盘，日历等组件中，渲染其中的内容需要时间
|
||||
// 导致出现弹窗卡顿，这里让其一开始为透明状态，等一定时间渲染完成后，再让其隐藏起来，再让其按正常逻辑出现
|
||||
this.viewStyle = {
|
||||
opacity: 0
|
||||
}
|
||||
// 等待弹窗内容渲染完成
|
||||
this.$nextTick(() => {
|
||||
// 合并样式
|
||||
this.viewStyle = currentStyle.enter
|
||||
Promise.resolve()
|
||||
.then(nextTick)
|
||||
.then(() => {
|
||||
// 组件开始进入前的事件
|
||||
this.$emit('enter')
|
||||
// nvue的transition动画模块需要通过ref调用组件，注意此处的ref不同于vue的this.$refs['u-transition']用法
|
||||
animation.transition(this.$refs['u-transition'].ref, {
|
||||
styles: currentStyle['enter-to'],
|
||||
duration: this.duration,
|
||||
timingFunction: this.timingFunction,
|
||||
needLayout: false,
|
||||
delay: 0
|
||||
}, () => {
|
||||
// 动画执行完毕，发出事件
|
||||
this.$emit('afterEnter')
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
})
|
||||
},
|
||||
nvueLeave() {
|
||||
if (!this.display) {
|
||||
return
|
||||
}
|
||||
const currentStyle = getStyle(this.mode)
|
||||
// 定义状态和事件
|
||||
this.status = 'leave'
|
||||
this.$emit('beforeLeave')
|
||||
// 合并样式
|
||||
this.viewStyle = currentStyle.leave
|
||||
// 放到promise中处理执行过程
|
||||
Promise.resolve()
|
||||
.then(nextTick) // 等待几十ms
|
||||
.then(() => {
|
||||
this.transitionEnded = false
|
||||
// 动画正在离场的状态
|
||||
this.$emit('leave')
|
||||
animation.transition(this.$refs['u-transition'].ref, {
|
||||
styles: currentStyle['leave-to'],
|
||||
duration: this.duration,
|
||||
timingFunction: this.timingFunction,
|
||||
needLayout: false,
|
||||
delay: 0
|
||||
}, () => {
|
||||
this.onTransitionEnd()
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
// #endif
|
||||
// 完成过渡后触发
|
||||
onTransitionEnd() {
|
||||
// 如果已经是结束的状态，无需再处理
|
||||
if (this.transitionEnded) return
|
||||
this.transitionEnded = true
|
||||
// 发出组件动画执行后的事件
|
||||
this.$emit(this.status === 'leave' ? 'afterLeave' : 'afterEnter')
|
||||
if (!this.show && this.display) {
|
||||
this.display = false
|
||||
this.inited = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<view
|
||||
v-if="inited"
|
||||
class="u-transition"
|
||||
ref="u-transition"
|
||||
@tap="clickHandler"
|
||||
:class="classes"
|
||||
:style="[mergeStyle]"
|
||||
@touchmove="noop"
|
||||
>
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import props from './props.js';
|
||||
// 组件的methods方法，由于内容较长，写在外部文件中通过mixin引入
|
||||
import transition from "./transition.js";
|
||||
/**
|
||||
* transition 动画组件
|
||||
* @description
|
||||
* @tutorial
|
||||
* @property {String} show 是否展示组件 （默认 false ）
|
||||
* @property {String} mode 使用的动画模式 （默认 'fade' ）
|
||||
* @property {String | Number} duration 动画的执行时间，单位ms （默认 '300' ）
|
||||
* @property {String} timingFunction 使用的动画过渡函数 （默认 'ease-out' ）
|
||||
* @property {Object} customStyle 自定义样式
|
||||
* @event {Function} before-enter 进入前触发
|
||||
* @event {Function} enter 进入中触发
|
||||
* @event {Function} after-enter 进入后触发
|
||||
* @event {Function} before-leave 离开前触发
|
||||
* @event {Function} leave 离开中触发
|
||||
* @event {Function} after-leave 离开后触发
|
||||
* @example
|
||||
*/
|
||||
export default {
|
||||
name: 'u-transition',
|
||||
data() {
|
||||
return {
|
||||
inited: false, // 是否显示/隐藏组件
|
||||
viewStyle: {}, // 组件内部的样式
|
||||
status: '', // 记录组件动画的状态
|
||||
transitionEnded: false, // 组件是否结束的标记
|
||||
display: false, // 组件是否展示
|
||||
classes: '', // 应用的类名
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
mergeStyle() {
|
||||
const { viewStyle, customStyle } = this
|
||||
return {
|
||||
// #ifndef APP-NVUE
|
||||
transitionDuration: `${this.duration}ms`,
|
||||
// display: `${this.display ? '' : 'none'}`,
|
||||
transitionTimingFunction: this.timingFunction,
|
||||
// #endif
|
||||
// 避免自定义样式影响到动画属性，所以写在viewStyle前面
|
||||
...uni.$u.addStyle(customStyle),
|
||||
...viewStyle
|
||||
}
|
||||
}
|
||||
},
|
||||
// 将mixin挂在到组件中，uni.$u.mixin实际上为一个vue格式对象
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, transition, props],
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
// vue和nvue分别执行不同的方法
|
||||
// #ifdef APP-NVUE
|
||||
newVal ? this.nvueEnter() : this.nvueLeave()
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
newVal ? this.vueEnter() : this.vueLeave()
|
||||
// #endif
|
||||
},
|
||||
// 表示同时监听初始化时的props的show的意思
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../libs/css/components.scss';
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
// vue版本动画相关的样式抽离在外部文件
|
||||
@import './vue.ani-style.scss';
|
||||
/* #endif */
|
||||
|
||||
.u-transition {}
|
||||
</style>
|
||||
113
uni_modules/uview-ui/components/u-transition/vue.ani-style.scss
Normal file
113
uni_modules/uview-ui/components/u-transition/vue.ani-style.scss
Normal file
@@ -0,0 +1,113 @@
|
||||
/**
|
||||
* vue版本动画内置的动画模式有如下：
|
||||
* fade：淡入
|
||||
* zoom：缩放
|
||||
* fade-zoom：缩放淡入
|
||||
* fade-up：上滑淡入
|
||||
* fade-down：下滑淡入
|
||||
* fade-left：左滑淡入
|
||||
* fade-right：右滑淡入
|
||||
* slide-up：上滑进入
|
||||
* slide-down：下滑进入
|
||||
* slide-left：左滑进入
|
||||
* slide-right：右滑进入
|
||||
*/
|
||||
|
||||
$u-zoom-scale: scale(0.95);
|
||||
|
||||
.u-fade-enter-active,
|
||||
.u-fade-leave-active {
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
.u-fade-enter,
|
||||
.u-fade-leave-to {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.u-fade-zoom-enter,
|
||||
.u-fade-zoom-leave-to {
|
||||
transform: $u-zoom-scale;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.u-fade-zoom-enter-active,
|
||||
.u-fade-zoom-leave-active {
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
|
||||
.u-fade-down-enter-active,
|
||||
.u-fade-down-leave-active,
|
||||
.u-fade-left-enter-active,
|
||||
.u-fade-left-leave-active,
|
||||
.u-fade-right-enter-active,
|
||||
.u-fade-right-leave-active,
|
||||
.u-fade-up-enter-active,
|
||||
.u-fade-up-leave-active {
|
||||
transition-property: opacity, transform;
|
||||
}
|
||||
|
||||
.u-fade-up-enter,
|
||||
.u-fade-up-leave-to {
|
||||
transform: translate3d(0, 100%, 0);
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.u-fade-down-enter,
|
||||
.u-fade-down-leave-to {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.u-fade-left-enter,
|
||||
.u-fade-left-leave-to {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.u-fade-right-enter,
|
||||
.u-fade-right-leave-to {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.u-slide-down-enter-active,
|
||||
.u-slide-down-leave-active,
|
||||
.u-slide-left-enter-active,
|
||||
.u-slide-left-leave-active,
|
||||
.u-slide-right-enter-active,
|
||||
.u-slide-right-leave-active,
|
||||
.u-slide-up-enter-active,
|
||||
.u-slide-up-leave-active {
|
||||
transition-property: transform;
|
||||
}
|
||||
|
||||
.u-slide-up-enter,
|
||||
.u-slide-up-leave-to {
|
||||
transform: translate3d(0, 100%, 0)
|
||||
}
|
||||
|
||||
.u-slide-down-enter,
|
||||
.u-slide-down-leave-to {
|
||||
transform: translate3d(0, -100%, 0)
|
||||
}
|
||||
|
||||
.u-slide-left-enter,
|
||||
.u-slide-left-leave-to {
|
||||
transform: translate3d(-100%, 0, 0)
|
||||
}
|
||||
|
||||
.u-slide-right-enter,
|
||||
.u-slide-right-leave-to {
|
||||
transform: translate3d(100%, 0, 0)
|
||||
}
|
||||
|
||||
.u-zoom-enter-active,
|
||||
.u-zoom-leave-active {
|
||||
transition-property: transform
|
||||
}
|
||||
|
||||
.u-zoom-enter,
|
||||
.u-zoom-leave-to {
|
||||
transform: $u-zoom-scale
|
||||
}
|
||||
15
uni_modules/uview-ui/components/uview-ui/uview-ui.vue
Normal file
15
uni_modules/uview-ui/components/uview-ui/uview-ui.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<view></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user