天天看點

iview的poptip插件,自動換行與自定義content的内容

1、自定義content内容,需要用到vue的slot,可以定義多個content

<Poptip trigger="hover" placement="top-start">
	<div slot="content" class="poptipExplain">
	   這是我的自定義内容,我想要換行啊換行雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋
	   這是我的自定義内容,我想要換行啊換行雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋
	   這是我的自定義内容,我想要換行啊換行雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋雞蛋
	</div>
	<img slot="content" :src="storelk" placement="top" alt="管廊方向說明圖" style="height: 300px;">
	<Button type="parimary" size="samll">我是提示框啊</Button>
</Poptip>
           

效果圖(不帶自動換行)

iview的poptip插件,自動換行與自定義content的内容

加上自動換行

<style scoped>
	.poptipExplain{
	    width: 200px;
	    white-space: normal;
	    word-break: break-all;
	    line-height: 25px;
	    font-size: 14px;
	}
</style>
           

效果圖:

iview的poptip插件,自動換行與自定義content的内容