index.js 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. import { use } from '../utils';
  2. const [sfc, bem] = use('tabbar');
  3. export default sfc({
  4. data() {
  5. return {
  6. items: []
  7. };
  8. },
  9. props: {
  10. value: Number,
  11. activeColor: String,
  12. safeAreaInsetBottom: Boolean,
  13. fixed: {
  14. type: Boolean,
  15. default: true
  16. },
  17. zIndex: {
  18. type: Number,
  19. default: 1
  20. }
  21. },
  22. watch: {
  23. items() {
  24. this.setActiveItem();
  25. },
  26. value() {
  27. this.setActiveItem();
  28. }
  29. },
  30. methods: {
  31. setActiveItem() {
  32. this.items.forEach((item, index) => {
  33. item.active = index === this.value;
  34. });
  35. },
  36. onChange(active) {
  37. if (active !== this.value) {
  38. this.$emit('input', active);
  39. this.$emit('change', active);
  40. }
  41. }
  42. },
  43. render(h) {
  44. return (
  45. <div
  46. style={{ zIndex: this.zIndex }}
  47. class={[
  48. 'van-hairline--top-bottom',
  49. bem({
  50. fixed: this.fixed,
  51. 'safe-area-inset-bottom': this.safeAreaInsetBottom
  52. })
  53. ]}
  54. >
  55. {this.slots()}
  56. </div>
  57. );
  58. }
  59. });