From c294aaef78509c888cbd133f0841467d1803e8c2 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期四, 10 二月 2022 14:18:02 +0800
Subject: [PATCH] update: [顧問-帳號資訊, 編輯帳號資訊] 優化畫面

---
 PAMapp/components/multiSelectBtn.vue |   17 ++++++++++++++---
 1 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/PAMapp/components/multiSelectBtn.vue b/PAMapp/components/multiSelectBtn.vue
index 4ecd3c9..707a96f 100644
--- a/PAMapp/components/multiSelectBtn.vue
+++ b/PAMapp/components/multiSelectBtn.vue
@@ -25,8 +25,8 @@
 </template>
 
 <script lang="ts">
-  import { Vue, Component, Prop, PropSync} from 'vue-property-decorator';
-  import { OptionBtnDto } from './singleSelectBtn.vue';
+  import { Vue, Component, Prop, PropSync, Watch} from 'vue-property-decorator';
+import { OptionBtnDto } from '~/shared/models/optionBtnDto.model';
 
   @Component
   export default class MultiSelectBtn extends Vue {
@@ -45,6 +45,17 @@
 
     @Prop({type:String,default:''})
     nameOfOtherOption!:string;
+
+    @Prop()
+    maxLength? : number;
+
+    @Watch('syncMutiSelect')
+    onMutiSelectChange(): void {
+      if (!this.maxLength) return;
+      if (this.syncMutiSelect.length > this.maxLength) {
+        this.syncMutiSelect.shift();
+      }
+    }
 
     isSelectOtherOption=false;
     isSelectAll=false;
@@ -77,7 +88,7 @@
 
 <style lang="scss" scoped>
   .pam-selectAll-btn{
-    padding         : 6px 20px;
+    padding         : 10px 20px;
     border          : 1px $LIGHT_GREY solid;
     background-color: $PRIMARY_WHITE;
     border-radius   : 30px;

--
Gitblit v1.8.0