text-view

Appearance

示例 ​

基础用法 ​

风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap
vue
<template>
  <TextView :content="text" />
</template>

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

// 注意这里的文本是能够超出换行的字数
const text = ref('风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap...')
</script>
<template>
  <TextView :content="text" />
</template>

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

// 注意这里的文本是能够超出换行的字数
const text = ref('风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap...')
</script>

控制行数 ​

风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap
vue
<template>
  <TextView :content="text" :rows="1" />
</template>

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

// 注意这里的文本是能够超出换行的字数
const text = ref('风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap...')
</script>
<template>
  <TextView :content="text" :rows="1" />
</template>

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

// 注意这里的文本是能够超出换行的字数
const text = ref('风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap...')
</script>

展开/收起：按钮文本 ​

风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap
vue
<template>
  <TextView :content="text" open-text="展开文本" close-text="收起文本" />
</template>

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

// 注意这里的文本是能够超出换行的字数
const text = ref('风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap...')
</script>
<template>
  <TextView :content="text" open-text="展开文本" close-text="收起文本" />
</template>

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

// 注意这里的文本是能够超出换行的字数
const text = ref('风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap...')
</script>

链接按钮 ​

风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap
vue
<template>
  <TextView :content="text" :link="link" open-text="跳转链接" />
</template>

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

// 注意这里的文本是能够超出换行的字数
const text = ref('风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap...')
const link = 'https://au1996.gitee.io/blog/'
</script>
<template>
  <TextView :content="text" :link="link" open-text="跳转链接" />
</template>

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

// 注意这里的文本是能够超出换行的字数
const text = ref('风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap...')
const link = 'https://au1996.gitee.io/blog/'
</script>

按钮点击事件 ​

风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap
vue
<template>
  <TextView :content="text" :is-click="true" open-text="打开弹窗" @btn-click="btnClick" />
</template>

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

// 注意这里的文本是能够超出换行的字数
const text = ref('风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap...')

const btnClick = () => {
  window.alert(text.value)
}
</script>
<template>
  <TextView :content="text" :is-click="true" open-text="打开弹窗" @btn-click="btnClick" />
</template>

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

// 注意这里的文本是能够超出换行的字数
const text = ref('风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap...')

const btnClick = () => {
  window.alert(text.value)
}
</script>

文本背景颜色 ​

风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap
vue
<template>
  <TextView
    :content="text"
    :content-color="contentColor"
    :button-color="buttonColor"
    :button-background="buttonBackground"
  />
</template>

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

// 注意这里的文本是能够超出换行的字数
const text = ref('风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap...')
const contentColor = 'pink'
const buttonColor = '#fff'
const buttonBackground = 'blue'
</script>
<template>
  <TextView
    :content="text"
    :content-color="contentColor"
    :button-color="buttonColor"
    :button-background="buttonBackground"
  />
</template>

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

// 注意这里的文本是能够超出换行的字数
const text = ref('风花雪月测试是否换行嘻嘻哈哈琴棋书画唱跳Rap...')
const contentColor = 'pink'
const buttonColor = '#fff'
const buttonBackground = 'blue'
</script>