uview-ui-wjf 1.0.0

package/components/u-grid-item/u-grid-item.vue

@@ -0,0 +1,209 @@
+<template>
+	<!-- #ifndef APP-NVUE -->
+	<view
+	    class="u-grid-item"
+	    hover-class="u-grid-item--hover-class"
+	    :hover-stay-time="200"
+	    @tap="clickHandler"
+	    :class="classes"
+	    :style="[itemStyle]"
+	>
+		<slot />
+	</view>
+	<!-- #endif -->
+	<!-- #ifdef APP-NVUE -->
+	<view
+	    class="u-grid-item"
+	    :hover-stay-time="200"
+	    @tap="clickHandler"
+	    :class="classes"
+	    :style="[itemStyle]"
+	>
+		<slot />
+	</view>
+	<!-- #endif -->
+</template>
+
+<script>
+	import props from './props.js';
+	/**
+	 * gridItem 提示
+	 * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。搭配u-grid使用
+	 * @tutorial https://www.uviewui.com/components/grid.html
+	 * @property {String | Number}	name		宫格的name ( 默认 null )
+	 * @property {String}			bgColor		宫格的背景颜色 （默认 'transparent' ）
+	 * @property {Object}			customStyle	自定义样式，对象形式
+	 * @event {Function} click 点击宫格触发
+	 * @example <u-grid-item></u-grid-item>
+	 */
+	export default {
+		name: "u-grid-item",
+		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+		data() {
+			return {
+				parentData: {
+					col: 3, // 父组件划分的宫格数
+					border: true, // 是否显示边框，根据父组件决定
+				},
+				// #ifdef APP-NVUE
+				width: 0, // nvue下才这么计算，vue下放到computed中，否则会因为延时造成闪烁
+				// #endif
+				classes: [], // 类名集合，用于判断是否显示右边和下边框
+			};
+		},
+		mounted() {
+			this.init()
+		},
+		computed: {
+			// #ifndef APP-NVUE
+			// vue下放到computed中，否则会因为延时造成闪烁
+			width() {
+				return 100 / Number(this.parentData.col) + '%'
+			},
+			// #endif
+			itemStyle() {
+				const style = {
+					background: this.bgColor,
+					width: this.width
+				}
+				return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
+			}
+		},
+		methods: {
+			init() {
+				// 用于在父组件u-grid的children中被添加入子组件时，
+				// 重新计算item的边框
+				uni.$on('$uGridItem', () => {
+					this.gridItemClasses()
+				})
+				// 父组件的实例
+				this.updateParentData()
+				// #ifdef APP-NVUE
+				// 获取元素该有的长度，nvue下要延时才准确
+				this.$nextTick(function(){
+					this.getItemWidth()
+				})
+				// #endif
+				// 发出事件，通知所有的grid-item都重新计算自己的边框
+				uni.$emit('$uGridItem')
+				this.gridItemClasses()
+			},
+			// 获取父组件的参数
+			updateParentData() {
+				// 此方法写在mixin中
+				this.getParentData('u-grid');
+			},
+			clickHandler() {
+				let name = this.name
+				// 如果没有设置name属性，历遍父组件的children数组，判断当前的元素是否和本实例this相等，找出当前组件的索引
+				const children = this.parent?.children
+				if(children && this.name === null) {
+					name = children.findIndex(child => child === this)
+				}
+				// 调用父组件方法，发出事件
+				this.parent && this.parent.childClick(name)
+				this.$emit('click', name)
+			},
+			async getItemWidth() {
+				// 如果是nvue，不能使用百分比，只能使用固定宽度
+				let width = 0
+				if(this.parent) {
+					// 获取父组件宽度后，除以栅格数，得出每个item的宽度
+					const parentWidth = await this.getParentWidth()
+					width = parentWidth / Number(this.parentData.col) + 'px'
+				}
+				this.width = width
+			},
+			// 获取父元素的尺寸
+			getParentWidth() {
+				// #ifdef APP-NVUE
+				// 返回一个promise，让调用者可以用await同步获取
+				const dom = uni.requireNativePlugin('dom')
+				return new Promise(resolve => {
+					// 调用父组件的ref
+					dom.getComponentRect(this.parent.$refs['u-grid'], res => {
+						resolve(res.size.width)
+					})
+				})
+				// #endif
+			},
+			gridItemClasses() {
+				if(this.parentData.border) {
+					const classes = []
+					this.parent.children.map((child, index) =>{
+						if(this === child) {
+							const len = this.parent.children.length
+							// 贴近右边屏幕边沿的child，并且最后一个（比如只有横向2个的时候），无需右边框
+							if((index + 1) % this.parentData.col !== 0 && index + 1 !== len) {
+								classes.push('u-border-right')
+							}
+							// 总的宫格数量对列数取余的值
+							// 如果取余后，值为0，则意味着要将最后一排的宫格，都不需要下边框
+							const lessNum = len % this.parentData.col === 0 ? this.parentData.col : len % this.parentData.col
+							// 最下面的一排child，无需下边框
+							if(index < len - lessNum) {
+								classes.push('u-border-bottom')
+							}
+						}
+					})
+					// 支付宝，头条小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
+					// #ifdef MP-ALIPAY || MP-TOUTIAO
+					classes = classes.join(' ')
+					// #endif
+					this.classes = classes
+				}
+			}
+		},
+		beforeDestroy() {
+			// 移除事件监听，释放性能
+			uni.$off('$uGridItem')
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+      $u-grid-item-hover-class-opcatiy:.5 !default;
+      $u-grid-item-margin-top:1rpx !default;
+      $u-grid-item-border-right-width:0.5px !default;
+      $u-grid-item-border-bottom-width:0.5px !default;
+      $u-grid-item-border-right-color:$u-border-color !default;
+      $u-grid-item-border-bottom-color:$u-border-color !default;
+	.u-grid-item {
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		flex-direction: column;
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		display: flex;
+		/* #endif */
+
+		/* #ifdef MP */
+		position: relative;
+		float: left;
+		/* #endif */
+
+		/* #ifdef MP-WEIXIN */
+		margin-top:$u-grid-item-margin-top;
+		/* #endif */
+
+		&--hover-class {
+			opacity:$u-grid-item-hover-class-opcatiy;
+		}
+	}
+
+	/* #ifdef APP-NVUE */
+	// 由于nvue不支持组件内引入app.vue中再引入的样式，所以需要写在这里
+	.u-border-right {
+		border-right-width:$u-grid-item-border-right-width;
+		border-color: $u-grid-item-border-right-color;
+	}
+
+	.u-border-bottom {
+		border-bottom-width:$u-grid-item-border-bottom-width;
+		border-color:$u-grid-item-border-bottom-color;
+	}
+
+	/* #endif */
+</style>

package/components/u-icon/icons.js

@@ -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'
+}

package/components/u-icon/props.js

@@ -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
+        }
+    }
+}