浏览代码

修改工具栏配置

ymy 2 年之前
父节点
当前提交
e82d63c901
共有 2 个文件被更改,包括 12 次插入2 次删除
  1. 9 1
      src/benyun/components/byTool/byTool.vue
  2. 3 1
      src/views/demo/form.vue

+ 9 - 1
src/benyun/components/byTool/byTool.vue

@@ -2,7 +2,12 @@
   <div class="tool">
     <div class="tool-left">
       <el-button v-for="(item,index) of showTools" :icon="item.icon" :key="index" size="small" @click="clickBtn(item)">{{ item.name }}</el-button>
+      <slot name="tool-left" />
     </div>
+    <slot name="tool-right" />
+    <!-- <div class="tool-right">
+      
+    </div> -->
   </div>
 </template>
 
@@ -69,7 +74,10 @@ export default class GmTools extends Vue {
   justify-content: space-between;
   align-items: center;
   .tool-left{
-    width: 70%;;
+    width: 100%;
+  }
+  .tool-right{
+    flex-shrink: 0;
   }
 }
 </style>

+ 3 - 1
src/views/demo/form.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="form" >
-    <by-tool :propConfig="toolConfig" @onAdd="onAdd" :customTools="customTools" />
+    <by-tool :propConfig="toolConfig" @onAdd="onAdd" :customTools="customTools">
+      <template v-slot:tool-right><div style="width: 120px;">右边</div></template>
+    </by-tool>
     <by-form :propConfig="config" ref="form">
       <template v-slot:slotField='{ value }'>这是插槽:{{ value.name }}</template>
     </by-form>