blog/blog-facade.git

lijh

2022-01-18 15bd39c66eb9c1942b72fb373fbe16865f715f04

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>
15bd39	98	<span class="myTip">
L	99	自动转码,可以传高清图
	100	</span>
f5539f	101	</a-form-model-item>
L	102
	103	<a-form-model-item label="定时">
1ad93b	104	<a-date-picker v-model="form.publishDate" show-time type="<datetime></datetime>" placeholder="发布时间"
f5539f	105	style="width: 100%;" :disabledDate="disabledDate"
L	106	:getCalendarContainer="getCalendarContainer()" />
	107	</a-form-model-item>
	108
	109
	110
1ad93b	111	<div v-bind:class="{'myBorder':form.lock}" style="padding: 3px;">
f5539f	112
L	113	<a-form-model-item label="加锁">
	114	<a-switch v-model="form.lock" />
	115	<span v-show="!form.lock" class="myTip">
	116	默认为公开
	117	</span>
	118	</a-form-model-item>
	119
	120	<div v-show="form.lock ">
	121	<a-form-model-item label="阅读权限">
	122	<a-radio-group v-model="form.auth">
	123	<a-radio value="private">
	124	私人
	125	</a-radio>
	126	<a-radio value="password">
	127	密码授权
	128	</a-radio>
	129	</a-radio-group>
	130	</a-form-model-item>
	131
	132	<a-form-model-item label="授权密码" v-show="form.auth=='password'">
	133	<a-input v-model="form.password" type="password" placeholder="Password">
	134	<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
	135	</a-input>
	136	</a-form-model-item>
	137	</div>
	138
	139	</div>
	140
	141	</div>
	142
	143	</a-form-model>
	144	</div>
	145	</template>
	146
	147	<script>
	148	import moment from "moment";
	149	export default {
	150	data() {
	151	return {
1ad93b	152
f5539f	153	blogFileList: [],
L	154	coverFileList: [
	155	// {
	156	// uid: '-1',
	157	// name: 'xxx.png',
	158	// status: 'done',
	159	// url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	160	// thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	161	// }
	162	],
	163	tags: [],
	164	inputVisible: false,
	165	inputValue: '',
	166	labelCol: {
1ad93b	167	span: 7
f5539f	168	},
L	169	wrapperCol: {
1ad93b	170	span: 13
f5539f	171	},
L	172	form: {
1ad93b	173	preference: false,
f5539f	174	title: '',
L	175	content: '',
	176	class: [],
	177	tempSave: false,
	178	blogType: "Markdown",
	179	publishDate: "",
	180	lock: false,
	181	auth: "private",
	182	password: "",
	183	blogFileList: [],
1ad93b	184	coverFileList: [],
f5539f	185	},
1ad93b	186	rules: {
I	187	title: [{
	188	required: true,
	189	message: '标题不能为空',
	190	trigger: 'blur'
	191	},
	192	{
	193	min: 5,
	194	max: 50,
	195	message: '字数限制1~50',
	196	trigger: 'blur'
	197	},
	198	],
	199	content: [{
	200	required: true,
	201	message: '至少选一个上传内容',
	202	trigger: 'blur'
	203	}, ],
	204	blogFileList: [{
	205	required: true,
	206	message: '文件未上传',
	207	}, {
	208	min: 1,
	209	message: '文件未上传',
	210	}, ],
	211	class: [{
	212	required: true,
	213	message: '至少选一个分类',
	214	trigger: 'blur'
	215	}, ],
	216	// region: [{
	217	// required: true,
	218	// message: 'Please select Activity zone',
	219	// trigger: 'change'
	220	// }],
	221	// date1: [{
	222	// required: true,
	223	// message: 'Please pick a date',
	224	// trigger: 'change'
	225	// }],
	226	// type: [{
	227	// type: 'array',
	228	// required: true,
	229	// message: 'Please select at least one activity type',
	230	// trigger: 'change',
	231	// }, ],
	232	// resource: [{
	233	// required: true,
	234	// message: 'Please select activity resource',
	235	// trigger: 'change'
	236	// }, ],
	237	// desc: [{
	238	// required: true,
	239	// message: 'Please input activity form',
	240	// trigger: 'blur'
	241	// }],
	242	}
f5539f	243	};
L	244	},
	245	methods: {
	246	disabledDate(current) {
	247	return current < moment().subtract(1, "day");
	248	},
	249	getCalendarContainer(trigger) {
	250	return trigger => trigger.parentNode;
	251	},
	252	handleClose(removedTag) {
	253	const tags = this.tags.filter(tag => tag !== removedTag);
1ad93b	254	//console.log(tags);
f5539f	255	this.tags = tags;
L	256	},
	257
	258	showInput() {
	259	this.inputVisible = true;
	260	this.$nextTick(function() {
	261	this.$refs.input.focus();
	262	});
	263	},
	264
	265	handleInputChange(e) {
	266	this.inputValue = e.target.value;
	267	},
	268
	269	handleInputConfirm() {
	270	const inputValue = this.inputValue;
	271	let tags = this.tags;
	272	if (inputValue && tags.indexOf(inputValue) === -1) {
	273	tags = [...tags, inputValue];
	274	}
1ad93b	275	//console.log(tags);
f5539f	276	Object.assign(this, {
L	277	tags,
	278	inputVisible: false,
	279	inputValue: '',
	280	});
	281	},
1ad93b	282
f5539f	283	},
L	284	};
	285	</script>
	286
	287	<style lang="less">
1ad93b	288	@media screen and(max-width: 575px) {
I	289	.ant-form-item-label {
	290	padding: 8px !important;
	291	}
	292	}
	293
f5539f	294	.myTip {
L	295	font-size: 10px;
	296	color: #999;
	297	}
	298
	299	.myBorder {
	300	border: 1px solid #999;
1ad93b	301	border-radius: 10px;
f5539f	302	}
L	303
	304	.ant-upload-list-item-info {
	305	a {
	306	color: #999;
	307	}
	308	}
	309
	310	/* tile uploaded pictures */
	311	.upload-list-inline>.ant-upload-list-item {
	312	float: left;
	313	width: 100px;
	314	margin-right: 8px;
	315	}
	316
	317	.upload-list-inline>.ant-upload-animate-enter {
	318	animation-name: uploadAnimateInlineIn;
	319	}
	320
	321	.upload-list-inline>.ant-upload-animate-leave {
	322	animation-name: uploadAnimateInlineOut;
	323	}
	324	</style>