# vue-element-placeholder-polyfill

> A vue polyfill using element-ui support IE9

Latest version **1.0.0-beta.2** (published 2018-08-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-element-placeholder-polyfill
pnpm add vue-element-placeholder-polyfill
yarn add vue-element-placeholder-polyfill
bun add vue-element-placeholder-polyfill
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-beta.2 |
| Published | 2018-08-02 |
| First published | 2018-08-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | james-cain |
| Maintainers | james-cain |
| Keywords | vue, element-ui, placeholder, ie9 |

## Links

- npm: https://www.npmjs.com/package/vue-element-placeholder-polyfill
- Repository: https://github.com/james-cain/vue-element-placeholder-polyfill
- Homepage: https://github.com/james-cain/vue-element-placeholder-polyfill#readme
- Issues: https://github.com/james-cain/vue-element-placeholder-polyfill/issues
- npm.io page: https://npm.io/package/vue-element-placeholder-polyfill

## Recent versions

- 1.0.0-beta.2 (latest) — 2018-08-02
- 1.0.0-beta.1 — 2018-08-02
- 1.0.0-beta.0 — 2018-08-02

## README

# vue-element-placeholder-polyfill

**注：1.0.0-beta.0废弃**

- 该组件不包含vue、ElementUI，因此使用时必须提前导入二者
- src中的ie9-oninput-polyfill.js需要提前引入。无论是通过外链方式，还是通过import方式，都行。
- 支持外部引入Vue和ElementUI以及dist中的压缩js，全局变量inputie9Mixins混合到组件中使用。
- 组件体积3.11kb，gzip后1.16kb

#### Install

```
npm install vue-element-placeholder-polyfill
```

#### 使用

##### 使用前提

> 需要引入vue、elementui及src中的ie9-oninput-polyfill.js

##### 引入

- 全局引入，全局暴露inputie9Mixins对象（实际上不能这么使用，ie9并不支持module模式）

```
<script src="路径/ie9-oninput-polyfill.js"></script>
<script src="路径/vue-element-placeholder-polyfill.min.js"></script>

<script type="module">
    var main = {
        data() {
            return {
                userName: '',
                password: '',
            };
        },
        mixins: [
            inputie9Mixins.default,
        ],
    };
    var InputIE9 = Vue.extend(main);
    new InputIE9().$mount('#app');
</script>
```

- import方式

```
import 'vue-element-placeholder-polyfill/src/ie9-oninput-polyfill';
import inputMixins from 'vue-element-placeholder-polyfill/dist/js/vue-element-placeholder-polyfill.min';

export default {
  data() {
    return {
      userName: '',
      password: '',
    };
  },
  mixins: [
    inputMixins,
  ],
};
```

#### 内置方法

##### inputFocus(ref, model, placeholder)

- ref: 当前元素的this.$refs.ref
- model: 与v-model绑定的元素一致。如，登录用户 在data定义为form.userName，该值填form.userName
- placeholder 填写需要提示的标语



#####inputBlur(ref, model, placeholder)

- 属性值和inputFocus一致

#### 自定义指令

##### v-inputie9

- binding对象规则
  - value: 传入指令的必要参数，包括ref, model, placeholder，如{placeholder: '请输入账号', ref:'userNameRef', model:'form.userName'}

#### html标签示例

```
<el-input
    v-model="form.userName"
    ref="userNameRef"
    placeholder="请输入账号"
    @focus="inputFocus('userNameRef', 'form.userName', '请输入账号')"
    @blur="inputBlur('userNameRef', 'form.userName', '请输入账号')"
    v-inputie9="{placeholder: '请输入账号', ref:'userNameRef', model:'form.userName'}">
</el-input>
```

**注意：**

- 除了v-inpuie9指令是额外添加的属性，其他属性为原来就有的属性
- ref必须要填写，focus事件和blur事件第一个参数，inputie9指令中的ref属性与ref一致

#### 暂时支持

- input 输入框

#### 暂不支持

- select选择器
- cascader级联选择器
- timepicker时间选择器中的任意时间范围方式
- datepicker日期选择器中的任意时间范围方式
- datetimepicker日期时间选择器中ed任意日期和时间范围方式

#### 注

- 因为在ie9中式没有placeholder属性的，插件采用的方式为给value赋值，在默认情况下value的值为placeholder，在判断时格外要注意！

---
_Source: https://npm.io/package/vue-element-placeholder-polyfill · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._