脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue组件自定义v-model实现Tab组件

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

 更新时间：2017年12月06日 10:58:54   作者：viewweiwu  
这篇文章主要给大家介绍了关于利用vue组件自定义v-model实现一个Tab组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。

前言

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

效果

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


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>

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

总结

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

您可能感兴趣的文章:

相关文章

  • vue中echarts图表大小适应窗口大小且不需要刷新案例

    vue中echarts图表大小适应窗口大小且不需要刷新案例

    这篇文章主要介绍了vue中echarts图表大小适应窗口大小且不需要刷新案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue中如何获取本地IP地址

    vue中如何获取本地IP地址

    这篇文章主要介绍了vue中如何获取本地IP地址，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 在Vue中实现二维码生成与扫描功能的方法

    在Vue中实现二维码生成与扫描功能的方法

    二维码是一种广泛应用于各种场合的编码方式，它可以将信息编码成一张二维图案，方便快捷地传递信息，在Vue.js中，我们可以使用一些库和组件来实现二维码的生成和扫描，本文将介绍如何在Vue中实现二维码的生成和扫描的方法
    2023-06-06
  • 详细分析vue表单数据的绑定

    详细分析vue表单数据的绑定

    这篇文章主要介绍了vue表单数据的绑定的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-07-07
  • vue-router项目实战总结篇

    vue-router项目实战总结篇

    vue-router 是 Vue.js 官方的路由库.这篇文章主要介绍了vue-router项目实战总结,需要的朋友可以参考下
    2018-02-02
  • VUE+Canvas实现简单五子棋游戏的全过程

    VUE+Canvas实现简单五子棋游戏的全过程

    这篇文章主要给大家介绍了关于VUE+Canvas实现简单五子棋游戏的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • Vue渲染过程浅析

    Vue渲染过程浅析

    这篇文章主要介绍了Vue渲染过程浅析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • Vue extends 属性的用法示例详解

    Vue extends 属性的用法示例详解

    这篇文章主要为大家介绍了Vue extends 属性的用法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • Vue关于访问外链失败的问题

    Vue关于访问外链失败的问题

    这篇文章主要介绍了Vue关于访问外链失败的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • vue+webpack中配置ESLint

    vue+webpack中配置ESLint

    这篇文章主要介绍了vue+webpack中配置ESLint，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论