uview-ui-wjf 1.0.0

package/libs/config/props.js

@@ -0,0 +1,190 @@
+/**
+ * 此文件的作用为统一配置所有组件的props参数
+ * 借此用户可以全局覆盖组件的props默认值
+ * 无需在每个引入组件的页面中都配置一次
+ */
+import config from './config'
+
+import actionSheet from './props/actionSheet.js'
+import album from './props/album.js'
+import alert from './props/alert.js'
+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 formItem 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'
+
+const {
+    color
+} = config
+
+export default {
+    ...actionSheet,
+    ...album,
+    ...alert,
+    ...avatar,
+    ...avatarGroup,
+    ...backtop,
+    ...badge,
+    ...button,
+    ...calendar,
+    ...carKeyboard,
+    ...cell,
+    ...cellGroup,
+    ...checkbox,
+    ...checkboxGroup,
+    ...circleProgress,
+    ...code,
+    ...codeInput,
+    ...col,
+    ...collapse,
+    ...collapseItem,
+    ...columnNotice,
+    ...countDown,
+    ...countTo,
+    ...datetimePicker,
+    ...divider,
+    ...empty,
+    ...form,
+    ...formItem,
+    ...gap,
+    ...grid,
+    ...gridItem,
+    ...icon,
+    ...image,
+    ...indexAnchor,
+    ...indexList,
+    ...input,
+    ...keyboard,
+    ...line,
+    ...lineProgress,
+    ...link,
+    ...list,
+    ...listItem,
+    ...loadingIcon,
+    ...loadingPage,
+    ...loadmore,
+    ...modal,
+    ...navbar,
+    ...noNetwork,
+    ...noticeBar,
+    ...notify,
+    ...numberBox,
+    ...numberKeyboard,
+    ...overlay,
+    ...parse,
+    ...picker,
+    ...popup,
+    ...radio,
+    ...radioGroup,
+    ...rate,
+    ...readMore,
+    ...row,
+    ...rowNotice,
+    ...scrollList,
+    ...search,
+    ...section,
+    ...skeleton,
+    ...slider,
+    ...statusBar,
+    ...steps,
+    ...stepsItem,
+    ...sticky,
+    ...subsection,
+    ...swipeAction,
+    ...swipeActionItem,
+    ...swiper,
+    ...swipterIndicator,
+    ..._switch,
+    ...tabbar,
+    ...tabbarItem,
+    ...tabs,
+    ...tag,
+    ...text,
+    ...textarea,
+    ...toast,
+    ...toolbar,
+    ...tooltip,
+    ...transition,
+    ...upload
+}

package/libs/config/zIndex.js

@@ -0,0 +1,20 @@
+// uniapp在H5中各API的z-index值如下：
+/**
+ * actionsheet: 999
+ * modal: 999
+ * navigate: 998
+ * tabbar: 998
+ * toast: 999
+ */
+
+export default {
+    toast: 10090,
+    noNetwork: 10080,
+    // popup包含popup，actionsheet，keyboard，picker的值
+    popup: 10075,
+    mask: 10070,
+    navbar: 980,
+    topTips: 975,
+    sticky: 970,
+    indexListSticky: 965
+}

package/libs/css/color.scss

@@ -0,0 +1,155 @@
+.u-primary-light {
+	color: $u-primary-light;
+}
+
+.u-warning-light {
+	color: $u-warning-light;
+}
+
+.u-success-light {
+	color: $u-success-light;
+}
+
+.u-error-light {
+	color: $u-error-light;
+}
+
+.u-info-light {
+	color: $u-info-light;
+}
+
+.u-primary-light-bg {
+	background-color: $u-primary-light;
+}
+
+.u-warning-light-bg {
+	background-color: $u-warning-light;
+}
+
+.u-success-light-bg {
+	background-color: $u-success-light;
+}
+
+.u-error-light-bg {
+	background-color: $u-error-light;
+}
+
+.u-info-light-bg {
+	background-color: $u-info-light;
+}
+
+.u-primary-dark {
+	color: $u-primary-dark;
+}
+
+.u-warning-dark {
+	color: $u-warning-dark;
+}
+
+.u-success-dark {
+	color: $u-success-dark;
+}
+
+.u-error-dark {
+	color: $u-error-dark;
+}
+
+.u-info-dark {
+	color: $u-info-dark;
+}
+
+.u-primary-dark-bg {
+	background-color: $u-primary-dark;
+}
+
+.u-warning-dark-bg {
+	background-color: $u-warning-dark;
+}
+
+.u-success-dark-bg {
+	background-color: $u-success-dark;
+}
+
+.u-error-dark-bg {
+	background-color: $u-error-dark;
+}
+
+.u-info-dark-bg {
+	background-color: $u-info-dark;
+}
+
+.u-primary-disabled {
+	color: $u-primary-disabled;
+}
+
+.u-warning-disabled {
+	color: $u-warning-disabled;
+}
+
+.u-success-disabled {
+	color: $u-success-disabled;
+}
+
+.u-error-disabled {
+	color: $u-error-disabled;
+}
+
+.u-info-disabled {
+	color: $u-info-disabled;
+}
+
+.u-primary {
+	color: $u-primary;
+}
+
+.u-warning {
+	color: $u-warning;
+}
+
+.u-success {
+	color: $u-success;
+}
+
+.u-error {
+	color: $u-error;
+}
+
+.u-info {
+	color: $u-info;
+}
+
+.u-primary-bg {
+	background-color: $u-primary;
+}
+
+.u-warning-bg {
+	background-color: $u-warning;
+}
+
+.u-success-bg {
+	background-color: $u-success;
+}
+
+.u-error-bg {
+	background-color: $u-error;
+}
+
+.u-info-bg {
+	background-color: $u-info;
+}
+
+.u-main-color {
+	color: $u-main-color;
+}
+
+.u-content-color {
+	color: $u-content-color;
+}
+
+.u-tips-color {
+	color: $u-tips-color;
+}
+
+.u-light-color {
+	color: $u-light-color;
+}

package/libs/css/common.scss

@@ -0,0 +1,97 @@
+// 超出行数，自动显示行尾省略号，最多5行
+// 来自uView的温馨提示：当您在控制台看到此报错，说明需要在App.vue的style标签加上【lang="scss"】
+@for $i from 1 through 5 {
+	.u-line-#{$i} {
+		/* #ifdef APP-NVUE */
+		// nvue下，可以直接使用lines属性，这是weex特有样式
+		lines: $i;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		flex: 1;
+		/* #endif */
+
+		/* #ifndef APP-NVUE */
+		// vue下，单行和多行显示省略号需要单独处理
+		@if $i == '1' {
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		} @else {
+			display: -webkit-box!important;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			word-break: break-all;
+			-webkit-line-clamp: $i;
+			-webkit-box-orient: vertical!important;
+		}
+		/* #endif */
+	}
+}
+
+
+// 此处加上!important并非随意乱用，而是因为目前*.nvue页面编译到H5时，
+// App.vue的样式会被uni-app的view元素的自带border属性覆盖，导致无效
+// 综上，这是uni-app的缺陷导致我们为了多端兼容，而必须要加上!important
+// 移动端兼容性较好，直接使用0.5px去实现细边框，不使用伪元素形式实现
+.u-border {
+	border-width: 0.5px!important;
+	border-color: $u-border-color!important;
+    border-style: solid;
+}
+
+.u-border-top {
+	border-top-width: 0.5px!important;
+	border-color: $u-border-color!important;
+    border-top-style: solid;
+}
+
+.u-border-left {
+	border-left-width: 0.5px!important;
+	border-color: $u-border-color!important;
+    border-left-style: solid;
+}
+
+.u-border-right {
+	border-right-width: 0.5px!important;
+	border-color: $u-border-color!important;
+    border-right-style: solid;
+}
+
+.u-border-bottom {
+	border-bottom-width: 0.5px!important;
+	border-color: $u-border-color!important;
+    border-bottom-style: solid;
+}
+
+.u-border-top-bottom {
+	border-top-width: 0.5px!important;
+	border-bottom-width: 0.5px!important;
+	border-color: $u-border-color!important;
+    border-top-style: solid;
+    border-bottom-style: solid;
+}
+
+// 去除button的所有默认样式，让其表现跟普通的view、text元素一样
+.u-reset-button {
+	padding: 0;
+	background-color: transparent;
+	/* #ifndef APP-PLUS */
+	font-size: inherit;
+	line-height: inherit;
+	color: inherit;
+	/* #endif */
+	/* #ifdef APP-NVUE */
+	border-width: 0;
+	/* #endif */
+}
+
+/* #ifndef APP-NVUE */
+.u-reset-button::after {
+   border: none;
+}
+/* #endif */
+
+.u-hover-class {
+	opacity: 0.7;
+}
+

package/libs/css/components.scss

@@ -0,0 +1,15 @@
+@import "./mixin.scss";
+
+/* #ifndef APP-NVUE */
+// 由于uView是基于nvue环境进行开发的，此环境中普通元素默认为flex-direction: column;
+// 所以在非nvue中，需要对元素进行重置为flex-direction: column; 否则可能会表现异常
+view, scroll-view, swiper-item {
+	display: flex;
+	flex-direction: column;
+	flex-shrink: 0;
+	flex-grow: 0;
+	flex-basis: auto;
+	align-items: stretch;
+	align-content: flex-start;
+}
+/* #endif */