feat:新增图片组件,修改文件组件

This commit is contained in:
奔跑的面条
2022-05-01 17:36:23 +08:00
parent bacdcd1760
commit 3bcef87d6c
9 changed files with 162 additions and 40 deletions
@@ -1,50 +1,64 @@
<template>
<CollapseItem name="信息" :expanded="true">
<SettingItemBox name="文字" :alone="true">
<SettingItem>
<collapse-item name="信息" :expanded="true">
<setting-item-box name="文字" :alone="true">
<setting-item>
<n-input v-model:value="optionData.dataset" size="small"></n-input>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</setting-item>
</setting-item-box>
</collapse-item>
<CollapseItem name="样式" :expanded="true">
<SettingItemBox name="文字">
<SettingItem name="字体大小">
<collapse-item name="样式" :expanded="true">
<setting-item-box name="文字">
<setting-item name="字体大小">
<n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
</SettingItem>
</setting-item>
<SettingItem name="文本方向">
<setting-item name="文本方向">
<n-select v-model:value="optionData.writingMode" size="small" :options="verticalOptions" />
</SettingItem>
</setting-item>
<SettingItem name="X轴内边距">
<setting-item name="X轴内边距">
<n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
</SettingItem>
<SettingItem name="Y轴内边距">
</setting-item>
<setting-item name="Y轴内边距">
<n-input-number v-model:value="optionData.paddingY" size="small" placeholder="输入内边距"></n-input-number>
</SettingItem>
<SettingItem name="字间距">
</setting-item>
<setting-item name="字间距">
<n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
</SettingItem>
<SettingItem name="颜色">
</setting-item>
<setting-item name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontColor"></n-color-picker>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="背景">
<SettingItem name="背景圆角">
</setting-item>
</setting-item-box>
<setting-item-box name="边框">
<setting-item name="宽度">
<n-input-number
v-model:value="optionData.borderWidth"
size="small"
:min="0"
placeholder="宽度"
></n-input-number>
</setting-item>
<setting-item name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.borderColor"></n-color-picker>
</setting-item>
<setting-item name="圆角">
<n-input-number
v-model:value="optionData.borderRadius"
size="small"
:min="0"
placeholder="背景圆角"
placeholder="圆角"
></n-input-number>
</SettingItem>
<SettingItem name="背景颜色">
</setting-item>
</setting-item-box>
<setting-item-box name="背景" :alone="true">
<setting-item name="背景颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backgroundColor"></n-color-picker>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</setting-item>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">