Title.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. import { createNamespace, isDef } from '../utils';
  2. import Info from '../info';
  3. var _createNamespace = createNamespace('tab'),
  4. createComponent = _createNamespace[0],
  5. bem = _createNamespace[1];
  6. export default createComponent({
  7. props: {
  8. dot: Boolean,
  9. type: String,
  10. info: [Number, String],
  11. color: String,
  12. title: String,
  13. isActive: Boolean,
  14. disabled: Boolean,
  15. scrollable: Boolean,
  16. activeColor: String,
  17. inactiveColor: String
  18. },
  19. computed: {
  20. style: function style() {
  21. var style = {};
  22. var color = this.color,
  23. isActive = this.isActive;
  24. var isCard = this.type === 'card'; // card theme color
  25. if (color && isCard) {
  26. style.borderColor = color;
  27. if (!this.disabled) {
  28. if (isActive) {
  29. style.backgroundColor = color;
  30. } else {
  31. style.color = color;
  32. }
  33. }
  34. }
  35. var titleColor = isActive ? this.activeColor : this.inactiveColor;
  36. if (titleColor) {
  37. style.color = titleColor;
  38. }
  39. return style;
  40. }
  41. },
  42. methods: {
  43. onClick: function onClick() {
  44. this.$emit('click');
  45. },
  46. genText: function genText() {
  47. var h = this.$createElement;
  48. var Text = h("span", {
  49. "class": bem('text', {
  50. ellipsis: !this.scrollable
  51. })
  52. }, [this.slots() || this.title]);
  53. if (this.dot || isDef(this.info) && this.info !== '') {
  54. return h("span", {
  55. "class": bem('text-wrapper')
  56. }, [Text, h(Info, {
  57. "attrs": {
  58. "dot": this.dot,
  59. "info": this.info
  60. }
  61. })]);
  62. }
  63. return Text;
  64. }
  65. },
  66. render: function render() {
  67. var h = arguments[0];
  68. return h("div", {
  69. "attrs": {
  70. "role": "tab",
  71. "aria-selected": this.isActive
  72. },
  73. "class": [bem({
  74. active: this.isActive,
  75. disabled: this.disabled
  76. })],
  77. "style": this.style,
  78. "on": {
  79. "click": this.onClick
  80. }
  81. }, [this.genText()]);
  82. }
  83. });