inleft
2024-05-18 57e3bead08715d72efaeffe90fafa179b8366473
commit | author | age
0dd41b 1 <template>
I 2     <div>
3         <a-form-model ref="myForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
4
5             <a-form-model-item label="名称" prop="name">
6                 <a-input v-model="form.name" placeholder="链接名称">
7                 </a-input>
8             </a-form-model-item>
9
10             <a-form-model-item label="链接地址" prop="url">
11                 <a-input v-model="form.url" placeholder="https:// or http://" />
12             </a-form-model-item>
13
14             <a-form-model-item label="分类" prop="linkType">
15                 <a-select v-model="form.linkType" mode="default" placeholder="链接类型"
16                     :getPopupContainer="getCalendarContainer()">
17                     <a-select-option v-for="(item,index) in this.linkTypeList" :key="index" :value="item.linkTypeId">
18                         {{ item.groupName }}
19                     </a-select-option>
20                 </a-select>
21             </a-form-model-item>
1cf6d9 22             
0dd41b 23
I 24             <a-form-model-item label="avatar" prop="avatar">
25                 <a-input v-model="form.avatar" placeholder="链接图片地址" />
26             </a-form-model-item>
27
28             <a-form-model-item label="remark" prop="remark">
29                 <a-input v-model="form.remark" placeholder="备注" />
30             </a-form-model-item>
31
32             <a-form-model-item label="权重">
33                 <a-slider v-model="form.topValue" :default-value="50" :step="5"
34                     :getTooltipPopupContainer="getCalendarContainer()" />
35                 <span class="myTip">
36                     越小越靠前
37                 </span>
38             </a-form-model-item>
39
40         </a-form-model>
41     </div>
42 </template>
43
44 <script>
45     import {
46         getLinkType
47     } from '../../api/blogLink.js'
48
49     export default {
50         data() {
51             return {
52                 form: {
53                     name: '',
54                     url: '',
55                     avatar: '',
56                     remark: '',
1cf6d9 57                     linkType: undefined,
0dd41b 58                     topValue: 50,
I 59                     isNewWindowOpen: 1
60                 },
61                 linkTypeList: [],
62                 labelCol: {
63                     span: 7
64                 },
65                 wrapperCol: {
66                     span: 13
67                 },
68                 rules: {
69                     name: [{
70                             required: true,
71                             message: '名称不能为空',
72                             trigger: 'blur'
73                         },
74                         {
75                             min: 1,
76                             max: 50,
77                             message: '字数限制1~50',
78                             trigger: 'blur'
79                         },
80                     ],
81                     url: [{
82                             required: true,
83                             message: 'URL不能为空',
84                             trigger: 'blur'
85                         },
86                         {
87                             min: 1,
88                             max: 200,
89                             message: '字数限制1~200',
90                             trigger: 'blur'
91                         },
92                         {
93                             trigger: 'blur',
1cf6d9 94                             pattern: /^((https|http)?:\/\/)+/,
I 95                             message: '仅支持 https:// | http://'
0dd41b 96                         }
I 97                     ],
98                     linkType: [{
99                         required: true,
100                         message: '至少选一个分类',
101                         trigger: 'blur'
102                     }],
103                     avatar: [{
104                         required: false,
105                     }, {
106                         trigger: 'blur',
1cf6d9 107                         pattern: /^((https|http)?:\/\/)+/,
I 108                         message: '仅支持 https:// | http://'
0dd41b 109                     }],
I 110
111                 }
112             }
113         },
114         methods: {
115             getCalendarContainer(trigger) {
116                 return trigger => trigger.parentNode;
117             },
118         },
119         beforeMount() {
120             getLinkType({}).then((res) => {
121                 this.linkTypeList = res.data;
122             })
123         },
124     }
125 </script>
126
127 <style>
128 </style>