vue3实现登录弹窗的代码
时间: 2024-05-19 13:15:21 浏览: 7
好的,下面是实现登录弹窗的代码:
<template>
<div>
<button @click="showLoginModal">登录</button>
<Modal v-model="loginModalVisible" title="登录" @ok="login" @cancel="closeLoginModal">
<Input v-model="username" placeholder="请输入用户名"></Input>
<Input v-model="password" placeholder="请输入密码" type="password"></Input>
</Modal>
</div>
</template>
<script>
import { ref } from 'vue'
import { Modal, Input } from 'vant'
export default {
name: 'LoginModal',
components: { Modal, Input },
setup() {
const loginModalVisible = ref(false)
const username = ref('')
const password = ref('')
const showLoginModal = () => {
loginModalVisible.value = true
}
const closeLoginModal = () => {
loginModalVisible.value = false
username.value = ''
password.value = ''
}
const login = () => {
// TODO:发起登录请求
}
return {
loginModalVisible,
username,
password,
showLoginModal,
closeLoginModal,
login,
}
},
}
</script>
希望这个代码对你有帮助!