index.js 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. import { use } from '../utils';
  2. import Icon from '../icon';
  3. import Info from '../info';
  4. import { route, routeProps } from '../utils/router';
  5. const [sfc, bem] = use('tabbar-item');
  6. export default sfc({
  7. props: {
  8. ...routeProps,
  9. icon: String,
  10. dot: Boolean,
  11. info: [String, Number]
  12. },
  13. data() {
  14. return {
  15. active: false
  16. };
  17. },
  18. beforeCreate() {
  19. this.$parent.items.push(this);
  20. },
  21. destroyed() {
  22. this.$parent.items.splice(this.$parent.items.indexOf(this), 1);
  23. },
  24. methods: {
  25. onClick(event) {
  26. this.$parent.onChange(this.$parent.items.indexOf(this));
  27. this.$emit('click', event);
  28. route(this.$router, this);
  29. }
  30. },
  31. render(h) {
  32. const { icon, slots, active } = this;
  33. const style = active ? { color: this.$parent.activeColor } : null;
  34. return (
  35. <div class={bem({ active })} style={style} onClick={this.onClick}>
  36. <div class={bem('icon', { dot: this.dot })}>
  37. {slots('icon', { active }) || (icon && <Icon name={icon} />)}
  38. <Info info={this.info} />
  39. </div>
  40. <div class={bem('text')}>{slots('default', { active })}</div>
  41. </div>
  42. );
  43. }
  44. });