Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
with
185 additions
and 72 deletions.
- +16 −0 document/common/js/ajax.js
- +1 −1 document/common/stylus/base.styl
- +8 −4 document/common/stylus/md.styl
- +66 −0 document/components/badge/badge.vue
- +8 −5 document/components/display/display.vue
- +1 −2 document/components/example/example.vue
- +11 −4 document/components/home/home.vue
- +34 −10 document/components/index/index.vue
- +1 −1 document/components/lang/lang.vue
- +0 −1 document/components/side-list/side-list.vue
- +7 −7 document/components/side-nav/side-nav.vue
- +28 −29 document/components/viewport/viewport.vue
- +3 −3 document/main.js
- +1 −5 src/common/stylus/var/color.styl
| @@ -0,0 +1,16 @@ | ||
| export default function ajax (url) { | ||
| return new Promise(function (resolve, reject) { | ||
| const xhr = new window.XMLHttpRequest() | ||
| xhr.open('GET', url, true) | ||
| xhr.send(null) | ||
| xhr.onreadystatechange = () => { | ||
| if (xhr.readyState === 4) { | ||
| if (xhr.status >= 200 && xhr.status < 300) { | ||
| resolve(xhr.responseText) | ||
| } else { | ||
| reject(xhr) | ||
| } | ||
| } | ||
| } | ||
| }) | ||
| } |
| @@ -0,0 +1,66 @@ | ||
| <template> | ||
| <div class="badge"> | ||
| <span class="badge-left">{{badgeName}}</span> | ||
| <span class="badge-right"> | ||
| {{badgeValue}}</span> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| import ajax from '../../common/js/ajax.js' | ||
| const urlMap = { | ||
| Star: 'https://img.shields.io/github/stars/didi/cube-ui.json', | ||
| Fork: 'https://img.shields.io/github/forks/didi/cube-ui.json', | ||
| Watch: 'https://img.shields.io/github/watchers/didi/cube-ui.json' | ||
| } | ||
| export default{ | ||
| data() { | ||
| return { | ||
| badgeName: '', | ||
| badgeValue: '' | ||
| } | ||
| }, | ||
| props: { | ||
| type: { | ||
| type: String, | ||
| default () { | ||
| return '' | ||
| } | ||
| } | ||
| }, | ||
| mounted() { | ||
| let badge = this.type | ||
| this.getData(badge) | ||
| }, | ||
| methods: { | ||
| getData (badge) { | ||
| let url = urlMap[badge] | ||
| ajax(url).then((response) => { | ||
| let result = JSON.parse(response) | ||
| console.log(result) | ||
| this.badgeName = result.name | ||
| this.badgeValue = result.value | ||
| }) | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
| <style lang="stylus"> | ||
| .badge | ||
| display: inline-block | ||
| text-align: center | ||
| border: 1px #4AA8FF solid | ||
| border-radius: 3px | ||
| font-size: 0px | ||
| color: #000000 | ||
| margin-right: 3px | ||
| span | ||
| display: inline-block | ||
| font-size: 12px | ||
| .badge-left | ||
| padding: 4px 11px | ||
| background-color: #89C6FF | ||
| .badge-right | ||
| padding: 4px 11px | ||
| border-left: 1px #4AA8FF solid | ||
| background-color: white | ||
| </style> |
Oops, something went wrong.