V 友们,这个设计能用 flex 布局实现吗,后台返回的是一个数组对象。我想在交互上方便一下,如果 flex 实现不了,有没有其他能把按钮循环出来的办法

查看 604|回复 69
mingl0280   
@Dongpenghui 👌
MarkP   
横着拆也可以,两行,第一行两列,第二行 flex ,按钮 1 右对齐,剩下的想咋排咋排
sgiyy   
@wednesdayco #27 饭喂到嘴边不过如此了
sgiyy   
@MRG0 #26 那也没必要太复杂的布局,上下布局即可。第一行只有一个按钮就取数组的第一项(按钮右边,支付方式左边);数组的剩余项再遍历成第二行。
asdjgfr   
@sgiyy #42 具体按钮放第一排第二排,你自己排下序就好了。
justyeh   
[这样么?]( https://play.vuejs.org/#eNqdVk+P20QU/yqvlmjsEjubXYFWJlloUQ+LoCDaG+bg2ONkdicz1sw4mxBFohJSQZQLEkVCvYBExYWKGwgk+DLNsvsteDNjJw7d9tBdadd+f37vvd/7zSRL72ZZRrOKeLE3UJmkpQZFdFUeJZxOSyE1LEGSoguZmJaVJjmsoJBiCh1M6iQ84ZngSmMMz8X0luYKhibBl6kx3NXyppR+ELy1DVWIWgc2oL4fwPAIlgkH6PVgff/BxdO/zx89WP/6/eV3/6z/fLJ+/AscwrO/fn72x9f//vDF5ePPL57cP//mp4sfH5ocB3wm0/J9wsd6gtCHWBGAFuB/kOpJNE3nfhRF2zajWcoqgvbSV1qa6vgvYjY9CGDQQgtcY66MYCRiYvxKqIGDkUiw5C3KXJZxrswfRjQUouI5jlGkTBE7yguyIkOn76t+F9S+ZVHt1wUhBNVvimOTeZUR30+zDLdZyS7QfN6FVMot946wa6749esmrMG6khDY9Kll5do0P1giKis18RMv8czqjdGO1vIhduOqR0OXNay68MmnyNWqrRpT/TifPy+aRk41HQXl+THPyby1ABgOh9DpGP7Nb1HxTFOBXFqN3qmm/pTyLuA268nqhuyOCyaENAHwujO4LCx+w2Zgn1eANsLfwUNLuojM8fGXuGVDZdxqAlf4RmCmd4N1zh9+dfntU+j8v3CkBcJTPvYP3gwixSiuNawPXI1ziGJ7vjNSSILMb5raVZI5uDu91/mDnrsY8ErAF02mJUs1wTeAwajSGpHfybCJ02Hi1SUS72j95e/nj34b9FyEi87pDDKWKoWRIzHHKLf/HYfC05Vy9BUpH6sJHfTQ2wRWbAtggcOxFFW5QcIQRmEWFkJiiD/SuFaUeQC4vkYoiQfxKVmgHz2o0DoRIFZ6wQjal3BGc7MbzK+1A29Dp7+391oHYkDFE5QZyY1k5Jjye6KMwW8Ueg0Twr45PogPR41yAwMR9vfK+Q4Gnott81tGZyEtzJDYgMHrdDBqubQNrVY7rNqsHqMNRb2KObZr3ga91soGdkR8uOE0UKZ5jkKKYc+ePDeOe7O7R75tHKNKhzY3Bi64OerWH+EaXUROFRZZxFAwMrdgIyFzImPol3PkntEcRizNTuvLTNHPEGsk9MQaxIxIPGlnMaSVFta06c1wtino5OFq1lva33MBAJrMdZgyOsYZMsI1kdtGW3Jx2aZRBLeJ5jk0i4rtuqxtbN7q2lfNd1IpTYtFiPeTxlox4Hly5fDEWJrB63paob+g4+hECY6fsrZ04plLjDIiPyzN0URNxs2dmngpQyLeszZzrXYbezYh2ekV9hOFMo7x4SOklcgZSbyNT+NGiXbu23fvID8t51TkFcPolzg/Jri6yvTowm6hcLHtVpzt9th+V8Bt3VO358iGaoYyjbo73c2N3xrefcno23YPooP6A3Hlrf4DZtbtDA==)
排下序就行了。
asdjgfr   
看看我这如何 https://codesandbox.io/p/sandbox/musing-feather-dyf4j5?file=%2Fsrc%2FApp.vue%3A11%2C12
jiqiren   
刚才没仔细看,这个应该满足 ui 的需求了 https://codesandbox.io/s/sleepy-lumiere-28khrx?file=/src/App.vue
Alander   
看懂了,但没完全懂....
Seanfuck   
这个问题简单抽象一下就好了吧?
从 ui 层面上看
就是 第一行永远存在,第二行可能不存在 判断条件是按钮个数
第一行永远只会有一个按钮,这个按钮是最长的按钮
两个 div 第一个是 flex ,第二个直接 text-align:right 就完事了
您需要登录后才可以回帖 登录 | 立即注册

返回顶部