vue element-ui el-tooltip組件失效

起因

因?yàn)楣卷?xiàng)目年代久遠(yuǎn)以及谷歌chrome 80 后的samesite問題，所以在開發(fā)階段使用Firefox來查看效果

項(xiàng)目上到測試環(huán)境之后，我這邊使用Firefox查看效果是沒有問題的，tooltip組件正式顯示

但是當(dāng)測試使用Chrome的時(shí)候，tooltip組件沒有顯示，審查元素也發(fā)現(xiàn)沒有相應(yīng)的tooltip的html元素出現(xiàn)，正常來講應(yīng)該是要出現(xiàn)類似以下的html元素的

最后經(jīng)過大量百度(bushi) 以及查閱github的issue之后得出：

當(dāng)el-tooltip組件內(nèi)直接放置文本或者單一元素的時(shí)候，在Chrome會(huì)有tooltip不出現(xiàn)的問題，在Firefox卻不會(huì)

<template>
	<!-- 直接放置文本 -->
	<el-tooltip class="item" effect="dark" content="tooptip" placement="top-start">
	 	直接放置文本
	</el-tooltip>
	
	<!-- 單一元素 -->
	<el-tooltip class="item" effect="dark" content="tooptip" placement="top-start">
	 	<textarea v-model="value" @change="updata"></textarea>
	</el-tooltip>
</template>

嘗試解決

但是如果你用一個(gè)盒子去包裹的話，它又可以了?。。?/p>

<template>
	<el-tooltip class="item" effect="dark" content="tooptip" placement="top-start">
	 	<p>用一個(gè)p標(biāo)簽包裹文本</p>
	</el-tooltip>
	
	<el-tooltip class="item" effect="dark" content="tooptip" placement="top-start">
	 	<div>
	 		<textarea v-model="value" @change="updata"></textarea>
		</div>
	</el-tooltip>
</template>

心得

在使用el-tooptip組件時(shí)應(yīng)該始終用一個(gè)盒子去包裹住里面的元素

vue element-ui 使用el-tooltip內(nèi)部嵌套其他element-ui組件時(shí)報(bào)錯(cuò)

現(xiàn)象：

[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'style')"

found in

---> <ElSwitch> at packages/switch/src/component.vue
       <ElTooltip>
         <ElDialog> at packages/dialog/src/component.vue
           <OffSeasonStorage>
             <CustomizationDetails> at src/views/equipment/components/Customization.vue
               <AppMain> at src/layout/components/AppMain.vue
                 <Layout> at src/layout/index.vue
                   <App> at src/App.vue
                     <Root>
warn @ vue.runtime.esm.js?2b0e:619
vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read properties of undefined (reading 'style')
    at VueComponent.setBackgroundColor (element-ui.common.js?5c96:7289:1)
    at VueComponent.mounted (element-ui.common.js?5c96:7314:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863:1)
    at callHook (vue.runtime.esm.js?2b0e:4235:1)
    at Object.insert (vue.runtime.esm.js?2b0e:3158:1)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6390:1)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6609:1)
    at Vue._update (vue.runtime.esm.js?2b0e:3963:1)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4081:1)
    at Watcher.get (vue.runtime.esm.js?2b0e:4495:1)
logError @ vue.runtime.esm.js?2b0e:1897

代碼：

<el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :before-close="closeFunc"
    :lock-scroll="false"
    :append-to-body="true"
    top=""
  >
<el-tooltip v-model="item.tooltip" effect="dark" :manual="true" placement="left">
    <div slot="content">
      <div>
        <div>tips</div>
      </div>
    </div>
    <div>
      <el-switch
                v-model="item.switch"
                class="switch"
                :width="60"
                active-color="#AE0F0A"
                inactive-color="#DDDDDD"
                @change="switchChangeFuc(item)"
              >
              </el-switch>
            </div>
          </el-tooltip>
</el-dialog>

解決方案

根據(jù)dialog的展示與否重新渲染el-switch

<el-switch
                v-if="dialogVisible"
                v-model="item.switch"
                class="switch"
                :width="60"
                active-color="#AE0F0A"
                inactive-color="#DDDDDD"
                @change="switchChangeFuc(item)"
              >
              </el-switch>

結(jié)果：問題解決

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論