vue.js3: 使用全局变量(vue@3.2.37)
2022/7/20 23:23:59
本文主要是介绍vue.js3: 使用全局变量(vue@3.2.37),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一,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.js3: 使用全局变量(vue@3.2.37)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-23Vue新手入门教程:从零开始学习Vue框架
- 2024-11-23如何集成Ant Design Vue的图标
- 2024-11-23如何集成Ant Design Vue图标
- 2024-11-23使用vue CLI快速搭建Vue项目教程
- 2024-11-23Vue CLI多环境配置简单教程
- 2024-11-23Vue3入门教程:轻松搭建你的第一个Vue3应用
- 2024-11-23Vue3+Vite快速上手指南
- 2024-11-23Vue3阿里系UI组件入门指南
- 2024-11-23Vue3的阿里系UI组件入门指南
- 2024-11-23Vue3公共组件入门教程