[WebOrder] Vuetify scrollable, 스크롤 시 버튼 고정 방법

 

1. 간단하게 scrollable 속성으로 버튼 위치 고정하기

2. 복잡하게 style 줘서 버튼 위치 고정하기

3. 에디터(내용부분) 재랜더링해서 내용 밑에 버튼 붙이기

 

 

 

 

1. scrollable

 

dialog 에 scrollable 속성을 주면

내용이 Height 보다 커서 넘치고 스크롤이 생기더라도 

버튼 위치가 고정된다.

<v-dialog v-model="isOpen" max-width="750" height="800" scrollable persistent>

 

 

이러면 끝이다.

 

 

 

 

 

 

 

 

2. style 주기

 

다른 방법으로는

<v-card>, <v-card-text> 에 style 을 줄 수 도 있다.

 

<v-dialog v-model="isOpen" max-width="750" height="800" scrollable persistent>
    <v-card style="display: flex; flex-direction: column; height: 100%;">
        <v-toolbar flat color="purple-lighten-5" dense>
            <v-card-title>
                {{dialogTitle}}
            </v-card-title>
        </v-toolbar>
        <v-card-text style="flex: 1 1 auto; overflow-y: auto;">
            <div class="d-flex align-center mb-4" style="gap: 8px;">

 

이렇게 해도 scrollable 과 동일하다.

 

 

 

---

 

 

 

3. 에디터 재렌더링 (key 속성)

 

버튼을 내용 밑에 붙이는 방법

(취소 버튼을 누르면 에디터를 재생성하는 방법)

 

TuiEditor 에 key 속성을 주고 취소할 때마다 key++; 로 

에디터를 재생성(재랜더링) 해주는 방법.

 

<TuiEditor
    v-if="isOpen && (!isViewer || content !== '')"
    :key="editorKey"
    ref="editor"
    :content="content"
    :isViewer="isViewer"/>

 

const editorKey = ref(); 

 

// 취소(에디터 -> 뷰어)
const refresh = () => {

    // 다시 viewer 모드.
    isViewer.value = true;
    nextTick(() => {
        if (editor.value) {
            // 문의내용 복원.
            editor.value.isEditMode(true);
            editor.value.setContents("");
            editor.value.setContents(content.value);

            if(tblType.value === 2){
                title.value = originalCustsTitle.value
                selectedCusts.value = [...prevCustSeqList];
            } else {
                title.value = originalTitle.value;
            }
        }
    });
    editorKey.value++;
};

 

 

 

 

그럼 이렇게 버튼이 내용 아래에 붙는다.

 

 

하지만 dialog니까

버튼 고정이 나을 것 같기도 하고

이건 에디터 하나를 쓰는 거라 상관없지만..

 

Qna 처럼 탭이 있는 경우 에디터 재생성하면 탭 이동 시 내용이 안붙는 에러가 나서 ...ㅠ

 

그냥 scrollable 주는 게 낫다.