表单校验

 src/components/group/tempFormCheck.vue

New file
@@ -0,0 +1,141 @@
<template>
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item ref="name" label="Activity name" prop="name">
            <a-input v-model="form.name" @blur="
          () => {
            $refs.name.onFieldBlur();
          }
        " />
        </a-form-model-item>
        <a-form-model-item label="Activity zone" prop="region">
            <a-select v-model="form.region" placeholder="please select your zone">
                <a-select-option value="shanghai">
                    Zone one
                </a-select-option>
                <a-select-option value="beijing">
                    Zone two
                </a-select-option>
            </a-select>
        </a-form-model-item>
        <a-form-model-item label="Activity time" required prop="date1">
            <a-date-picker v-model="form.date1" show-time type="date" placeholder="Pick a date" style="width: 100%;" />
        </a-form-model-item>
        <a-form-model-item label="Instant delivery" prop="delivery">
            <a-switch v-model="form.delivery" />
        </a-form-model-item>
        <a-form-model-item label="Activity type" prop="type">
            <a-checkbox-group v-model="form.type">
                <a-checkbox value="1" name="type">
                    Online
                </a-checkbox>
                <a-checkbox value="2" name="type">
                    Promotion
                </a-checkbox>
                <a-checkbox value="3" name="type">
                    Offline
                </a-checkbox>
            </a-checkbox-group>
        </a-form-model-item>
        <a-form-model-item label="Resources" prop="resource">
            <a-radio-group v-model="form.resource">
                <a-radio value="1">
                    Sponsor
                </a-radio>
                <a-radio value="2">
                    Venue
                </a-radio>
            </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="Activity form" prop="desc">
            <a-input v-model="form.desc" type="textarea" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSubmit">
                Create
            </a-button>
            <a-button style="margin-left: 10px;" @click="resetForm">
                Reset
            </a-button>
        </a-form-model-item>
    </a-form-model>
</template>
<script>
    export default {
        data() {
            return {
                labelCol: {
                    span: 4
                },
                wrapperCol: {
                    span: 14
                },
                other: '',
                form: {
                    name: '',
                    region: undefined,
                    date1: undefined,
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                },
                rules: {
                    name: [{
                            required: true,
                            message: 'Please input Activity name',
                            trigger: 'blur'
                        },
                        {
                            min: 3,
                            max: 5,
                            message: 'Length should be 3 to 5',
                            trigger: 'blur'
                        },
                    ],
                    region: [{
                        required: true,
                        message: 'Please select Activity zone',
                        trigger: 'change'
                    }],
                    date1: [{
                        required: true,
                        message: 'Please pick a date',
                        trigger: 'change'
                    }],
                    type: [{
                        type: 'array',
                        required: true,
                        message: 'Please select at least one activity type',
                        trigger: 'change',
                    }, ],
                    resource: [{
                        required: true,
                        message: 'Please select activity resource',
                        trigger: 'change'
                    }, ],
                    desc: [{
                        required: true,
                        message: 'Please input activity form',
                        trigger: 'blur'
                    }],
                },
            };
        },
        methods: {
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        console.log('11');
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm() {
                this.$refs.ruleForm.resetFields();
            },
        },
    };
</script>

 src/components/mini/Aplayer.vue

@@ -14,8 +14,8 @@
                audio: {
                    name: 'Moonwisher',
                    artist: 'Kan R. Gao',
                    url: 'http://music.163.com/song/media/outer/url?id=1645104.mp3',
                    // url: '/moon.mp3',
                    // url: 'http://music.163.com/song/media/outer/url?id=1645104.mp3',
                    url: '/moon.mp3',
                    cover: 'http://p2.music.126.net/0AYWra9rCzgeprGp6OUyUw==/868614185993997.jpg?param=130y130',
                },
            };

 src/components/mini/box10-add.vue

@@ -1,32 +1,32 @@
<template>
    <div class="myFrom">
        <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="标题">
    <div>
        <a-form-model ref="myForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
            <a-form-model-item label="标题" prop="title">
                <a-input v-model="form.title" placeholder="限 50字内" />
            </a-form-model-item>

            <a-form-model-item label="模式切换">
                <a-switch v-model="form.online" />
                <span class="myTip">
                    本地编辑/由系统生成文件
                    本地文件/由系统生成文件
                </span>
            </a-form-model-item>


            <a-form-model-item label="日志文件" v-show="!form.online">
            <a-form-model-item label="日志文件" v-show="!form.online" prop="blogFileList">
                <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    :default-file-list="form.blogFileList">
                    <a-button>
                        <a-icon type="upload" /> 限 md/html 文件
                        <a-icon type="upload" /> 限 markdown/html
                    </a-button>
                </a-upload>
            </a-form-model-item>

            <a-form-model-item label="日志内容" v-show="form.online">
            <a-form-model-item label="日志内容" v-show="form.online" prop="content">
                <a-input v-model="form.content" type="textarea" placeholder="限10k字数" />
            </a-form-model-item>

            <a-form-model-item label="分类">
            <a-form-model-item label="分类" prop="class">
                <a-select v-model="form.class" :allowClear="true" mode="multiple" placeholder="多选(至少一个)"
                    :getPopupContainer="getCalendarContainer()">
                    <a-select-option value="shanghai">
@@ -41,25 +41,25 @@
                </a-select>
            </a-form-model-item>

            <a-form-model-item label="偏好">
            <a-form-model-item label="额外设置">
                <a-switch v-model="form.preference" />
            </a-form-model-item>

            <div v-show="form.preference" class="myBorder" style="padding:10px;">
                <a-form-model-item label="草稿模式">
                <a-form-model-item label="起个草稿">
                    <a-switch v-model="form.tempSave" />
                    <span v-show="form.tempSave" class="myTip">
                        临时存储,将不会发布该篇日志
                        临时存储,游客无法浏览
                    </span>
                </a-form-model-item>

                <a-form-model-item label=" 文件类型">
                    <a-radio-group v-model="form.blogType">
                        <a-radio value="Markdown">
                            Markdown
                            markdown
                        </a-radio>
                        <a-radio value="Html">
                            Html
                            html
                        </a-radio>
                    </a-radio-group>
                </a-form-model-item>
@@ -72,16 +72,19 @@
                                {{ `${tag.slice(0, 20)}...` }}
                            </a-tag>
                        </a-tooltip>
                        <a-tag v-else :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
                        <a-tag v-else :key="tag" :closable="index >= 0" @close="() => handleClose(tag)">
                            {{ tag }}
                        </a-tag>
                    </template>

                    <a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }"
                        :value="inputValue" @change="handleInputChange" @blur="handleInputConfirm"
                        @keyup.enter="handleInputConfirm" />

                    <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
                        <a-icon type="plus" /> New Tag
                    </a-tag>

                </a-form-model-item>


@@ -95,14 +98,14 @@
                </a-form-model-item>

                <a-form-model-item label="定时">
                    <a-date-picker v-model="form.publishDate" show-time type="date" placeholder="发布时间"
                    <a-date-picker v-model="form.publishDate" show-time type="<datetime></datetime>" placeholder="发布时间"
                        style="width: 100%;" :disabledDate="disabledDate"
                        :getCalendarContainer="getCalendarContainer()" />
                </a-form-model-item>



                <div v-bind:class="{'myBorder':form.lock}">
                <div v-bind:class="{'myBorder':form.lock}" style="padding: 3px;">

                    <a-form-model-item label="加锁">
                        <a-switch v-model="form.lock" />
@@ -143,6 +146,7 @@
    export default {
        data() {
            return {

                blogFileList: [],
                coverFileList: [
                    // {
@@ -157,13 +161,13 @@
                inputVisible: false,
                inputValue: '',
                labelCol: {
                    span: 5
                    span: 7
                },
                wrapperCol: {
                    span: 19
                    span: 13
                },
                form: {
                    preference: true,
                    preference: false,
                    title: '',
                    content: '',
                    class: [],
@@ -174,16 +178,65 @@
                    auth: "private",
                    password: "",
                    blogFileList: [],
                    coverFileList: [
                        // {
                        // uid: '-1',
                        // name: 'xxx.png',
                        // status: 'done',
                        // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                        // thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                        // } 
                    ],
                    coverFileList: [],
                },
                rules: {
                    title: [{
                            required: true,
                            message: '标题不能为空',
                            trigger: 'blur'
                        },
                        {
                            min: 5,
                            max: 50,
                            message: '字数限制1~50',
                            trigger: 'blur'
                        },
                    ],
                    content: [{
                        required: true,
                        message: '至少选一个上传内容',
                        trigger: 'blur'
                    }, ],
                    blogFileList: [{
                        required: true,
                        message: '文件未上传',
                    }, {
                        min: 1,
                        message: '文件未上传',
                    }, ],
                    class: [{
                        required: true,
                        message: '至少选一个分类',
                        trigger: 'blur'
                    }, ],
                    // region: [{
                    //     required: true,
                    //     message: 'Please select Activity zone',
                    //     trigger: 'change'
                    // }],
                    // date1: [{
                    //     required: true,
                    //     message: 'Please pick a date',
                    //     trigger: 'change'
                    // }],
                    // type: [{
                    //     type: 'array',
                    //     required: true,
                    //     message: 'Please select at least one activity type',
                    //     trigger: 'change',
                    // }, ],
                    // resource: [{
                    //     required: true,
                    //     message: 'Please select activity resource',
                    //     trigger: 'change'
                    // }, ],
                    // desc: [{
                    //     required: true,
                    //     message: 'Please input activity form',
                    //     trigger: 'blur'
                    // }],
                }
            };
        },
        methods: {
@@ -195,7 +248,7 @@
            },
            handleClose(removedTag) {
                const tags = this.tags.filter(tag => tag !== removedTag);
                console.log(tags);
                //console.log(tags);
                this.tags = tags;
            },

@@ -216,21 +269,25 @@
                if (inputValue && tags.indexOf(inputValue) === -1) {
                    tags = [...tags, inputValue];
                }
                console.log(tags);
                //console.log(tags);
                Object.assign(this, {
                    tags,
                    inputVisible: false,
                    inputValue: '',
                });
            },
            onSubmit() {
                console.log('submit!', this.form);
            },

        },
    };
</script>

<style lang="less">
    @media screen and(max-width: 575px) {
        .ant-form-item-label {
            padding: 8px !important;
        }
    }

    .myTip {
        font-size: 10px;
        color: #999;
@@ -238,6 +295,7 @@

    .myBorder {
        border: 1px solid #999;
        border-radius: 10px;
    }

    .ant-upload-list-item-info {

 src/components/mini/tagInfo.vue

@@ -8,18 +8,18 @@
            <p slot="pendingDot" style="font-size: 18px;" />
            <a-timeline-item color="white">
                <a-icon slot="dot" type="form" style="font-size: 18px;" />
                <h4>我...</h4>
                <br>
                <p>
                <ul>
                    <li> 尘世间一个迷途小码农</li>
                    <li> 喜欢钢琴~喜欢吉他 </li>
                    <li> 爱音乐,也爱看番 </li>
                    <li> B界的白嫖怪</li>
                    <li> PC单机的<em style="font-size: 10px;">伪</em>硬核玩家 </li>
                    <li> PC单机的<span class="myTip">伪</span>硬核玩家 </li>
                    <li>

                        <img src="http://t.inleft.com/share/media_photo/xm.jpg" style="width: 35px;" />
                        我的小老弟&御用暖床怪
                        我的小老弟&御用暖床袋
                        <img src="http://t.inleft.com/share/media_photo/IMG_20220117_145633.jpg" style="width: 50px;" />
                        <span style="font-size: 10px;color: #999">(小乖)</span>
                    </li>

 src/components/swichLabel/main1-show.vue

@@ -12,19 +12,23 @@
                :bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}">
                <boxRight></boxRight>
            </a-drawer>

            <a-modal v-model="visible" title="日志添加" on-ok="handleOk" >
                <template slot="footer">
                    <a-button key="back" @click="handleCancel">
                        暂缓
                    </a-button>
                    <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
                        完事..
                    </a-button>
                </template>
                <box10 ref="modal" ></box10>
            </a-modal>

            <a-row>
                <a-col v-bind="colApiLeft">
                    <div class="myModal">
                        <a-modal v-model="visible" title="日志添加" on-ok="handleOk">
                            <template slot="footer">
                                <a-button key="back" @click="handleCancel">
                                    歇会
                                </a-button>
                                <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
                                    完事<span style="font-size: 10px;">儿</span>..
                                </a-button>
                            </template>
                            <box10 ref="modalBox"></box10>
                        </a-modal>
                    </div>
                </a-col>
            </a-row>
        </div>
        <div class="blog-main">
            <a-row>
@@ -41,8 +45,9 @@
                    </a-button>
                    <a-button @click="showModal">
                        日志
                        <a-icon type="plus-circle" style="margin-left: 0px;"/>
                        <a-icon type="plus-circle" style="margin-left: 0px;" />
                    </a-button>
                    <!-- <tempFormCheck></tempFormCheck> -->
                    <router-view class="fade"></router-view>
                </a-col>

@@ -56,6 +61,7 @@
</template>

<script>
    import tempFormCheck from "../group/tempFormCheck.vue"
    import box10 from "../mini/box10-add.vue"
    import boxLeft from "../group/boxLeft.vue"
    import boxRight from "../group/boxRight.vue"
@@ -65,6 +71,7 @@
    export default {

        components: {
            tempFormCheck,
            box10,
            boxLeft,
            boxRight,
@@ -74,12 +81,28 @@

        },
        methods: {
            getCalendarContainer(trigger) {
                return this.$refs.myModal;
            },
            showModal() {
                this.visible = true;
            },
            handleOk(e) {
                console.log(this.$refs.modal.form);
		
                console.log(this.$refs.modalBox.form);
                var res=this.$refs.modalBox.$refs.myForm.validate(valid => {
                    if (valid) {
                        this.$message.info("校验通过")
                    } else {
                        this.$message.info("校验失败")
                        return false;
                    }
                });
				
				
                if(!res)return;

                this.$message.info("提交表单")

                this.loading = true;
                setTimeout(() => {
                    this.visible = false;