如何配置PrimeVue多重选择，以添加一个“行中断”，而不是切断重叠的？
如何配置PrimeVue多重选择，以添加一个“行中断”，而不是切断重叠的？
提问于 2021-11-04 17:02:56
我将Vue3与PrimeVue结合使用，并在多选择组件中包含了许多项目。基于示例代码:当选择所有项目时，它将用三个点切断重叠的项目。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- PrimeVue -->
<link href="https://unpkg.com/primevue@^3/resources/themes/saga-blue/theme.css" rel="stylesheet" />
<link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
<link href="https://unpkg.com/primeflex@2.0.0/primeflex.min.css" rel="stylesheet" />
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
<!-- Dependencies -->
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<!-- Demo -->
<script src="https://unpkg.com/primevue@^3/multiselect/multiselect.min.js"></script>
<link href="./index.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<p-multiselect v-model="selectedCities" :options="cities" option-label="name" placeholder="Select Cities" display="chip"></p-multiselect>
</div>
<script type="module">
const { createApp, ref } = Vue;
const App = {
setup() {
const selectedCities = ref();
const selectAll = ref(false);
const cities = ref([
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
]);
return { selectedCities, cities, selectAll }
},
methods: {
onSelectAllChange(event) {
this.selectedItems = event.checked ? this.items.map((item) => item.value) : [];
this.selectAll = event.checked;
},
onChange(event) {
this.selectAll = event.value.length === this.items.length
}
},
components: {
"p-multiselect": primevue.multiselect
}
};
createApp(App)
.use(primevue.config.default)
.mount("#app");
</script>
<style>
.p-multiselect {
width: 18rem;
}
.multiselect-custom .p-multiselect-label:not(.p-placeholder) {
padding-top: .25rem;
padding-bottom: .25rem;
}
.multiselect-custom .country-item-value {
padding: .25rem .5rem;
border-radius: 3px;
display: inline-flex;
margin-right: .5rem;
background-color: var(--primary-color);
color: var(--primary-color-text);
}
.multiselect-custom .country-item-value img.flag {
width: 17px;
}
@media screen and (max-width: 640px) {
.p-multiselect {
width: 100%;
}
}
</style>
</body>
</html>
当移除CSS时，组件只会增长。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- PrimeVue -->
<link href="https://unpkg.com/primevue@^3/resources/themes/saga-blue/theme.css" rel="stylesheet" />
<link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
<link href="https://unpkg.com/primeflex@2.0.0/primeflex.min.css" rel="stylesheet" />
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
<!-- Dependencies -->
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<!-- Demo -->
<script src="https://unpkg.com/primevue@^3/multiselect/multiselect.min.js"></script>
<link href="./index.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<p-multiselect v-model="selectedCities" :options="cities" option-label="name" placeholder="Select Cities" display="chip"></p-multiselect>
</div>
<script type="module">
const { createApp, ref } = Vue;
const App = {
setup() {
const selectedCities = ref();
const selectAll = ref(false);
const cities = ref([
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
]);
return { selectedCities, cities, selectAll }
},
methods: {
onSelectAllChange(event) {
this.selectedItems = event.checked ? this.items.map((item) => item.value) : [];
this.selectAll = event.checked;
},
onChange(event) {
this.selectAll = event.value.length === this.items.length
}
},
components: {
"p-multiselect": primevue.multiselect
}
};
createApp(App)
.use(primevue.config.default)
.mount("#app");
</script>
</body>
</html>
是否有一种方法来配置此组件以添加“换行”而不是切断重叠的中断？
我想要达到的目标可以在这里找到
回答 1
Stack Overflow用户
发布于 2021-11-04 17:49:02
你需要在这里做些改变..。
.p-multiselect {
min-width: 17rem;
}
.p-multiselect-label {
display: flex;
flex-wrap: wrap;
}
.p-multiselect-token {
margin: 0.1rem;
}结果：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69843144
复制相关文章
相似问题
腾讯云开发者
