<template>
|
<div>
|
<el-radio-group class="pam-single-btn"
|
v-model="syncSingleSelected">
|
<el-radio v-for="(option,index) in options"
|
:key="index"
|
:label="option.label"
|
@click.native.prevent="patchValue(option.label)">
|
<span class="text--middle">
|
{{option.title}}
|
</span>
|
<span class="radio-sub-title"
|
v-if="option.subTitle">
|
{{option.subTitle}}
|
</span>
|
</el-radio>
|
</el-radio-group>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Component, Prop, PropSync, Vue } from "nuxt-property-decorator";
|
import * as _ from 'lodash';
|
@Component
|
export default class SingleSelectBtn extends Vue {
|
@PropSync('singleSelected', { default: '' }) syncSingleSelected!: string | number;
|
@Prop({ type:Array , default:()=>[] }) options!:OptionBtnDto[];
|
|
// 主要解決按鈕點擊兩次能回到，未點選的狀態
|
patchValue(value: string): void {
|
this.syncSingleSelected = _.isEqual(this.syncSingleSelected, value) ? "" : value;
|
}
|
}
|
export interface OptionBtnDto {
|
title: string,
|
subTitle?: string,
|
label: string | number,
|
}
|
</script>
|
|
<style lang="scss"
|
scoped>
|
|
</style>
|
