...
 
Commits (5)
    https://gitcode.net/vk-uni/vk-uview-ui/-/commit/625cb4a0e31ae6a839723ee403769518b34e2c37 u-circle-progres 组件 在进度条到100%的时候发出一个finish事件 2023-05-17T10:38:25+08:00 VK 370725567@qq.com https://gitcode.net/vk-uni/vk-uview-ui/-/commit/489c7b0c7da3c35dbe638b2ef75c1339e73738b0 1.4.8 2023-05-17T11:12:30+08:00 VK云桌面 370725567@qq.com https://gitcode.net/vk-uni/vk-uview-ui/-/commit/cebaf6ebaeacaf7cbed071393b55d9539cbd30d2 Update manifest.json 2023-05-18T19:24:15+08:00 VK 370725567@qq.com https://gitcode.net/vk-uni/vk-uview-ui/-/commit/3ed863e66bff6d209924ce1e98e4a40fed1f49c0 新增u-swiper-plus组件,支持视频轮播 2023-05-18T23:45:54+08:00 VK 370725567@qq.com https://gitcode.net/vk-uni/vk-uview-ui/-/commit/36ea8aebf213804074ad7a2dead1119bda66ca44 1 2023-05-18T23:46:32+08:00 VK 370725567@qq.com
...@@ -17,7 +17,11 @@ ...@@ -17,7 +17,11 @@
"delay" : 0 "delay" : 0
}, },
/* 模块配置 */ /* 模块配置 */
"modules" : {}, "modules" : {
"Barcode" : {},
"Camera" : {},
"VideoPlayer" : {}
},
/* 应用发布信息 */ /* 应用发布信息 */
"distribute" : { "distribute" : {
/* android打包配置 */ /* android打包配置 */
...@@ -41,16 +45,21 @@ ...@@ -41,16 +45,21 @@
] ]
}, },
/* ios打包配置 */ /* ios打包配置 */
"ios" : {}, "ios" : {
"dSYMs" : false
},
/* SDK配置 */ /* SDK配置 */
"sdkConfigs" : {} "sdkConfigs" : {
"maps" : {},
"ad" : {}
}
} }
}, },
/* 快应用特有相关 */ /* 快应用特有相关 */
"quickapp" : {}, "quickapp" : {},
/* 小程序特有相关 */ /* 小程序特有相关 */
"mp-weixin" : { "mp-weixin" : {
"appid" : "", "appid" : "wxa939c7e288b824a9",
"setting" : { "setting" : {
"urlCheck" : false, "urlCheck" : false,
"es6" : true, "es6" : true,
......
## 1.4.8(2023-05-17)
* 【优化】部分组件属性的可选值的代码提示
* 【优化】`u-circle-progres` 组件 在进度条到100%的时候发出一个 `finish` 事件
* 【修复】`u-picker` 的时间选择器在ios下默认值无效的bug
* 【修复】`u-card` 圆角问题
* 【修复】`u-button` 支持 `info` 类型
## 1.4.7(2023-04-24) ## 1.4.7(2023-04-24)
* 【修复】`u-picker` 在vue3的App环境下默认值无效的bug * 【修复】`u-picker` 在vue3的App环境下默认值无效的bug
## 1.4.5(2022-12-05) ## 1.4.5(2022-12-05)
......
...@@ -47,6 +47,7 @@ ...@@ -47,6 +47,7 @@
*/ */
export default { export default {
name: 'u-circle-progress', name: 'u-circle-progress',
emits: ["end","finish"],
props: { props: {
// 圆环进度百分比值 // 圆环进度百分比值
percent: { percent: {
...@@ -191,6 +192,12 @@ export default { ...@@ -191,6 +192,12 @@ export default {
if (progress < this.newPercent) return; if (progress < this.newPercent) return;
} }
setTimeout(() => { setTimeout(() => {
if (progress >= this.percent) {
this.$emit("end", progress);
}
if (progress >= 100) {
this.$emit("finish", progress);
}
// 定时器,每次操作间隔为time值,为了让进度条有动画效果 // 定时器,每次操作间隔为time值,为了让进度条有动画效果
this.drawCircleByProgress(progress); this.drawCircleByProgress(progress);
}, time); }, time);
......
<template>
<view class="u-swiper-indicator">
<view
class="u-swiper-indicator__wrapper"
v-if="indicatorMode === 'line'"
:class="[`u-swiper-indicator__wrapper--${indicatorMode}`]"
:style="{
width: $u.addUnit(lineWidth * length),
backgroundColor: indicatorInactiveColor
}"
>
<view
class="u-swiper-indicator__wrapper--line__bar"
:style="[lineStyle]"
></view>
</view>
<view
class="u-swiper-indicator__wrapper"
v-if="indicatorMode === 'dot'"
>
<view
class="u-swiper-indicator__wrapper__dot"
v-for="(item, index) in length"
:key="index"
:class="[index === current && 'u-swiper-indicator__wrapper__dot--active']"
:style="[dotStyle(index)]"
>
</view>
</view>
</view>
</template>
<script>
/**
* SwiperIndicator 轮播图指示器
* @description 该组件一般用于导航轮播,广告展示等场景,可开箱即用,
* @tutorial https://www.uviewui.com/components/swiper.html
* @property {String | Number} length 轮播的长度(默认 0 )
* @property {String | Number} current 当前处于活动状态的轮播的索引(默认 0 )
* @property {String} indicatorActiveColor 指示器非激活颜色
* @property {String} indicatorInactiveColor 指示器的激活颜色
* @property {String} indicatorMode 指示器模式(默认 'line' )
* @example <u-swiper :list="list4" indicator keyName="url" :autoplay="false"></u-swiper>
*/
export default {
name: 'u-swiper-indicator',
props:{
// 轮播的长度
length: {
type: [String, Number],
default: 0
},
// 当前处于活动状态的轮播的索引
current: {
type: [String, Number],
default: 0
},
// 指示器非激活颜色
indicatorActiveColor: {
type: String,
default: ''
},
// 指示器的激活颜色
indicatorInactiveColor: {
type: String,
default: ''
},
// 指示器模式,line-线型,dot-点型
indicatorMode: {
type: String,
default: 'line'
}
},
data() {
return {
lineWidth: 22
}
},
computed: {
// 指示器为线型的样式
lineStyle() {
let style = {}
style.width = uni.$u.addUnit(this.lineWidth)
style.transform = `translateX(${ uni.$u.addUnit(this.current * this.lineWidth) })`
style.backgroundColor = this.indicatorActiveColor
return style
},
// 指示器为点型的样式
dotStyle() {
return index => {
let style = {}
style.backgroundColor = index === this.current ? this.indicatorActiveColor : this.indicatorInactiveColor
return style
}
}
},
}
</script>
<style lang="scss" scoped>
@import "../../../libs/css/style.components.scss";
.u-swiper-indicator {
&__wrapper {
@include vue-flex;
&--line {
border-radius: 100px;
height: 4px;
&__bar {
width: 22px;
height: 4px;
border-radius: 100px;
background-color: #FFFFFF;
transition: transform 0.3s;
}
}
&__dot {
width: 5px;
height: 5px;
border-radius: 100px;
margin: 0 4px;
&--active {
width: 12px;
}
}
}
}
</style>
...@@ -68,6 +68,8 @@ import {sys, os} from './libs/function/sys.js' ...@@ -68,6 +68,8 @@ import {sys, os} from './libs/function/sys.js'
import debounce from './libs/function/debounce.js' import debounce from './libs/function/debounce.js'
// 节流方法 // 节流方法
import throttle from './libs/function/throttle.js' import throttle from './libs/function/throttle.js'
// 对象转字符串,或者字符串转对象
import addStyle from './libs/function/addStyle.js'
// 配置信息 // 配置信息
...@@ -111,6 +113,7 @@ const $u = { ...@@ -111,6 +113,7 @@ const $u = {
zIndex, zIndex,
debounce, debounce,
throttle, throttle,
addStyle
} }
// $u挂载到uni对象上 // $u挂载到uni对象上
......
import test from './test.js'
/**
* @description 样式转换
* 对象转字符串,或者字符串转对象
* @param {object | string} customStyle 需要转换的目标
* @param {String} target 转换的目的,object-转为对象,string-转为字符串
* @returns {object|string}
*/
function addStyle(customStyle, target = 'object') {
// 字符串转字符串,对象转对象情形,直接返回
if (test.empty(customStyle) || typeof(customStyle) === 'object' && target === 'object' || target === 'string' && typeof(customStyle) === 'string') {
return customStyle
}
// 字符串转对象
if (target === 'object') {
// 去除字符串样式中的两端空格(中间的空格不能去掉,比如padding: 20px 0如果去掉了就错了),空格是无用的
customStyle = trim(customStyle)
// 根据";"将字符串转为数组形式
const styleArray = customStyle.split(';')
const style = {}
// 历遍数组,拼接成对象
for (let i = 0; i < styleArray.length; i++) {
// 'font-size:20px;color:red;',如此最后字符串有";"的话,会导致styleArray最后一个元素为空字符串,这里需要过滤
if (styleArray[i]) {
const item = styleArray[i].split(':')
style[trim(item[0])] = trim(item[1])
}
}
return style
}
// 这里为对象转字符串形式
let string = ''
for (const i in customStyle) {
// 驼峰转为中划线的形式,否则css内联样式,无法识别驼峰样式属性名
const key = i.replace(/([A-Z])/g, '-$1').toLowerCase()
string += `${key}:${customStyle[i]};`
}
// 去除两端空格
return trim(string)
}
export default addStyle
...@@ -205,6 +205,56 @@ function code(value, len = 6) { ...@@ -205,6 +205,56 @@ function code(value, len = 6) {
} }
/**
* 是否函数方法
* @param {Object} value
*/
function func(value) {
return typeof value === 'function'
}
/**
* 是否promise对象
* @param {Object} value
*/
function promise(value) {
return object(value) && func(value.then) && func(value.catch)
}
/** 是否图片格式
* @param {Object} value
*/
function image(value) {
const newValue = value.split('?')[0]
const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i
return IMAGE_REGEXP.test(newValue)
}
/**
* 是否视频格式
* @param {Object} value
*/
function video(value) {
const VIDEO_REGEXP = /\.(mp4|mpg|mpeg|dat|asf|avi|rm|rmvb|mov|wmv|flv|mkv|m3u8)/i
return VIDEO_REGEXP.test(value)
}
/**
* 是否为正则对象
* @param {Object}
* @return {Boolean}
*/
function regExp(o) {
return o && Object.prototype.toString.call(o) === '[object RegExp]'
}
/**
* 验证字符串
*/
function string(value) {
return typeof value === 'string'
}
export default { export default {
email, email,
mobile, mobile,
...@@ -228,5 +278,11 @@ export default { ...@@ -228,5 +278,11 @@ export default {
landline, landline,
object, object,
array, array,
code code,
func,
promise,
video,
image,
regExp,
string
} }
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
"id": "vk-uview-ui", "id": "vk-uview-ui",
"name": "vk-uview-ui", "name": "vk-uview-ui",
"displayName": "【开箱即用】uView Vue3 横空出世,继承uView1意志,再战江湖,风云再起!", "displayName": "【开箱即用】uView Vue3 横空出世,继承uView1意志,再战江湖,风云再起!",
"version": "1.4.7", "version": "1.4.8",
"description": "同时支持 Vue3.0 和 Vue2.0,你没看错,现在 uView 支持 Vue3.0 了!(不支持nvue,此版本为uView1.0的分支)", "description": "同时支持 Vue3.0 和 Vue2.0,你没看错,现在 uView 支持 Vue3.0 了!(不支持nvue,此版本为uView1.0的分支)",
"keywords": [ "keywords": [
"vk-uview-ui", "vk-uview-ui",
......