입력 필드가 콘텐츠를 완전히 표시할 만큼 충분히 넓은지 어떻게 확인할 수 있나요?

Question

<p>열이 많은 테이블에서 Vuetify TextField 구성 요소를 사용하고 있습니다. 구성 요소에 표시할 콘텐츠가 너무 많이 포함되어 있을 수 있으며, 사용자 경험 관점에서 필드 내에서 스크롤하여 콘텐츠를 검사하는 데 셀이 많으면 시간이 너무 오래 걸릴 수 있습니다. </p> <p>순수한 HTML 예</p> <p>Vuetify 예</p> <p>제 첫 번째 아이디어(더 나은 아이디어가 있으면 알려주시기 바랍니다)는 전체 콘텐츠를 표시하는 도구 설명을 표시하는 것입니다. 그러나 구성 요소가 전체 콘텐츠를 표시할 수 있는 경우 이는 성가신 일이 될 것입니다. 그래서 콘텐츠가 숨겨지거나 잘릴 때만 툴팁을 표시하고 싶습니다. </p> <p>그렇다면 구성 요소가 전체 콘텐츠를 표시하고 있는지, 아니면 숨겨진/잘린 콘텐츠가 있는지 알 수 있는 방법이 있습니까? (테이블 성능이 중요하기 때문에 값이 변할 때 아주 복잡한 계산을 할 가치가 있는지 모르겠습니다.)</p> <p>해보았습니다</p> <p>(놀이터)</p> <pre class="brush:php;toolbar:false;"><스크립트 설정> 'vue'에서 { 심판, 시계 } 가져오기 const 필드 = ref() const 메시지 = 참조( 'Hello World! 이 텍스트 필드 구성요소에 표시할 내용이 너무 많습니다.' ) const isCuttingOff = ref(false) 보다( 메시지, () => const inputWidth = field.value?.clientWidth const inputValueWidth = msg.value.length // !!! 여기서 입력값을 측정합니다 !!! console.log({ inputWidth, inputValueWidth }) isCuttingOff.value = inputWidth < }, { 즉시: 사실 } ) </스크립트> <템플릿> <v-앱> <div class="text-h3">잘림: {{ isCuttingOff }}</div> <v-컨테이너 클래스="w-25"> <v-text-field ref="필드" label="fsfdsf" v-model="msg" /> </v-컨테이너> </v-앱> </템플릿></pre> <p>하지만</p>

• 시작 시 inputWidth 변수는 정의되지 않습니다.
<li>변수 <code>inputValueWidth</code></li>를 계산하는 방법을 모르겠습니다.

Answer 1

CSS를 사용하여 ...(줄임표)와 같은 텍스트 오버플로를 표시하고 title 속성을 사용하여 마우스 오버 시 팝업처럼 전체 콘텐츠를 표시합니다.

으아악

Answer 2

코드를 수정하여 텍스트 상자의 clientWidth和scrollWidth을 성공적으로 비교했습니다.

1- field인용문을 제거했습니다.

2- v-text-field에 ID를 추가했습니다.

3- 호출할 수 있는 check函数，并在watch 콜백 함수를 추가했습니다.

4- check 함수 안에서 입력란의 check函数内部，我检查了输入框的clientWidth和scrollWidth을 체크했습니다.

5- 초기 로드 시 실행하기 위해 msg를 빈 문자열에 할당하고 스크립트 하단의 원시 문자열로 변경했습니다.

여기에서 확인하세요: 여기

으아악