深色模式
深色模式
文本提示信息,对 el-tooltip 进行了二次封装,支持文本超出时提示,未超出时不提示,且支持使用原生 HTML title 提示。
<template>
<s-form showColon>
<s-form-item label="文本宽度">
<el-slider v-model="textWidth" :min="235" :max="255" />
</s-form-item>
</s-form>
<s-tooltip content="文本超出时提示,未超出时不提示" :style="{ width: `${ textWidth }px`, background: '#f2f6fc' }" />
</template>
<script setup lang="ts">
import { ref } from "vue";
const textWidth = ref<number>(230);
</script><template>
<el-space :size="20">
<s-tooltip content="Dark Theme" style="width: 5em;" />
<s-tooltip content="Light Theme" effect="light" style="width: 5em;" />
<s-tooltip content="Customized Theme" effect="customized" style="width: 8em;" />
</el-space>
</template>
<script setup lang="ts">
</script>
<style lang="scss">
.el-popper.is-customized {
padding: 6px 12px;
background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}
.el-popper.is-customized .el-popper__arrow::before {
background: linear-gradient(45deg, #b2e68d, #bce689);
right: 0;
}
</style>title 属性)<template>
<div class="example-sub-title">Tooltip 提示</div>
<s-tooltip content="Tooltip Mode" style="width: 6em;" />
<hr />
<div class="example-sub-title">HTML 原生提示( <code>title</code> 属性)</div>
<s-tooltip content="HTML title Mode" style="width: 7em;" nativeMode />
</template>
<script setup lang="ts">
</script>