经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue选项卡组件的实现方法
来源:jb51  时间:2022/3/1 15:40:06  对本文有异议

本文实例为大家分享了vue选项卡组件的实现代码,供大家参考,具体内容如下

主要功能:点击不同的选项,显示不同的内容

html

  1. <!DOCTYPE html>
  2. <html>
  3. ?? ?<head>
  4. ?? ??? ?<meta charset="UTF-8">
  5. ?? ??? ?<title></title>
  6. ?? ??? ?<link rel="stylesheet" type="text/css" href="css/style.css" />
  7. ?? ??? ?<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
  8. ?? ??? ?<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  9. ?? ??? ?<script type="text/javascript">
  10. ?? ??? ??? ?$(document).ready(function(){
  11. ?? ??? ??? ??? ?var app=new Vue({
  12. ?? ??? ??? ??? ??? ?el: "#app",
  13. ?? ??? ??? ??? ??? ?data: {
  14. ?? ??? ??? ??? ??? ??? ?activeKey: '1'//被选择的选项
  15. ?? ??? ??? ??? ??? ?}
  16. ?? ??? ??? ??? ?});
  17. ?? ??? ??? ?});
  18. ?? ??? ?</script>
  19. ?? ?</head>
  20. ?? ?<body>
  21. ?? ??? ?<div id="app" v-cloak>
  22. ?? ??? ??? ?<tabs v-model="activeKey">
  23. ?? ??? ??? ??? ?<pane label="一" name="1">我是张三</pane>
  24. ?? ??? ??? ??? ?<pane label="二" name="2">我是李四</pane>
  25. ?? ??? ??? ??? ?<pane label="三" name="3">我是牛五</pane>
  26. ?? ??? ??? ?</tabs>
  27. ?? ??? ?</div>
  28. ?? ??? ?<script src="js/pane.js" type="text/javascript" charset="utf-8"></script>
  29. ?? ??? ?<script src="js/tabs.js" type="text/javascript" charset="utf-8"></script>
  30. ?? ?</body>
  31. </html>

pane.js

  1. Vue.component('pane',{
  2. ?? ?name: 'pane',
  3. ?? ?template: '?? ??? ?<div class="pane" v-show="show"> ?? ??? ??? ?<slot></slot> ?? ??? ?</div>',
  4. ?? ?data: function(){
  5. ?? ??? ?return {
  6. ?? ??? ??? ?show: true
  7. ?? ??? ?}
  8. ?? ?},
  9. ?? ?props: {
  10. ?? ??? ?name: {
  11. ?? ??? ??? ?type: String
  12. ?? ??? ?},
  13. ?? ??? ?label: {
  14. ?? ??? ??? ?type: String,
  15. ?? ??? ??? ?default: ''
  16. ?? ??? ?}
  17. ?? ?},
  18. ?? ?methods: {
  19. ?? ??? ?updateNav()?? ?{
  20. ?? ??? ??? ?this.$parent.updateNav();
  21. ?? ??? ?}
  22. ?? ?},
  23. ?? ?watch: {
  24. ?? ??? ?label(){
  25. ?? ??? ??? ?this.updateNav();
  26. ?? ??? ?}
  27. ?? ?},
  28. ?? ?mounted() {
  29. ?? ??? ?this.updateNav();
  30. ?? ?}
  31. })

tabs.js

  1. Vue.component('tabs',{
  2. ?? ?template: '?? ??? ?<div class="tabs">?? ??? ??? ?<div class="tabs-bar">?? ??? ??? ??? ?<div ?? ??? ??? ??? ??? ?:class="tabCls(item)" ?? ??? ??? ??? ??? ?v-for="(item,index) in navList" ?? ??? ??? ??? ??? ?@click="handleChange(index)"> ?? ??? ??? ??? ??? ?{{item.label}} ?? ??? ??? ??? ?</div>?? ??? ??? ?</div> ?? ??? ??? ?<div class="tabs-content"> ?? ??? ??? ??? ?<slot></slot> ?? ??? ??? ?</div> ?? ??? ?</div>',
  3. ?? ?props: {
  4. ?? ??? ?value: {
  5. ?? ??? ??? ?type: [String,Number]
  6. ?? ??? ?}
  7. ?? ?},
  8. ?? ?data: function(){
  9. ?? ??? ?return {
  10. ?? ??? ??? ?currentValue: this.value,
  11. ?? ??? ??? ?navList: []
  12. ?? ??? ?}
  13. ?? ?},
  14. ?? ?methods: {
  15. ?? ??? ?tabCls: function(item){
  16. ?? ??? ??? ?return [
  17. ?? ??? ??? ??? ?'tabs-tab',
  18. ?? ??? ??? ??? ?{
  19. ?? ??? ??? ??? ??? ?'tabs-tab-active': item.name===this.currentValue
  20. ?? ??? ??? ??? ?}
  21. ?? ??? ??? ?]
  22. ?? ??? ?},
  23. ?? ??? ?//遍历所有为pane的子元素
  24. ?? ??? ?getTabs(){
  25. ?? ??? ??? ?return this.$children.filter(function(item){
  26. ?? ??? ??? ??? ?return item.$options.name==='pane';
  27. ?? ??? ??? ?});
  28. ?? ??? ?},
  29. ?? ??? ?//将pane子元素中label name放进navList数组
  30. ?? ??? ?updateNav() {
  31. ?? ??? ??? ?this.navList=[];
  32. ?? ??? ??? ?var _this=this;
  33. ?? ??? ??? ?this.getTabs().forEach(function(pane,index){
  34. ?? ??? ??? ??? ?_this.navList.push({
  35. ?? ??? ??? ??? ??? ?label: pane.label,
  36. ?? ??? ??? ??? ??? ?name: pane.name ||index
  37. ?? ??? ??? ??? ?});
  38. ?? ??? ??? ??? ?if(!pane.name) pane.name=index;
  39. ?? ??? ??? ??? ?if(index===0){
  40. ?? ??? ??? ??? ??? ?if(!_this.currentValue){
  41. ?? ??? ??? ??? ??? ??? ?_this.currentValue=pane.name || index;
  42. ?? ??? ??? ??? ??? ?}
  43. ?? ??? ??? ??? ?}
  44. ?? ??? ??? ?});
  45. ?? ??? ??? ?this.updateStatus();
  46. ?? ??? ?},
  47. ?? ??? ?updateStatus(){
  48. ?? ??? ??? ?var tabs=this.getTabs();
  49. ?? ??? ??? ?var _this=this;
  50. ?? ??? ??? ?//显示当前正在选中的
  51. ?? ??? ??? ?tabs.forEach(function(tab){
  52. ?? ??? ??? ??? ?return tab.show=tab.name===_this.currentValue;
  53. ?? ??? ??? ?})
  54. ?? ??? ?},
  55. ?? ??? ?handleChange: function(index){
  56. ?? ??? ??? ?var nav =this.navList[index];
  57. ?? ??? ??? ?var name=nav.name;
  58. ?? ??? ??? ?this.currentValue=name;
  59. ?? ??? ??? ?this.$emit('input',name);
  60. ?? ??? ??? ?this.$emit('on-click',name);
  61. ?? ??? ?}
  62. ?? ?},
  63. ?? ?watch: {
  64. ?? ??? ?value: function(val){
  65. ?? ??? ??? ?this.currentValue=val;
  66. ?? ??? ?},
  67. ?? ??? ?currentValue: function (){
  68. ?? ??? ??? ?this.updateStatus();
  69. ?? ??? ?}
  70. ?? ?}
  71. ?? ?
  72. })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号