vue+elementUI之input实战

最近的项目大量的使用了elementUI+vue这种模式。所以写下一些心得，希望能帮助到看到这篇文章的可爱的你。

此文章默认你已经有vue搭建并会使用的基础。木有的话，请先看看vue吧
vue官方文档指路链接（点击）
elementUI官方文档指路链接（点击）

好，废话不多说，让我们开始讲闲话！额，是讲正文。。。。

涉及功能点

• input的禁止输入联动
• select功能的使用
• vue-watch的使用
• v-for的使用
• vue数据的双向绑定

项目上的应用场景

1、点击按钮后禁止输入

效果图


代码

<template>
 <div>
      <el-button type="primary" @click="InputDisabled">示例1禁止输入</el-button>
      <el-button type="primary" @click="InputDisabledClear">示例1禁止输入并清空输入值</el-button>
      <div>
        <el-input class="width100"  placeholder="示例1" v-model="input.one" :disabled="disabled.one"  >
      </el-input>
      </div>
</template>
<script>
  export default {
    name: "index",
    data: () => ({
      input: { one: "", },
      disabled: { one: false, },
    }),

    methods: {
      InputDisabled() {
        this.disabled.one = true;
      },
      InputDisabledClear(){
        this.disabled.one = true;
        //直接将值清空
        this.input.one="";
      }
    },
  }
</script>

2、根据值的变化，禁止输入

比如选择某个select的值的时候，禁止某项input输入。多应用于表单输入的联动。

效果图

2.gif

注意

1、在监听的时候一定要深度监听deep: true
2、为了能更好的遍历数据，我使optionsect的value值和disabled的key名保持一致。

（实际项目中最好将value和key的名字起的都有意义并且操作方便一些比较好）

代码
为了方便观看贴的局部

//html
 <div>
      <el-select v-model="value" placeholder="请选择">
        <el-option  v-for="item in options" :key="item.value"
          :label="item.label" :value="item.value">
        </el-option>
      </el-select>
        <el-input class="width100" placeholder="示例1" v-model="input.one" :disabled="disabled.one"></el-input>
        <el-input class="width100" placeholder="示例2" v-model="input.two" :disabled="disabled.two"></el-input>
        <el-input class="width100" placeholder="示例3" v-model="input.three" :disabled="disabled.three"></el-input>
    </div>

//js
<script>
  export default {
    name: "index",
    data: () => ({
      value: "",
      input: {one: "", two: "",three: "", },
      disabled: { one: false, two: false, three: false, },
      options: [{ value: 'one',  label: "禁止示例1"},
        {value: 'two',label: "禁止示例2"}, 
        {value: 'three',label: "禁止示例3"}, 
        {value: 'reset', label: "重置" }]
    }),
    watch: {
      value: {
        handler(newValue, oldValue) {
          let _this =this;
          if(newValue==='reset'){
            //遍历置灰数组，将值全部置为false
            Object.keys(_this.disabled).forEach(function (i) {
              _this.disabled[i] = false
            });
            return
          }
          //将对应的置灰数组，置为true
            this.disabled[newValue]=true;
        }, deep: true,
      }
    }
  }
</script>

好了，暂时写到这里
此文不定期更新，有其它input用法想了解的可以留言哟~