uv-ui

# 扩展配置 - JS工具库

uv-ui内置的方法默认不再挂载到uni对象之上，也就意味着默认情况下不能在项目中直接使用uni.$uv.xxx使用内置方法。但是可以通过扩展可以解决，通过如下方式进行配置即可：

1. 在项目根目录中的main.js中，引入并使用uv-ui-tools工具库，注意这两行要放在import App from './App'之后：

  • hbuilderx导入安装的配置方式：
// main.js
import uvUI from '@/uni_modules/uv-ui-tools'
// #ifndef VUE3
Vue.use(uvUI);
// #endif
// #ifdef VUE3
app.use(uvUI);
// #endif
  • npm安装的配置方式：
// main.js
import uvUI from '@climblee/uv-ui'
// #ifndef VUE3
Vue.use(uvUI);
// #endif
// #ifdef VUE3
app.use(uvUI);
// #endif

2. 在项目中使用：

  • 只要是uni.$uv.xxx()使用的工具，可以使用全局注册的方式，也可以使用局部引入的方式使用。
  • 全部工具请参考API。

全局使用

// vue2
<script>
	// 任意.js
	console.log(uni.$uv.os())
	console.log(uni.$uv.sys())
	console.log(uni.$uv.trim(' abc '));	// 去除两端空格
	console.log(uni.$uv.random(1, 3)); //获取随机数
	export default {
		onReady(){
			console.log(this.$uv.getRect('.demo'))
		}
	}
</script>

// vue3之setup语法糖
<script setup>
	import { onReady } from '@dcloudio/uni-app';
	import {getCurrentInstance} from 'vue';
	const { ctx } = getCurrentInstance();
	onReady(()=>{
		ctx.$uv.getRect('.demo').then(res=>{
			console.log(res)
		})
	})
	console.log(uni.$uv.os())
	// ...
</script>

局部引入使用

  • hbuilderx导入安装的配置方式：
<script setup>
	import { os, sys } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import { trim } from '@/uni_modules/uv-ui-tools/libs/function/test.js';
	
	console.log(os());
	console.log(sys());
	console.log(trim(' abc '));
</script>
  • npm安装的配置方式：
<script setup>
	import { os, sys } from '@climblee/uv-ui/libs/function/index.js';
	import { trim } from '@climblee/uv-ui/libs/function/test.js';
	
	console.log(os());
	console.log(sys());
	console.log(trim(' abc '));
</script>

注意

部分内置方法不能使用uni.$uv.xx进行使用，需要通过this.$uv.xx使用，如this.$uv.getRect获取节点布局信息，详情见节点布局信息。

原因：内置mixin中的方法使用export default {}导出，无法直接挂载到uni对象上，这样做的目的也是兼容vue3，所以只能使用Vue.mixin的方式混入全局，故需要通过this.$uv.xx使用。

获取节点信息：nvue与vue不一样，参考文档：获取节点布局信息-nvue (opens new window)

# 扩展配置 - 自定义主题

uv-ui默认内置了一套主题颜色，默认颜色与uni_modules/uv-ui-tools/theme.scss一致，可以修改theme.scss中的颜色值并在uni.scss中引入，即可自定义主题。具体使用方法如下：

1. 在项目根目录的uni.scss中引入uv-ui的theme.scss主题文件

  • hbuilderx导入安装的配置方式：
/* uni.scss */

@import '@/uni_modules/uv-ui-tools/theme.scss';

/* 也可以引入自己的scss文件，变量名和theme.scss中保持一致即可 */
@import '@/common/css/theme-self.scss';
  • npm安装的配置方式：
/* uni.scss */

@import '@climblee/uv-ui/theme.scss';

/* 也可以引入自己的scss文件，变量名和theme.scss中保持一致即可 */
@import '@/common/css/theme-self.scss';

2. 自定义属于自己的主题颜色

下面这些颜色值都可以根据自己的需求去修改，请注意主题中的颜色要对应。

/* theme.scss */
$uv-main-color: #303133;
$uv-content-color: #606266;
$uv-tips-color: #909193;
$uv-light-color: #c0c4cc;
$uv-border-color: #dadbde;
$uv-bg-color: #f3f4f6;
$uv-disabled-color: #c8c9cc;
...

# 扩展配置 - 基础样式

uv-ui内置了一些基础样式，建议开发者在APP.vue中全局引入，这样做的好处有：

  • 隐藏scroll-view的滚动条等。

  • 避免uv-modal 等组件挡住 uni.showToast 等弹出。

  • 可以直接使用 uv-line-1 uv-border uv-border-top uv-hover-class 等内置样式

  • hbuilderx导入安装的配置方式：

/* APP.vue */
<style lang="scss">
	@import '@/uni_modules/uv-ui-tools/index.scss';
</style>
  • npm安装的配置方式：
/* APP.vue */
<style lang="scss">
	@import '@climblee/uv-ui/index.scss';
</style>

# 扩展配置 - setConfig

  • 修改uv-ui内置配置方案，我们可以通过setCofig方法配置uv-ui内部的各项内置配置，目前支持配置config、props属性。
  • 进行setConfig配置之前，必须先完成扩展配置-js工具库配置。

注意事项

app-vue不支持全局使用uni.$uv.setConfig设置props属性

// main.js

// hbuilderx导入安装的配置方式：
import uvUI from '@/uni_modules/uv-ui-tools'

或

// npm安装的配置方式：
import uvUI from '@climblee/uv-ui'

// #ifndef VUE3
Vue.use(uvUI);
// #endif
// #ifdef VUE3
app.use(uvUI);
// #endif

// 调用setConfig方法，方法内部会进行对象属性深度合并，可以放心嵌套配置
// 需要在Vue.use(uvUI)之后执行
uni.$uv.setConfig({
	// 修改$uv.config对象的属性
	config: {
		// 修改默认单位为rpx，相当于执行 uni.$uv.config.unit = 'rpx'
		unit: 'rpx'
	},
	// 修改$uv.props对象的属性
	props: {
		// 修改uv-text组件的size参数的默认值，注意：默认值都要用default声明
		text: {
			color: {
				default: 'red'
			}
		}
		// 其他组件属性配置，具体的参数名称可以去每个组件的props.js中进行查看
		// ......
	}
})

← 内置样式 →