我有以下一组按钮:
<template> <v-card color="secondary" elevation="6" > <v-card-title> <v-spacer></v-spacer> Three buttons </v-card-title> <v-divider></v-divider> <v-card-text> <v-row> <v-col cols="12" sm="4" v-for="button in buttons" :key="button.id"> <v-btn color="primary" x-large block> <span style="word-break: normal !important;">{{button.text}}</span> </v-btn> </v-col> </v-row> </v-card-text> </v-card> </template> <script> export default { data () { return { //This is not a production code. The button texts are obtained via api and their length is variable buttons: [ {id:1, text: "I'm a button"}, {id:2, text: "I'm another button. Bla, bla, bla, bla"}, {id:3, text: "I'm a button too"} ] } }, } </script>
在此示例中,文本是硬编码的,但实际上我是从 API 获取文本的。它的长度是可变的,我无法事先知道。我需要:
所有这些都必须在桌面、平板电脑和移动视图中实现。
您可以在这里进行测试。
Try this:
and: