| commit | author | age | ||
| f5539f | 1 | <template> |
| L | 2 | <div class="myFrom"> |
| 3 | <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"> | |
| 4 | <a-form-model-item label="标题"> | |
| 5 | <a-input v-model="form.title" placeholder="限 50字内" /> | |
| 6 | </a-form-model-item> | |
| 7 | ||
| 8 | <a-form-model-item label="模式切换"> | |
| 9 | <a-switch v-model="form.online" /> | |
| 10 | <span class="myTip"> | |
| 11 | 本地编辑/由系统生成文件 | |
| 12 | </span> | |
| 13 | </a-form-model-item> | |
| 14 | ||
| 15 | ||
| 16 | <a-form-model-item label="日志文件" v-show="!form.online"> | |
| 17 | <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" | |
| 18 | :default-file-list="form.blogFileList"> | |
| 19 | <a-button> | |
| 20 | <a-icon type="upload" /> 限 md/html 文件 | |
| 21 | </a-button> | |
| 22 | </a-upload> | |
| 23 | </a-form-model-item> | |
| 24 | ||
| 25 | <a-form-model-item label="日志内容" v-show="form.online"> | |
| 26 | <a-input v-model="form.content" type="textarea" placeholder="限10k字数" /> | |
| 27 | </a-form-model-item> | |
| 28 | ||
| 29 | <a-form-model-item label="分类"> | |
| 30 | <a-select v-model="form.class" :allowClear="true" mode="multiple" placeholder="多选(至少一个)" | |
| 31 | :getPopupContainer="getCalendarContainer()"> | |
| 32 | <a-select-option value="shanghai"> | |
| 33 | Zone one | |
| 34 | </a-select-option> | |
| 35 | <a-select-option value="beijing"> | |
| 36 | Zone two | |
| 37 | </a-select-option> | |
| 38 | <a-select-option value="beijing2"> | |
| 39 | Zone two | |
| 40 | </a-select-option> | |
| 41 | </a-select> | |
| 42 | </a-form-model-item> | |
| 43 | ||
| 44 | <a-form-model-item label="偏好"> | |
| 45 | <a-switch v-model="form.preference" /> | |
| 46 | </a-form-model-item> | |
| 47 | ||
| 48 | <div v-show="form.preference" class="myBorder" style="padding:10px;"> | |
| 49 | <a-form-model-item label="草稿模式"> | |
| 50 | <a-switch v-model="form.tempSave" /> | |
| 51 | <span v-show="form.tempSave" class="myTip"> | |
| 52 | 临时存储,将不会发布该篇日志 | |
| 53 | </span> | |
| 54 | </a-form-model-item> | |
| 55 | ||
| 56 | <a-form-model-item label=" 文件类型"> | |
| 57 | <a-radio-group v-model="form.blogType"> | |
| 58 | <a-radio value="Markdown"> | |
| 59 | Markdown | |
| 60 | </a-radio> | |
| 61 | <a-radio value="Html"> | |
| 62 | Html | |
| 63 | </a-radio> | |
| 64 | </a-radio-group> | |
| 65 | </a-form-model-item> | |
| 66 | ||
| 67 | ||
| 68 | <a-form-model-item label="标签"> | |
| 69 | <template v-for="(tag, index) in tags"> | |
| 70 | <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag"> | |
| 71 | <a-tag :key="tag" :closable="index !== 0" @close="() => handleClose(tag)"> | |
| 72 | {{ `${tag.slice(0, 20)}...` }} | |
| 73 | </a-tag> | |
| 74 | </a-tooltip> | |
| 75 | <a-tag v-else :key="tag" :closable="index !== 0" @close="() => handleClose(tag)"> | |
| 76 | {{ tag }} | |
| 77 | </a-tag> | |
| 78 | </template> | |
| 79 | <a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }" | |
| 80 | :value="inputValue" @change="handleInputChange" @blur="handleInputConfirm" | |
| 81 | @keyup.enter="handleInputConfirm" /> | |
| 82 | <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput"> | |
| 83 | <a-icon type="plus" /> New Tag | |
| 84 | </a-tag> | |
| 85 | </a-form-model-item> | |
| 86 | ||
| 87 | ||
| 88 | <a-form-model-item label="封面"> | |
| 89 | <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture" | |
| 90 | :default-file-list="form.coverFileList" class="upload-list-inline"> | |
| 91 | <a-button> | |
| 92 | <a-icon type="upload" /> jpg/png/jpeg.. | |
| 93 | </a-button> | |
| 94 | </a-upload> | |
| 95 | </a-form-model-item> | |
| 96 | ||
| 97 | <a-form-model-item label="定时"> | |
| 98 | <a-date-picker v-model="form.publishDate" show-time type="date" placeholder="发布时间" | |
| 99 | style="width: 100%;" :disabledDate="disabledDate" | |
| 100 | :getCalendarContainer="getCalendarContainer()" /> | |
| 101 | </a-form-model-item> | |
| 102 | ||
| 103 | ||
| 104 | ||
| 105 | <div v-bind:class="{'myBorder':form.lock}"> | |
| 106 | ||
| 107 | <a-form-model-item label="加锁"> | |
| 108 | <a-switch v-model="form.lock" /> | |
| 109 | <span v-show="!form.lock" class="myTip"> | |
| 110 | 默认为公开 | |
| 111 | </span> | |
| 112 | </a-form-model-item> | |
| 113 | ||
| 114 | <div v-show="form.lock "> | |
| 115 | <a-form-model-item label="阅读权限"> | |
| 116 | <a-radio-group v-model="form.auth"> | |
| 117 | <a-radio value="private"> | |
| 118 | 私人 | |
| 119 | </a-radio> | |
| 120 | <a-radio value="password"> | |
| 121 | 密码授权 | |
| 122 | </a-radio> | |
| 123 | </a-radio-group> | |
| 124 | </a-form-model-item> | |
| 125 | ||
| 126 | <a-form-model-item label="授权密码" v-show="form.auth=='password'"> | |
| 127 | <a-input v-model="form.password" type="password" placeholder="Password"> | |
| 128 | <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" /> | |
| 129 | </a-input> | |
| 130 | </a-form-model-item> | |
| 131 | </div> | |
| 132 | ||
| 133 | </div> | |
| 134 | ||
| 135 | </div> | |
| 136 | ||
| 137 | </a-form-model> | |
| 138 | </div> | |
| 139 | </template> | |
| 140 | ||
| 141 | <script> | |
| 142 | import moment from "moment"; | |
| 143 | export default { | |
| 144 | data() { | |
| 145 | return { | |
| 146 | blogFileList: [], | |
| 147 | coverFileList: [ | |
| 148 | // { | |
| 149 | // uid: '-1', | |
| 150 | // name: 'xxx.png', | |
| 151 | // status: 'done', | |
| 152 | // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', | |
| 153 | // thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', | |
| 154 | // } | |
| 155 | ], | |
| 156 | tags: [], | |
| 157 | inputVisible: false, | |
| 158 | inputValue: '', | |
| 159 | labelCol: { | |
| 160 | span: 5 | |
| 161 | }, | |
| 162 | wrapperCol: { | |
| 163 | span: 19 | |
| 164 | }, | |
| 165 | form: { | |
| 166 | preference: true, | |
| 167 | title: '', | |
| 168 | content: '', | |
| 169 | class: [], | |
| 170 | tempSave: false, | |
| 171 | blogType: "Markdown", | |
| 172 | publishDate: "", | |
| 173 | lock: false, | |
| 174 | auth: "private", | |
| 175 | password: "", | |
| 176 | blogFileList: [], | |
| 177 | coverFileList: [ | |
| 178 | // { | |
| 179 | // uid: '-1', | |
| 180 | // name: 'xxx.png', | |
| 181 | // status: 'done', | |
| 182 | // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', | |
| 183 | // thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', | |
| 184 | // } | |
| 185 | ], | |
| 186 | }, | |
| 187 | }; | |
| 188 | }, | |
| 189 | methods: { | |
| 190 | disabledDate(current) { | |
| 191 | return current < moment().subtract(1, "day"); | |
| 192 | }, | |
| 193 | getCalendarContainer(trigger) { | |
| 194 | return trigger => trigger.parentNode; | |
| 195 | }, | |
| 196 | handleClose(removedTag) { | |
| 197 | const tags = this.tags.filter(tag => tag !== removedTag); | |
| 198 | console.log(tags); | |
| 199 | this.tags = tags; | |
| 200 | }, | |
| 201 | ||
| 202 | showInput() { | |
| 203 | this.inputVisible = true; | |
| 204 | this.$nextTick(function() { | |
| 205 | this.$refs.input.focus(); | |
| 206 | }); | |
| 207 | }, | |
| 208 | ||
| 209 | handleInputChange(e) { | |
| 210 | this.inputValue = e.target.value; | |
| 211 | }, | |
| 212 | ||
| 213 | handleInputConfirm() { | |
| 214 | const inputValue = this.inputValue; | |
| 215 | let tags = this.tags; | |
| 216 | if (inputValue && tags.indexOf(inputValue) === -1) { | |
| 217 | tags = [...tags, inputValue]; | |
| 218 | } | |
| 219 | console.log(tags); | |
| 220 | Object.assign(this, { | |
| 221 | tags, | |
| 222 | inputVisible: false, | |
| 223 | inputValue: '', | |
| 224 | }); | |
| 225 | }, | |
| 226 | onSubmit() { | |
| 227 | console.log('submit!', this.form); | |
| 228 | }, | |
| 229 | }, | |
| 230 | }; | |
| 231 | </script> | |
| 232 | ||
| 233 | <style lang="less"> | |
| 234 | .myTip { | |
| 235 | font-size: 10px; | |
| 236 | color: #999; | |
| 237 | } | |
| 238 | ||
| 239 | .myBorder { | |
| 240 | border: 1px solid #999; | |
| 241 | } | |
| 242 | ||
| 243 | .ant-upload-list-item-info { | |
| 244 | a { | |
| 245 | color: #999; | |
| 246 | } | |
| 247 | } | |
| 248 | ||
| 249 | /* tile uploaded pictures */ | |
| 250 | .upload-list-inline>.ant-upload-list-item { | |
| 251 | float: left; | |
| 252 | width: 100px; | |
| 253 | margin-right: 8px; | |
| 254 | } | |
| 255 | ||
| 256 | .upload-list-inline>.ant-upload-animate-enter { | |
| 257 | animation-name: uploadAnimateInlineIn; | |
| 258 | } | |
| 259 | ||
| 260 | .upload-list-inline>.ant-upload-animate-leave { | |
| 261 | animation-name: uploadAnimateInlineOut; | |
| 262 | } | |
| 263 | </style> | |
