Commit e5ac79258a39dd1db1458d3b2f8ddc44305ddc19
1 parent
962c40bd
update Rate
update Rate
Showing
8 changed files
with
32 additions
and
3 deletions
Show diff stats
assets/iview.png
src/components/rate/rate.vue
| ... | ... | @@ -7,12 +7,18 @@ |
| 7 | 7 | @click="handleClick(item)"> |
| 8 | 8 | <span :class="[prefixCls + '-star-content']" type="half"></span> |
| 9 | 9 | </div> |
| 10 | + <div :class="[prefixCls + '-text']" v-if="showText"> | |
| 11 | + <slot>{{ value }} <template v-if="value <= 1">{{ t('i.rate.star') }}</template><template v-else>{{ t('i.rate.stars') }}</template></slot> | |
| 12 | + </div> | |
| 10 | 13 | </div> |
| 11 | 14 | </template> |
| 12 | 15 | <script> |
| 16 | + import Locale from '../../mixins/locale'; | |
| 17 | + | |
| 13 | 18 | const prefixCls = 'ivu-rate'; |
| 14 | 19 | |
| 15 | 20 | export default { |
| 21 | + mixins: [ Locale ], | |
| 16 | 22 | props: { |
| 17 | 23 | count: { |
| 18 | 24 | type: Number, |
| ... | ... | @@ -29,6 +35,10 @@ |
| 29 | 35 | disabled: { |
| 30 | 36 | type: Boolean, |
| 31 | 37 | default: false |
| 38 | + }, | |
| 39 | + showText: { | |
| 40 | + type: Boolean, | |
| 41 | + default: false | |
| 32 | 42 | } |
| 33 | 43 | }, |
| 34 | 44 | data () { | ... | ... |
src/locale/lang/en-US.js
src/locale/lang/zh-CN.js
src/locale/lang/zh-TW.js
src/styles/components/rate.less
| ... | ... | @@ -8,7 +8,6 @@ |
| 8 | 8 | vertical-align: middle; |
| 9 | 9 | font-weight: normal; |
| 10 | 10 | font-style: normal; |
| 11 | - font-family: 'Ionicons'; | |
| 12 | 11 | |
| 13 | 12 | &-disabled &-star { |
| 14 | 13 | &:before, |
| ... | ... | @@ -26,6 +25,7 @@ |
| 26 | 25 | padding: 0; |
| 27 | 26 | margin-right: 8px; |
| 28 | 27 | position: relative; |
| 28 | + font-family: 'Ionicons'; | |
| 29 | 29 | transition: all 0.3s ease; |
| 30 | 30 | |
| 31 | 31 | &:hover { |
| ... | ... | @@ -63,4 +63,10 @@ |
| 63 | 63 | color: tint(@rate-star-color, 20%); |
| 64 | 64 | } |
| 65 | 65 | } |
| 66 | + &-text { | |
| 67 | + margin-left: 8px; | |
| 68 | + vertical-align: middle; | |
| 69 | + display: inline-block; | |
| 70 | + font-size: @font-size-small; | |
| 71 | + } | |
| 66 | 72 | } |
| 67 | 73 | \ No newline at end of file | ... | ... |
test/main.js
| ... | ... | @@ -6,9 +6,10 @@ import VueRouter from 'vue-router'; |
| 6 | 6 | import App from './app.vue'; |
| 7 | 7 | import iView from '../src/index'; |
| 8 | 8 | // import locale from '../src/locale/lang/en-US'; |
| 9 | +import locale from '../src/locale/lang/zh-CN'; | |
| 9 | 10 | |
| 10 | 11 | Vue.use(VueRouter); |
| 11 | -Vue.use(iView); | |
| 12 | +Vue.use(iView, { locale }); | |
| 12 | 13 | |
| 13 | 14 | // 开启debug模式 |
| 14 | 15 | Vue.config.debug = true; | ... | ... |
test/routers/rate.vue
| ... | ... | @@ -2,7 +2,7 @@ |
| 2 | 2 | <div style="margin: 100px"> |
| 3 | 3 | {{value}} |
| 4 | 4 | <br><br><br> |
| 5 | - <Rate :value.sync="value" :count="5" allow-half></Rate> | |
| 5 | + <Rate :value.sync="value" :count="5" allow-half show-text></Rate> | |
| 6 | 6 | <br><br><br> |
| 7 | 7 | <i-button @click="value++">add</i-button> |
| 8 | 8 | <i-button @click="value--">remove</i-button> | ... | ... |