https://github.com/blesstosam/vue-component

some vue component written by myself
https://github.com/blesstosam/vue-component

Last synced: about 4 hours ago
JSON representation

some vue component written by myself

• Host: GitHub
• URL: https://github.com/blesstosam/vue-component
• Owner: blesstosam
• Created: 2020-06-18T09:19:21.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T19:20:02.000Z (almost 2 years ago)
• Last Synced: 2024-05-17T20:16:19.288Z (6 months ago)
• Language: JavaScript
• Size: 1.43 MB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-component

一些自己写的 vue 组件

## Query （受到 Apollo query 组件的启发）

使用方法：

1. 将请求数据的接口作为函数传递进去

2. request 方法可以是异步请求但是要返回 promise，也可以是普通函数直接返回结果。（原理是内部会判断函数调用的结果是否是 primise 对象）

```html

  

    

    

      
loading...

    


    

    

      
no data

    


    

    

      


        Error: {{error}}

        
Retry

      

    


    

    

      
name: {{data.name}}

    

  


  export default {

    async req() {

      const res = await getUser()

      return {

        code: res.code,

        data: res.data,

        msg: res.msg

      }

    }

  }

```

## Mutation

使用方法：

1. 将 mutation 的接口作为函数传递进去

2. put 方法可以是异步请求但是要返回 promise，也可以是普通函数直接返回结果

3. 如果里面有 query 组件，要放在 slot 里，mutation 成功后会自动调用 query 的 req，重新获取数据

```js

  

    

      

        
name: {{data.name}}

      

    

  

  

    modifying...

    enter

  


```

## Spacer

使用方法：在外层元素为 display:flex，内部使用 spacer，可以将 spacer 右边的元素顶到最右边

```html