https://yui.vip/js/index2.BWUUDbkh.js

1import{I as d,M as s,b as i,h as r,m as t,o as a,y as o,z as e}from"./index2.TXCYkG4n.js";import{a as m}from"./index1.CHy4f-jF.js";import{t as y}from"./index2.C3AWflXc.js";a();var b={name:"Tooltip",components:{doc:y},data(){return{data:[{id:"info",title:"介绍"},{id:"example",title:"示例",children:[{id:"basic",title:"基础用法",desc:"注意<code>y-tooltip</code>内的文本使用了<code>white-space: nowrap</code>，即不自动换行，如需展示很多内容并自动换行时，建议给内容<code>slot</code>增加样式<code>white-space: normal</code>。",code:`<template>
2    <y-tooltip content="Here is the prompt text">
3        A balloon appears when the mouse passes over this text
4    </y-tooltip>
5</template>`},{id:"placement",title:"位置",desc:"组件提供了12个不同的方向显示<code>y-tooltip</code>，具体配置可查看API。",code:`<template>
6    <div class="top">
7        <y-tooltip content="Top Left text" placement="top-start">
8            <y-button>Top Left</y-button>
9        </y-tooltip>
10        <y-tooltip content="Top Center text" placement="top">
11            <y-button>Top Center</y-button>
12        </y-tooltip>
13        <y-tooltip content="Top Right text" placement="top-end">
14            <y-button>Top Right</y-button>
15        </y-tooltip>
16    </div>
17    <div class="center">
18        <y-tooltip content="Left Top text" placement="left-start">
19            <y-button>Left Top</y-button>
20        </y-tooltip>
21        <y-tooltip content="Right Top text" placement="right-start">
22            <y-button>Right Top</y-button>
23        </y-tooltip>
24    </div>
25    <div class="center">
26        <y-tooltip content="Left Center text" placement="left">
27            <y-button>Left Center</y-button>
28        </y-tooltip>
29        <y-tooltip content="Right Center text" placement="right">
30            <y-button>Right Center</y-button>
31        </y-tooltip>
32    </div>
33    <div class="center">
34        <y-tooltip content="Left Bottom text" placement="left-end">
35            <y-button>Left Bottom</y-button>
36        </y-tooltip>
37        <y-tooltip content="Right Bottom text" placement="right-end">
38            <y-button>Right Bottom</y-button>
39        </y-tooltip>
40    </div>
41    <div class="bottom">
42        <y-tooltip content="Bottom Left text" placement="bottom-start">
43            <y-button>Bottom Left</y-button>
44        </y-tooltip>
45        <y-tooltip content="Bottom Center text" placement="bottom">
46            <y-button>Bottom Center</y-button>
47        </y-tooltip>
48        <y-tooltip content="Bottom Right text" placement="bottom-end">
49            <y-button>Bottom Right</y-button>
50        </y-tooltip>
51    </div>
52</template>`,codeStyle:`
53<style scoped>
54    .top, .bottom, .center{
55        display: flex;
56        justify-content: space-between;
57        width: 380px;
58        margin: 0 auto
59    }
60    .center{
61        width: 500px;
62        margin-top: 15px;
63        margin-bottom: 15px
64    }
65    .top button, .center button, .bottom button{
66        width: 120px;
67        margin-right: 0!important
68    }
69</style>`},{id:"slot",title:"自定义内容",desc:"通过自定义<code>slot</code>显示多行文本或更复杂的样式。",code:`<template>
70    <y-tooltip placement="top">
71        <y-button>Multiple lines</y-button>
72        <template #content>
73            <p>Display multiple lines of information</p>
74            <p><i>Can customize the style</i></p>
75        </template>
76    </y-tooltip>
77</template>`},{id:"disabled",title:"禁用",desc:"通过设置属性<code>disabled</code>可以禁用文字提示。",code:`<template>
78    <y-tooltip placement="top" content="Can disable text prompts" :disabled="disabled">
79        <y-button @click="disabled = true">Click to close</y-button>
80    </y-tooltip>
81</template>`,codeOption:`
82<script>
83    export default {
84        data() {
85            return {
86                disabled: false
87            }
88        }
89    }
90<\/script>`,codeSetup:`
91<script setup>
92    import { ref } from "vue"
93
94    const disabled = ref(false)
95<\/script>`,codeTs:!1},{id:"delay",title:"延时",desc:"通过设置属性<code>delay</code>可以延时显示文字提示，单位毫秒。",code:`<template>
96    <y-tooltip placement="top" content="Tooltip text" :delay="1000">
97        <y-button @click="disabled = true">Delay 1 second to show</y-button>
98    </y-tooltip>
99</template>`},{id:"theme",title:"主题",desc:"设置属性<code>theme</code>可以显示不同的颜色。",code:`<template>
100    <y-tooltip content="content of tooltip">
101        <y-button>Dark(default)</y-button>
102    </y-tooltip>
103    <y-tooltip content="content of tooltip" theme="light">
104        <y-button>Light</y-button>
105    </y-tooltip>
106</template>`},{id:"max-width",title:"自动换行",desc:"设置属性<code>max-width</code>，当超出最大值后，文本将自动换行，并两端对齐。",code:`<template>
107    <y-tooltip max-width="200" content="Steven Paul Jobs was an American entrepreneur and business magnate. He was the chairman, chief executive officer, and a co-founder of Apple Inc.">
108        <y-button>Long Content</y-button>
109    </y-tooltip>
110</template>`}]}

110,{id:"api",title:"API",children:[{id:"props",title:"Props",slot:"props"},{id:"events",title:"Events",slot:"events"},{id:"slots",title:"Slots",slot:"slots"}]}]}}},c={class:"doc-table"};function f(g,l,x,v,u,w){const n=d("y-divider"),p=d("doc");return s(),r(p,{data:u.data,title:"Tooltip 文字提示",info:"文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。"},{props:e(()=>[t("table",c,[l[20]||(l[20]=t("thead",null,[t("tr",null,[t("th",null,"属性"),t("th",null,"说明"),t("th",null,"类型"),t("th",null,"默认值")])],-1)),t("tbody",null,[t("tr",null,[l[2]||(l[2]=t("td",null,"content",-1)),l[3]||(l[3]=t("td",null,"显示的内容",-1)),t("td",null,[l[0]||(l[0]=o("String ",-1)),i(n,{mode:"vertical"}),l[1]||(l[1]=o("Number ",-1))]),l[4]||(l[4]=t("td",null,"空",-1))]),l[10]||(l[10]=t("tr",null,[t("td",null,"placement"),t("td",null,[o("提示框出现的位置，可选值为"),t("code",null,"top"),o("、"),t("code",null,"top-start"),o("、"),t("code",null,"top-end"),o("、"),t("code",null,"bottom"),o("、"),t("code",null,"bottom-start"),o("、"),t("code",null,"bottom-end"),o("、"),t("code",null,"left"),o("、"),t("code",null,"left-start"),o("、"),t("code",null,"left-end"),o("、"),t("code",null,"right"),o("、"),t("code",null,"right-start"),o("、"),t("code",null,"right-end"),o("，支持自动识别 ")]),t("td",null,"String"),t("td",null,"bottom")],-1)),l[11]||(l[11]=t("tr",null,[t("td",null,"disabled"),t("td",null,"是否禁用提示框"),t("td",null,"Boolean"),t("td",null,"false")],-1)),l[12]||(l[12]=t("tr",null,[t("td",null,"delay"),t("td",null,"延迟显示，单位毫秒"),t("td",null,"Number"),t("td",null,"0")],-1)),l[13]||(l[13]=t("tr",null,[t("td",null,"always"),t("td",null,"是否总是可见"),t("td",null,"Boolean"),t("td",null,"false")],-1)),l[14]||(l[14]=t("tr",null,[t("td",null,"theme"),t("td",null,[o("主题，可选值为"),t("code",null,"dark"),o("或"),t("code",null,"light")]),t("td",null,"String"),t("td",null,"dark")],-1)),t("tr",null,[l[7]||(l[7]=t("td",null,"max-width",-1)),l[8]||(l[8]=t("td",null,"最大宽度，超出最大值后，文本将自动换行，并两端对齐",-1)),t("td",null,[l[5]||(l[5]=o("String ",-1)),i(n,{mode:"vertical"}),l[6]||(l[6]=o("Number ",-1))]),l[9]||(l[9]=t("td",null,"-",-1))]),l[15]||(l[15]=t("tr",null,[t("td",null,"offset"),t("td",null,"出现位置的偏移量"),t("td",null,"Number"),t("td",null,"0")],-1)),l[16]||(l[16]=t("tr",null,[t("td",null,"transfer"),t("td",null,[o("是否将弹层放置于"),t("code",null,"body"),o("内，在"),t("code",null,"Tabs"),o("、带有"),t("code",null,"fixed"),o("的"),t("code",null,"Table"),o("列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 ")]),t("td",null,"Boolean"),t("td",null,"false")],-1)),l[17]||(l[17]=t("tr",null,[t("td",null,"options"),t("td",null,[o("自定义"),t("code",null,"popper.js"),o("的配置项，具体配置见 "),t("a",{href:"https://popper.js.org/popper-documentation.html",target:"_blank"},"popper.js文档")]),t("td",null,"Object"),t("td",null,[t("code",null,"{ modifiers: { computeStyle:{ gpuAcceleration: false, }, preventOverflow :{ boundariesElement: 'window' }}}")])],-1)),l[18]||(l[18]=t("tr",null,[t("td",null,"transfer-class-name"),t("td",null,[o("开启"),t("code",null,"transfer"),o("时，给浮层添加额外的"),t("code",null,"class"),o("名称")]),t("td",null,"String"),t("td",null,"-")],-1)),l[19]||(l[19]=t("tr",null,[t("td",null,"events-enabled"),t("td",null,[o("是否开启"),t("code",null,"Popper"),o("的"),t("code",null,"eventsEnabled"),o("属性，开启可能会牺牲一定的性能")]),t("td",null,"Boolean"),t("td",null,"false")],-1))])])]),events:e(()=>[...l[21]||(l[21]=[t("table",{class:"doc-table"},[t("thead",null,[t("tr",null,[t("th",null,"事件名"),t("th",null,"说明"),t("th",null,"返回值")])]),t("tbody",null,[t("tr",null,[t("td",null,"on-popper-show"),t("td",null,"在提示框显示时触发"),t("td",null,"-")]),t("tr",null,[t("td",null,"on-popper-hide"),t("td",null,"在提示框消失时触发"),t("td",null,"-")])])],-1)])]),slots:e(()=>[...l[22]||(l[22]=[t("table",{class:"doc-table"},[t("thead",null,[t("tr",null,[t("th",null,"名称"),t("th",null,"说明")])]),t("tbody",null,[t("tr",null,[t("td",null,"default"),t("td",null,"主体内容")]),t("tr",null,[t("td",null,"content"),t("td",null,[o("提示框的内容，定义此"),t("code",null,"slot"),o("时，会覆盖 props "),t("code",null,"content"),o("。")])])])],-1)])]),_:1},8,["data"])}var L=m(b,[["render",f]]);export{L as default};