zuaa
/
vue-vben-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(form-design): CollapseItem组件页面css添加prefixCls前缀, 防止打包后污染全局样式 (#2654) 

Co-authored-by: 苗大 <caoshengmiao@hypergryph.com>
This commit is contained in:
Wit〆苗大 2023-03-30 09:53:03 +08:00 committed by GitHub
parent 1b30834eb3
commit f05b90f86b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/views/form-design/components/VFormDesign/modules/CollapseItem.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div :class="prefixCls">
<draggable <draggable
tag="ul" tag="ul"
:model-value="list" :model-value="list"
@ -36,6 +36,7 @@
import draggable from 'vuedraggable'; import draggable from 'vuedraggable';
// import { toRefs } from '@vueuse/core'; // import { toRefs } from '@vueuse/core';
import { Icon } from '/@/components/Icon'; import { Icon } from '/@/components/Icon';
import { useDesign } from '/@/hooks/web/useDesign';
export default defineComponent({ export default defineComponent({
name: 'CollapseItem', name: 'CollapseItem',
@ -51,6 +52,8 @@
}, },
}, },
setup(props, { emit }) { setup(props, { emit }) {
const { prefixCls } = useDesign('form-design-collapse-item');
const state = reactive({}); const state = reactive({});
const handleStart = (e: any, list1: IVFormComponent[]) => { const handleStart = (e: any, list1: IVFormComponent[]) => {
emit('start', list1[e.oldIndex].component); emit('start', list1[e.oldIndex].component);
@ -63,44 +66,47 @@
const cloneItem = (one) => { const cloneItem = (one) => {
return props.handleListPush(one); return props.handleListPush(one);
}; };
return { state, handleStart, handleAdd, cloneItem }; return { prefixCls, state, handleStart, handleAdd, cloneItem };
}, },
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-form-design-collapse-item';
@import url(../styles/variable.less); @import url(../styles/variable.less);
ul { .@{prefix-cls} {
padding: 5px; ul {
list-style: none; padding: 5px;
display: flex; list-style: none;
margin-bottom: 0; display: flex;
flex-wrap: wrap; margin-bottom: 0;
// background: #efefef; flex-wrap: wrap;
// background: #efefef;
li { li {
padding: 8px 12px; padding: 8px 12px;
transition: all 0.3s; transition: all 0.3s;
width: calc(50% - 6px); width: calc(50% - 6px);
margin: 2.7px; margin: 2.7px;
height: 36px; height: 36px;
line-height: 20px; line-height: 20px;
cursor: move; cursor: move;
border: 1px solid @border-color; border: 1px solid @border-color;
border-radius: 3px; border-radius: 3px;
&:hover { &:hover {
color: @primary-color; color: @primary-color;
border: 1px solid @primary-color; border: 1px solid @primary-color;
position: relative; position: relative;
// z-index: 1; // z-index: 1;
box-shadow: 0 2px 6px @primary-color; box-shadow: 0 2px 6px @primary-color;
}
} }
} }
}
svg { svg {
display: inline !important; display: inline !important;
}
} }
</style> </style>