vue3.2中将方法挂载到全局,并调用

256 阅读1分钟

main.ts

import { createApp } from 'vue'
import App from './App.vue'
// 请求方法
import request from '@/api/request.ts'
const app = createApp(App)
app.config.globalProperties.$request = request
app.mount('#app')

login.vue

<template>
	<div id="backcont">
		<div class="meituan-content">
			<div class="login-cont">
				<div class="meituan-title">扫码点餐商户端</div>
				<div class="meituan-user">
					<p>账号</p>
					<el-input clearable v-model="account" class="inptflex" placeholder="请输入账号" />
				</div>
				<div class="meituan-user">
					<p>密码</p>
					<el-input v-model="password" show-password class="inptflex" placeholder="请输入密码" />
				</div>
				<!-- 登录或注册按钮提交 -->
				<el-button @click="signin" type="success" :loading="load" class="meituan-btn">登录</el-button>
			</div>
		</div>
	</div>
</template>


<script setup lang="ts">

import {reactive,ref,toRefs,getCurrentInstance,ComponentInternalInstance } from 'vue'
import {UserAccountForm} from '../../types/loginType'

let instance: ComponentInternalInstance | null = getCurrentInstance();//获取app实例
const router = useRouter();

const form = reactive<UserAccountForm>({
    account: '',
    password: '',
    regi:'注册',
    load:false
})

const {account,password,regi,load} = toRefs(form)

  //登录回调
const signin = async()=>{
    form.load = true
    const obj = {account:form.account,password:form.password}
    try{
        const res = instance?.proxy?.$request.post('https://meituan.thexxdd.cn/apit/login',obj)
        form.load = false
    }catch(e){
        form.load = false
    }
}

</script>

<style scoped>

</style>