国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

<p>我正在使用一個(gè)包含許多列的表格中的 Vuetify 文字欄位元件?？赡茉撛膬?nèi)容太多而無(wú)法顯示，並且從使用者體驗(yàn)的角度來(lái)看，如果有許多單元格，透過(guò)在欄位內(nèi)滾動(dòng)來(lái)檢查內(nèi)容會(huì)花費(fèi)太多時(shí)間。 </p> <p>純 HTML 範(fàn)例</p> <p>Vuetify 範(fàn)例</p> <p>我的第一個(gè)想法（如果你有更好的想法，請(qǐng)告訴我）是顯示一個(gè)工具提示來(lái)顯示完整的內(nèi)容，但是如果元件能夠顯示完整的內(nèi)容，這樣做會(huì)很煩??人。因此，我只想在內(nèi)容被隱藏/截?cái)鄷r(shí)顯示工具提示。 </p> <p>那麼有沒(méi)有辦法知道元件是否顯示完整的內(nèi)容，或者是否有內(nèi)容被隱藏/截?cái)啵?（表格效能很重要，所以我不知道在值更改時(shí)進(jìn)行非常複雜的計(jì)算是否值得）</p> <p>我試了</p> <p>（遊樂(lè)場(chǎng)）</p> <pre class="brush:php;toolbar:false;"><script setup> import { ref, watch } 從 'vue' const field = ref() const msg = ref( 'Hello World! too much content in this text field component to display.' ) const isCuttingOff = ref(false) watch( msg, () => { const inputWidth = field.value?.clientWidth const inputValueWidth = msg.value.length // !!! measure the input value here !!! console.log({ inputWidth, inputValueWidth }) isCuttingOff.value = inputWidth < inputValueWidth }, { immediate: true } ) </script> <template> <v-app> <div class="text-h3">Is cutting off: {{ isCuttingOff }}</div> <v-container class="w-25"> <v-text-field ref="field" label="fsfdsf" v-model="msg" /> </v-container> </v-app> </template></pre> <p>但是</p> <ul> <li>啟動(dòng)時(shí)，變數(shù)<code>inputWidth</code>是未定義的</li> <li>我不知道如何計(jì)算變數(shù)<code>inputValueWidth</code></li> </ul></p>

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World! too much content in this text field component to display')
</script>

<template>
  <h1 :title=msg>{{ msg }}</h1>
  <input v-model="msg">
</template>

<style>
  h1{
    max-width: 15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<script setup>
  import { ref, watch } from 'vue'

  const msg = ref("")

  const isCuttingOff = ref(false)

  function check() {
    const elm = document.querySelector('#txt')
    isCuttingOff.value = elm.clientWidth < elm.scrollWidth;
    // todo : custom tooltip or any other solution for long texts
  }

  watch(
    msg,
    (currentMsg, oldMessage, callback) => {
      callback(check)
    },
    { immediate: true }
  )

  msg.value =
    'Hello World! too much content in this text cfield component to display.'
</script>
<script></script>
<template>
  <v-app>
    <div class="text-h3">Is cutting off: {{ isCuttingOff }}</div>
    <v-container class="w-25">
      <v-text-field id="txt" v-model="msg" />
    </v-container>
  </v-app>
</template>