# 扩展配置 - 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中进行查看
// ......
}
})