选择模板切换

src/views/ppt_manage/newVersion/components/editor/AddFormat.vue

@@ -5,16 +5,20 @@
       class="add_ico"
       @click="addPage(chooseModalId)"
     />
+    <el-button type="text" icon="el-icon-arrow-left" :disabled="clickLeftTime===0" @click="scrollPrev"></el-button>
     <div class="format-wrap">
-      <div class="format-item" :class="{'last-choose':chooseModalId===item.modelId}"
-      v-for="item in formatArr" :key="item.modelId">
-        <component
-          :is="previewComponentName(item.modelId)"
-          @click.native="addPage(item.modelId)"
-        />
-        <!-- <p>{{ item.text }}</p> -->
-      </div>
+        <div class="format-trans-wrap" :style="`transform:translateX(${scrollOffset}px);`">
+            <div class="format-item" :class="{'last-choose':chooseModalId===item.modelId}"
+                :style="`margin:0 ${itemOccupyMargin}px;`"
+                    v-for="item in formatArr" :key="item.modelId">
+                    <component
+                    :is="previewComponentName(item.modelId)"
+                    @click.native="addPage(item.modelId)"
+                    />
+                </div>
+        </div>
     </div>
+    <el-button type="text" icon="el-icon-arrow-right" :disabled="clickRightTime===0" @click="scrollNext"></el-button>
   </div>
 </template>
 
@@ -58,10 +62,39 @@ export default {
   data() {
     return {
       formatArr: formatPre,
-
+      lineShowNum:9,//一行最多能展示几个
+      clickLeftTime:0,//可以按下左按钮的次数,为0时该按钮禁用
+      clickRightTime:0,//可以按下右按钮的次数,为0时该按钮禁用
+      scrollOffset:0,//当前滚动偏移量
+      itemOccupyMargin:0,//当前一个format占用间距
+      itemWidth:92,//当前一个format所占宽度(固定)
     };
   },
   methods: {
+    init(){
+        //初始化按钮次数
+        this.clickLeftTime = 0
+        this.clickRightTime = this.formatArr.length - this.lineShowNum
+        //获取容器宽度,以确定一个format应占宽度
+        const parentWidth = $('.format-wrap').width()
+        this.itemOccupyMargin = ((parentWidth/this.lineShowNum).toFixed(2) - this.itemWidth)/2
+    },
+    scrollPrev(){
+        if(this.clickLeftTime<=0) return 
+        this.clickLeftTime--
+        this.clickRightTime++
+        this.scrollFormat('prev',this.clickLeftTime)
+    },
+    scrollNext(){
+        if(this.clickRightTime===0) return
+        this.clickRightTime--
+        this.clickLeftTime++
+        this.scrollFormat('next',this.clickLeftTime)
+    },
+    scrollFormat(type,multiple){
+        const factor = type==='prev'?1:-1
+        this.scrollOffset = factor*(multiple*this.itemWidth+this.itemOccupyMargin)
+    },
     previewComponentName(modelId) {
       return countComponentName(modelId,'pre')
       //return `formatPre${modelMap[modelId]}`;
@@ -70,10 +103,20 @@ export default {
       this.$emit("addPage", modelId);
     },
   },
+  mounted(){
+    this.init()
+  },
 };
 </script>
 <style lang="scss">
 @import "~@/views/ppt_manage/newVersion/css/formatPre.scss";
+.add-icon-wrap{
+    .el-button{
+        i{
+            font-weight: bold;
+        }
+    }
+}
 </style>
 <style scoped lang="scss">
 .add-icon-wrap {
@@ -81,6 +124,8 @@ export default {
   min-height: 64px;
   position: relative;
   padding: 10px 20px;
+  display: flex;
+  align-items: center;
   .add_ico {
     cursor: pointer;
     position: absolute;
@@ -91,15 +136,25 @@ export default {
     height: 28px;
     display: inline-block;
   }
+  .el-button{
+        font-size: 22px;
+        padding:0;
+        &:first-of-type{
+            margin-left: 40px;
+        }
+    }
   .format-wrap {
-    margin-left: 40px;
-    /* background-color: #eef0f3; */
-    width: calc(100% - 40px);
-    /* height: 120px; */
-    display: flex;
-    /* flex-wrap: wrap; */
-    justify-content: space-between;
+    width: calc(100% - 80px);
+    height:68px;
+    overflow-x: hidden;
+    .format-trans-wrap{
+        width:100%;
+        height: 100%;
+        display: flex;
+        flex-wrap: nowrap;
+    }
     .format-item {
+      flex:0 0 auto;
       width: 80px;
       height: 56px;
       padding: 5px;