<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 { OptionBtnDto } from "~/shared/models/optionBtnDto.model";
|
|
@Component
|
export default class SingleSelectBtn extends Vue {
|
|
@PropSync('singleSelected', { default: '' })
|
syncSingleSelected!: string | number;
|
|
@Prop({ type:Array , default:()=>[] })
|
options!:OptionBtnDto[];
|
|
//////////////////////////////////////////////////////////////////////
|
patchValue(value: string | number): void {
|
// 主要解決按鈕點擊兩次能回到，未點選的狀態
|
this.syncSingleSelected = this.syncSingleSelected === value ? "" : value;
|
}
|
}
|
</script>
|
