這里寫自定義目錄標(biāo)題

• uniapp，vue3版本使用color-ui
• • 引入color-ui
  • • 1.解壓下載，將colorui文件導(dǎo)入項目根目錄
    • 2.main.js 引入cu-custom組件全局使用
    • 3.app.vue 獲取系統(tǒng)信息，設(shè)置導(dǎo)航欄高度
    • 4.pages,json 取消原生導(dǎo)航欄
  • 解決方式
  • • 方法一
    • 方法二
  • 注意點

uniapp，vue3版本使用color-ui

cu-custom組件使用出現(xiàn)問題，不兼容
僅測試Android環(huán)境

引入color-ui

1.解壓下載，將colorui文件導(dǎo)入項目根目錄

2.main.js 引入cu-custom組件全局使用

// main.js import App from './App' // 引入組件 import cuCustom from './colorui/components/cu-custom.vue' // 條件編譯 非vue3 // #ifndef VUE3 import Vue from 'vue' Vue.config.productionTip = false// vue2使用Vue.component 注冊為全局組件 Vue.component('cu-custom', cuCustom)App.mpType = 'app' const app = new Vue({...App }) app.$mount() // #endif// #ifdef VUE3 import { createSSRApp } from 'vue' export function createApp() {const app = createSSRApp(App)// vue3使用app.component 注冊為全局組件app.component('cu-custom',cuCustom)return {app} } // #endif

3.app.vue 獲取系統(tǒng)信息，設(shè)置導(dǎo)航欄高度

<script>export default {onLaunch: function() {uni.getSystemInfo({success: function(e) {// #ifndef MPVue.prototype.StatusBar = e.statusBarHeight;if (e.platform == 'android') {Vue.prototype.CustomBar = e.statusBarHeight + 50;} else {Vue.prototype.CustomBar = e.statusBarHeight + 45;};// #endif// #ifdef MP-WEIXINVue.prototype.StatusBar = e.statusBarHeight;let custom = wx.getMenuButtonBoundingClientRect();Vue.prototype.Custom = custom;Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;// #endif // #ifdef MP-ALIPAYVue.prototype.StatusBar = e.statusBarHeight;Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;// #endif}})},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}} </script><style>/*每個頁面公共css */@import "colorui/main.css";@import "colorui/icon.css"; </style>

4.pages,json 取消原生導(dǎo)航欄

{"pages": [ //pages數(shù)組中第一項表示應(yīng)用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {// 原生導(dǎo)航的文字"navigationBarTitleText": "uni-app"}},{"path" : "pages/my/my","style" : {"navigationBarTitleText": "my","enablePullDownRefresh": false}}],"tabBar": {"color": "#999999","selectedColor": "#222222","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index",// "iconPath": "static/icon/index.png",// "selectedIconPath": "static/icon/index_active.png","text": "首頁"},{"pagePath": "pages/my/my",// "iconPath": "static/icon/my.png",// "selectedIconPath": "static/icon/my_active.png","text": "我的"}]},"globalStyle": {// "navigationStyle": "custom", 取消原生導(dǎo)航"navigationStyle": "custom","navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"} }

查看效果后，發(fā)現(xiàn)導(dǎo)航欄位置過于靠上

getSystemInfo ()中StatusBar為undefined

原因為 Vue.prototype 替換為 config.globalProperties

解決方式

方法一

app.vue文件中改用config.globalProperties 全局方式
僅更改一個文件即可，推薦

<script>// 引入vue3 getCurrentInstance import { getCurrentInstance } from 'vue'export default {onLaunch: function() {uni.getSystemInfo({success: function(e) {// 獲取 appContext 上下文const {appContext} = getCurrentInstance()console.log('StatusBar',appContext)// #ifndef MPappContext.config.globalProperties.StatusBar = e.statusBarHeight;if (e.platform == 'android') {appContext.config.globalProperties.CustomBar = e.statusBarHeight + 50;} else {appContext.config.globalProperties.CustomBar = e.statusBarHeight + 45;};// #endif// #ifdef MP-WEIXINappContext.config.globalProperties.StatusBar = e.statusBarHeight;let custom = wx.getMenuButtonBoundingClientRect();appContext.config.globalProperties.Custom = custom;appContext.config.globalProperties.CustomBar = custom.bottom + custom.top - e.statusBarHeight;// #endif // #ifdef MP-ALIPAYappContext.config.globalProperties.StatusBar = e.statusBarHeight;appContext.config.globalProperties.CustomBar = e.statusBarHeight + e.titleBarHeight;// #endif}})},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}} </script>

方法二

使用uniapp 的全局屬性 app.globalData
app.vue

<script>export default {globalData: {Custom: 0,CustomBar: 0,StatusBar: 0},onLaunch: function() {uni.getSystemInfo({success: function(e) {const app = getApp()// #ifndef MPapp.globalData.StatusBar = e.statusBarHeight;if (e.platform == 'android') {app.globalData.CustomBar = e.statusBarHeight + 50;} else {app.globalData.CustomBar = e.statusBarHeight + 45;};// #endif// #ifdef MP-WEIXINapp.globalData.StatusBar = e.statusBarHeight;let custom = wx.getMenuButtonBoundingClientRect();app.globalData.Custom = custom;app.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;// #endif // #ifdef MP-ALIPAYapp.globalData.StatusBar = e.statusBarHeight;app.globalData.CustomBar = e.statusBarHeight + e.titleBarHeight;// #endif}})},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}} </script><style>/*每個頁面公共css */@import "colorui/main.css";@import "colorui/icon.css"; </style>

組件中 cu-custom.vue
data部分取值使用 app.globalData

data() {const app = getApp()return {StatusBar: app.globalData.StatusBar,CustomBar: app.globalData.CustomBar}; },

用vue3語法寫也是沒問題的，這里不放代碼了0

注意點

自己嘗試過程中
看一些博客中說明在setup（）中要用ctx或proxy獲取全局屬性

不知道是理解有問題還是什么問題
并未取到app.vue中設(shè)置的全局屬性，
ctx是當(dāng)前的組件實例

appContext.config.globalProperties是可以取到值的，且打包運行也并無問題

總結(jié)

以上是生活随笔為你收集整理的uniapp vue3版本 引用color-ui的cu-custom组件问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。