使用v-model实现select组件__Vue.js

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

一、组件使用场景及需求分析

表单多个固定单值的情况，我们不用再去input框输入值，直接在固定的值里面去选择
选择以后父组件绑定的值对应改变，使得不需要发送表单前再进行赋值
选择前后，列表都是不可见的

二、开始我们的`coding`

首先我们需要的是一个有所有单值选项的list展示
然后是一个展示当前选择的文字框

像这样的：这一步我们只需要父组件传递单值代码，然后当前选中的一个值，没有的话就默认为空。

vue:

<div class="fd-select-box">
     <p v-text="scoped.selected&&scoped.selected.name?scoped.selected.name:'请选择'"></p>
     <span :class="fd-arrow icon iconfont">&#xe6a4;</span>
     <ul class="fd-select-list">
        <li v-for="(item,index) in list"
            :key="index+'select'"
            :class="{'active':scoped.selected&&item.code===scoped.selected.code}">
            {{item.name}}</li>
     </ul>
</div>

JS:

 props: {
    list: {
      type: Array,
      required: true,
    },
    selected: Object,
  },
  data() {
    return {
      scoped: {
        // 当前选中的
        selected: this.selected,
      },
    };
  },

CSS:

 .fd-select-box {
      position: relative;
      width: 200px;
      padding-right: 40px;
      padding-left: 10px;
      height: 36px;
      margin: 30px auto;
      line-height: 36px;
      border: 1px solid #41b883;
      border-radius: 4px;
      color: #000;
      font-size: 14px;
      text-align: left;
      cursor: pointer;
      box-sizing: border-box;

      .fd-arrow {
          position: absolute;
          top: 0;
          right: 0;
          font-size: 30px;
          transition: all 200ms;

          &.fd-down {
              transform: rotate(180deg);
          }
      }

      .fd-select-list {
          position: absolute;
          width: 100%;
          max-height: 200px;
          overflow: auto;
          list-style: none;
          top: 36px;
          left: 0;
          background: #fff;
          box-shadow: 0 0 5px rgba(0,0,0,0.2);
          z-index: 9;

          li {
              padding-left: 12px;
              line-height: 30px;
              cursor: pointer;

              &:hover {
                  background: rgba(65, 191, 138, 0.2);
              }

              &.active {
                  background: rgba(65, 191, 138, 0.9);
                  color: #fff;
              }
          }
      }
  }

这样，我们已经把外层框架搭建好了。

接下来，解决子组件改变，父组件对应的值发生改变。

一般情况我们会想到子组件把当前选中的值通过this.$emit传给父组件，然后父组件再在对应方法里面给对应的值赋值。今天我们用另外一种方法来解决这个问题，那就是v-model,相信我，用了它你会爱上它。

好了，我们看看官方文档怎么说的：

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突:

  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

https://cn.vuejs.org/v2/guide/components-custom-events.html

我的理解就是提供了v-model；在自定义组件上model里的prop里的字段的值会直接赋给props里面对应字段，像之前我们给checked传值是在父组件上通过:checked='false'这样一种形式。现在我们可以使用v-model='false'。来看具体在select框里面的表现吧。

export default {
  name: 'fdSselect',
  model: {
    prop: 'selected',
    event: 'changeValue',
  },
  props: {
    list: {
      type: Array,
      required: true,
    },
    selected: Object,
  },
  data() {
    return {
      scoped: {
        // 是否展示下面的列表
        showFlag: false,
        // 当前选中的
        selected: this.selected,
      },
    };
  },
  methods: {
    // 值改变后传给父组件，因为组件定义了model，所以父组件相当于执行了绑定的model值=emit出去的值
    changeValue(item) {
      this.scoped.selected = item;
      this.scoped.showFlag = false;
      this.$emit('changeValue', this.scoped.selected);
    },
  },
};

父组件调用:

 <fd-select :list="selectList" v-model="selected"></fd-select>

上面的event是我们要emit出去的事件名。这一步相当于在父组件执行了父组件的this.selected等于子组件的this.scoped.selected；所以其实你用组件的时候v-model="value"其实就是:value="value" @change="(val) => {value = val}"；

现在看看我们实现的效果：

前两个需求已经实现了，最后一个需求是在交互上的优化。

首先他要一开始的时候不展示，我们给一个控制下拉框显隐的变量。showFlag默认值为false；点击输入框时展开下拉列表。然后选中选项后隐藏下拉列表。

注意我们的页面结构，下拉列表是输入框的子元素，所以点击下拉列表元素的时候会涉及到事件冒泡，这个时候我们使用.stop修饰符来组织时间冒泡导致下拉列表一直不能隐藏。 vue:

 <div class="fd-select-box" [@click](/user/click)="changeShow">        
 	<p v-text="scoped.selected&&scoped.selected.name?scoped.selected.name:'请选择'"></p>        
    <span :class="['fd-arrow icon iconfont',{'fd-down':scoped.showFlag}]">&#xe6a4;</span>        
    <ul class="fd-select-list" v-show="scoped.showFlag">            
    	<li v-for="(item,index) in list"                
        	:key="index+'select'"                
            [@click](/user/click).stop="changeValue(item)"                
            :class="{'active':scoped.selected&&item.code===scoped.selected.code}">                
            {{item.name}}</li>        
     </ul>
 </div>

JS:

// 值改变后传给父组件，因为组件定义了model，所以父组件相当于执行了绑定的model值=emit出去的值
    changeValue(item) {
      this.scoped.selected = item;
      this.scoped.showFlag = false;
      this.$emit('changeValue', this.scoped.selected);
    },
    // 改变下拉选项的显隐
    changeShow() {
      this.scoped.showFlag = !this.scoped.showFlag;
    },

继续优化，我们现在实现了组件列表的显隐，但是只有操作当前组件时可以控制。那么我们点击其他地方的时候，其实也是希望组件列表可以隐藏起来的。

实现这个的思路：绑定一个点击事件在页面上，只要点击的元素不是当前组件，那么我们就可以隐藏当前组件的列表。这里我用到了自定义指令，具体实现如下：

clickOutside: {
    bind(el, binding) {
      function clickHandler(e) {
        // 这里判断点击的元素是否是本身，是本身，则返回
        if (el.contains(e.target)) {
          return false;
        }
        // 判断指令中是否绑定了函数
        if (binding.expression) {
          // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
          binding.value(e);
        }
        return true;
      }
      // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
      el.vueClickOutside = clickHandler;
      document.addEventListener('click', clickHandler);
    },
    unbind(el) {
      // 解除事件监听
      document.removeEventListener('click', el.vueClickOutside);
      delete el.vueClickOutside;
    },
  },

最后实现效果如图：

后期待优化：实现可搜索的下拉框–>实现可以远程搜索的下拉框

以上为个人编写，希望能对大家的项目有所帮助，如有不当以及有更好的方法欢迎交流。

项目地址: https://github.com/jasminezx/select.git
版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。作者: 艾晓雪原文链接：https://juejin.im/post/6860396718379237384

一、组件使用场景及需求分析

二、开始我们的coding

二、开始我们的`coding`