DefaultPanel.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
  3. import { defineComponent } from 'vue';
  4. import classNames from '../../_util/classNames';
  5. import { tourStepProps } from '../interface';
  6. const DefaultPanel = defineComponent({
  7. name: 'DefaultPanel',
  8. inheritAttrs: false,
  9. props: tourStepProps(),
  10. setup(props, _ref) {
  11. let {
  12. attrs
  13. } = _ref;
  14. return () => {
  15. const {
  16. prefixCls,
  17. current,
  18. total,
  19. title,
  20. description,
  21. onClose,
  22. onPrev,
  23. onNext,
  24. onFinish
  25. } = props;
  26. return _createVNode("div", _objectSpread(_objectSpread({}, attrs), {}, {
  27. "class": classNames(`${prefixCls}-content`, attrs.class)
  28. }), [_createVNode("div", {
  29. "class": `${prefixCls}-inner`
  30. }, [_createVNode("button", {
  31. "type": "button",
  32. "onClick": onClose,
  33. "aria-label": "Close",
  34. "class": `${prefixCls}-close`
  35. }, [_createVNode("span", {
  36. "class": `${prefixCls}-close-x`
  37. }, [_createTextVNode("\xD7")])]), _createVNode("div", {
  38. "class": `${prefixCls}-header`
  39. }, [_createVNode("div", {
  40. "class": `${prefixCls}-title`
  41. }, [title])]), _createVNode("div", {
  42. "class": `${prefixCls}-description`
  43. }, [description]), _createVNode("div", {
  44. "class": `${prefixCls}-footer`
  45. }, [_createVNode("div", {
  46. "class": `${prefixCls}-sliders`
  47. }, [total > 1 ? [...Array.from({
  48. length: total
  49. }).keys()].map((item, index) => {
  50. return _createVNode("span", {
  51. "key": item,
  52. "class": index === current ? 'active' : ''
  53. }, null);
  54. }) : null]), _createVNode("div", {
  55. "class": `${prefixCls}-buttons`
  56. }, [current !== 0 ? _createVNode("button", {
  57. "class": `${prefixCls}-prev-btn`,
  58. "onClick": onPrev
  59. }, [_createTextVNode("Prev")]) : null, current === total - 1 ? _createVNode("button", {
  60. "class": `${prefixCls}-finish-btn`,
  61. "onClick": onFinish
  62. }, [_createTextVNode("Finish")]) : _createVNode("button", {
  63. "class": `${prefixCls}-next-btn`,
  64. "onClick": onNext
  65. }, [_createTextVNode("Next")])])])])]);
  66. };
  67. }
  68. });
  69. export default DefaultPanel;