Question

我有一个简单的基于Vue.js / Vuetify.js的SPA。主页包含按列布局排列的多张卡。现在，卡的宽度增加到列的宽度。我想使用class ProfilePictureView: UIView { var bigCircle: UIView! var borderCircle: UIView! var littleCircle: UIView! override init(frame: CGRect) { super.init(frame: frame) initialize() } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) initialize() } private func initialize() { bigCircle = UIView(frame: bounds) bigCircle.backgroundColor = .red addSubview(bigCircle) borderCircle = UIView() borderCircle.translatesAutoresizingMaskIntoConstraints = false borderCircle.backgroundColor = .white bigCircle.addSubview(borderCircle) borderCircle.widthAnchor.constraint(equalTo: bigCircle.widthAnchor, multiplier: 1/3).isActive = true borderCircle.heightAnchor.constraint(equalTo: bigCircle.heightAnchor, multiplier: 1/3).isActive = true littleCircle = UIView() littleCircle.translatesAutoresizingMaskIntoConstraints = false littleCircle.backgroundColor = .green borderCircle.addSubview(littleCircle) littleCircle.widthAnchor.constraint(equalTo: borderCircle.widthAnchor, multiplier: 1/1.3).isActive = true littleCircle.heightAnchor.constraint(equalTo: borderCircle.heightAnchor, multiplier: 1/1.3).isActive = true littleCircle.centerXAnchor.constraint(equalTo: borderCircle.centerXAnchor).isActive = true littleCircle.centerYAnchor.constraint(equalTo: borderCircle.centerYAnchor).isActive = true let (hMult, vMult) = computeMultipliers(angle: 45) // position the border circle using a multiplier on the right and bottom NSLayoutConstraint(item: borderCircle!, attribute: .centerX, relatedBy: .equal, toItem: bigCircle!, attribute: .trailing, multiplier: hMult, constant: 0).isActive = true NSLayoutConstraint(item: borderCircle!, attribute: .centerY, relatedBy: .equal, toItem: bigCircle!, attribute: .bottom, multiplier: vMult, constant: 0).isActive = true } override func layoutSubviews() { super.layoutSubviews() bigCircle.layer.cornerRadius = bigCircle.frame.height / 2 borderCircle.layoutIfNeeded() borderCircle.layer.cornerRadius = borderCircle.frame.height / 2 littleCircle.layoutIfNeeded() littleCircle.layer.cornerRadius = littleCircle.frame.height / 2 } private func computeMultipliers(angle: CGFloat) -> (CGFloat, CGFloat) { let radians = angle * .pi / 180 let h = (1.0 + cos(radians)) / 2 let v = (1.0 - sin(radians)) / 2 return (h, v) } }或"new line of text" |Add-Content -Path .\path\to\file.txt之类的断点来响应设置大小。但是，这些断点似乎既不能用作属性# read all lines into `$fileContents` $filePath = "C:\Temp\Test.txt" $fileContents = Get-Content $filePath # append text to desired line $lineNumber = "4" $textToAdd = "Test" $fileContents[$lineNumber] += $textToAdd # write all lines back to file $fileContents | Set-Content $filePath，也不能用作CSS类xs10。奇怪的想法是，如果我改为使用行布局，它们似乎像一种魅力一样工作……但是我只希望每行居中一张卡，而不长到满宽度...

main.js

sm8

App.vue

xs10

index.html

class="xs10"

如何以响应方式缩小列布局中flexbox / card的大小？断点似乎无法正常工作...

修改

下图显示了问题，该卡增大到布局/列宽，并且忽略了所有断点...

Answer 1

我喜欢使用switch语句来控制断点的大小。这是您可以使用的Codepen链接：Dynamic Sizing for Breakpoints

    <v-container grid-list-md text-xs-center>
        <v-layout column align-center>
            <v-flex>
                <v-card color="red" :width='cardWidth'>
                    <v-card-title>{{ text }}</v-card-title>
                </v-card>
            </v-flex>
             <v-flex>
                <v-card color="blue" :width='cardWidth'>
                    <v-card-title>{{ text }}</v-card-title>
                </v-card>
            </v-flex>
             <v-flex>
                <v-card color="yellow" :width='cardWidth'>
                    <v-card-title>{{ text }}</v-card-title>
                </v-card>
            </v-flex>
        </v-layout>
    </v-container>

const vm = new Vue({
  el: '#app',
  data () {
    return {
      text: 'I want just one card per row centered and not growing to full width'
    }
  },
  computed: {
     cardWidth() {
            switch (this.$vuetify.breakpoint.name) {
                case "xs":
                    return "250px";
                case "sm":
                    return "350px";
                case "md":
                    return '600px';
                case "lg":
                    return '800px';
                case "xl":
                    return "1080px";
            }
        },
  },
})

Answer 2

根据Vuetify API文档，如果您在fluid中定义了v-container道具，它将删除视口大小的断点。

因此，如果您删除fluid中的v-container道具，则视口大小的断点将起作用。

但是，由于v-layout具有column个道具，因此任何视口大小的断点都将被忽略，并且每个v-flex项都变为垂直对齐的全尺寸项。

您可以在脚本中使用计算属性来应用动态行或列断点，而不是直接在v-layout中应用列道具（但可能更容易应用此方法...）。

在Codepen中尝试this code，看看其中的区别：

Vuetify-列的断点

2 个答案: