element/packages/radio/src/radio-button.vue

59 lines
1.2 KiB
Vue
Raw Normal View History

2016-07-27 06:15:02 +00:00
<script>
export default {
name: 'ElRadioButton',
props: {
label: {
type: [String, Number],
required: true
},
disabled: Boolean,
2016-08-23 10:32:28 +00:00
name: String
},
data() {
return {
size: this.$parent.size
};
2016-07-27 06:15:02 +00:00
},
computed: {
value: {
get() {
return this.$parent.value;
},
set(newValue) {
2016-08-15 02:36:21 +00:00
this.$parent.$emit('input', newValue);
2016-07-27 06:15:02 +00:00
}
2016-11-26 09:54:27 +00:00
},
activeStyle() {
return {
backgroundColor: this.$parent.fill,
borderColor: this.$parent.fill,
color: this.$parent.textColor
};
2016-07-27 06:15:02 +00:00
}
}
};
</script>
<template>
<label
class="el-radio-button"
:class="[
2016-10-25 03:33:39 +00:00
size ? 'el-radio-button--' + size : '',
2016-07-27 06:15:02 +00:00
{ 'is-active': value === label }
]"
>
<input
class="el-radio-button__orig-radio"
:value="label"
type="radio"
v-model="value"
:name="name"
:disabled="disabled">
2016-11-26 09:54:27 +00:00
<span class="el-radio-button__inner" :style="value === label ? activeStyle : null">
2016-07-27 06:15:02 +00:00
<slot></slot>
2016-08-15 02:36:21 +00:00
<template v-if="!$slots.default">{{label}}</template>
2016-07-27 06:15:02 +00:00
</span>
</label>
</template>