# 全局的组件如何使用 ``` <hd-login :loginStyle="loginStyle" ref="hdLogin" :fun="beforeLogin"></hd-login> ``` ``` methods: { async beforeLogin () { let rest = await this.getUserInfo() console.log(rest) if (rest.errcode === 1003) { return true } else { this.$Message.error('获取用户信息失败') return false } } } ``` ### hdLogin props | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | loginStyle | 对login节点的样式设置，可以设置背景如backgroundImage: 'url(...)' | Object | default | | title | 登录表单的头名 | String | 欢迎登录 | | desc | 登录描述 | String | 请输入用户名密码 | | fun | 跳转首页之前的处理函数 | Function | 返回true跳转到首页，返回false自己处理逻辑| ### hdLogin slot | 名称 | 说明 | | --- | --- | | default | 默认覆盖登录表单框 | ### Table methods [#](https://www.iviewui.com/components/table#Table_methods) | 方法名 | 说明 | 参数 | | --- | --- | --- | | handleSubmit | 直接调用登录接口|{username,password} #### 使用说明： ``` this.$refs.hdLogin.handleSubmit({username,password}) ``` #### 备注说明 > 如果使用本地图片作为背景的图，可以采用下面的引入图片方法、 ``` import bg from '@/assets/images/login-bg.jpg' export default { data () { return { loginStyle: { backgroundImage: 'url(' + bg + ')' } } } } ```