chenhaodong / mew-iview

Commit b2d29401f71ba315b892b83f920db03c15c36e1c

Authored by 梁灏
1 parent e1a0fe42

support Circle 

support Circle. change Circle to iCircle
Showing 6 changed files with 68 additions and 4 deletions   Show diff stats
Inline Side-by-side
CHANGE.md
  Show/Hide comments   View file @b2d2940
... ... @@ -23,4 +23,6 @@ class 改为了 className
23 23 ### Carousel
24 24 废弃 activeIndex，使用 v-model，v-for="n in slides.length",Vue2的数字循环，是从1开始的
25 25 ### Tree
26   -废弃 data，改为 value，使用 v-model，key 更名为 name
27 26 \ No newline at end of file
  27 +废弃 data，改为 value，使用 v-model，key 更名为 name，不能再 template 的prop 上使用 this
  28 +### Circle
  29 +改名为 iCircle
28 30 \ No newline at end of file
... ...
README.md
  Show/Hide comments   View file @b2d2940
... ... @@ -56,7 +56,7 @@
56 56 - [ ] Breadcrumb
57 57 - [x] Steps
58 58 - [ ] LoadingBar
59   -- [ ] Circle
  59 +- [x] Circle
60 60 - [x] Affix
61 61 - [ ] BackTop
62 62 - [ ] Spin
... ...
src/index.js
  Show/Hide comments   View file @b2d2940
... ... @@ -11,7 +11,7 @@ import Card from './components/card';
11 11 import Carousel from './components/carousel';
12 12 // import Cascader from './components/cascader';
13 13 import Checkbox from './components/checkbox';
14   -// import Circle from './components/circle';
  14 +import Circle from './components/circle';
15 15 import Collapse from './components/collapse';
16 16 // import DatePicker from './components/date-picker';
17 17 // import Dropdown from './components/dropdown';
... ... @@ -62,7 +62,7 @@ const iview = {
62 62 // Cascader,
63 63 Checkbox,
64 64 CheckboxGroup: Checkbox.Group,
65   - // Circle,
  65 + iCircle: Circle,
66 66 // DatePicker,
67 67 // Dropdown,
68 68 // DropdownItem: Dropdown.Item,
... ...
test/app.vue
  Show/Hide comments   View file @b2d2940
... ... @@ -33,6 +33,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
33 33 <li><router-link to="/card">Card</router-link></li>
34 34 <li><router-link to="/tree">Tree</router-link></li>
35 35 <li><router-link to="/rate">Rate</router-link></li>
  36 + <li><router-link to="/circle">Circle</router-link></li>
36 37 </ul>
37 38 </nav>
38 39 <router-view></router-view>
... ...
test/main.js
  Show/Hide comments   View file @b2d2940
... ... @@ -96,6 +96,10 @@ const router = new VueRouter({
96 96 {
97 97 path: '/rate',
98 98 component: require('./routers/rate.vue')
  99 + },
  100 + {
  101 + path: '/circle',
  102 + component: require('./routers/circle.vue')
99 103 }
100 104 ]
101 105 });
... ...
test/routers/circle.vue 0 → 100644
  Show/Hide comments   View file @b2d2940
  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>
... ...