Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.5k views
in Technique[技术] by (71.8m points)

element input框里动态的内容 tooltip怎样实现换行

<el-tooltip :content="formData.ruleForm.orgName" placement="top">
  <el-input
    v-model="formData.ruleForm.orgName"
    placeholder="请输入机构名称"
    @click.native="changeSelectTree1"
    class="selectTree-input"
  ></el-input>
</el-tooltip>

这是我写的代码


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
<el-tooltip placement="top">
  <div slot="content">第一行tooltip<br/>第二行tooltip</div>
  <el-input
    v-model="formData.ruleForm.orgName"
    placeholder="请输入机构名称"
    @click.native="changeSelectTree1"
    class="selectTree-input"
  ></el-input>
</el-tooltip>

把 el-tooltip 里面的 content 去掉
然后加入用具名 slot 分发content,可以实现多行tooltip
当然,你可以通过计算属性,把 formData.ruleForm.orgName 拆成多行。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...