# 全局的組件如何使用 ``` <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 + ')' } } } } ```