blog/blog-facade.git

inleft

2022-01-18 1ad93b699ff890327de9a65f26611e9415140600

commit \| author \| age
f5539f	1	<template>
1ad93b	2	<div>
I	3	<a-form-model ref="myForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
	4	<a-form-model-item label="标题" prop="title">
f5539f	5	<a-input v-model="form.title" placeholder="限 50字内" />
L	6	</a-form-model-item>
	7
	8	<a-form-model-item label="模式切换">
	9	<a-switch v-model="form.online" />
	10	<span class="myTip">
1ad93b	11	本地文件/由系统生成文件
f5539f	12	</span>
L	13	</a-form-model-item>
	14
	15
1ad93b	16	<a-form-model-item label="日志文件" v-show="!form.online" prop="blogFileList">
f5539f	17	<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
L	18	:default-file-list="form.blogFileList">
	19	<a-button>
1ad93b	20	<a-icon type="upload" /> 限 markdown/html
f5539f	21	</a-button>
L	22	</a-upload>
	23	</a-form-model-item>
	24
1ad93b	25	<a-form-model-item label="日志内容" v-show="form.online" prop="content">
f5539f	26	<a-input v-model="form.content" type="textarea" placeholder="限10k字数" />
L	27	</a-form-model-item>
	28
1ad93b	29	<a-form-model-item label="分类" prop="class">
f5539f	30	<a-select v-model="form.class" :allowClear="true" mode="multiple" placeholder="多选(至少一个)"
L	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
1ad93b	44	<a-form-model-item label="额外设置">
f5539f	45	<a-switch v-model="form.preference" />
L	46	</a-form-model-item>
	47
	48	<div v-show="form.preference" class="myBorder" style="padding:10px;">
1ad93b	49	<a-form-model-item label="起个草稿">
f5539f	50	<a-switch v-model="form.tempSave" />
L	51	<span v-show="form.tempSave" class="myTip">
1ad93b	52	临时存储,游客无法浏览
f5539f	53	</span>
L	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">
1ad93b	59	markdown
f5539f	60	</a-radio>
L	61	<a-radio value="Html">
1ad93b	62	html
f5539f	63	</a-radio>
L	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>
1ad93b	75	<a-tag v-else :key="tag" :closable="index >= 0" @close="() => handleClose(tag)">
f5539f	76	{{ tag }}
L	77	</a-tag>
	78	</template>
1ad93b	79
f5539f	80	<a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }"
L	81	:value="inputValue" @change="handleInputChange" @blur="handleInputConfirm"
	82	@keyup.enter="handleInputConfirm" />
1ad93b	83
f5539f	84	<a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
L	85	<a-icon type="plus" /> New Tag
	86	</a-tag>
1ad93b	87
f5539f	88	</a-form-model-item>
L	89
	90
	91	<a-form-model-item label="封面">
	92	<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture"
	93	:default-file-list="form.coverFileList" class="upload-list-inline">
	94	<a-button>
	95	<a-icon type="upload" /> jpg/png/jpeg..
	96	</a-button>
	97	</a-upload>
	98	</a-form-model-item>
	99
	100	<a-form-model-item label="定时">
1ad93b	101	<a-date-picker v-model="form.publishDate" show-time type="<datetime></datetime>" placeholder="发布时间"
f5539f	102	style="width: 100%;" :disabledDate="disabledDate"
L	103	:getCalendarContainer="getCalendarContainer()" />
	104	</a-form-model-item>
	105
	106
	107
1ad93b	108	<div v-bind:class="{'myBorder':form.lock}" style="padding: 3px;">
f5539f	109
L	110	<a-form-model-item label="加锁">
	111	<a-switch v-model="form.lock" />
	112	<span v-show="!form.lock" class="myTip">
	113	默认为公开
	114	</span>
	115	</a-form-model-item>
	116
	117	<div v-show="form.lock ">
	118	<a-form-model-item label="阅读权限">
	119	<a-radio-group v-model="form.auth">
	120	<a-radio value="private">
	121	私人
	122	</a-radio>
	123	<a-radio value="password">
	124	密码授权
	125	</a-radio>
	126	</a-radio-group>
	127	</a-form-model-item>
	128
	129	<a-form-model-item label="授权密码" v-show="form.auth=='password'">
	130	<a-input v-model="form.password" type="password" placeholder="Password">
	131	<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
	132	</a-input>
	133	</a-form-model-item>
	134	</div>
	135
	136	</div>
	137
	138	</div>
	139
	140	</a-form-model>
	141	</div>
	142	</template>
	143
	144	<script>
	145	import moment from "moment";
	146	export default {
	147	data() {
	148	return {
1ad93b	149
f5539f	150	blogFileList: [],
L	151	coverFileList: [
	152	// {
	153	// uid: '-1',
	154	// name: 'xxx.png',
	155	// status: 'done',
	156	// url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	157	// thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	158	// }
	159	],
	160	tags: [],
	161	inputVisible: false,
	162	inputValue: '',
	163	labelCol: {
1ad93b	164	span: 7
f5539f	165	},
L	166	wrapperCol: {
1ad93b	167	span: 13
f5539f	168	},
L	169	form: {
1ad93b	170	preference: false,
f5539f	171	title: '',
L	172	content: '',
	173	class: [],
	174	tempSave: false,
	175	blogType: "Markdown",
	176	publishDate: "",
	177	lock: false,
	178	auth: "private",
	179	password: "",
	180	blogFileList: [],
1ad93b	181	coverFileList: [],
f5539f	182	},
1ad93b	183	rules: {
I	184	title: [{
	185	required: true,
	186	message: '标题不能为空',
	187	trigger: 'blur'
	188	},
	189	{
	190	min: 5,
	191	max: 50,
	192	message: '字数限制1~50',
	193	trigger: 'blur'
	194	},
	195	],
	196	content: [{
	197	required: true,
	198	message: '至少选一个上传内容',
	199	trigger: 'blur'
	200	}, ],
	201	blogFileList: [{
	202	required: true,
	203	message: '文件未上传',
	204	}, {
	205	min: 1,
	206	message: '文件未上传',
	207	}, ],
	208	class: [{
	209	required: true,
	210	message: '至少选一个分类',
	211	trigger: 'blur'
	212	}, ],
	213	// region: [{
	214	// required: true,
	215	// message: 'Please select Activity zone',
	216	// trigger: 'change'
	217	// }],
	218	// date1: [{
	219	// required: true,
	220	// message: 'Please pick a date',
	221	// trigger: 'change'
	222	// }],
	223	// type: [{
	224	// type: 'array',
	225	// required: true,
	226	// message: 'Please select at least one activity type',
	227	// trigger: 'change',
	228	// }, ],
	229	// resource: [{
	230	// required: true,
	231	// message: 'Please select activity resource',
	232	// trigger: 'change'
	233	// }, ],
	234	// desc: [{
	235	// required: true,
	236	// message: 'Please input activity form',
	237	// trigger: 'blur'
	238	// }],
	239	}
f5539f	240	};
L	241	},
	242	methods: {
	243	disabledDate(current) {
	244	return current < moment().subtract(1, "day");
	245	},
	246	getCalendarContainer(trigger) {
	247	return trigger => trigger.parentNode;
	248	},
	249	handleClose(removedTag) {
	250	const tags = this.tags.filter(tag => tag !== removedTag);
1ad93b	251	//console.log(tags);
f5539f	252	this.tags = tags;
L	253	},
	254
	255	showInput() {
	256	this.inputVisible = true;
	257	this.$nextTick(function() {
	258	this.$refs.input.focus();
	259	});
	260	},
	261
	262	handleInputChange(e) {
	263	this.inputValue = e.target.value;
	264	},
	265
	266	handleInputConfirm() {
	267	const inputValue = this.inputValue;
	268	let tags = this.tags;
	269	if (inputValue && tags.indexOf(inputValue) === -1) {
	270	tags = [...tags, inputValue];
	271	}
1ad93b	272	//console.log(tags);
f5539f	273	Object.assign(this, {
L	274	tags,
	275	inputVisible: false,
	276	inputValue: '',
	277	});
	278	},
1ad93b	279
f5539f	280	},
L	281	};
	282	</script>
	283
	284	<style lang="less">
1ad93b	285	@media screen and(max-width: 575px) {
I	286	.ant-form-item-label {
	287	padding: 8px !important;
	288	}
	289	}
	290
f5539f	291	.myTip {
L	292	font-size: 10px;
	293	color: #999;
	294	}
	295
	296	.myBorder {
	297	border: 1px solid #999;
1ad93b	298	border-radius: 10px;
f5539f	299	}
L	300
	301	.ant-upload-list-item-info {
	302	a {
	303	color: #999;
	304	}
	305	}
	306
	307	/* tile uploaded pictures */
	308	.upload-list-inline>.ant-upload-list-item {
	309	float: left;
	310	width: 100px;
	311	margin-right: 8px;
	312	}
	313
	314	.upload-list-inline>.ant-upload-animate-enter {
	315	animation-name: uploadAnimateInlineIn;
	316	}
	317
	318	.upload-list-inline>.ant-upload-animate-leave {
	319	animation-name: uploadAnimateInlineOut;
	320	}
	321	</style>