vue element-ui el-tooltip組件失效

起因

因為公司項目年代久遠以及谷歌chrome 80 后的samesite問題，所以在開發(fā)階段使用Firefox來查看效果

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

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

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

當el-tooltip組件內直接放置文本或者單一元素的時候，在Chrome會有tooltip不出現的問題，在Firefox卻不會

<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>

嘗試解決

但是如果你用一個盒子去包裹的話，它又可以了！??！

<template>
	<el-tooltip class="item" effect="dark" content="tooptip" placement="top-start">
	 	<p>用一個p標簽包裹文本</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組件時應該始終用一個盒子去包裹住里面的元素

vue element-ui 使用el-tooltip內部嵌套其他element-ui組件時報錯

現象：

[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>

解決方案

根據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>

結果：問題解決

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論