| 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> | |
