root
/
mand-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(radio): code refactor 

BREAKING CHANGE: full code rewrite and rename props and slots
This commit is contained in:
moyus 2018-09-16 14:07:24 +08:00
parent dab9d9ae6e
commit 0cfc25cb27
1 changed files with 75 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
components/radio/index.vue
View File

@ -1,76 +1,56 @@
<template> <template>
<div <md-field class="md-radio" :class="{'is-across': isAcrossBorder, 'is-center': isAlignCenter}">
class="md-radio" <md-field-item
:class="{ class="md-radio-item"
'across': isAcrossBorder, v-for="(item, index) in options"
'align-center': isAlignCenter, :class="{
}" 'is-selected': $_isSelectedIndex(index) || $_isSelectedValue(item.value || item.text || item.label, index)
> }"
<md-field> :key="index"
<template v-for="(item, index) in options"> :disabled="$_isInvalidIndex(item, index)"
<md-field-item @click="$_onItemClick(item, index)"
class="md-radio-item" >
:class="{ <div class="md-radio-item-content">
'selected': $_isSelectedIndex(index) || $_isSelectedValue(item.value || item.text || item.label, index), <slot :option="item">
'icon-left': iconPosition === 'left' <p class="md-field-item-title md-radio-item-title" v-text="item.text || item.label"></p>
}" <p class="md-field-item-describe md-radio-item-describe" v-if="item.describe" v-text="item.describe"></p>
title="" </slot>
:key="index" </div>
:disabled="$_isInvalidIndex(item, index)"
@click="$_onItemClick(item, index)"
customized
>
<!-- radio-option-content -->
<template v-if="hasSlot">
<!-- use slot -->
<div class="md-radio-content">
<slot :option="item"></slot>
</div>
</template>
<template v-else>
<!-- use data or optionRender -->
<div class="md-radio-content" v-html="$_getItemText(item)"></div>
</template>
<!-- radio-option-check-icon --> <!-- radio-option-check-icon -->
<template v-if="$_isSelectedIndex(index) || $_isSelectedValue(item.value || item.text || item.label, index)"> <template :slot="iconPosition === 'left' ? 'start': 'after'">
<md-icon <md-icon
v-if="icon" v-if="icon && ($_isSelectedIndex(index) || $_isSelectedValue(item.value || item.text || item.label, index))"
:name="icon" :name="icon"
:size="iconSize" :size="iconSize"
></md-icon> ></md-icon>
</template> <md-icon
<template v-else> v-else-if="iconInverse"
<md-icon :name="iconInverse"
v-if="iconInverse" :size="iconSize"
:name="iconInverse" ></md-icon>
:size="iconSize"
></md-icon>
</template>
</md-field-item>
</template> </template>
<md-input-item </md-field-item>
v-if="hasInputOption" <md-input-item
ref="inputItem" v-if="hasInputOption"
class="md-radio-item" ref="inputItem"
:class="{ class="md-radio-item"
'selected': $_isSelectedIndex(options.length), :class="{
}" 'is-selected': $_isSelectedIndex(options.length),
:title="inputOptionLabel" }"
:placeholder="inputOptionPlaceholder" :title="inputOptionLabel"
v-model="inputOptionValue" :placeholder="inputOptionPlaceholder"
@focus="$_onItemFocus(options.length)" v-model="inputOptionValue"
> @focus="$_onItemFocus(options.length)"
</md-input-item> />
</md-field> </md-field>
</div>
</template> </template>
<script> import Field from '../field' <script> import Field from '../field'
import FieldItem from '../field-item' import FieldItem from '../field-item'
import InputItem from '../input-item' import InputItem from '../input-item'
import Icon from '../icon' import Icon from '../icon'
import {inArray, compareObjects, noop, warn} from '../_util' import {inArray, compareObjects, warn} from '../_util'
export default { export default {
name: 'md-radio', name: 'md-radio',
@ -102,14 +82,14 @@ export default {
return [] return []
}, },
}, },
hasInputOption: {
type: Boolean,
default: false,
},
value: { value: {
type: String, type: String,
default: '', default: '',
}, },
hasInputOption: {
type: Boolean,
default: false,
},
inputOptionLabel: { inputOptionLabel: {
type: String, type: String,
default: '', default: '',
@ -138,14 +118,6 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
optionRender: {
type: Function,
default: noop,
},
isSlotScope: {
type: Boolean,
default: undefined,
},
isAcrossBorder: { isAcrossBorder: {
type: Boolean, type: Boolean,
default: false, default: false,
@ -277,47 +249,33 @@ export default {
</script> </script>
<style lang="stylus"> <style lang="stylus">
.md-radio .md-radio.md-field
.md-field &.is-across
.md-field-item.md-radio-item padding-left 0
position relative padding-right 0
.md-field-item-inner .md-radio-item
.md-field-item-content padding-left field-padding-h
font-weight font-weight-normal padding-right field-padding-h
.md-icon &.is-center
position absolute .md-field-item-start,
right 0 .md-field-item-after
top 50%
transform translateY(-50%)
fill radio-color
&.selected
.md-field-item-content
color radio-color
&.icon-left
.md-icon
left 0
right auto !important
.md-field-item-content
padding-left 40px
.md-field-item-content.left
margin-left 0
.md-input-item.selected
.md-input-item-title
color radio-color
&.across
.md-field
.md-field-item.md-radio-item
padding 0
.md-field-item-inner .md-icon
right 32px
&.icon-left
.md-icon
left 32px
&.align-center
.md-field-item-content.left
justify-content center
.md-field-item .md-icon
display none display none
.md-radio-item-content
text-align center
.md-radio-item
&.is-selected
.md-radio-item-content,
.md-radio-item-title,
.md-radio-item-describe,
.md-input-item-title
color radio-color
.md-field-item-start,
.md-field-item-after
.md-icon
fill radio-color
.md-radio-item-content
font-weight font-weight-normal
</style> </style>