입력 필드가 콘텐츠를 완전히 표시할 만큼 충분히 넓은지 어떻게 확인할 수 있나요?
<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>를 계산하는 방법을 모르겠습니다.
