forked from opentiny/tiny-vue
86 lines
2.3 KiB
Vue
86 lines
2.3 KiB
Vue
<template>
|
||
<div>
|
||
<div class="row">
|
||
智能识别溢出：
|
||
<tiny-switch v-model="visible" show-text style="width: 80px">
|
||
<template #open>
|
||
<span>auto</span>
|
||
</template>
|
||
<template #close>
|
||
<span>always</span>
|
||
</template>
|
||
</tiny-switch>
|
||
<div style="margin-top: 16px">
|
||
<tiny-tooltip :visible="visible ? 'auto' : 'always'" content="智能提示的提示内容">
|
||
<div class="ellipsis">我的内容很长很长。。。。</div>
|
||
</tiny-tooltip>
|
||
|
||
<tiny-tooltip :visible="visible ? 'auto' : 'always'" content="智能提示的提示内容">
|
||
<div class="ellipsis">内容不超长</div>
|
||
</tiny-tooltip>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
手动控制模式：
|
||
<tiny-switch v-model="manualShow" show-text style="width: 80px">
|
||
<template #open>
|
||
<span>显示</span>
|
||
</template>
|
||
<template #close>
|
||
<span>隐藏</span>
|
||
</template>
|
||
</tiny-switch>
|
||
<div style="margin-top: 16px">
|
||
<tiny-tooltip v-model="manualShow" content="手动控制模式的提示内容" manual>
|
||
<div class="ellipsis">我的内容很长很长。。。。</div>
|
||
</tiny-tooltip>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
禁用控制模式：
|
||
<tiny-switch v-model="disabled" show-text style="width: 80px">
|
||
<template #open>
|
||
<span>禁用</span>
|
||
</template>
|
||
<template #close>
|
||
<span>正常</span>
|
||
</template>
|
||
</tiny-switch>
|
||
<div style="margin-top: 16px">
|
||
<tiny-tooltip content="禁用的提示内容" :disabled="disabled">
|
||
<div class="ellipsis">我的内容很长很长。。。。</div>
|
||
</tiny-tooltip>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="jsx">
|
||
import { ref } from 'vue'
|
||
import { Tooltip as TinyTooltip, Switch as TinySwitch } from '@opentiny/vue'
|
||
|
||
const visible = ref(false)
|
||
const manualShow = ref(false)
|
||
const disabled = ref(false)
|
||
</script>
|
||
|
||
<style scoped>
|
||
.row {
|
||
margin-bottom: 20px;
|
||
}
|
||
.ellipsis {
|
||
display: inline-block;
|
||
width: 100px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
margin: 0 20px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
cursor: pointer;
|
||
}
|
||
.ellipsis:hover {
|
||
background-color: #f1f1f1;
|
||
}
|
||
</style>
|