File

ControlType.File

这个类型控制让用户可以选择一个文件地址。文件被选择后,文件地址会被传递到组件中作为一个属性的值。会在属性面板上出现一个文件选择的按钮,用户点击之后就可以选择自己要使用的视频,注意allowedFileTypes的设置,你只能选择设置中的有的扩展名文件类型。

import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"

export function MyComponent(props) {
    return (
        <Frame size={"100%"}>
            <video
                style={{
                    objectFit: "contain",
                    width: props.width,
                    height: props.height,
                }}
                src={props.filepath}
                controls
            />
        </Frame>
    )
}

MyComponent.defaultProps = {
    width: 300,
    height: 200,
}

addPropertyControls(MyComponent, {
    filepath: {
        type: ControlType.File,
        allowedFileTypes: ["mov"],
    },
})

Last updated

Was this helpful?