canrd-outside / order-erp-front · Commits

Commit f05b90f86bd1d8c71325acdea8f1f34722b13285

Authored by Wit〆苗大
Committed by GitHub
1 parent 1b30834e

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

Co-authored-by: 苗大 <caoshengmiao@hypergryph.com>
Inline Side-by-side
Showing 1 changed file with 34 additions and 28 deletions
src/views/form-design/components/VFormDesign/modules/CollapseItem.vue
  View file @f05b90f
1 <template> 1 <template>
2 - <div> 2 + <div :class="prefixCls">
3 <draggable 3 <draggable
4 tag="ul" 4 tag="ul"
5 :model-value="list" 5 :model-value="list"
@@ -36,6 +36,7 @@ @@ -36,6 +36,7 @@
36 import draggable from 'vuedraggable'; 36 import draggable from 'vuedraggable';
37 // import { toRefs } from '@vueuse/core'; 37 // import { toRefs } from '@vueuse/core';
38 import { Icon } from '/@/components/Icon'; 38 import { Icon } from '/@/components/Icon';
  39 + import { useDesign } from '/@/hooks/web/useDesign';
39 40
40 export default defineComponent({ 41 export default defineComponent({
41 name: 'CollapseItem', 42 name: 'CollapseItem',
@@ -51,6 +52,8 @@ @@ -51,6 +52,8 @@
51 }, 52 },
52 }, 53 },
53 setup(props, { emit }) { 54 setup(props, { emit }) {
  55 + const { prefixCls } = useDesign('form-design-collapse-item');
  56 +
54 const state = reactive({}); 57 const state = reactive({});
55 const handleStart = (e: any, list1: IVFormComponent[]) => { 58 const handleStart = (e: any, list1: IVFormComponent[]) => {
56 emit('start', list1[e.oldIndex].component); 59 emit('start', list1[e.oldIndex].component);
@@ -63,44 +66,47 @@ @@ -63,44 +66,47 @@
63 const cloneItem = (one) => { 66 const cloneItem = (one) => {
64 return props.handleListPush(one); 67 return props.handleListPush(one);
65 }; 68 };
66 - return { state, handleStart, handleAdd, cloneItem }; 69 + return { prefixCls, state, handleStart, handleAdd, cloneItem };
67 }, 70 },
68 }); 71 });
69 </script> 72 </script>
70 73
71 <style lang="less" scoped> 74 <style lang="less" scoped>
  75 + @prefix-cls: ~'@{namespace}-form-design-collapse-item';
72 @import url(../styles/variable.less); 76 @import url(../styles/variable.less);
73 77
74 - ul {  
75 - padding: 5px;  
76 - list-style: none;  
77 - display: flex;  
78 - margin-bottom: 0;  
79 - flex-wrap: wrap;  
80 - // background: #efefef; 78 + .@{prefix-cls} {
  79 + ul {
  80 + padding: 5px;
  81 + list-style: none;
  82 + display: flex;
  83 + margin-bottom: 0;
  84 + flex-wrap: wrap;
  85 + // background: #efefef;
81 86
82 - li {  
83 - padding: 8px 12px;  
84 - transition: all 0.3s;  
85 - width: calc(50% - 6px);  
86 - margin: 2.7px;  
87 - height: 36px;  
88 - line-height: 20px;  
89 - cursor: move;  
90 - border: 1px solid @border-color;  
91 - border-radius: 3px; 87 + li {
  88 + padding: 8px 12px;
  89 + transition: all 0.3s;
  90 + width: calc(50% - 6px);
  91 + margin: 2.7px;
  92 + height: 36px;
  93 + line-height: 20px;
  94 + cursor: move;
  95 + border: 1px solid @border-color;
  96 + border-radius: 3px;
92 97
93 - &:hover {  
94 - color: @primary-color;  
95 - border: 1px solid @primary-color;  
96 - position: relative;  
97 - // z-index: 1;  
98 - box-shadow: 0 2px 6px @primary-color; 98 + &:hover {
  99 + color: @primary-color;
  100 + border: 1px solid @primary-color;
  101 + position: relative;
  102 + // z-index: 1;
  103 + box-shadow: 0 2px 6px @primary-color;
  104 + }
99 } 105 }
100 } 106 }
101 - }  
102 107
103 - svg {  
104 - display: inline !important; 108 + svg {
  109 + display: inline !important;
  110 + }
105 } 111 }
106 </style> 112 </style>