123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185 |
- <template>
- <el-row id="canvas-actions-box" :class="{'isEdit':config.isEdit}">
- <!-- <div :class="{'active':active=='move'}">
- <i class="iconfont icon-move" @click="moveCanvas"></i>
- </div> -->
- <div v-if="config.isEdit&&config.groupSelect" :class="{'active':active=='groupSelect'}">
- <i class="iconfont icon-shuxingxuanze" @click="groupSelect"></i>
- </div>
- <div>
- <i class="iconfont icon-maximize" @click="fitToWindow"></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'}">
- <el-dropdown size="mini" placement="top-start" @command="handleDivideCommand" :hide-on-click="false">
- <i class="iconfont icon-edit1" @click="divide"></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">
- <i class="iconfont icon-Erase" @click="clearDivide"></i>
- </div>
- <div v-if="config.isEdit">
- <i class="iconfont icon-Cancel" @click="undo"></i>
- </div>
- <div v-if="config.isEdit">
- <i class="iconfont icon-Anti-cancel" @click="redo"></i>
- </div>
- <div>
- <i class="iconfont icon-narrow" @click="reduce"></i>
- </div>
- <div class="line">
- <el-slider tooltip-class="tooltip-class" :min="min" v-model="sliderVal" :show-tooltip="false" @input="scale"></el-slider>
- </div>
- <div>
- <i class="iconfont icon-zoom" @click="plus"></i>
- </div>
- </el-row>
- </template>
- <script>
- export default {
- data() {
- return {
- sliderVal: 1, // 滑块值
- active: '',
- min: 1,
- everyScale: 1, // 每份的放大倍数
- isSwitch: false, // 是否开启吸附
- }
- },
- props: {
- config: {
- type: Object,
- default: {
- isEdit: false,
- divide: true,
- groupSelect: false
- }
- }
- },
- computed: {
- },
- methods: {
- // 移动画布
- // moveCanvas() {
- // this.active = this.active != "move" ? "move" : '';
- // this.$emit('move', this.active == 'move');
- // },
- //
- groupSelect() {
- this.active = 'groupSelect';
- this.$emit('groupSelect');
- },
- // 适配大小
- fitToWindow() {
- this.$emit('fit');
- },
- // 下拉菜单
- handleCommand(command) {
- this.$emit(command)
- },
- // 是否开启吸附
- handleDivideCommand(commond) {
- 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) {
- // 换算
- let scale = val * this.everyScale / 10;
- this.$emit('scale', scale);
- },
- // 加
- plus() {
- this.sliderVal *= 1.1;
- if (this.sliderVal > this.maxScale) {
- this.sliderVal = this.maxScale;
- }
- this.scale(this.sliderVal);
- }
- }
- }
- </script>
- <style lang="less" scoped>
- #canvas-actions-box {
- min-width: 542px;
- & > div {
- float: left;
- font-size: 20px;
- padding: 0 10px;
- color: #fff;
- background-color: #6da60f;
- 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;
- /deep/.el-slider__runway {
- margin: 18px 0;
- height: 4px;
- .el-slider__bar {
- background-color: #fff;
- height: 4px;
- }
- }
- }
- }
- </style>
|