初始化

ny

23 小时以前 282fbc6488f4e8ceb5fda759f963ee88fbf7b999

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script lang="ts" setup>
defineOptions({ inheritAttrs: false });
const props = defineProps(['activeData']);
 
const borderTypeOptions = [
  { id: 'none', fullName: '无' },
  { id: 'solid', fullName: '实线' },
  { id: 'dashed', fullName: '虚线' },
  { id: 'dotted', fullName: '点状' },
];
 
function onBorderWidthChange(val) {
  if (!val) props.activeData.borderWidth = 1;
}
</script>
<template>
  <a-form-item>
    <template #label>链接地址<BasicHelp text="地址以http://或https://开头" /></template>
    <a-input v-model:value="activeData.href" placeholder="请输入" />
  </a-form-item>
  <a-form-item label="高度">
    <a-input-number v-model:value="activeData.height" placeholder="请输入" :min="0" />
  </a-form-item>
  <a-form-item label="边框">
    <jnpf-radio v-model:value="activeData.borderType" :options="borderTypeOptions" option-type="button" button-style="solid" class="right-radio" />
  </a-form-item>
  <template v-if="activeData.borderType != 'none'">
    <a-form-item label="边框颜色">
      <jnpf-color-picker v-model:value="activeData.borderColor" size="small" />
    </a-form-item>
    <a-form-item label="边框宽度">
      <a-input-number v-model:value="activeData.borderWidth" :min="1" :max="10" :precision="0" @change="onBorderWidthChange" />
    </a-form-item>
  </template>
</template>