index.js 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
  2. import { use } from '../utils';
  3. import { emit, inherit } from '../utils/functional';
  4. import Icon from '../icon'; // Types
  5. var _use = use('tree-select'),
  6. sfc = _use[0],
  7. bem = _use[1];
  8. function TreeSelect(h, props, slots, ctx) {
  9. var height = props.height,
  10. items = props.items,
  11. mainActiveIndex = props.mainActiveIndex,
  12. activeId = props.activeId;
  13. var selectedItem = items[mainActiveIndex] || {};
  14. var subItems = selectedItem.children || [];
  15. return h("div", _mergeJSXProps([{
  16. "class": bem(),
  17. "style": {
  18. height: height + "px"
  19. }
  20. }, inherit(ctx)]), [h("div", {
  21. "class": bem('nav')
  22. }, [items.map(function (item, index) {
  23. return h("div", {
  24. "key": index,
  25. "class": ['van-ellipsis', bem('nitem', {
  26. active: mainActiveIndex === index,
  27. disabled: item.disabled
  28. })],
  29. "on": {
  30. "click": function click() {
  31. if (!item.disabled) {
  32. emit(ctx, 'navclick', index);
  33. }
  34. }
  35. }
  36. }, [item.text]);
  37. })]), h("div", {
  38. "class": bem('content')
  39. }, [subItems.map(function (item) {
  40. return h("div", {
  41. "key": item.id,
  42. "class": ['van-ellipsis', bem('item', {
  43. active: activeId === item.id,
  44. disabled: item.disabled
  45. })],
  46. "on": {
  47. "click": function click() {
  48. if (!item.disabled) {
  49. emit(ctx, 'itemclick', item);
  50. }
  51. }
  52. }
  53. }, [item.text, activeId === item.id && h(Icon, {
  54. "attrs": {
  55. "name": "checked",
  56. "size": "16px"
  57. },
  58. "class": bem('selected')
  59. })]);
  60. })])]);
  61. }
  62. TreeSelect.props = {
  63. items: Array,
  64. mainActiveIndex: Number,
  65. activeId: {
  66. type: [Number, String],
  67. "default": 0
  68. },
  69. height: {
  70. type: Number,
  71. "default": 300
  72. }
  73. };
  74. export default sfc(TreeSelect);