欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

利用vue组件自定义v-model实现一个Tab组件方法示例

程序员文章站 2022-04-21 09:18:03
前言 最近在学习vue,今天看到自定义组件,纠结了一会会然后恍然大悟...官方教程写得不是很详细,所以我决定总结一下。下面话不多说了,来一起看看详细的介绍吧。 效果...

前言

最近在学习vue,今天看到自定义组件,纠结了一会会然后恍然大悟...官方教程写得不是很详细,所以我决定总结一下。下面话不多说了,来一起看看详细的介绍吧。

效果

先让我们看一下例子的效果吧!

利用vue组件自定义v-model实现一个Tab组件方法示例
v-model

我们知道 v-model 是 vue 里面的一个指令,vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定,它可以用在 input 标签上,来做数据的双向绑定,就像这样:

<input v-model="tab">

v-model 事实上是一个语法糖,你也可以这么写:

<input :value="tab" :input="tab = $event.target.value">

可以看得出来,就是传进去一个参数 :value,监听一个事件 @input 而已。

如果有这样的需求,需要在自己的组件上使用 v-model,就像这样:

<tab v-model="tab"></tab>

如何来实现呢?

既然已经知道 v-model 是语法糖了,那么首先,我们可以知道在组件内得到的参数。

<!-- tab.vue -->
<template>
 <div class="tab">
  <p>可以试着把这个值打印出来????????????</p>
  {{value}}
 </div>
</template>


<script>
 export default {
  props: {
   // ↓这个就是我们能取到的参数
   value: {
    type: string,
    default: ''
   }
  }
 }
</script>

嗯,先把这个 value 先放着,如果要实现例子的那个 tab,还需要传进来一组选项(options):

<!-- example.vue -->
<template>
 <div>
  <!-- 这里多了一个参数 ↓ -->
  <tab v-model="tab" :options="options"></tab>
  <p class="info">{{tab}}</p>
 </div>
</template>

<script>
 import tab from '~/tab';

 export default {
  components: {
   tab
  },
  data() {
   return {
    tab: 'bj',
    options: [{
     value: 'bj',
     text: '北京'
    }, {
     value: 'sh',
     text: '上海',
     disabled: true
    }, {
     value: 'gz',
     text: '广州'
    }, {
     value: 'sz',
     text: '深圳'
    }]
   }
  }
 }
</script>

那我们就把传进来的 options 循环出来吧!

<!-- tab.vue -->
<template>
 <div class="tab">
  <div 
   class="item"
   v-for="(item, i) in options"
   :key="i">
   {{item.text}}
  </div>
 </div>
</template>

<script>
 export default {
  props: {
   value: {
    type: string
   },
   options: {
    type: array,
    default: []
   }
  }
 }
</script>

传进来的 options 缺少些参数,我们每个选项需要 active 来标记是否是选中状态,需要 disabled 来标记是否是禁选状态,所以拷贝一个 curroptions 来补全不足参数。

另外直接改变 value 这个 props 是没有效果滴,所以拷贝一个 value 的副本,叫 currvalue。

<!-- tab.vue -->
<script>
 export default {
  props: {
   value: {
    type: string
   },
   options: {
    type: array,
    default: []
   }
  },
  data() {
   return {
    // 拷贝一个 value
    currvalue: this.value,
    curroptions: []
   }
  },
  mounted() {
   this.initoptions();
  },
  methods: {
   initoptions() {
    // 拷贝一个 options
    this.curroptions = this.options.map(item => {
     return {
      ...item,
      active: item.value === this.currvalue,
      disabled: !!item.disabled
     }
    });
   }
  }
 }
</script>

????接下来再在选项上绑定击事件就 ok 了。

既然知道父组件会接受 input 事件,那我们就只需要 this.$emit('input', this.currvalue); 就好了。

<!-- tab.vue -->
<template>
 <div class="tab">
  <div 
   class="item"
   v-for="(item, i) in options"
   :key="i"
   @click="ontabselect(item)">
   <!-- ↑ 这里绑定了一个事件! -->
   {{item.text}}
  </div>
 </div>
</template>

<script>
 export default {
  props: {
   value: {
    type: string
   },
   options: {
    type: array,
    default: []
   }
  },
  data() {
   return {
    currvalue: this.value,
    curroptions: []
   }
  },
  mounted() {
   this.initoptions();
  },
  methods: {
   initoptions() {
    this.curroptions = this.options.map(item => {
     return {
      ...item,
      active: item.value === this.currvalue,
      disabled: !!item.disabled
     }
    });
   },
   // 添加选中事件
   ontabselect(item) {
    if (item.disabled) return;
    this.curroptions.foreach(obj => obj.active = false);
    item.active = true;
    this.currvalue = item.value;
    // 发布 input 事件,↓ 父组件如果有 v-model 就会监听到的。
    this.$emit('input', this.currvalue);
   }
  }
 }
</script>

剩下的补上点样式还有 watch 下 value 和 options 的变化就可以了,最后贴上完整代码。

完整代码

<!-- example.vue -->
<template>
 <div>
  <tab v-model="tab" :options="options"></tab>
  <p class="info">{{tab}}</p>
 </div>
</template>

<script>
 import tab from '~/tab';

 export default {
  components: {
   tab
  },
  data() {
   return {
    tab: 'bj',
    options: [{
     value: 'bj',
     text: '北京'
    }, {
     value: 'sh',
     text: '上海',
     disabled: true
    }, {
     value: 'gz',
     text: '广州'
    }, {
     value: 'sz',
     text: '深圳'
    }]
   }
  }
 }
</script>

<style lang="less" scoped>
 .info {
  margin-left: 50px;
  font-size: 30px;
 }
</style>
<!-- tab.vue -->
<template>
 <div class="tab">
  <div 
   class="item"
   v-for="(item, i) in curroptions"
   :class="item | tabitemclass"
   :key="i"
   @click="ontabselect(item)">
   {{item.text}}
  </div>
 </div>
</template>

<script>
 export default {
  props: {
   value: {
    type: string
   },
   options: {
    type: array,
    default: []
   }
  },
  data() {
   return {
    currvalue: this.value,
    curroptions: []
   }
  },
  mounted() {
   this.initoptions();
  },
  methods: {
   initoptions() {
    this.curroptions = this.options.map(item => {
     return {
      ...item,
      active: item.value === this.currvalue,
      disabled: !!item.disabled
     }
    });
   },
   ontabselect(item) {
    if (item.disabled) return;
    this.curroptions.foreach(obj => obj.active = false);
    item.active = true;
    this.currvalue = item.value;
    this.$emit('input', this.currvalue);
   }
  },
  filters: {
   tabitemclass(item) {
    let classlist = [];
    if (item.active) classlist.push('active');
    if (item.disabled) classlist.push('disabled');
    return classlist.join(' ');
   }
  },
  watch: {
   options(value) {
    this.initoptions();
   },
   value(value) {
    this.currvalue = value;
   }
  }
 }
</script>

<style lang="less" scoped>
 .tab {
  @bordercolor: #ddd;
  @radius: 5px;

  width: 100%;
  margin: 50px;
  overflow: hidden;
  position: relative;
  .item {
   padding: 10px 50px;
   border-top: 1px solid @bordercolor;
   border-left: 1px solid @bordercolor;
   border-bottom: 1px solid @bordercolor;
   font-size: 30px;
   background-color: #fff;
   float: left;
   user-select: none;
   cursor: pointer;
   transition: 300ms;
   &:first-child {
    border-top-left-radius: @radius;
    border-bottom-left-radius: @radius;
   }
   &:last-child {
    border-right: 1px solid @bordercolor;
    border-top-right-radius: @radius;
    border-bottom-right-radius: @radius;
   }
   &.active {
    color: #fff;
    background-color: red;
   }
   &:hover {
    color: #fff;
    background-color: #f06;
   }
   &.disabled {
    color: #fff;
    background-color: pink;
    cursor: no-drop;
   }
  }
 }
</style>

最后送上官网的链接→ 传送门

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。