graceTree.nvue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <template>
  2. <view>
  3. <view v-for="(tree,index) in treesIN" :key="index">
  4. <view class="grace-tree" :data-havsons="tree.children" :data-treeindexs="indexesIn" :data-index="index" :data-treelevel="level"
  5. :style="{paddingLeft:(indent*level)+'rpx'}" @tap.stop="taped" :data-cancheck="(allCanCheck || !tree.children)">
  6. <view class="grace-tree-icons" v-if="type == 'text' && isIcon" style="width:38rpx;">
  7. <text class="grace-tree-icons-text grace-icons icon-arrow-down" v-if="tree.children">&#xe62d;</text>
  8. </view>
  9. <view class="grace-tree-icons" v-if="type == 'radio' && (allCanCheck || !tree.children)">
  10. <text class="grace-tree-icons-text grace-icons icon-radio-ckd" :style="{color:checkedColor, fontSize:iconSize}" v-if="tree.id == checkedId">&#xe7f8;</text>
  11. <text class="grace-tree-icons-text grace-icons icon-radio" :style="{fontSize:iconSize}" v-else>&#xe762;</text>
  12. </view>
  13. <view class="grace-tree-icons" v-if="type == 'checkbox' && (allCanCheck || !tree.children)">
  14. <text class="grace-tree-icons-text grace-icons icon-checkbox-ckd" :style="{color:checkedColor, fontSize:iconSize}" v-if="isChecked(tree.id)">&#xe62c;</text>
  15. <text class="grace-tree-icons-text grace-icons icon-checkbox" :style="{fontSize:iconSize}" v-else>&#xe692;</text>
  16. </view>
  17. <text class="grace-tree-label" :style="{lineHeight:lineHeight,fontSize:fontSize, color:fontColor}">{{tree.label}}</text>
  18. </view>
  19. <view>
  20. <graceTree v-if="!fold"
  21. :trees="tree.children" :indent="indent" :level="level+1" :lineHeight="lineHeight" :allCanCheck="allCanCheck"
  22. :fontSize="fontSize" :fontColor="fontColor" :isIcon="isIcon" :checkedId="checkedId" :checkedIds="checkedIds"
  23. :type="type" :indexes="[indexesIn,index]" @taped="tapbase"></graceTree>
  24. </view>
  25. </view>
  26. </view>
  27. </template>
  28. <script>
  29. export default{
  30. name:"graceTree",
  31. props:{
  32. trees : {type:Array, default:function () {return [];}},
  33. indent : {type:Number, default:28},
  34. level : {type:Number, default:0},
  35. lineHeight : {type:String, default:'80rpx'},
  36. fontSize : {type:String, default:'28rpx'},
  37. fontColor : {type:String, default:'#323232'},
  38. type : {type:String, default:'text'},
  39. isIcon : {type:Boolean, default:true},
  40. iconSize:{type:String, default:'30rpx'},
  41. indexes : {type:Array, default:function () {return ['',0];}},
  42. checkedId : {type:[String, Number], default:'-1'},
  43. checkedIds : {type:Array, default:function () {return [];}},
  44. checkedColor:{type:String, default:'#3688FF'},
  45. allCanCheck: {type:Boolean, default:true},
  46. isFold : {type:Boolean, default:true}
  47. },
  48. data() {
  49. return {
  50. treesIN:[],
  51. indexesIn : [],
  52. fold:false
  53. }
  54. },
  55. created:function(){
  56. this.treesIN = this.trees;
  57. if(this.indexes[0] != ''){
  58. var indexes = this.indexes[0].split(',');
  59. }else{
  60. var indexes = [];
  61. }
  62. indexes.push(this.indexes[1]);
  63. this.indexesIn = indexes.join(',');
  64. },
  65. methods:{
  66. taped : function(e){
  67. var havsons = e.currentTarget.dataset.havsons;
  68. var treeindexs = e.currentTarget.dataset.treeindexs;
  69. treeindexs = treeindexs.split(',');
  70. var index = e.currentTarget.dataset.index;
  71. treeindexs.push(index);
  72. treeindexs.shift();
  73. if(this.type == 'text'){
  74. if(this.isFold){
  75. if(havsons){this.fold = !this.fold; return;}
  76. }
  77. this.tapbase(treeindexs);
  78. }else{
  79. var cancheck = e.currentTarget.dataset.cancheck;
  80. if(cancheck){this.tapbase(treeindexs);}
  81. }
  82. },
  83. tapbase : function(e){
  84. this.$emit('taped', e);
  85. },
  86. setTrees : function (trees) {
  87. this.treesIN = trees;
  88. },
  89. isChecked : function(checkedId){
  90. for(let i = 0; i < this.checkedIds.length; i++){
  91. if(this.checkedIds[i] == checkedId){
  92. return true;
  93. }
  94. }
  95. return false;
  96. }
  97. }
  98. }
  99. </script>
  100. <style>
  101. .grace-tree{flex-direction:row; flex-wrap:nowrap; align-items:center;}
  102. .grace-tree-label{}
  103. .grace-tree-icons{padding-right:16rpx;}
  104. .grace-tree-icons-text{font-size:22rpx; color:#828282;}
  105. </style>