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 1 <template>
2   - <div>
  2 + <div :class="prefixCls">
3 3 <draggable
4 4 tag="ul"
5 5 :model-value="list"
... ... @@ -36,6 +36,7 @@
36 36 import draggable from 'vuedraggable';
37 37 // import { toRefs } from '@vueuse/core';
38 38 import { Icon } from '/@/components/Icon';
  39 + import { useDesign } from '/@/hooks/web/useDesign';
39 40  
40 41 export default defineComponent({
41 42 name: 'CollapseItem',
... ... @@ -51,6 +52,8 @@
51 52 },
52 53 },
53 54 setup(props, { emit }) {
  55 + const { prefixCls } = useDesign('form-design-collapse-item');
  56 +
54 57 const state = reactive({});
55 58 const handleStart = (e: any, list1: IVFormComponent[]) => {
56 59 emit('start', list1[e.oldIndex].component);
... ... @@ -63,44 +66,47 @@
63 66 const cloneItem = (one) => {
64 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 72 </script>
70 73  
71 74 <style lang="less" scoped>
  75 + @prefix-cls: ~'@{namespace}-form-design-collapse-item';
72 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 112 </style>
... ...