feat:【ele】【mall】diy-editor 对比 vue3 + element-plus 的最新代码,确保迁移的正确性!
This commit is contained in:
@@ -1,10 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
|
||||||
import { ElColorPicker, ElInput } from 'element-plus';
|
|
||||||
|
|
||||||
import { PREDEFINE_COLORS } from '@vben/constants';
|
import { PREDEFINE_COLORS } from '@vben/constants';
|
||||||
|
|
||||||
|
import { ElColorPicker, ElInput } from 'element-plus';
|
||||||
|
|
||||||
/** 颜色输入框 */
|
/** 颜色输入框 */
|
||||||
defineOptions({ name: 'ColorInput' });
|
defineOptions({ name: 'ColorInput' });
|
||||||
|
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ export interface CarouselProperty {
|
|||||||
indicator: 'dot' | 'number'; // 指示器样式:点 | 数字
|
indicator: 'dot' | 'number'; // 指示器样式:点 | 数字
|
||||||
autoplay: boolean; // 是否自动播放
|
autoplay: boolean; // 是否自动播放
|
||||||
interval: number; // 播放间隔
|
interval: number; // 播放间隔
|
||||||
|
height: number; // 轮播高度
|
||||||
items: CarouselItemProperty[]; // 轮播内容
|
items: CarouselItemProperty[]; // 轮播内容
|
||||||
style: ComponentStyle; // 组件样式
|
style: ComponentStyle; // 组件样式
|
||||||
}
|
}
|
||||||
@@ -28,6 +29,7 @@ export const component = {
|
|||||||
indicator: 'dot',
|
indicator: 'dot',
|
||||||
autoplay: false,
|
autoplay: false,
|
||||||
interval: 3,
|
interval: 3,
|
||||||
|
height: 174,
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
type: 'img',
|
type: 'img',
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ const handleIndexChange = (index: number) => {
|
|||||||
</div>
|
</div>
|
||||||
<div v-else class="relative">
|
<div v-else class="relative">
|
||||||
<ElCarousel
|
<ElCarousel
|
||||||
height="174px"
|
:height="`${property.height}px`"
|
||||||
:type="property.type === 'card' ? 'card' : ''"
|
:type="property.type === 'card' ? 'card' : ''"
|
||||||
:autoplay="property.autoplay"
|
:autoplay="property.autoplay"
|
||||||
:interval="property.interval * 1000"
|
:interval="property.interval * 1000"
|
||||||
|
|||||||
@@ -8,6 +8,8 @@ import {
|
|||||||
ElCard,
|
ElCard,
|
||||||
ElForm,
|
ElForm,
|
||||||
ElFormItem,
|
ElFormItem,
|
||||||
|
ElInputNumber,
|
||||||
|
ElRadio,
|
||||||
ElRadioButton,
|
ElRadioButton,
|
||||||
ElRadioGroup,
|
ElRadioGroup,
|
||||||
ElSlider,
|
ElSlider,
|
||||||
@@ -50,6 +52,14 @@ const formData = useVModel(props, 'modelValue', emit);
|
|||||||
</ElTooltip>
|
</ElTooltip>
|
||||||
</ElRadioGroup>
|
</ElRadioGroup>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
|
<ElFormItem label="高度" prop="height">
|
||||||
|
<ElInputNumber
|
||||||
|
class="mr-[10px] !w-1/2"
|
||||||
|
controls-position="right"
|
||||||
|
v-model="formData.height"
|
||||||
|
/>
|
||||||
|
px
|
||||||
|
</ElFormItem>
|
||||||
<ElFormItem label="指示器" prop="indicator">
|
<ElFormItem label="指示器" prop="indicator">
|
||||||
<ElRadioGroup v-model="formData.indicator">
|
<ElRadioGroup v-model="formData.indicator">
|
||||||
<ElRadio value="dot">小圆点</ElRadio>
|
<ElRadio value="dot">小圆点</ElRadio>
|
||||||
|
|||||||
@@ -17,8 +17,6 @@ export interface MagicCubeItemProperty {
|
|||||||
height: number; // 高
|
height: number; // 高
|
||||||
top: number; // 上
|
top: number; // 上
|
||||||
left: number; // 左
|
left: number; // 左
|
||||||
right: number; // 右
|
|
||||||
bottom: number; // 下
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 定义组件 */
|
/** 定义组件 */
|
||||||
|
|||||||
Reference in New Issue
Block a user