vue项目解决IE9不支持placeholder

通过vue的自定义全局指令 Vue.directive 来控制。
由于项目中使用到了elementUi ，所以以解决elementUi组件的input为例

<el-input v-support v-model="value" placeholder="请输入姓名"></el-input>

自定义指令代码

    Vue.directive("support", {
        inserted: function (el, binding, vnode) {
            console.log(el, 'el')
            // 如果兼容placeholder则终止
            if (("placeholder" in document.createElement("input"))) {
                return;
            }
            // select暂时不支持(input为只读状态时)
            var isReadOnly = el.getAttribute("readOnly");
            if (isReadOnly) return

            // 由于第三方input组件都包了一个外层
            var input = el.querySelector("input");
            var placeholder = input.getAttribute("placeholder");
            var span = document.createElement("span");

            // .ie-placeholder 可根据类名自定义样式
            span.className = "ie-placeholder";
            span.innerText = placeholder;
            // 位置设置
            span.style.left = input.offsetLeft + '4' + "px";
            input.parentNode.style.position = "relative";
            input.parentNode.appendChild(span);
            el.addEventListener('click', function (event) {
                if (event.target.nodeName == 'SPAN') {
                    // span.style.display = "none";
                    input.focus()
                }
            })
            span.addEventListener('click', function (event) {
                // span.style.display = "none";
                input.focus()
            })
            input.onblur = function (event) {
                if (!event.target.value) {
                    span.style.display = "inline";
                }
            };
            input.oninput = function (event) {
                if (event.target.value) {
                    span.style.display = "none";
                } else {
                    span.style.display = "inline";
                }
            }
        },

        // 开始更新
        unbind: function (el) {
            var input = el.querySelector("input");
            input.onfocus = input.onblur = input.oninput = null;
        }
    })

可根据ie-placeholder修改css样式

.ie-placeholder {
    font-size: 14px;
    color: #9c9c9c;
}

效果图：