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.