Vue專案相容IE的placeholder

2021-10-01 06:47:26 字數 1193 閱讀 2241

一、前言

最近在做專案中的相容性處理,由於專案是spa專案,所以對於網上給出的第三方外掛程式解決方案不能滿足專案需求。

實現思路:通過vue自定義指令的形式實現ie9及以下的placeholder相容。

二、正文

由於專案中使用到了elementui 對於elementui元件也做了單獨處理,**如下:

var supportie = 

if(/^el/.test(el.classname))

var placeholder = el.getattribute("placeholder") || "請輸入";

var span = document.createelement("span");

span.classname = "ie-placeholder";

span.innertext = placeholder;

span.style.left = el.offsetleft + "px";

el.parentnode.style.position = "relative";

el.insertadjacentelement("afterend", span);

el.onfocus = function (event)

};el.onblur = function (event)

};el.oninput = function (event) else }},

unbind: function (el)

})}};

export default supportie

2、入口全域性註冊指令

import supportie from "./utils/supportplaceholder"; //ie placeholder相容指令

vue.use(supportie);

3、實際使用方式(需要class為 ie-placeholder的全域性樣式作為支撐 )

三、總結

對於第三方外掛程式在頁面中input元素未被渲染出來的時候,第三方外掛程式的作用是沒有的,所以還是針對專案中的**進行單獨處理。

對於專案中**的單獨處理可以借助ide的repleace in path 去查詢替換,可以將

Vue 不相容 ie 處理方案

1.依賴 babel polyfill 模擬 es2015 環境,並打算在應用程式中使用,而不是在庫 工具中使用。entry entry 3.在 main.js 中新增依賴 import babel polyfill 4.修改更目錄下 babelrc presets env presets env ...

vue專案在ie 360相容模式頁面顯示空白問題

vue專案中,出現在ie與360相容模式下開啟頁面呈現空白問題,如下 控制台報main.js中語法錯誤 上網搜了一下,大部分解決方案是在webpack配置中與main.js中引入babel polyfill進行處理 由於專案是使用webpack.config.js手動搭建,並未使用vue cli腳手...

記一次vue專案ie相容性問題

專案是使用公司自己的腳手架搭建的,其中引入了基於element ui修改的ui框架。在ie中白屏顯示,並且報錯。script1028 script1028 expected identifier,string or number檢視公司文件後發現需要在vue.config.js中新增transpil...