Commit b2d29401f71ba315b892b83f920db03c15c36e1c
1 parent
e1a0fe42
support Circle
support Circle. change Circle to iCircle
Showing
6 changed files
with
68 additions
and
4 deletions
Show diff stats
CHANGE.md
| @@ -23,4 +23,6 @@ class 改为了 className | @@ -23,4 +23,6 @@ class 改为了 className | ||
| 23 | ### Carousel | 23 | ### Carousel |
| 24 | 废弃 activeIndex，使用 v-model，v-for="n in slides.length",Vue2的数字循环，是从1开始的 | 24 | 废弃 activeIndex，使用 v-model，v-for="n in slides.length",Vue2的数字循环，是从1开始的 |
| 25 | ### Tree | 25 | ### Tree |
| 26 | -废弃 data，改为 value，使用 v-model，key 更名为 name | ||
| 27 | \ No newline at end of file | 26 | \ No newline at end of file |
| 27 | +废弃 data，改为 value，使用 v-model，key 更名为 name，不能再 template 的prop 上使用 this | ||
| 28 | +### Circle | ||
| 29 | +改名为 iCircle | ||
| 28 | \ No newline at end of file | 30 | \ No newline at end of file |
README.md
src/index.js
| @@ -11,7 +11,7 @@ import Card from './components/card'; | @@ -11,7 +11,7 @@ import Card from './components/card'; | ||
| 11 | import Carousel from './components/carousel'; | 11 | import Carousel from './components/carousel'; |
| 12 | // import Cascader from './components/cascader'; | 12 | // import Cascader from './components/cascader'; |
| 13 | import Checkbox from './components/checkbox'; | 13 | import Checkbox from './components/checkbox'; |
| 14 | -// import Circle from './components/circle'; | 14 | +import Circle from './components/circle'; |
| 15 | import Collapse from './components/collapse'; | 15 | import Collapse from './components/collapse'; |
| 16 | // import DatePicker from './components/date-picker'; | 16 | // import DatePicker from './components/date-picker'; |
| 17 | // import Dropdown from './components/dropdown'; | 17 | // import Dropdown from './components/dropdown'; |
| @@ -62,7 +62,7 @@ const iview = { | @@ -62,7 +62,7 @@ const iview = { | ||
| 62 | // Cascader, | 62 | // Cascader, |
| 63 | Checkbox, | 63 | Checkbox, |
| 64 | CheckboxGroup: Checkbox.Group, | 64 | CheckboxGroup: Checkbox.Group, |
| 65 | - // Circle, | 65 | + iCircle: Circle, |
| 66 | // DatePicker, | 66 | // DatePicker, |
| 67 | // Dropdown, | 67 | // Dropdown, |
| 68 | // DropdownItem: Dropdown.Item, | 68 | // DropdownItem: Dropdown.Item, |
test/app.vue
| @@ -33,6 +33,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; } | @@ -33,6 +33,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; } | ||
| 33 | <li><router-link to="/card">Card</router-link></li> | 33 | <li><router-link to="/card">Card</router-link></li> |
| 34 | <li><router-link to="/tree">Tree</router-link></li> | 34 | <li><router-link to="/tree">Tree</router-link></li> |
| 35 | <li><router-link to="/rate">Rate</router-link></li> | 35 | <li><router-link to="/rate">Rate</router-link></li> |
| 36 | + <li><router-link to="/circle">Circle</router-link></li> | ||
| 36 | </ul> | 37 | </ul> |
| 37 | </nav> | 38 | </nav> |
| 38 | <router-view></router-view> | 39 | <router-view></router-view> |
test/main.js
| @@ -96,6 +96,10 @@ const router = new VueRouter({ | @@ -96,6 +96,10 @@ const router = new VueRouter({ | ||
| 96 | { | 96 | { |
| 97 | path: '/rate', | 97 | path: '/rate', |
| 98 | component: require('./routers/rate.vue') | 98 | component: require('./routers/rate.vue') |
| 99 | + }, | ||
| 100 | + { | ||
| 101 | + path: '/circle', | ||
| 102 | + component: require('./routers/circle.vue') | ||
| 99 | } | 103 | } |
| 100 | ] | 104 | ] |
| 101 | }); | 105 | }); |
| 1 | +<style lang="less"> | ||
| 2 | + .demo-circle-custom{ | ||
| 3 | + & h1{ | ||
| 4 | + color: #3f414d; | ||
| 5 | + font-size: 28px; | ||
| 6 | + font-weight: normal; | ||
| 7 | + } | ||
| 8 | + & p{ | ||
| 9 | + color: #657180; | ||
| 10 | + font-size: 14px; | ||
| 11 | + margin: 10px 0 15px; | ||
| 12 | + } | ||
| 13 | + & span{ | ||
| 14 | + display: block; | ||
| 15 | + padding-top: 15px; | ||
| 16 | + color: #657180; | ||
| 17 | + font-size: 14px; | ||
| 18 | + &:before{ | ||
| 19 | + content: ''; | ||
| 20 | + display: block; | ||
| 21 | + width: 50px; | ||
| 22 | + height: 1px; | ||
| 23 | + margin: 0 auto; | ||
| 24 | + background: #e0e3e6; | ||
| 25 | + position: relative; | ||
| 26 | + top: -15px; | ||
| 27 | + }; | ||
| 28 | + } | ||
| 29 | + & span i{ | ||
| 30 | + font-style: normal; | ||
| 31 | + color: #3f414d; | ||
| 32 | + } | ||
| 33 | + } | ||
| 34 | +</style> | ||
| 35 | +<template> | ||
| 36 | + <i-circle | ||
| 37 | + :size="250" | ||
| 38 | + :trail-width="4" | ||
| 39 | + :stroke-width="5" | ||
| 40 | + :percent="75" | ||
| 41 | + stroke-linecap="square" | ||
| 42 | + stroke-color="#43a3fb"> | ||
| 43 | + <div class="demo-circle-custom"> | ||
| 44 | + <h1>{{ 42001776 }}</h1> | ||
| 45 | + <p>消费人群规模</p> | ||
| 46 | + <span> | ||
| 47 | + 总占人数 | ||
| 48 | + <i>75%</i> | ||
| 49 | + </span> | ||
| 50 | + </div> | ||
| 51 | + </i-circle> | ||
| 52 | +</template> | ||
| 53 | +<script> | ||
| 54 | + export default { | ||
| 55 | + | ||
| 56 | + } | ||
| 57 | +</script> |