鍍金池/ 問答/HTML/ 使用iview中的模態(tài)框組件如何進(jìn)行錨點(diǎn)定位?

使用iview中的模態(tài)框組件如何進(jìn)行錨點(diǎn)定位?

問題描述:使用模態(tài)框的時(shí)候,當(dāng)模態(tài)框的內(nèi)容很長,已經(jīng)出現(xiàn)滾動(dòng)條,當(dāng)我編輯下邊內(nèi)容的時(shí)候,點(diǎn)擊預(yù)覽希望回到頂部,例如,模態(tài)框上面郵件內(nèi)容,下面是郵件編輯表單,如何實(shí)現(xiàn)在編輯完表單點(diǎn)擊預(yù)覽時(shí)回到上面?

代碼如下:

<Modal v-model="modal" width="800" :mask-closable="false" ref="modal" :styles="{top: '20px'}">
            <p slot="header" style="color:black;text-align:left;font-size: 16px;" id="email_modal">
                 {{$t("郵件編輯")}}
            </p>
            <div id="edit_email">
                <h2 style="color: #478FCA;padding: 0px 20px;">{{$t("郵件預(yù)覽")}}</h2>
                <div class="clearfix">
                    <div style="float: left;padding: 0px 20px;" v-if="draftEmail.update_user.get_full_name != '' ">
                        <i>{{draftEmail.update_user.get_full_name}} {{$t("更新于")}} {{draftEmail.update_time}}</i></div>
                    <div style="float: right">
                        <Button type="primary" size="small" @click="showEmailEdit = !showEmailEdit">{{$t("編輯郵件")}}</Button>
                    </div>

                </div>
                <div class="email">
                    <div class="email_header">
                        <Row class-name="email_row">
                            <Col span="2" class="col_common"><span>{{ $t("主題:")}}</span></Col>
                                <Col span="22">{{draftEmail.subject}}</Col>
                        </Row>
                        <Row class-name="email_row">
                            <Col span="2" class="col_common"><span>{{ $t("收件人:")}}</span></Col>
                                <Col span="22">{{draftEmail.receivers}}
                                </Col>
                        </Row>

                    <hr class="hr_split"/>
                    </div>

                    <div class="email_content" v-html="draftEmail.content">
                    </div>

                </div>

                <h2 class="draft_email_h2">
                    <span @click="showEmailEdit = !showEmailEdit">{{$t("郵件編輯")}}</span>

                    <Button v-show="showEmailEdit" type="primary" size="small" @click="updateEditEmail" style="float: right;">{{$t("保存并預(yù)覽")}}</Button>

                </h2>
                <transition name="fade">
                <div style="padding: 15px 20px;" v-if="showEmailEdit">
                    <Form :model="draftEmail" ref="draftEmail" :rules="ruleValidate" :label-width="80">

                     <FormItem :label="$t('郵件主題')" prop="subject_tpl">

                         <Input v-model="draftEmail.subject_tpl"></Input>

                    </FormItem>
                    <FormItem :label="$t('發(fā)件人')">
                        <span>{{draftEmail.send_address}}</span>
                    </FormItem>
                    <FormItem :label="$t('收件人')" prop="receivers_tpl">

                        <Input v-model="draftEmail.receivers_tpl"></Input>

                    </FormItem>
                    <FormItem :label="$t('正文')" prop="content_tpl">
                        <div class="content">
                            <quill-editor
                                            :options="editorOption" v-model="draftEmail.content_tpl">
                            </quill-editor>
                        </div>

                    </FormItem>

                    <FormItem :label="$t('標(biāo)簽列表')">

                                <span><a href="#" style="font-size: 14px;font-weight: bold;color: #B0947F;padding-right: 5px;" @click="showLabel = true">{{$t('+展開標(biāo)簽列表')}}</a>/</span>
                                <span><a href="#" style="font-size: 14px;font-weight: bold;color: #B0947F" @click="showLabel = false">{{$t('-收起標(biāo)簽列表')}}</a></span>

                            <transition name="fade">
                                <div v-if="showLabel">
                                    <div v-for="(item,key) in emailLabel">{{key}} : {{item}}</div>
                                </div>
                            </transition>
                    </FormItem>


                </Form>
                </div>
                </transition>
            </div>
            <div slot="footer" style="text-align: center">
                <Button @click="cancel">{{$t("返回")}}</Button>
                <Button type="primary" @click="updateEditEmail">{{$t("保存并預(yù)覽")}}</Button>
                <Button type="info" @click="updateEditEmail">{{$t("保存")}}</Button>
            </div>
        </Modal>
回答
編輯回答
夢(mèng)囈

同問,題主你解決這個(gè)問題了嗎

2017年10月15日 19:12