123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170 |
- <template>
- <el-row id="canvas-actions-box" :class="{ 'isEdit': config.isEdit }">
- <div v-if="config.isEdit&&config.groupSelect" :class="{ 'active': active === 'groupSelect' }" @click="groupSelect">
- <i class="iconfont icon-shuxingxuanze"></i>
- </div>
- <div @click="fitToWindow">
- <i class="iconfont icon-maximize"></i>
- </div>
- <div v-if="!config.isEdit">
- <el-dropdown size="mini" placement="top-start" @command="handleCommand">
- <i class="el-icon-download" style="font-size:20px;color:#fff;"></i>
- <el-dropdown-menu slot='dropdown'>
- <el-dropdown-item command="savePng">保存为png</el-dropdown-item>
- <el-dropdown-item command="saveSvg">保存为svg</el-dropdown-item>
- <el-dropdown-item command="saveJson">保存为Json</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- </div>
- <div v-if="config.isEdit&&config.divide" :class="{ 'active': active === 'divide' }" @click="divide">
- <el-dropdown size="mini" placement="top-start" @command="handleDivideCommand" :hide-on-click="false">
- <i class="iconfont icon-edit1"></i>
- <!-- <el-dropdown-menu slot='dropdown'>
- <el-dropdown-item command="savePng">
- 吸附 <el-switch v-model="isSwitch"></el-switch>
- </el-dropdown-item>
- </el-dropdown-menu> -->
- </el-dropdown>
- </div>
- <div v-if="config.isEdit&&config.divide" @click="clearDivide">
- <i class="iconfont icon-Erase"></i>
- </div>
- <div @click="reduce">
- <i class="iconfont icon-narrow"></i>
- </div>
- <div class="line">
- <el-slider tooltip-class="tooltip-class" :min="min" v-model="sliderVal" :show-tooltip="false" @input="scale" :max="max"></el-slider>
- </div>
- <div @click="plus">
- <i class="iconfont icon-zoom"></i>
- </div>
- </el-row>
- </template>
- <script lang="ts">
- interface configFace {
- isEdit: boolean;
- divide: boolean;
- groupSelect: boolean;
- }
- import { Vue, Component, Prop } from "vue-property-decorator";
- @Component
- export default class canvasFun extends Vue {
- @Prop({
- type: Object,
- default: {
- isEdit: false,
- divide: true,
- groupSelect: false,
- },
- })
- config!: configFace;
- sliderVal = 1; // 滑块值
- active = "";
- min = 1;
- max = 1000;
- everyScale = 1; // 每份的放大倍数
- isSwitch = false; // 是否开启吸附
- groupSelect() {
- this.active = "groupSelect";
- this.$emit("groupSelect");
- }
- // 适配大小
- fitToWindow() {
- this.$emit("fit");
- }
- // 下拉菜单
- handleCommand(command: string) {
- this.$emit(command);
- }
- // 是否开启吸附
- handleDivideCommand() {
- this.$emit("changeAbsorb", this.isSwitch);
- }
- // 切割编辑
- divide() {
- this.active = "divide";
- this.$emit("divide");
- }
- // 清除编辑
- clearDivide() {
- this.active = "";
- this.$emit("clearDivide");
- }
- // 撤销
- undo() {
- this.$emit("undo");
- }
- // 反撤销
- redo() {
- this.$emit("redo");
- }
- // 减
- reduce() {
- this.sliderVal /= 1.1;
- if (this.sliderVal < this.min) {
- this.sliderVal = this.min;
- }
- this.scale(this.sliderVal);
- }
- // 缩放
- scale(val: number) {
- // 换算
- let scale = (val * this.everyScale) / 10;
- this.$emit("scale", scale);
- }
- // 加
- plus() {
- this.sliderVal *= 1.1;
- if (this.sliderVal > this.max) {
- this.sliderVal = this.max;
- }
- this.scale(this.sliderVal);
- }
- }
- </script>
- <style lang="scss" scoped>
- #canvas-actions-box {
- & > div {
- float: left;
- font-size: 20px;
- padding: 0 10px;
- color: #fff;
- background-color: #6da60f;
- line-height: 2;
- i {
- cursor: pointer;
- color: #fff;
- }
- }
- & > div:active {
- background-color: #4b7902;
- }
- & > div.active {
- background-color: #4b7902;
- }
- &.isEdit > div {
- background-color: #02a7f0;
- }
- &.isEdit > div:active {
- background-color: #027db4;
- }
- &.isEdit > div.active {
- background-color: #027db4;
- }
- & > div.line {
- width: 200px;
- height: 40px;
- padding: 0;
- ::v-deep .el-slider__runway {
- margin: 18px 0;
- height: 4px;
- .el-slider__bar {
- background-color: #fff;
- height: 4px;
- }
- }
- }
- }
- </style>
|