uview-plus 3.3.18 → 3.3.20

package/changelog.md

@@ -1,3 +1,10 @@
+## 3.3.20（2024-08-15）
+refactor: props默认值文件移至组件文件夹内便于查找
+## 3.3.19（2024-08-14）
+fix: 修复2被rpx兼容处理只在数字值生效
+
+add: 增加swiper自定义插槽示例
+
 ## 3.3.18（2024-08-13）
 feat: 新增支持datetime-picker工具栏插槽及picker插槽支持修复
 ## 3.3.17（2024-08-12）

package/{libs/config/props → components/u-icon}/icon.js

@@ -7,7 +7,7 @@
  * @lastTime     : 2021-08-20 18:00:14
  * @FilePath     : /u-view2.0/uview-ui/libs/config/props/icon.js
  */
-import config from '../config'
+import config from '../../libs/config/config'
 
 const {
     color

package/{libs/config/props → components/u-link}/link.js

@@ -7,7 +7,7 @@
  * @lastTime     : 2021-08-20 17:45:36
  * @FilePath     : /u-view2.0/uview-ui/libs/config/props/link.js
  */
-import config from '../config'
+import config from '../../libs/config/config'
 
 const {
     color

package/{libs/config/props → components/u-loading-icon}/loadingIcon.js

@@ -7,7 +7,7 @@
  * @lastTime     : 2021-08-20 17:45:47
  * @FilePath     : /u-view2.0/uview-ui/libs/config/props/loadingIcon.js
  */
-import config from '../config'
+import config from '../../libs/config/config'
 
 const {
     color

package/{libs/config/props → components/u-navbar}/navbar.js

@@ -7,7 +7,7 @@
  * @lastTime     : 2021-08-20 17:16:18
  * @FilePath     : /u-view2.0/uview-ui/libs/config/props/navbar.js
  */
-import color from '../color'
+import color from '../../libs/config/color'
 export default {
     // navbar 组件
     navbar: {

package/components/u-tabs/u-tabs.vue

@@ -178,7 +178,6 @@
                 // 获取下划线的数值px表示法
 				const lineWidth = getPx(this.lineWidth);
 				this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
-				console.log(lineOffsetLeft)
 				// #ifdef APP-NVUE
 				// 第一次移动滑块，无需过渡时间
 				this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))

package/components/u-transition/transition.js

@@ -1,163 +1,18 @@
-// 定义一个一定时间后自动成功的promise，让调用nextTick方法处，进入下一个then方法
-const waitTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50))
-// nvue动画模块实现细节抽离在外部文件
-// #ifdef APP-NVUE
-import animationMap from './nvue-ani-map.js'
-// #endif
-
-// #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
-
-import { nextTick } from 'vue'
-import { sleep } from '../../libs/function/index';
-export default {
-    methods: {
-        // 组件被点击发出事件
-        clickHandler() {
-            this.$emit('click')
-        },
-        // #ifndef APP-NVUE
-        // vue版本的组件进场处理
-        async vueEnter() {
-            // 动画进入时的类名
-            const classNames = getClassNames(this.mode)
-            // 定义状态和发出动画进入前事件
-            this.status = 'enter'
-            this.$emit('beforeEnter')
-            this.inited = true
-            this.display = true
-            this.classes = classNames.enter
-			await nextTick();
-			{
-                // https://github.com/umicro/uView2.0/issues/545
-				await sleep(20)
-                // 标识动画尚未结束
-                this.$emit('enter')
-                this.transitionEnded = false
-				// 组件动画进入后触发的事件
-                this.$emit('afterEnter')
-                // 赋予组件enter-to类名
-                this.classes = classNames['enter-to']
-            }
-        },
-        // 动画离场处理
-        async vueLeave() {
-            // 如果不是展示状态，无需执行逻辑
-            if (!this.display) return
-            const classNames = getClassNames(this.mode)
-            // 标记离开状态和发出事件
-            this.status = 'leave'
-            this.$emit('beforeLeave')
-            // 获得类名
-            this.classes = classNames.leave
-
-            await nextTick();
-			{
-               // 动画正在离场的状态
-               this.transitionEnded = false
-               this.$emit('leave')
-                // 组件执行动画，到了执行的执行时间后，执行一些额外处理
-                setTimeout(this.onTransitionEnd, this.duration)
-                this.classes = classNames['leave-to']
-            }
-        },
-        // #endif
-        // #ifdef APP-NVUE
-        // nvue版本动画进场
-        async nvueEnter() {
-            // 获得样式的名称
-            const currentStyle = getStyle(this.mode)
-            // 组件动画状态和发出事件
-            this.status = 'enter'
-            this.$emit('beforeEnter')
-            // 展示生成组件元素
-            this.inited = true
-            this.display = true
-            // 在nvue安卓上，由于渲染速度慢，在弹窗，键盘，日历等组件中，渲染其中的内容需要时间
-            // 导致出现弹窗卡顿，这里让其一开始为透明状态，等一定时间渲染完成后，再让其隐藏起来，再让其按正常逻辑出现
-            this.viewStyle = {
-                opacity: 0
-            }
-            // 等待弹窗内容渲染完成
-            await nextTick();
-			{
-                // 合并样式
-                this.viewStyle = currentStyle.enter
-                Promise.resolve()
-                    .then(waitTick)
-                    .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(waitTick) // 等待几十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
-            }
-        }
-    }
-}
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 16:59:00
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/transition.js
+ */
+export default {
+    // transition动画组件的props
+    transition: {
+        show: false,
+        mode: 'fade',
+        duration: '300',
+        timingFunction: 'ease-out'
+    }
+}

package/components/u-transition/transitionMixin.js

@@ -0,0 +1,163 @@
+// 定义一个一定时间后自动成功的promise，让调用nextTick方法处，进入下一个then方法
+const waitTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50))
+// nvue动画模块实现细节抽离在外部文件
+// #ifdef APP-NVUE
+import animationMap from './nvue-ani-map.js'
+// #endif
+
+// #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
+
+import { nextTick } from 'vue'
+import { sleep } from '../../libs/function/index';
+export default {
+    methods: {
+        // 组件被点击发出事件
+        clickHandler() {
+            this.$emit('click')
+        },
+        // #ifndef APP-NVUE
+        // vue版本的组件进场处理
+        async vueEnter() {
+            // 动画进入时的类名
+            const classNames = getClassNames(this.mode)
+            // 定义状态和发出动画进入前事件
+            this.status = 'enter'
+            this.$emit('beforeEnter')
+            this.inited = true
+            this.display = true
+            this.classes = classNames.enter
+			await nextTick();
+			{
+                // https://github.com/umicro/uView2.0/issues/545
+				await sleep(20)
+                // 标识动画尚未结束
+                this.$emit('enter')
+                this.transitionEnded = false
+				// 组件动画进入后触发的事件
+                this.$emit('afterEnter')
+                // 赋予组件enter-to类名
+                this.classes = classNames['enter-to']
+            }
+        },
+        // 动画离场处理
+        async vueLeave() {
+            // 如果不是展示状态，无需执行逻辑
+            if (!this.display) return
+            const classNames = getClassNames(this.mode)
+            // 标记离开状态和发出事件
+            this.status = 'leave'
+            this.$emit('beforeLeave')
+            // 获得类名
+            this.classes = classNames.leave
+
+            await nextTick();
+			{
+               // 动画正在离场的状态
+               this.transitionEnded = false
+               this.$emit('leave')
+                // 组件执行动画，到了执行的执行时间后，执行一些额外处理
+                setTimeout(this.onTransitionEnd, this.duration)
+                this.classes = classNames['leave-to']
+            }
+        },
+        // #endif
+        // #ifdef APP-NVUE
+        // nvue版本动画进场
+        async nvueEnter() {
+            // 获得样式的名称
+            const currentStyle = getStyle(this.mode)
+            // 组件动画状态和发出事件
+            this.status = 'enter'
+            this.$emit('beforeEnter')
+            // 展示生成组件元素
+            this.inited = true
+            this.display = true
+            // 在nvue安卓上，由于渲染速度慢，在弹窗，键盘，日历等组件中，渲染其中的内容需要时间
+            // 导致出现弹窗卡顿，这里让其一开始为透明状态，等一定时间渲染完成后，再让其隐藏起来，再让其按正常逻辑出现
+            this.viewStyle = {
+                opacity: 0
+            }
+            // 等待弹窗内容渲染完成
+            await nextTick();
+			{
+                // 合并样式
+                this.viewStyle = currentStyle.enter
+                Promise.resolve()
+                    .then(waitTick)
+                    .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(waitTick) // 等待几十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
+            }
+        }
+    }
+}

package/components/u-transition/u-transition.vue

@@ -18,7 +18,7 @@ import { mpMixin } from '../../libs/mixin/mpMixin';
 import { mixin } from '../../libs/mixin/mixin';
 import { addStyle } from '../../libs/function/index';
 // 组件的methods方法，由于内容较长，写在外部文件中通过mixin引入
-import transition from "./transition.js";
+import transitionMixin from "./transitionMixin.js";
 /**
  * transition  动画组件
  * @description
@@ -65,7 +65,7 @@ export default {
 	    }
 	},
 	// 将mixin挂在到组件中，实际上为一个vue格式对象。
-	mixins: [mpMixin, mixin, transition, props],
+	mixins: [mpMixin, mixin, transitionMixin, props],
 	watch: {
 		show: {
 			handler(newVal) {

package/libs/config/props.js

@@ -5,94 +5,94 @@
  */
 import config from './config'
 
-import ActionSheet from './props/actionSheet'
-import Album from './props/album'
-import Alert from './props/alert'
-import Avatar from './props/avatar'
-import AvatarGroup from './props/avatarGroup'
-import Backtop from './props/backtop'
-import Badge from './props/badge'
-import Button from './props/button'
-import Calendar from './props/calendar'
-import CarKeyboard from './props/carKeyboard'
-import Cell from './props/cell'
-import CellGroup from './props/cellGroup'
-import Checkbox from './props/checkbox'
-import CheckboxGroup from './props/checkboxGroup'
-import CircleProgress from './props/circleProgress'
-import Code from './props/code'
-import CodeInput from './props/codeInput'
-import Col from './props/col'
-import Collapse from './props/collapse'
-import CollapseItem from './props/collapseItem'
-import ColumnNotice from './props/columnNotice'
-import CountDown from './props/countDown'
-import CountTo from './props/countTo'
-import DatetimePicker from './props/datetimePicker'
-import Divider from './props/divider'
-import Empty from './props/empty'
-import Form from './props/form'
-import GormItem from './props/formItem'
-import Gap from './props/gap'
-import Grid from './props/grid'
-import GridItem from './props/gridItem'
-import Icon from './props/icon'
-import Image from './props/image'
-import IndexAnchor from './props/indexAnchor'
-import IndexList from './props/indexList'
-import Input from './props/input'
-import Keyboard from './props/keyboard'
-import Line from './props/line'
-import LineProgress from './props/lineProgress'
-import Link from './props/link'
-import List from './props/list'
-import ListItem from './props/listItem'
-import LoadingIcon from './props/loadingIcon'
-import LoadingPage from './props/loadingPage'
-import Loadmore from './props/loadmore'
-import Modal from './props/modal'
-import Navbar from './props/navbar'
-import NoNetwork from './props/noNetwork'
-import NoticeBar from './props/noticeBar'
-import Notify from './props/notify'
-import NumberBox from './props/numberBox'
-import NumberKeyboard from './props/numberKeyboard'
-import Overlay from './props/overlay'
-import Parse from './props/parse'
-import Picker from './props/picker'
-import Popup from './props/popup'
-import Radio from './props/radio'
-import RadioGroup from './props/radioGroup'
-import Rate from './props/rate'
-import ReadMore from './props/readMore'
-import Row from './props/row'
-import RowNotice from './props/rowNotice'
-import ScrollList from './props/scrollList'
-import Search from './props/search'
-import Section from './props/section'
-import Skeleton from './props/skeleton'
-import Slider from './props/slider'
-import StatusBar from './props/statusBar'
-import Steps from './props/steps'
-import StepsItem from './props/stepsItem'
-import Sticky from './props/sticky'
-import Subsection from './props/subsection'
-import SwipeAction from './props/swipeAction'
-import SwipeActionItem from './props/swipeActionItem'
-import Swiper from './props/swiper'
-import SwipterIndicator from './props/swipterIndicator'
-import Switch from './props/switch'
-import Tabbar from './props/tabbar'
-import TabbarItem from './props/tabbarItem'
-import Tabs from './props/tabs'
-import Tag from './props/tag'
-import Text from './props/text'
-import Textarea from './props/textarea'
-import Toast from './props/toast'
-import Toolbar from './props/toolbar'
-import Tooltip from './props/tooltip'
-import Transition from './props/transition'
-import Upload from './props/upload'
+import ActionSheet from '../../components/u-action-sheet/actionSheet'
+import Album from '../../components/u-album/album'
+import Alert from '../../components/u-alert/alert'
+import Avatar from '../../components/u-avatar/avatar'
+import AvatarGroup from '../../components/u-avatar-group/avatarGroup'
+import Backtop from '../../components/u-back-top/backtop'
+import Badge from '../../components/u-badge/badge'
+import Button from '../../components/u-button/button'
+import Calendar from '../../components/u-calendar/calendar'
+import CarKeyboard from '../../components/u-car-keyboard/carKeyboard'
+import Cell from '../../components/u-cell/cell'
+import CellGroup from '../../components/u-cell-group/cellGroup'
+import Checkbox from '../../components/u-checkbox/checkbox'
+import CheckboxGroup from '../../components/u-checkbox-group/checkboxGroup'
+import CircleProgress from '../../components/u-circle-progress/circleProgress'
+import Code from '../../components/u-code/code'
+import CodeInput from '../../components/u-code-input/codeInput'
+import Col from '../../components/u-col/col'
+import Collapse from '../../components/u-collapse/collapse'
+import CollapseItem from '../../components/u-collapse-item/collapseItem'
+import ColumnNotice from '../../components/u-column-notice/columnNotice'
+import CountDown from '../../components/u-count-down/countDown'
+import CountTo from '../../components/u-count-to/countTo'
+import DatetimePicker from '../../components/u-datetime-picker/datetimePicker'
+import Divider from '../../components/u-divider/divider'
+import Empty from '../../components/u-empty/empty'
+import Form from '../../components/u-form/form'
+import GormItem from '../../components/u-form-item/formItem'
+import Gap from '../../components/u-gap/gap'
+import Grid from '../../components/u-grid/grid'
+import GridItem from '../../components/u-grid-item/gridItem'
+import Icon from '../../components/u-icon/icon'
+import Image from '../../components/u-image/image'
+import IndexAnchor from '../../components/u-index-anchor/indexAnchor'
+import IndexList from '../../components/u-index-list/indexList'
+import Input from '../../components/u-input/input'
+import Keyboard from '../../components/u-keyboard/keyboard'
+import Line from '../../components/u-line/line'
+import LineProgress from '../../components/u-line-progress/lineProgress'
+import Link from '../../components/u-link/link'
+import List from '../../components/u-list/list'
+import ListItem from '../../components/u-list-item/listItem'
+import LoadingIcon from '../../components/u-loading-icon/loadingIcon'
+import LoadingPage from '../../components/u-loading-page/loadingPage'
+import Loadmore from '../../components/u-loadmore/loadmore'
+import Modal from '../../components/u-modal/modal'
+import Navbar from '../../components/u-navbar/navbar'
+import NoNetwork from '../../components/u-no-network/noNetwork'
+import NoticeBar from '../../components/u-notice-bar/noticeBar'
+import Notify from '../../components/u-notify/notify'
+import NumberBox from '../../components/u-number-box/numberBox'
+import NumberKeyboard from '../../components/u-number-keyboard/numberKeyboard'
+import Overlay from '../../components/u-overlay/overlay'
+import Parse from '../../components/u-parse/parse'
+import Picker from '../../components/u-picker/picker'
+import Popup from '../../components/u-popup/popup'
+import Radio from '../../components/u-radio/radio'
+import RadioGroup from '../../components/u-radio-group/radioGroup'
+import Rate from '../../components/u-rate/rate'
+import ReadMore from '../../components/u-read-more/readMore'
+import Row from '../../components/u-row/row'
+import RowNotice from '../../components/u-row-notice/rowNotice'
+import ScrollList from '../../components/u-scroll-list/scrollList'
+import Search from '../../components/u-search/search'
+import Section from '../../components/u-section/section'
+import Skeleton from '../../components/u-skeleton/skeleton'
+import Slider from '../../components/u-slider/slider'
+import StatusBar from '../../components/u-status-bar/statusBar'
+import Steps from '../../components/u-steps/steps'
+import StepsItem from '../../components/u-steps-item/stepsItem'
+import Sticky from '../../components/u-sticky/sticky'
+import Subsection from '../../components/u-subsection/subsection'
+import SwipeAction from '../../components/u-swipe-action/swipeAction'
+import SwipeActionItem from '../../components/u-swipe-action-item/swipeActionItem'
+import Swiper from '../../components/u-swiper/swiper'
+import SwipterIndicator from '../../components/u-swiper-indicator/swipterIndicator'
+import Switch from '../../components/u-switch/switch'
+import Tabbar from '../../components/u-tabbar/tabbar'
+import TabbarItem from '../../components/u-tabbar-item/tabbarItem'
+import Tabs from '../../components/u-tabs/tabs'
+import Tag from '../../components/u-tag/tag'
+import Text from '../../components/u-text/text'
+import Textarea from '../../components/u-textarea/textarea'
+import Toast from '../../components/u-toast/toast'
+import Toolbar from '../../components/u-toolbar/toolbar'
+import Tooltip from '../../components/u-tooltip/tooltip'
+import Transition from '../../components/u-transition/transition'
+import Upload from '../../components/u-upload/upload'
 
 const {
     color

package/libs/function/index.js

@@ -181,7 +181,7 @@ export function addUnit(value = 'auto', unit = '') {
 	if (!unit) {
 		unit = config.unit || 'px'
 	}
-	if (unit == 'rpx') {
+	if (unit == 'rpx' && testNumber(String(value))) {
 		value = value * 2
 	}
 	value = String(value)

package/package.json

@@ -2,7 +2,7 @@
 	"id": "uview-plus",
 	"name": "uview-plus",
 	"displayName": "零云®uview-plus3.0重磅发布，全面的Vue3移动组件库。",
-	"version": "3.3.18",
+	"version": "3.3.20",
 	"description": "零云®uview-plus已兼容vue3，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
 	"keywords": [
         "uview",

package/libs/config/props/transition.js

@@ -1,18 +0,0 @@
-/*
- * @Author       : LQ
- * @Description  :
- * @version      : 1.0
- * @Date         : 2021-08-20 16:44:21
- * @LastAuthor   : LQ
- * @lastTime     : 2021-08-20 16:59:00
- * @FilePath     : /u-view2.0/uview-ui/libs/config/props/transition.js
- */
-export default {
-    // transition动画组件的props
-    transition: {
-        show: false,
-        mode: 'fade',
-        duration: '300',
-        timingFunction: 'ease-out'
-    }
-}