|
@@ -1,17 +1,15 @@
|
|
|
<template>
|
|
|
- <div style="width: 100%;height: 100%;">
|
|
|
+ <div style="width: 100%; height: 100%">
|
|
|
<el-tabs v-model="activeName">
|
|
|
<el-tab-pane label="网格" name="1">
|
|
|
<el-row align="middle">
|
|
|
- <el-col :span='24'>
|
|
|
- <el-checkbox v-model="showGrid">
|
|
|
- Show Grid
|
|
|
- </el-checkbox>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-checkbox v-model="showGrid"> Show Grid </el-checkbox>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row align="middle" v-show="showGrid">
|
|
|
- <el-col :span='10'>Grid Type</el-col>
|
|
|
- <el-col :span='12'>
|
|
|
+ <el-col :span="10">Grid Type</el-col>
|
|
|
+ <el-col :span="12">
|
|
|
<el-select style="width: 100%" v-model="type">
|
|
|
<el-option :value="GRID_TYPE.DOT">Dot</el-option>
|
|
|
<el-option :value="GRID_TYPE.FIXED_DOT">Fixed Dot</el-option>
|
|
@@ -21,83 +19,78 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row align="middle" v-show="showGrid">
|
|
|
- <el-col :span='10'>Grid Size</el-col>
|
|
|
- <el-col :span='10'>
|
|
|
- <el-slider :min='9' :max='20' :step='1' v-model="size" />
|
|
|
+ <el-col :span="10">Grid Size</el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-slider :min="9" :max="20" :step="1" v-model="size" />
|
|
|
</el-col>
|
|
|
- <el-col :span='2'>
|
|
|
- <div class="result">{{size}}</div>
|
|
|
+ <el-col :span="2">
|
|
|
+ <div class="result">{{ size }}</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<div v-if="type === 'doubleMesh' && showGrid">
|
|
|
<el-row align="middle">
|
|
|
- <el-col :span='10'>Primary Color</el-col>
|
|
|
- <el-col :span='12'>
|
|
|
- <el-input
|
|
|
- type="color"
|
|
|
- v-model="color"
|
|
|
- style="width: 100%"
|
|
|
- />
|
|
|
+ <el-col :span="10">Primary Color</el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-input type="color" v-model="color" style="width: 100%" />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row align="middle">
|
|
|
- <el-col :span='10'>Primary Thickness</el-col>
|
|
|
- <el-col :span='10'>
|
|
|
- <el-slider :min='0.5' :max='10' :step='0.5 ' v-model="thickness" />
|
|
|
+ <el-col :span="10">Primary Thickness</el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-slider :min="0.5" :max="10" :step="0.5" v-model="thickness" />
|
|
|
</el-col>
|
|
|
- <el-col :span=2>
|
|
|
+ <el-col :span="2">
|
|
|
<div class="result">{{ thickness.toFixed(1) }}</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row align="middle">
|
|
|
- <el-col :span='10'>Secondary Color</el-col>
|
|
|
- <el-col :span='12'>
|
|
|
- <el-input type="color" v-model="colorSecond" style="width: 100%" />
|
|
|
+ <el-col :span="10">Secondary Color</el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-input
|
|
|
+ type="color"
|
|
|
+ v-model="colorSecond"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row align="middle">
|
|
|
- <el-col :span='10'>Secondary Thickness</el-col>
|
|
|
- <el-col :span='10'>
|
|
|
+ <el-col :span="10">Secondary Thickness</el-col>
|
|
|
+ <el-col :span="10">
|
|
|
<el-slider
|
|
|
- :min='1.5'
|
|
|
- :max='10'
|
|
|
- :step='0.5'
|
|
|
- v-model="thicknessSecond"
|
|
|
- />
|
|
|
+ :min="1.5"
|
|
|
+ :max="10"
|
|
|
+ :step="0.5"
|
|
|
+ v-model="thicknessSecond"
|
|
|
+ />
|
|
|
</el-col>
|
|
|
- <el-col :span=2>
|
|
|
+ <el-col :span="2">
|
|
|
<div class="result">{{ thicknessSecond.toFixed(1) }}</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row align="middle">
|
|
|
- <el-col :span='10'>Scale Factor</el-col>
|
|
|
- <el-col :span='10'>
|
|
|
- <el-slider
|
|
|
- :min='1'
|
|
|
- :max='10'
|
|
|
- :step='1'
|
|
|
- v-model="factor"
|
|
|
- />
|
|
|
+ <el-col :span="10">Scale Factor</el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-slider :min="1" :max="10" :step="1" v-model="factor" />
|
|
|
</el-col>
|
|
|
- <el-col :span='2'>
|
|
|
+ <el-col :span="2">
|
|
|
<div class="result">{{ factor }}</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
<div v-else>
|
|
|
<el-row align="middle" v-show="showGrid">
|
|
|
- <el-col :span='10'>Grid Color</el-col>
|
|
|
- <el-col :span='12'>
|
|
|
+ <el-col :span="10">Grid Color</el-col>
|
|
|
+ <el-col :span="12">
|
|
|
<el-input type="color" v-model="color" style="width: 100%" />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row align="middle" v-show="showGrid">
|
|
|
- <el-col :span='10'>Thickness</el-col>
|
|
|
- <el-col :span='10'>
|
|
|
- <el-slider :min='0.5' :max='10' :step='0.5' v-model="thickness" />
|
|
|
+ <el-col :span="10">Thickness</el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-slider :min="0.5" :max="10" :step="0.5" v-model="thickness" />
|
|
|
</el-col>
|
|
|
- <el-col :span=1>
|
|
|
- <div class="result">{{thickness.toFixed(1)}}</div>
|
|
|
+ <el-col :span="1">
|
|
|
+ <div class="result">{{ thickness.toFixed(1) }}</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
@@ -105,22 +98,20 @@
|
|
|
|
|
|
<el-tab-pane label="背景" name="2">
|
|
|
<el-row align="middle">
|
|
|
- <el-col :span=6>Color</el-col>
|
|
|
- <el-col :span=14>
|
|
|
- <el-input type="color" v-model="bgColor" style= "width: 100%" />
|
|
|
+ <el-col :span="6">Color</el-col>
|
|
|
+ <el-col :span="14">
|
|
|
+ <el-input type="color" v-model="bgColor" style="width: 100%" />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row align="middle">
|
|
|
<el-col :span="14" :offset="6">
|
|
|
- <el-checkbox v-model="showImage">
|
|
|
- Show Image
|
|
|
- </el-checkbox>
|
|
|
+ <el-checkbox v-model="showImage"> Show Image </el-checkbox>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<div v-if="showImage">
|
|
|
<el-row align="middle">
|
|
|
- <el-col :span='6'>Repeat</el-col>
|
|
|
- <el-col :span='14'>
|
|
|
+ <el-col :span="6">Repeat</el-col>
|
|
|
+ <el-col :span="14">
|
|
|
<el-select style="width: 100%" v-model="repeat">
|
|
|
<el-option :value="REPEAT_TYPE.NO_REPEAT">No Repeat</el-option>
|
|
|
<el-option :value="REPEAT_TYPE.REPEAT">Repeat</el-option>
|
|
@@ -137,21 +128,21 @@
|
|
|
</el-row>
|
|
|
<div v-if="repeat === 'watermark'">
|
|
|
<el-row align="middle">
|
|
|
- <el-col :span='16' :offset='6' style="font-size: 12px">
|
|
|
+ <el-col :span="16" :offset="6" style="font-size: 12px">
|
|
|
Watermark Angle
|
|
|
</el-col>
|
|
|
- <el-col :span='14' :offset='6'>
|
|
|
- <el-slider :min='0' :max='360' :step='1' v-model="angle" />
|
|
|
+ <el-col :span="14" :offset="6">
|
|
|
+ <el-slider :min="0" :max="360" :step="1" v-model="angle" />
|
|
|
</el-col>
|
|
|
- <el-col :span=2>
|
|
|
- <div class="result">{{angle}}</div>
|
|
|
+ <el-col :span="2">
|
|
|
+ <div class="result">{{ angle }}</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
|
|
|
<el-row align="middle">
|
|
|
- <el-col :span='6'>Position</el-col>
|
|
|
- <el-col :span='14'>
|
|
|
+ <el-col :span="6">Position</el-col>
|
|
|
+ <el-col :span="14">
|
|
|
<el-select style="width: 100%" v-model="position">
|
|
|
<el-option value="center">center</el-option>
|
|
|
<el-option value="left">left</el-option>
|
|
@@ -166,9 +157,9 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row align="middle">
|
|
|
- <el-col :span='6'>Size</el-col>
|
|
|
- <el-col :span='14'>
|
|
|
- <el-select style="width: 100%" v-model="bgSize" >
|
|
|
+ <el-col :span="6">Size</el-col>
|
|
|
+ <el-col :span="14">
|
|
|
+ <el-select style="width: 100%" v-model="bgSize">
|
|
|
<el-option value="auto auto">auto auto</el-option>
|
|
|
<el-option value="cover">cover</el-option>
|
|
|
<el-option value="contain">contain</el-option>
|
|
@@ -181,287 +172,286 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row align="middle">
|
|
|
- <el-col :span='6'>Opacity</el-col>
|
|
|
- <el-col :span='12'>
|
|
|
- <el-slider
|
|
|
- :min='0.05'
|
|
|
- :max='1'
|
|
|
- :step='0.05'
|
|
|
- v-model="opacity"
|
|
|
- />
|
|
|
+ <el-col :span="6">Opacity</el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-slider :min="0.05" :max="1" :step="0.05" v-model="opacity" />
|
|
|
</el-col>
|
|
|
- <el-col :span=4>
|
|
|
+ <el-col :span="4">
|
|
|
<div class="result">{{ opacity.toFixed(2) }}</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import GridOption from './method'
|
|
|
+import GridOption from "./method";
|
|
|
const GRID_TYPE_ENUM = {
|
|
|
- DOT : 'dot',
|
|
|
- FIXED_DOT : 'fixedDot',
|
|
|
- MESH : 'mesh',
|
|
|
- DOUBLE_MESH : 'doubleMesh',
|
|
|
-}
|
|
|
+ DOT: "dot",
|
|
|
+ FIXED_DOT: "fixedDot",
|
|
|
+ MESH: "mesh",
|
|
|
+ DOUBLE_MESH: "doubleMesh",
|
|
|
+};
|
|
|
const REPEAT_TYPE_ENUM = {
|
|
|
- NO_REPEAT : 'no-repeat',
|
|
|
- REPEAT : 'repeat',
|
|
|
- REPEAT_X : 'repeat-x',
|
|
|
- REPEAT_Y : 'repeat-y',
|
|
|
- ROUND : 'round',
|
|
|
- SPACE : 'space',
|
|
|
- FLIPX : 'flipX',
|
|
|
- FLIPY : 'flipY',
|
|
|
- FLIPXY : 'flipXY',
|
|
|
- WATERMARK : 'watermark',
|
|
|
-}
|
|
|
+ NO_REPEAT: "no-repeat",
|
|
|
+ REPEAT: "repeat",
|
|
|
+ REPEAT_X: "repeat-x",
|
|
|
+ REPEAT_Y: "repeat-y",
|
|
|
+ ROUND: "round",
|
|
|
+ SPACE: "space",
|
|
|
+ FLIPX: "flipX",
|
|
|
+ FLIPY: "flipY",
|
|
|
+ FLIPXY: "flipXY",
|
|
|
+ WATERMARK: "watermark",
|
|
|
+};
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
GRID_TYPE: GRID_TYPE_ENUM,
|
|
|
REPEAT_TYPE: REPEAT_TYPE_ENUM,
|
|
|
- activeName: '1'
|
|
|
- }
|
|
|
+ activeName: "1",
|
|
|
+ };
|
|
|
},
|
|
|
computed: {
|
|
|
showGrid: {
|
|
|
get() {
|
|
|
- return this.$store.state.flow.showGrid
|
|
|
+ return this.$store.state.flow.showGrid;
|
|
|
},
|
|
|
set(val) {
|
|
|
- this.$store.commit('flow/updateshowGrid', val)
|
|
|
- }
|
|
|
+ this.$store.commit("flow/updateshowGrid", val);
|
|
|
+ },
|
|
|
},
|
|
|
type: {
|
|
|
get() {
|
|
|
- return this.$store.state.flow.type
|
|
|
+ return this.$store.state.flow.type;
|
|
|
},
|
|
|
set(val) {
|
|
|
- this.$store.commit('flow/updatetype', val)
|
|
|
- }
|
|
|
+ this.$store.commit("flow/updatetype", val);
|
|
|
+ },
|
|
|
},
|
|
|
size: {
|
|
|
get() {
|
|
|
- return this.$store.state.flow.size
|
|
|
+ return this.$store.state.flow.size;
|
|
|
},
|
|
|
set(val) {
|
|
|
- this.$store.commit('flow/updatesize', val)
|
|
|
- }
|
|
|
+ this.$store.commit("flow/updatesize", val);
|
|
|
+ },
|
|
|
},
|
|
|
color: {
|
|
|
get() {
|
|
|
- return this.$store.state.flow.color
|
|
|
+ return this.$store.state.flow.color;
|
|
|
},
|
|
|
set(val) {
|
|
|
- this.$store.commit('flow/updatecolor', val)
|
|
|
- }
|
|
|
+ this.$store.commit("flow/updatecolor", val);
|
|
|
+ },
|
|
|
},
|
|
|
thickness: {
|
|
|
get() {
|
|
|
- return this.$store.state.flow.thickness
|
|
|
+ return this.$store.state.flow.thickness;
|
|
|
},
|
|
|
set(val) {
|
|
|
- this.$store.commit('flow/updatethickness', val)
|
|
|
- }
|
|
|
+ this.$store.commit("flow/updatethickness", val);
|
|
|
+ },
|
|
|
},
|
|
|
colorSecond: {
|
|
|
get() {
|
|
|
- return this.$store.state.flow.colorSecond
|
|
|
+ return this.$store.state.flow.colorSecond;
|
|
|
},
|
|
|
set(val) {
|
|
|
- this.$store.commit('flow/updatecolorSecond', val)
|
|
|
- }
|
|
|
+ this.$store.commit("flow/updatecolorSecond", val);
|
|
|
+ },
|
|
|
},
|
|
|
thicknessSecond: {
|
|
|
get() {
|
|
|
- return this.$store.state.flow.thicknessSecond
|
|
|
+ return this.$store.state.flow.thicknessSecond;
|
|
|
},
|
|
|
set(val) {
|
|
|
- this.$store.commit('flow/updatethicknessSecond', val)
|
|
|
- }
|
|
|
+ this.$store.commit("flow/updatethicknessSecond", val);
|
|
|
+ },
|
|
|
},
|
|
|
factor: {
|
|
|
get() {
|
|
|
- return this.$store.state.flow.factor
|
|
|
+ return this.$store.state.flow.factor;
|
|
|
},
|
|
|
set(val) {
|
|
|
- this.$store.commit('flow/updatefactor', val)
|
|
|
- }
|
|
|
+ this.$store.commit("flow/updatefactor", val);
|
|
|
+ },
|
|
|
},
|
|
|
bgColor: {
|
|
|
get() {
|
|
|
- return this.$store.state.flow.bgColor
|
|
|
+ return this.$store.state.flow.bgColor;
|
|
|
},
|
|
|
set(val) {
|
|
|
- this.$store.commit('flow/updatebgColor', val)
|
|
|
- }
|
|
|
+ this.$store.commit("flow/updatebgColor", val);
|
|
|
+ },
|
|
|
},
|
|
|
showImage: {
|
|
|
get() {
|
|
|
- return this.$store.state.flow.showImage
|
|
|
+ return this.$store.state.flow.showImage;
|
|
|
},
|
|
|
set(val) {
|
|
|
- this.$store.commit('flow/updateshowImage', val)
|
|
|
- }
|
|
|
+ this.$store.commit("flow/updateshowImage", val);
|
|
|
+ },
|
|
|
},
|
|
|
repeat: {
|
|
|
get() {
|
|
|
- return this.$store.state.flow.repeat
|
|
|
+ return this.$store.state.flow.repeat;
|
|
|
},
|
|
|
set(val) {
|
|
|
- this.$store.commit('flow/updaterepeat', val)
|
|
|
- }
|
|
|
+ this.$store.commit("flow/updaterepeat", val);
|
|
|
+ },
|
|
|
},
|
|
|
angle: {
|
|
|
get() {
|
|
|
- return this.$store.state.flow.angle
|
|
|
+ return this.$store.state.flow.angle;
|
|
|
},
|
|
|
set(val) {
|
|
|
- this.$store.commit('flow/updateangle', val)
|
|
|
- }
|
|
|
+ this.$store.commit("flow/updateangle", val);
|
|
|
+ },
|
|
|
},
|
|
|
position: {
|
|
|
get() {
|
|
|
- return this.$store.state.flow.position
|
|
|
+ return this.$store.state.flow.position;
|
|
|
},
|
|
|
set(val) {
|
|
|
- this.$store.commit('flow/updateposition', val)
|
|
|
- }
|
|
|
+ this.$store.commit("flow/updateposition", val);
|
|
|
+ },
|
|
|
},
|
|
|
bgSize: {
|
|
|
get() {
|
|
|
- return this.$store.state.flow.bgSize
|
|
|
+ return this.$store.state.flow.bgSize;
|
|
|
},
|
|
|
set(val) {
|
|
|
- this.$store.commit('flow/updatebgSize', val)
|
|
|
- }
|
|
|
+ this.$store.commit("flow/updatebgSize", val);
|
|
|
+ },
|
|
|
},
|
|
|
opacity: {
|
|
|
get() {
|
|
|
- return this.$store.state.flow.opacity
|
|
|
+ return this.$store.state.flow.opacity;
|
|
|
},
|
|
|
set(val) {
|
|
|
- this.$store.commit('flow/updateopacity', val)
|
|
|
- }
|
|
|
- }
|
|
|
+ this.$store.commit("flow/updateopacity", val);
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
- 'showGrid': {
|
|
|
+ showGrid: {
|
|
|
handler() {
|
|
|
- GridOption.isShowGrid(this.$store.state.flow)
|
|
|
+ GridOption.isShowGrid(this.$store.state.flow);
|
|
|
},
|
|
|
immediate: false,
|
|
|
- deep: false
|
|
|
+ deep: false,
|
|
|
},
|
|
|
- 'type': {
|
|
|
+ type: {
|
|
|
handler() {
|
|
|
- GridOption.gridOpt(this.$store.state.flow)
|
|
|
+ GridOption.gridOpt(this.$store.state.flow);
|
|
|
},
|
|
|
immediate: false,
|
|
|
- deep: false
|
|
|
+ deep: false,
|
|
|
},
|
|
|
- 'color': {
|
|
|
+ color: {
|
|
|
handler() {
|
|
|
- GridOption.gridOpt(this.$store.state.flow)
|
|
|
+ GridOption.gridOpt(this.$store.state.flow);
|
|
|
},
|
|
|
immediate: false,
|
|
|
- deep: false
|
|
|
+ deep: false,
|
|
|
},
|
|
|
- 'thickness': {
|
|
|
+ thickness: {
|
|
|
handler() {
|
|
|
- GridOption.gridOpt(this.$store.state.flow)
|
|
|
+ GridOption.gridOpt(this.$store.state.flow);
|
|
|
},
|
|
|
immediate: false,
|
|
|
- deep: false
|
|
|
+ deep: false,
|
|
|
},
|
|
|
- 'thicknessSecond': {
|
|
|
+ thicknessSecond: {
|
|
|
handler() {
|
|
|
- GridOption.gridOpt(this.$store.state.flow)
|
|
|
+ GridOption.gridOpt(this.$store.state.flow);
|
|
|
},
|
|
|
immediate: false,
|
|
|
- deep: false
|
|
|
+ deep: false,
|
|
|
},
|
|
|
- 'colorSecond': {
|
|
|
+ colorSecond: {
|
|
|
handler() {
|
|
|
- GridOption.gridOpt(this.$store.state.flow)
|
|
|
+ GridOption.gridOpt(this.$store.state.flow);
|
|
|
},
|
|
|
immediate: false,
|
|
|
- deep: false
|
|
|
+ deep: false,
|
|
|
},
|
|
|
- 'factor': {
|
|
|
+ factor: {
|
|
|
handler() {
|
|
|
- GridOption.gridOpt(this.$store.state.flow)
|
|
|
+ GridOption.gridOpt(this.$store.state.flow);
|
|
|
},
|
|
|
immediate: false,
|
|
|
- deep: false
|
|
|
+ deep: false,
|
|
|
},
|
|
|
- 'bgColor': {
|
|
|
+ bgColor: {
|
|
|
handler() {
|
|
|
- GridOption.backGroundOpt(this.$store.state.flow)
|
|
|
+ GridOption.backGroundOpt(this.$store.state.flow);
|
|
|
},
|
|
|
immediate: false,
|
|
|
- deep: false
|
|
|
+ deep: false,
|
|
|
},
|
|
|
- 'showImage': {
|
|
|
+ showImage: {
|
|
|
handler() {
|
|
|
- GridOption.backGroundOpt(this.$store.state.flow)
|
|
|
+ GridOption.backGroundOpt(this.$store.state.flow);
|
|
|
},
|
|
|
immediate: false,
|
|
|
- deep: false
|
|
|
+ deep: false,
|
|
|
},
|
|
|
- 'repeat': {
|
|
|
+ repeat: {
|
|
|
handler() {
|
|
|
- GridOption.backGroundOpt(this.$store.state.flow)
|
|
|
+ GridOption.backGroundOpt(this.$store.state.flow);
|
|
|
},
|
|
|
immediate: false,
|
|
|
- deep: false
|
|
|
+ deep: false,
|
|
|
},
|
|
|
- 'angle': {
|
|
|
+ angle: {
|
|
|
handler() {
|
|
|
- GridOption.backGroundOpt(this.$store.state.flow)
|
|
|
+ GridOption.backGroundOpt(this.$store.state.flow);
|
|
|
},
|
|
|
immediate: false,
|
|
|
- deep: false
|
|
|
+ deep: false,
|
|
|
},
|
|
|
- 'bgSize': {
|
|
|
+ bgSize: {
|
|
|
handler() {
|
|
|
- GridOption.backGroundOpt(this.$store.state.flow)
|
|
|
+ GridOption.backGroundOpt(this.$store.state.flow);
|
|
|
},
|
|
|
immediate: false,
|
|
|
- deep: false
|
|
|
+ deep: false,
|
|
|
},
|
|
|
- 'position': {
|
|
|
+ position: {
|
|
|
handler() {
|
|
|
- GridOption.backGroundOpt(this.$store.state.flow)
|
|
|
+ GridOption.backGroundOpt(this.$store.state.flow);
|
|
|
},
|
|
|
immediate: false,
|
|
|
- deep: false
|
|
|
+ deep: false,
|
|
|
},
|
|
|
- 'opacity': {
|
|
|
+ opacity: {
|
|
|
handler() {
|
|
|
- GridOption.backGroundOpt(this.$store.state.flow)
|
|
|
+ GridOption.backGroundOpt(this.$store.state.flow);
|
|
|
},
|
|
|
immediate: false,
|
|
|
- deep: false
|
|
|
+ deep: false,
|
|
|
},
|
|
|
- 'size': {
|
|
|
+ size: {
|
|
|
handler() {
|
|
|
- GridOption.setGridSize(this.$store.state.flow)
|
|
|
+ GridOption.setGridSize(this.$store.state.flow);
|
|
|
},
|
|
|
immediate: false,
|
|
|
- deep: false
|
|
|
+ deep: false,
|
|
|
},
|
|
|
},
|
|
|
created() {
|
|
|
- GridOption.gridOpt(this.$store.state.flow)
|
|
|
- GridOption.setGridSize(this.$store.state.flow)
|
|
|
- GridOption.backGroundOpt(this.$store.state.flow)
|
|
|
- GridOption.isShowGrid(this.$store.state.flow)
|
|
|
- }
|
|
|
-}
|
|
|
+ GridOption.gridOpt(this.$store.state.flow);
|
|
|
+ GridOption.setGridSize(this.$store.state.flow);
|
|
|
+ GridOption.backGroundOpt(this.$store.state.flow);
|
|
|
+ GridOption.isShowGrid(this.$store.state.flow);
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+// :deep(.) ;
|
|
|
+</style>
|