首页 / VUE / Vue render函数实战之实现tabs选项卡组件

Vue render函数实战之实现tabs选项卡组件

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue render函数实战之实现tabs选项卡组件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9972字，纯文字阅读大概需要15分钟。

内容图文

用过Element ui库的童鞋肯定知道<el-tabs>组件，简单、好用、可以自定义标签页，不知道广大童鞋们在刚开始使用<el-tabs>组件的时候有没有想过它是如何实现的？我咋刚开始使用<el-tabs>组件的时候就有去想过，也想去实现一个超级简单的tabs选项卡组件，无奈当时功力不够，未能实现。最近的一个简单项目中正好要用到选项卡组件，由于项目简单也就没有使用任何第三方库，于是就自己动手写了个选项卡组件。

1、实现tabs选项卡组件的思考

<el-tabs v-model="activeName" @tab-click="handleClick">
 <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
 <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
 <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
 <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>

问题：

如何根据<el-tab-pane>来生成标签页？
如何过滤<el-tabs>组件中的子元素，使得在使用的时候只显示<el-tab-pane>，而不会显示其他组件或div之类的元素？

2、实现思路

想根据<el-tab-pane>来生成标签页就需要使用到<slot>，使用<slot>用<template>的形式肯定是不行的，因为无法获取到<slot>的数量；使用<template>的形式行不通，那就只有使用render函数了
过滤<el-tabs>组件中的子元素也需要使用render函数

3、代码实现

Vue render函数实战之实现tabs选项卡组件 - 文章图片

index.js

import PTabs from './PTabs';
import PTabPane from './PTabPane';

export default function tabsInstall(Vue) {
 if(tabsInstall.installed){
 return;
 }
 Vue.component('PTabs', PTabs);
 Vue.component('PTabPane', PTabPane);
}

PTabs.vue

<script>
 import PTabNav from './PTabNav';
 export default {
 name: "PTabs",
 props: {
  value: {
  type: [String, Number],
  default: ''
  },
  beforeClick: {
  type: Function,
  default(){
   return function () {};
  }
  }
 },
 components: {
  PTabNav
 },
 data(){
  return {
  pTabPanes: [],
  currentName: this.value || 0
  }
 },
 methods: {
  addPane(pane){
  this.pTabPanes.push(pane);
  if(!this.currentName){
   this.setCurrentName(this.pTabPanes[0].name);
  }
  },
  removePane(pane){
  let index = this.pTabPanes.indexOf(pane);
  if(index > -1){
   this.pTabPanes.splice(index, 1);
  }
  },
  setCurrentName(name){
  if(this.currentName !== name){
   this.currentName = name;
   this.$emit('input', name);
  }
  },
  // 标签页点击事件
  handTabNavClick(name, pane, e){
  if(this.currentName === name || pane.disabled){
   return;
  }
  let before = this.beforeClick();
  if(before && before.then){
   before.then(() => {
   this.setCurrentName(name);
   this.$emit('tabClick', pane, e);
   })
  }else{
   this.setCurrentName(name);
   this.$emit('tabClick', pane, e);
  }
  }
 },
 watch: {
  value(newVal){
  this.setCurrentName(newVal);
  },
  currentName(){
  this.$nextTick(() => {
   this.$refs.p_tab_nav.scrollToActiveTab();
  });
  }
 },
 render(h) {
  let {$scopedSlots} = this;
  let $default = $scopedSlots.default();
  let qTabPanes = $default.map(item => {
  /* 过滤<PTabs>xxx</PTabs>中传递的xxx内容。这里只接收<PTabPane>组件，因为我们需要根据<PTabPane>组件的数量来生成
   * <PTabNav>组件，如果参差了其它节点则会导致不能正确生成<PTabNav>组件 */
  if(item.componentOptions && item.componentOptions.tag === 'PTabPane'){
   return item;
  }
  });
  let qTab = h('PTabNav', {
  props: {
   // 将tab-pane传递给 <PTabNav>组件，<PTabNav>组件就知道要有多少个tab-item了
   tabPanes: this.pTabPanes,
   handTabNavClick: this.handTabNavClick
  },
  ref: 'p_tab_nav'
  });
  let qTabBody = h('div', {
  staticClass: 'p-tabs_content'
  }, qTabPanes);

  console.log($default)
  return h('div', {
  staticClass: 'p-tabs'
  }, [qTab, qTabBody]);
 },
 mounted() {
  //console.log(this)
  this.$nextTick(() => {
  this.$refs.p_tab_nav.scrollToActiveTab();
  });
 }
 }
</script>
<style lang="stylus">
.p-tabs{
 .p-tabs_header{
 position: relative;
 margin-bottom: 15px;
 &.is-scrollable{
  padding-left: 20px;
  padding-right: 20px;
 }
 }
 .p-tabs_nav-prev,
 .p-tabs_nav-next{
 position: absolute;
 top: 0;
 width: 20px;
 height: 100%;
 display: none;
 &::before{
  position: absolute;
  content: ' ';
  font-size: 0;
  line-height: 0;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  margin: -5px 0 0 -5px;
 }
 cursor: pointer;
 &.disabled{
  cursor: default;
  border-color: #aaa;
 }
 }
 .p-tabs_nav-prev{
 left: 0;
 &:before{
  transform: rotate(-45deg);
 }
 }
 .p-tabs_nav-next{
 right: 0;
 &:before{
  transform: rotate(135deg);
 }
 }
 .p-tabs_header{
 &.is-scrollable{
  .p-tabs_nav-prev,
  .p-tabs_nav-next{
  display: block;
  }
 }
 }
 .p-tabs_nav-scroll{
 overflow: hidden;
 }
 .p-tabs_nav-list{
 position: relative;
 float: left;
 white-space: nowrap;
 transition: transform .3s;
 }
 .p-tabs_nav-item{
 display: inline-block;
 height: 40px;
 line-height: 40px;
 padding: 0 20px;
 color: #fff;
 cursor: pointer;
 &.active,
 &:hover{
  color: #ffb845;
 }
 &.disabled{
  cursor: not-allowed;
  color: #aaa;
  &:hover{
  color: #aaa;
  }
 }
 }
 .p-tabs_content{
 position: relative;
 overflow: hidden;
 }
 .p-tabs-pane{
 color: #fff;
 }
}
</style>

PTabPane.vue

<template>
 <div class="p-tabs-pane" v-show="show">
 <slot></slot>
 </div>
</template>
<script>
 export default {
 name: "PTabPane",
 props: {
  label: {
  type: String,
  default: ''
  },
  name: {
  type: [String, Number],
  default: ''
  },
  disabled: {
  type: Boolean,
  default: false
  }
 },
 data(){
  return {
  loaded: false
  }
 },
 computed: {
  show(){
  if(this.$parent.currentName === this.name){
   if(!this.loaded){
   this.loaded = true;
   }
   return true;
  }
  return false;
  }
 },
 watch: {
  label(){
  // label更新的时候强制更新父组件，以触发PTabNav才能更新
  this.$parent.$forceUpdate();
  }
 },
 mounted() {
  // 当当前组件创建的时候将当前组件添加到父组件的pTabPanes中，以触发PTabNav才能更新
  this.$parent.addPane(this);
 },
 destroyed() {
  if(this.$el && this.$el.parentNode){
  this.$el.parentNode.removeChild(this.$el);
  }
  // 当当前组件销毁时需从父组件中的pTabPanes中移除当前组件，以触发PTabNav才能更新
  this.$parent.removePane(this);
 }
 }
</script>

PTabNav.vue

<script>
 function noop() {};

 export default {
 name: "PTabNav",
 props: {
  tabPanes: {
  type: Array,
  default(){
   return [];
  }
  },
  handTabNavClick: {
  type: Function,
  default(){
   return function () {};
  }
  }
 },
 data(){
  return {
  navPrevDisabled: true,
  navNextDisabled: true,
  // 控制左右箭头显示
  scrollable: false,
  listOffset: 0
  }
 },
 methods: {
  navPrevClickEvent(){
  if(!this.navPrevDisabled){
   let navScrollW = this.$refs.nav_scroll.offsetWidth;
   let navListW = this.$refs.nav_list.offsetWidth;
   let maxTransformX = 0;
   let transformX = this.listOffset - navScrollW;
   if(transformX < maxTransformX){
   transformX = maxTransformX;
   }
   if(transformX === this.listOffset){
   return;
   }
   console.log('上一页按钮点击了', transformX);
   this.listOffset = transformX;
   if(transformX === 0){
   this.navPrevDisabled = true;
   this.navNextDisabled = false;
   }else if(transformX === (navListW - navScrollW)){
   this.navPrevDisabled = false;
   this.navNextDisabled = true;
   }else{
   this.navPrevDisabled = false;
   this.navNextDisabled = false;
   }
  }
  },
  navNextClickEvent(){
  if(!this.navNextDisabled){
   let navScrollW = this.$refs.nav_scroll.offsetWidth;
   let navListW = this.$refs.nav_list.offsetWidth;
   let maxTransformX = navListW - navScrollW;
   let transformX = this.listOffset + navScrollW;
   if(transformX > maxTransformX){
   transformX = maxTransformX;
   }
   if(transformX === this.listOffset){
   return;
   }
   console.log('下一页按钮点击了', transformX);
   this.listOffset = transformX;
   if(transformX === 0){
   this.navPrevDisabled = true;
   this.navNextDisabled = false;
   }else if(transformX === (navListW - navScrollW)){
   this.navPrevDisabled = false;
   this.navNextDisabled = true;
   }else{
   this.navPrevDisabled = false;
   this.navNextDisabled = false;
   }
  }
  },
  // 计算 .p-tabs_nav-list 是否溢出
  calculateListSpilled(){
  let navScrollW = this.$refs.nav_scroll.offsetWidth;
  let navListW = this.$refs.nav_list.offsetWidth;
  if(navScrollW < navListW){
   this.scrollable = true;
  }else{
   if(this.listOffset > 0){
   this.listOffset = 0;
   }
   this.scrollable = false;
  }
  },
  // 滚动条滚动到激活的tab
  scrollToActiveTab(){
  if(this.scrollable){
   this.$nextTick(() => {
   let navScrollW = this.$refs.nav_scroll.offsetWidth;
   let navList = this.$refs.nav_list;
   let activeTab = navList.querySelector('.active');
   let activeTabOffsetLeft = 0;
   if(activeTab){
    activeTabOffsetLeft = activeTab.offsetLeft;
   }

   let transformX = activeTabOffsetLeft + activeTab.offsetWidth - navScrollW;

   transformX = transformX < 0 ? 0 : transformX;
   this.listOffset = transformX;
   if(transformX === 0){
    this.navPrevDisabled = true;
    this.navNextDisabled = false;
   }else if(transformX === (navList.offsetWidth - navScrollW)){
    this.navPrevDisabled = false;
    this.navNextDisabled = true;
   }else{
    this.navPrevDisabled = false;
    this.navNextDisabled = false;
   }
   });
  }
  }
 },
 computed: {
  listOffsetTran(){
  console.log('dddd',`translateX(-${this.listOffset}px);`)
  return {
   transform: `translateX(-${this.listOffset}px)`
  }
  }
 },
 render(h) {
 /*dom结构
 <div class="p-tabs_header is-scrollable">
  <span class="p-tabs_nav-prev disabled"></span>
  <span class="p-tabs_nav-next"></span>
  <div class="p-tabs_nav-scroll">
  <div class="p-tabs_nav-list">
   <div class="p-tabs_nav-item active">全部</div>
   <div class="p-tabs_nav-item disabled">技术教学</div>
   <div class="p-tabs_nav-item">新手教学</div>
  </div>
  </div>
 </div>
 */
  let navPrev = h('span', {
  staticClass: 'p-tabs_nav-prev',
  'class': {
   disabled: this.navPrevDisabled
  },
  on: {
   click: this.navPrevClickEvent
  }
  });
  let navNext = h('span', {
  staticClass: 'p-tabs_nav-next',
  'class': {
   disabled: this.navNextDisabled
  },
  on: {
   click: this.navNextClickEvent
  }
  });
  // 生成标签页
  let navItems = this.tabPanes.map(item => {
  let $labelSlot = item.$scopedSlots.label ? item.$scopedSlots.label() : null;
  let labelContent = $labelSlot ? $labelSlot : item.label;
  return h('div', {
   staticClass: 'p-tabs_nav-item',
   'class': {
   active: this.$parent.currentName === item.name,
   disabled: item.disabled,
   },
   on: {
   click: (e) => {
    this.handTabNavClick(item.name, item, e);
   }
   }
  }, [labelContent]);
  });
  let navScroll = h('div', {
  staticClass: 'p-tabs_nav-scroll',
  ref: 'nav_scroll'
  }, [
  h('div', {
   staticClass: 'p-tabs_nav-list',
   ref: 'nav_list',
   style: this.listOffsetTran
  }, [navItems])
  ]);

  return h('div', {
  staticClass: 'p-tabs_header',
  'class': {
   'is-scrollable': this.scrollable
  },
  }, [navPrev, navNext, navScroll]);
 },
 updated(){
  this.calculateListSpilled();
 },
 mounted() {
  this.calculateListSpilled();
 }
 }
</script>

4、使用

main.js

// 引入tabs组件
import tabs from './components/p-tabs';
// 全局注册p-tabs组件
Vue.use(tabs);

页面中使用

<PTabs v-model="activeName">
 <PTabPane label="用户管理" name="first">用户管理</PTabPane>
 <PTabPane label="配置管理" name="second">配置管理</PTabPane>
 <PTabPane label="角色管理" name="third">角色管理</PTabPane>
 <PTabPane label="定时任务补偿" name="fourth">定时任务补偿</PTabPane>
</PTabs>

总结

以上所述是小编给大家介绍的Vue render函数实战之实现tabs选项卡组件,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

内容总结

以上是互联网集市为您收集整理的Vue render函数实战之实现tabs选项卡组件全部内容，希望文章能够帮你解决Vue render函数实战之实现tabs选项卡组件所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/332247.html

来源：【匿名】

【上一篇】vue项目中仿element-ui弹框效果的实例代码【下一篇】php怎么返回数据给vue

更多 ►

【Vue render函数实战之实现tabs选项卡组件】教程文章相关的互联网学习教程文章

Vue中render: h => h(App)的含义【代码】

// ES5 (function (h) { return h(App); }); // ES6 h => h(App); 官方文档render: function (createElement) {return createElement(‘h‘ + this.level, // tag name 标签名称this.$slots.default// 子组件中的阵列 )}h是Vue.js 里面的 createElement 函数，这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。函数只...

何时/如何使用 Vue3 render 函数【代码】

什么是 DOM？如果我们把这个 HTML 加载到浏览器中，浏览器创建这些节点，用来显示网页。所以这个HTML映射到一系列DOM节点，然后我们可以使用JavaScript进行操作。例如：let item = document.getElementByTagName(‘h1‘)[0] item.textContent = "New Heading" VDOM网页可以有很多DOM节点，这意味着DOM树可以有数千个节点。这就是为什么我们有像Vue这样的框架，帮我们干这些重活儿，并进行大量的JavaScript调用。然而，搜索和更新数...

Vue2.0 render:h => h(App)【代码】

首先需要了解这是 es 6 的语法，表示 Vue 实例选项对象的 render 方法作为一个函数，接受传入的参数 h 函数，返回 h(App) 的函数调用结果；其次，Vue 在创建 Vue 实例时，通过调用 render 方法来渲染实例的 DOM 树；最后，Vue 在调用 render 方法时，会传入一个 createElement 函数作为参数，也就是这里的 h 的实参是 createElement 函数，然后 createElement 会以 APP 为参数进行调用，关于 createElement 函数的参数说明参见：El...

vue中render函数在什么情况下适合使用？

本篇文章给大家带来的内容是关于vue中render函数在什么情况下适合使用？有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。render函数vue通过 template 来创建你的 HTML。但是，在特殊情况下，这种写死的模式无法满足需求，必须需要js的编程能力。此时，需要用render来创建HTML。什么情况下适合使用render函数在一次封装一套通用按钮组件的工作中，按钮有四个样式(success、error、warning、default)。首先，你可能会...

在vue中如何渲染函数render（详细教程）【图】

本篇文章主要介绍了vue渲染函数render的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧1.什么是render函数？vue通过 template 来创建你的 HTML。但是，在特殊情况下，这种写死的模式无法满足需求，必须需要js的编程能力。此时，需要用render来创建HTML。比如如下我想要实现如下html：<p id="container"><h1><a href="#" rel="external nofollow" rel="external nofollow" >Hello world!</a></...

Vue中render函数基本用法（详细教程）

本篇文章主要介绍了Vue中render函数的使用方法，现在分享给大家，也给大家做个参考。render函数vue通过 template 来创建你的 HTML。但是，在特殊情况下，这种写死的模式无法满足需求，必须需要js的编程能力。此时，需要用render来创建HTML。什么情况下适合使用render函数在一次封装一套通用按钮组件的工作中，按钮有四个样式(default success error )。首先，你可能会想到如下实现<p v-if="type === success">success</p><p v-else...

vueiview组件表格render函数的使用方法详解

下面我就为大家分享一篇vue iview组件表格 render函数的使用方法详解，具有很好的参考价值，希望对大家有所帮助。如果要在标签中加入属性，例如img 中src属性 a标签中href属性此时需要用到attrs 来加入而不是props {title: 操作,key: action,align: center,render: function (h, params) {return h(p, [h(Button, {props: {type: primary,size: small},style: {marginRight: 8px},on: {click: function () {mCheck.singleShow(...

基于vue2.0动态组件及render详解

下面我就为大家分享一篇基于vue2.0动态组件及render详解，具有很好的参考价值，希望对大家有所帮助。如下所示：<template><p class="hello"><h1>{{ msg }}</h1><h2>这里是Boor</h2><component v-bind:my-data="items" v-bind:is="currentView"></component><a class="explain">直直</a><button v-on:click="addData">点击</button></p> </template> <script>//import $ from @/assets/...

vue2.0动态组件与render使用说明

这次给大家带来vue2.0动态组件与render使用说明，vue2.0动态组件与render使用的注意事项有哪些，下面就是实战案例，一起来看一下。如下所示：<template><p class="hello"><h1>{{ msg }}</h1><h2>这里是Boor</h2><component v-bind:my-data="items" v-bind:is="currentView"></component><a class="explain">直直</a><button v-on:click="addData">点击</button></p> </template> <scri...

vue2.0动态组件及render详解

本文主要和大家分享vue2.0动态组件及render详解，希望能帮助到大家。如下所示：<template><p class="hello"><h1>{{ msg }}</h1><h2>这里是Boor</h2><component v-bind:my-data="items" v-bind:is="currentView"></component><a class="explain">直直</a><button v-on:click="addData">点击</button></p> </template> <script>//import $ from @/assets/scripts/lib/zepto.min//console...

vue 源码解析之虚拟Dom-render

vue 源码解析 --虚拟Dom-render instance/index.js function Vue (options) {if (process.env.NODE_ENV !== production &&!(this instanceof Vue)) {warn(Vue is a constructor and should be called with the `new` keyword)}this._init(options) } renderMixin(Vue) 初始化先执行了 renderMixin 方法, Vue 实例化执行this._init, 执行this.init方法中有initRender() renderMixin installRenderHelpers( 将一些渲染的工具函数放在...

详解vue 动态加载并注册组件且通过 render动态创建该组件

基于 iview Tabs 组件实现功能：为每个 tab 动态创建不同的、特定的组件内容，而不需要大量的 import 组件并进行 component 注册 Index.vue<template><div class="content-left-menu"><div class="item-contain layout-content"><Tabs class="cmcc-ivu-tab2" type="card" closable><TabPane v-for="k in zj" :label="k.label" ><loader :vueName="k.vueName"></loader></TabPane></Tabs></div></div> </template> <script>import ...

Vue render函数实战之实现tabs选项卡组件【图】

用过Element ui库的童鞋肯定知道<el-tabs>组件，简单、好用、可以自定义标签页，不知道广大童鞋们在刚开始使用<el-tabs>组件的时候有没有想过它是如何实现的？我咋刚开始使用<el-tabs>组件的时候就有去想过，也想去实现一个超级简单的tabs选项卡组件，无奈当时功力不够，未能实现。最近的一个简单项目中正好要用到选项卡组件，由于项目简单也就没有使用任何第三方库，于是就自己动手写了个选项卡组件。 1、实现tabs选项卡组件的思考...

vue中render函数的使用详解

render函数vue通过 template 来创建你的 HTML。但是，在特殊情况下，这种写死的模式无法满足需求，必须需要js的编程能力。此时，需要用render来创建HTML。render方法的实质就是生成template模板；通过调用一个方法来生成，而这个方法是通过render方法的参数传递给他的；通过这三个参数，可以生成一个完整的模板官网实例//未使用render函数 Vue.component(anchored-heading, {template: #anchored-heading-template,props: {leve...

浅谈Vue render函数在ElementUi中的应用【图】

vue的render函数在日常开发中被广泛应用，今天以ElementUI中的table表头重构为引，实际应用一下借助render函数实现表头搜索，不足之处请多多指教！首先引入官方demo <el-table :data="tableData" style="width: 100%" :border="true"><el-table-column prop="date" label="日期" min-width="20%" align="center"></el-table-column><el-table-column prop="name" label="姓名" min-width="60%" align="center"></el-table-column>...

VUE - 技术教程分类

Vue.js 教程 Vue.js 安装 Vue.js 目录结构 Vue.js 起步 Vue.js 模板语法 Vue.js 计算属性 Vue.js 监听属性 Vue.js 样式绑定 Vue.js 事件处理器 Vue.js 表单 Vue.js 组件 Vue.js 自定义指令 Vue.js 路由 Vue.js 过渡 & 动画 Vue.js 混入 Vue.js Ajax(axios) Vue.js Ajax(vue-resource) Vue.js 实例 vue 全部

VUE - 最热教程

vue权限问题的完美解决方案通过使用vue制作滑动堆叠组件（详细教程...vue渲染页面后div的滚动条保持在最底部...vue中格式化时间戳 vue里面父组件修改子组件样式的方法 vue判断input输入内容全是空格的方法解决vue中对象属性改变视图不更新的问题微信小程序第三方框架对比之 wepy / m...在使用vue中打包项目后刷新碰到404的问...vue实现鼠标移入移出事件代码实例

首页 / VUE / Vue render函数实战之实现tabs选项卡组件

Vue render函数实战之实现tabs选项卡组件

内容导读

内容图文

内容总结

内容备注

内容手机端

【Vue render函数实战之实现tabs选项卡组件】教程文章相关的互联网学习教程文章

Vue中render: h => h(App)的含义【代码】

何时/如何使用 Vue3 render 函数【代码】

Vue2.0 render:h => h(App)【代码】

vue中render函数在什么情况下适合使用？

在vue中如何渲染函数render（详细教程）【图】

Vue中render函数基本用法（详细教程）

vueiview组件表格render函数的使用方法详解

基于vue2.0动态组件及render详解

vue2.0动态组件与render使用说明

vue2.0动态组件及render详解

vue 源码解析之虚拟Dom-render

详解vue 动态加载并注册组件且通过 render动态创建该组件

Vue render函数实战之实现tabs选项卡组件【图】

vue中render函数的使用详解

浅谈Vue render函数在ElementUi中的应用【图】

VUE - 相关标签

TAB - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程