Subscribe on changes!

support for match-media

avatar
Jan 16th 2021

What problem does this feature solve?

Recently I discovered an interesting and useful component:match-media

match-media is a basic view component that can adapt to different screens. You can specify a set of media query rules, and this component will only be displayed when the query conditions are met.

It's from WeChat mini program, details here: https://developers.weixin.qq.com/miniprogram/dev/component/match-media.html https://uniapp.dcloud.io/component/match-media

So I hope vue have an official support for match-media, It will make the development of responsive screen applications easy.

What does the proposed API look like?

    <match-media :min-width="375" :max-width="800" >
        <h4>hi, I am here</h4>
    </match-media>

    <match-media :min-height="400" :orientation="landscape">
        <h4>hi, I am here</h4>
    </match-media>
avatar
Jan 16th 2021

This should be a feature of some UI Library(e.g. Element-plus), you can also implement a match-media Component easily and publish to NPM. IMO,Vue does not need to have this feature built in.

avatar
Jan 16th 2021

I agree.

Generally, a new feature like this, that wants to add a new built-in component, would need to go through the RFC process anyway (https://github.com/vuejs/rfcs)