tabBar.nvue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <script>
  2. export default {
  3. render(createElement) {
  4. const vnodes = this.$slots.default;
  5. if (vnodes && vnodes.length) {
  6. for (let i = 0; i < vnodes.length; i++) {
  7. let vnode = vnodes[i];
  8. if (!vnode.data) {
  9. vnode.data = Object.create(null)
  10. }
  11. if (!vnode.data.on) {
  12. vnode.data.on = Object.create(null)
  13. }
  14. vnode.data.on.click = this._change;
  15. }
  16. }
  17. return createElement('div', {//如果需要左右滑动用scroller,不需要的话用div就行,添加个属性需要时将scroller添加 children
  18. style: {
  19. height:'100px',
  20. width:'750px',
  21. flexDirection:'row',
  22. borderBottomWidth: "1px",
  23. borderColor: "#F0F0F0",
  24. borderBottomStyle: "solid"
  25. }
  26. }, [
  27. createElement('scroller', {
  28. attrs: {
  29. scrollDirection:'horizontal',
  30. showScrollbar:'false'
  31. },
  32. style: {
  33. height:'100px',
  34. width:'750px',
  35. flexDirection:'row'
  36. }
  37. }, this.$slots.default)
  38. ])
  39. },
  40. methods:{
  41. _change(e){
  42. let ret = {
  43. index:e.index
  44. }
  45. if(e.type === 'click'){
  46. let target = e.target;
  47. ret.index = target.parentNode.children.findIndex(node=>node===target)
  48. }
  49. this.$emit('_tabBarClick', ret)
  50. }
  51. }
  52. }
  53. </script>