|
@@ -2,33 +2,35 @@
|
|
|
<section class="yvan-circle-props">
|
|
|
<el-form ref="form" label-position="top">
|
|
|
<el-form-item label="宽度">
|
|
|
- <el-input-number controls-position="right"/>
|
|
|
+ <el-input-number v-model="activeComponent.style.width" :min="0" controls-position="right"/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="高度">
|
|
|
- <el-input-number controls-position="right"/>
|
|
|
+ <el-input-number v-model="activeComponent.style.height" :min="0" controls-position="right"/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="背景颜色">
|
|
|
- <el-color-picker show-alpha/>
|
|
|
+ <el-color-picker v-model="activeComponent.style.background"/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="边框类型">
|
|
|
- <el-select placeholder="请选择行高">
|
|
|
+ <el-select v-model="activeComponent.style.borderType" placeholder="请选择行高" filterable>
|
|
|
<el-option v-for="borderStyle in borderStyleList" :label="borderStyle.label" :value="borderStyle.code"/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="边框颜色">
|
|
|
- <el-color-picker show-alpha/>
|
|
|
+ <el-color-picker v-model="activeComponent.style.borderColor"/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="边框宽度">
|
|
|
- <el-input-number controls-position="right"/>
|
|
|
+ <el-input-number v-model="activeComponent.style.borderWidth" :min="0" controls-position="right"/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="旋转角度(°)">
|
|
|
- <el-input-number controls-position="right"/>
|
|
|
+ <el-input-number v-model="activeComponent.style.rotate" controls-position="right"/>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</section>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
+import {mapState} from "pinia";
|
|
|
+import {globalStore} from "@/store";
|
|
|
import {borderStyleList} from "@/components/config/globalConfig";
|
|
|
|
|
|
export default {
|
|
@@ -37,7 +39,15 @@ export default {
|
|
|
return {
|
|
|
borderStyleList
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(globalStore, {
|
|
|
+ activeComponent: (state) => {
|
|
|
+ console.log("activeComponent => ", state.curComponent)
|
|
|
+ return state.curComponent
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|