vue.js - 是否可以在比 bootstrap-vue 中的 lg 小的屏幕上动态地将列表组从垂直更改为水平?
问题描述
我有一个带有图标和链接的列表组。我的目标是仅在屏幕小于 lg 时显示图标并将方向从垂直更改为水平。
到目前为止,我只在小于 lg 的屏幕上显示图标;但是,我正在努力弄清楚如何将小于 lg 的屏幕的方向从垂直方向动态更改为水平方向。我如何实现这一目标?
代码:
<template>
<div>
<b-container>
<b-row>
<b-col class="col-md-6 col-xl-3">
<b-list-group>
<b-list-group-item>
<b-link v-on:click="component = 'product-list'">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z"/>
</svg>
<span class="d-none d-lg-block">Material List</span>
</b-link>
</b-list-group-item>
<b-list-group-item>
<b-link v-on:click="component = 'batch-create-material-list'">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 9h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z"/>
</svg>
<span class="d-none d-lg-block">Batch Create Material List</span>
</b-link>
</b-list-group-item>
</b-list-group>
</b-col>
<b-col class="col-md-6 col-xl-9">
<keep-alive>
<component v-bind:is="component"></component>
</keep-alive>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import ProductList from '../../components/admin/ProductList';
import CreateProductAndCategory from '../../components/admin/CreateProductAndCategory';
export default {
name: 'Dashboard',
components: {
'product-list': ProductList,
'batch-create-material-list': CreateProductAndCategory,
},
data() {
return {
component: ''
}
},
}
</script>
<style scoped>
</style>
编辑:我试图弄清楚这一点并尝试了所有响应式变体:
<b-list-group horizontal="sm">
、<b-list-group horizontal="md">
和<b-list-group horizontal="xl">
所有这些都没有按预期工作。列表组在所有屏幕尺寸上都是水平的,但 sm
我试过的代码:
<template>
<div>
<b-container>
<b-row>
<b-col class="col-md-6 col-xl-3" >
<b-list-group >
<b-list-group-item class="d-lg-vertical">
<b-link v-on:click="component = 'product-list'">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z"/>
</svg>
<span class="d-none d-lg-block">Material List</span>
</b-link>
</b-list-group-item>
<b-list-group-item>
<b-link v-on:click="component = 'batch-create-material-list'">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 9h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z"/>
</svg>
<span class="d-none d-lg-block">Batch Create Material List</span>
</b-link>
</b-list-group-item>
</b-list-group>
</b-col>
<b-col class="col-md-6 col-xl-9">
<keep-alive>
<component v-bind:is="component"></component>
</keep-alive>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import ProductList from '../../components/admin/ProductList';
import CreateProductAndCategory from '../../components/admin/CreateProductAndCategory';
export default {
name: 'Dashboard',
components: {
'product-list': ProductList,
'batch-create-material-list': CreateProductAndCategory,
},
data() {
return {
component: 'product-list'
}
},
}
</script>
<style scoped>
/* small screen below 992px width */
@media only screen and (max-width : 991px) {
.d-none{display:none;}
}
/* large screen above 991px width */
@media only screen and (min-width : 992px) {
.d-lg-vertical{
display:block;
}
}
</style>
解决方案
你可以这样做 -
模板
<div class="container">
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-4 col-sm-12 col-xs-12">
<b-list-group>
<b-list-group-item class="d-lg-vertical">
<b-link v-on:click="component = 'product-list'">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z"/>
</svg>
<span class="custom-sm-d-none">Material List</span>
</b-link>
</b-list-group-item>
<b-list-group-item class="d-lg-vertical">
<b-link v-on:click="component = 'batch-create-material-list'">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 9h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z"/>
</svg>
<span class="custom-sm-d-none">Batch Create Material List</span>
</b-link>
</b-list-group-item>
</b-list-group>
</div>
<div class="col-xl-9 col-lg-8 col-md-8 col-sm-12 col-xs-12">
<keep-alive>
<component v-bind:is="component"></component>
</keep-alive>
</div>
</div>
</div>
CSS
/* small screen below 768px width */
@media only screen and (max-width : 767px) {
.custom-sm-d-none{display:none;}
}
/* large screen above 767px width */
@media only screen and (min-width : 768px) {
.d-lg-vertical{
display:block;
}
}
小提琴 -
https://jsfiddle.net/guruling/f9m1v0so/33/
希望它能解决您的问题。
推荐阅读
- android - 设备所有者的静默 APK 安装在 MIUI 11 上不起作用
- amazon-web-services - Terraform - 所需字符串列表(AWS 中的 cidr_blocks)
- scala - 为什么此代码编译并在执行时给出运行时错误
- c - 在 C 中使用 printf 或 printstring 格式化文本
- java - 来自 Firebase 的纬度和经度坐标不正确,并且所有帖子都相同
- javascript - Vuejs根据第一个下拉菜单中的首选渲染选择下拉菜单
- postgresql - 如何使用多个 CTE 加快查询速度
- java - java.lang.NoSuchMethodError: 类 Landroid/media/MediaPlayer 错误中没有虚拟方法 setDataSource(Landroid/content/res/AssetFileDescriptor;)V
- python - 按日期拆分 CSV 或 XLSX 并设置最大文件大小
- scala - 在 ScalaCheck 中生成任意 Function1