Hawthorn-Api

# HtAnchor 说明

HtAnchor 自定义锚点组件 Author andy.ten@tom.com & xukaixing@hotmail.com

# 示例

<template>
  <div>
    <ht-anchor :labels="anchors" style="height: 300px;">
      <div id="row-01" class="line">
        <ht-form ref="userEditFm" v-model="formData" ref-form="userEditFm" divider="基础信息" :form-list="userEditList" />
      </div>
      <div id="row-02" class="line">
        <ht-form ref="userEditFm" v-model="formData" ref-form="userEditFm" divider="登录信息" :form-list="userEditList" />
      </div>
      <div id="row-03" class="line">
        <ht-form ref="userEditFm" v-model="formData" ref-form="userEditFm" divider="操作信息" :form-list="userEditList" />
      </div>
    </ht-anchor>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        userName: 'xukaixing'
      },
      anchors: [
        { label: '基础信息', id: 'row-01' },
        { label: '登录信息', id: 'row-02' },
        { label: '操作信息', id: 'row-03' }
        ],
      userEditList: [
        {
          type: 'text',
          format: [1, 'is_any', 20],
          label: 'id',
          field: 'id',
          hidden: true
        },
        {
          type: 'text',
          format: [1, 'is_any', 30],
          label: '用户账号',
          field: 'account',
          disabled: true
        },
        {
          type: 'text',
          format: [1, 'is_any', 30],
          label: '用户姓名',
          field: 'userName'
        },
        {
          type: 'dic',
          format: [0, 'isDic', 30],
          dicType: 'xb',
          label: '性别',
          field: 'sex'
        },
        {
          type: 'date',
          format: [0, 'isDate', 30],
          label: '出生日期',
          field: 'birthDate'
        },
        {
          type: 'text',
          format: [0, 'isEmail', 100],
          label: '邮件地址',
          field: 'email'
        },
        {
          type: 'dic',
          format: [1, 'isDic', 6],
          dicType: 'yhlx',
          label: '用户类型',
          field: 'userType',
          value: '100401',
          showLabel: '普通用户'
        },
        {
          type: 'text',
          format: [0, 'isAny', 100],
          label: '备注',
          field: 'remark',
          colspan: 3
        },
        {
          type: 'text',
          format: [0, 'isAny', 100],
          label: '备注',
          field: 'remark',
          colspan: 3
        },
        {
          type: 'text',
          format: [0, 'isAny', 100],
          label: '备注',
          field: 'remark',
          colspan: 3
        },
        {
          type: 'text',
          format: [0, 'isAny', 100],
          label: '备注',
          field: 'remark',
          colspan: 3
        },
        {
          type: 'text',
          format: [0, 'isAny', 100],
          label: '备注',
          field: 'remark',
          colspan: 3
        },
        {
          type: 'dic',
          format: [1, 'isDic', 30],
          label: '状态',
          dicType: 'yxzt',
          field: 'status'
        }
      ],
    }
  }
};
</script>
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
Expand Copy

# API

# Anchor Attributes

参数 说明 类型 可选值 默认值
labels 设置锚点 Array — —
activeId 射中默认显示的锚点 String — ''
labelWidth 设置锚点的宽度 String,Number — 80
maxHeight 设置最大高度 String,Number — —

# Anchor Event

方法名 说明 参数

# 版本

  • v1.0.1

← HtEditor富文本 →