vue.js3: 使用全局变量(vue@3.2.37)

2022-07-20 22:35:20 阅读：183 来源： 互联网

标签：vue app 37 3.2 screenSize js3 import globalProperties

一，js代码:

1,main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './route'

//判断是否移动端的函数
const isMobileFunc = () => {
    let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
    if (flag === null) {
        return 0;
    } else {
        return 1;
    }
};

const app = createApp(App)
app.use(router)
// 定义全局变量:平台
if (isMobileFunc() == 1) {
    app.config.globalProperties.$platForm= "mobile";
} else {
    app.config.globalProperties.$platForm= "pc";
}
// 定义全局变量:浏览器的宽高
app.config.globalProperties.$screenSize={
    width:0,
    height:0,
};
app.mount('#app')

2,App.vue

<template>
  <router-view />
</template>
<script>
import {onMounted} from "vue";
import {getCurrentInstance} from 'vue'
export default {
  name: 'App',
  setup() {
     onMounted(()=>{
       let globalProperties = getCurrentInstance().appContext.config.globalProperties;
       //得到浏览器的宽高
       let screen = {
         width:document.documentElement.clientWidth,
         height: document.documentElement.clientHeight,
       };
       globalProperties.$screenSize = screen;
       //窗口改变大小时
       window.onresize = () => {
         let screen = {
           width:document.documentElement.clientWidth,
           height: document.documentElement.clientHeight,
         };
         globalProperties.$screenSize = screen;
       }
     })
  }
}
</script>

<style>
html,body{
  margin:0;
  padding:0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 60px;*/
}
</style>

3,Home.vue

<template>
<div>
  <router-link :to="{ path: '/code/code', query: { codeId: 123 }}">
    去code页面
  </router-link>
  platform:{{platForm}}<br/>
  screen width:{{$screenSize.width}}<br/>
  screen height:{{$screenSize.height}}<br/>
</div>
</template>

<script>
import {getCurrentInstance,ref} from 'vue'
export default {
  name: "HomePage",
  setup() {
    let globalProperties = getCurrentInstance().appContext.config.globalProperties;

    const platForm = ref(globalProperties.$platForm);
    const screenSize= ref(globalProperties.$screenSize);
    return {
        platForm,
        screenSize,
    }
  }
}
</script>

<style scoped>
</style>

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi

说明：作者:刘宏缔邮箱: 371125307@qq.com

二，测试效果

三，查看vue框架的版本:

liuhongdi@lhdpc:/data/vue/child$ npm list vue
child@0.1.0 /data/vue/child
├─┬ @vue/cli-plugin-babel@5.0.6
│ └─┬ @vue/babel-preset-app@5.0.6
│   └── vue@3.2.37 deduped
├─┬ vue-router@4.1.2
│ └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped

标签：vue,app,37,3.2,screenSize,js3,import,globalProperties
来源： https://www.cnblogs.com/architectforest/p/16500094.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue.js3: 使用全局变量(vue@3.2.37)

一，js代码:

二，测试效果

三，查看vue框架的版本: