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