uniapp篇-如何实现相关组件功能，直接全局使用

在使用uniapp时，组件引用的过程比较麻烦，后来在pages.json直接统一注册，直接使用

如何处理相关信息

在pages.jsonz直接注册使用相关内容

"easycom": {
  "autoscan": true,
  "custom": {
    "yeui-(.*)": "@/components/yeui/tui-$1/ye-$1.vue"
   }
},

如何注册相关公共展示内容

1.main.js 配置

import propsConfig from './components/yeui/ye-config/index.js'
uni.$tui = propsConfig;//全局组件配置
// #ifndef VUE3 
Vue.prototype.tui = tui
// #ifdef VUE3
import {createSSRApp} from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(store)
  app.config.globalProperties.tui = tui;
  return {
	app
  }
}
// #endif

2. ./components/yeui/ye-config/index.js 配置相关内容

//组件内主题色 
const color = {
	primary: '#5677fc',
	success: '#07c160',
	warning: '#ff7900',
	danger: '#EB0909',
	pink: '#f74d54',
	blue: '#007AFF',
	link: '#586c94'
}

const propsConfig = {
	//组件内主色配置 
	color,
	//组件名称，字体图标组件 ye-icon
	yeIcon: {
		//组件属性值
		size: 32,
		unit: 'px',
		color: '#999'
	},
	//按钮组件 ye-button
	yeButton: {
		height: '96rpx',
		size: 32
	},
	//列表项组件 ye-list-cell
	yeListCell: {
		arrowColor: '#c0c0c0',
		lineColor: '#eaeef1',
		lineLeft: 44,
		padding: '26rpx 44rpx',
		color: '#333',
		size: 28
	},
	//按钮组件 ye-form-button
	yeFormButton: {
		background: color.primary,
		color: '#fff',
		height: '96rpx',
		size: 32,
		radius: '6rpx'
	},
	//文本组件 ye-text
	yeText: {
		size: 32,
		unit: 'rpx',
		color: ''
	},
	//输入框组件 ye-input
	yeInput: {
		requiredColor: color.danger,
		labelSize: 32,
		labelColor: '#333',
		size: 32,
		color: '#333',
		padding: '26rpx 30rpx',
		backgroundColor: '#FFFFFF',
		radius: 0
	},
	//表单项组件 ye-form-item
	yeFormItem: {
		padding: '28rpx 30rpx',
		labelSize: 32,
		labelColor: '#333',
		labelFontWeight: 400,
		asteriskColor: color.danger,
		background: '#fff',
		arrowColor: '#c0c0c0',
		borderColor: '#eaeef1',
		radius: '0rpx',
		position: 2
	},
	//表单校验组件 ye-form
	yeForm: {
		tipBackgroundColor: color.pink,
		duration: 2000
	},
	//全局方法,调用 uni.$ye.toast
	toast(text, duration, success) {
		uni.showToast({
			// #ifndef MP-ALIPAY
			duration: duration || 2000,
			// #endif
			title: text || "出错啦~",
			icon: success ? 'success' : 'none'
		})
	},
	modal(title, content, showCancel, callback, confirmColor, confirmText) {
		uni.showModal({
			title: title || '提示',
			content: content,
			showCancel: showCancel,
			cancelColor: "#555",
			confirmColor: confirmColor || color.primary,
			confirmText: confirmText || "确定",
			success(res) {
				if (res.confirm) {
					callback && callback(true)
				} else {
					callback && callback(false)
				}
			}
		})
	},
	//跳转页面
	href(url, isMain) {
		if (isMain) {
			uni.switchTab({
				url: url
			})
		} else {
			uni.navigateTo({
				url: url
			});
		}
	},
	rpx2px(value) {
		return uni.upx2px(value)
	}
}
export default propsConfig

3.直接在components内的yeui注册使用，使用是按照app.json相关处理方法处理

配置案例如下：

//ye-grids
<template>
<view class="ye-grids" :class="{'ye-border-top':unlined}">
  <slot></slot>
</view>
</template>

<script>
export default {
  name:"yeGrid",
  props: {
    //是否去掉上线条
    unlined: {
      type: Boolean,
      default: false
	}
  }
}
</script>

<style scoped>
.ye-grids {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.ye-grids::after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  border-top: 1px solid #eaeef1;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.ye-border-top::after {
  border-top: 0 !important;
}
</style>

4.使用方法

<ye-grid>
  <block v-for="(item,index) in routers" :key="index"></block>
</ye-grid>

配置完成后就可以愉快的写组件了(^▽)