Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

当将编辑器放在Tabs组件中时候出现编辑器TabPanel混入父容器Tabs中,并导致出错 #20

Open
zengqingsong opened this issue May 29, 2019 · 1 comment

Comments

@zengqingsong
Copy link

zengqingsong commented May 29, 2019

当将编辑器放在Tabs组件中时候出现编辑器TabPanel混入父容器Tabs中,并导致出错

<template>
  <div>
    <Tabs name="tab">
      <TabPane label="标签a" tab="tab">
        <Tabs name="tab-2a">
          <TabPane label="标签2a1" tab="tab-2a">标签2a一的内容</TabPane>
          <TabPane label="标签2a2" tab="tab-2a">标签2a二的内容</TabPane>
        </Tabs>
      </TabPane>
      <TabPane label="标签b" tab="tab">
        <Tabs name="tab-2b">
          <TabPane label="标签2b1" tab="tab-2b">标签2b一的内容</TabPane>
          <TabPane label="标签2b2" tab="tab-2b">标签2b二的内容</TabPane>
        </Tabs>
      </TabPane>
      <TabPane label="标签C" tab="tab">
        <i-editor paste v-model="description" :config="config" :img-url="imgUrl" :autosize="{minRows: 10}"></i-editor>
      </TabPane>
    </Tabs>
  </div>
</template>
@zengqingsong
Copy link
Author

通过给Tabs添加name属性可以解决,我直接修改了源码

<template>
    <div class="i-editor">
        <Affix :offset-top="offsetTop" v-if="affix">
            <div class="i-editor-tabs">
                <Tabs v-model="tabType" :animated="false" @on-click="handleChangeTab" :name="name">
                    <TabPane :label="writeName" name="write" :tab="name"></TabPane>
                    <TabPane label="预览" name="preview" :tab="name"></TabPane>
                    <TabPane label="写摘要" name="summary" v-if="showSummary" :tab="name"></TabPane>
                    <div class="i-editor-upload" slot="extra">
                        <Upload :config="config" :before-upload="beforeUpload" :styles="1" @on-success="handleUploadSuccess"></Upload>
                        <Upload :config="config" :styles="6" @on-success="handleImportMd"></Upload>
                        <Button type="text" size="small" class="i-editor-upload-item" @click="showDiff = true">
                            <Tooltip content="全屏编辑" transfer>
                                <Icon type="md-expand"></Icon>
                            </Tooltip>
                        </Button>
                        <Button type="text" size="small" class="i-editor-upload-item" @click="showMdTip = true">
                            <Tooltip content="Markdown 语法提示" transfer>
                                <Icon type="logo-markdown"></Icon>
                            </Tooltip>
                        </Button>
                    </div>
                </Tabs>
            </div>
        </Affix>
        <div class="i-editor-tabs" v-else>
            <Tabs v-model="tabType" :animated="false" @on-click="handleChangeTab" :name="name">
                <TabPane :label="writeName" name="write" :tab="name"></TabPane>
                <TabPane label="预览" name="preview" :tab="name"></TabPane>
                <TabPane label="写摘要" name="summary" v-if="showSummary" :tab="name"></TabPane>
                <div class="i-editor-upload" slot="extra">
                    <Upload :config="config" :before-upload="beforeUpload" :styles="1" @on-success="handleUploadSuccess"></Upload>
                    <Upload :config="config" :styles="6" @on-success="handleImportMd"></Upload>
                    <Button type="text" size="small" class="i-editor-upload-item" @click="showDiff = true">
                        <Tooltip content="全屏编辑" transfer>
                            <Icon type="md-expand"></Icon>
                        </Tooltip>
                    </Button>
                    <Button type="text" size="small" class="i-editor-upload-item" @click="showMdTip = true">
                        <Tooltip content="Markdown 语法提示" transfer>
                            <Icon type="logo-markdown"></Icon>
                        </Tooltip>
                    </Button>
                </div>
            </Tabs>
        </div>
        <div class="i-editor-md">
            <div class="i-editor-wrapper" v-show="tabType === 'write'" v-if="!showDiff">
                <Upload :paste="paste" :config="config" :before-upload="beforeUpload" type="drag" :styles="3" @on-success="handleUploadSuccess" @click.prevent.stop.native>
                    <Input
                            v-model="content"
                            :placeholder="placeholder"
                            type="textarea"
                            :autosize="autosize"
                            ref="content"
                    />
                </Upload>
            </div>
            <div class="i-editor-wrapper" v-if="tabType === 'preview'">
                <Markdown :content="content" :highlight="highlight" ref="markdown">

                </Markdown>
            </div>
            <div class="i-editor-wrapper" v-if="tabType === 'summary'">
                <Input
                        v-model="summary"
                        placeholder="摘要会在文章列表显示,只支持纯文本。"
                        type="textarea"
                        :autosize="{minRows: 6}"
                        ref="summary"
                />
            </div>
        </div>
        <Modal title="常用 Markdown 语法" scrollable width="300" v-model="showMdTip" class="i-editor-md-tip" draggable footer-hide>
            <row>
                <i-col span="10">
                    <div><strong>Markdown</strong></div>
                    <div># 标题</div>
                    <div>## 标题</div>
                    <div>**粗体**</div>
                    <div>*斜体*</div>
                    <div>[描述](http://)</div>
                    <div>`code`</div>
                    <div>```code```</div>
                    <div>![alt](http://)</div>
                    <div>- item</div>
                    <div>1. item</div>
                    <div>> 引用内容</div>
                </i-col>
                <i-col span="14">
                    <div><strong>结果</strong></div>
                    <div>H1</div>
                    <div>H2</div>
                    <div><strong>粗体</strong></div>
                    <div><i>斜体</i></div>
                    <div><a href="javascript:void(0)">链接</a></div>
                    <div><code>Inline Code</code></div>
                    <div><code>Code</code></div>
                    <div>图片</div>
                    <div><ul><li>无序列表</li></ul></div>
                    <div><ol><li>有序列表</li></ol></div>
                    <div><blockquote>引用内容</blockquote></div>
                </i-col>
            </row>
            <a href="http://wowubuntu.com/markdown/" target="_blank">更多语法</a>
        </Modal>
        <Modal
                :closable="false"
                :mask-closable="false"
                v-model="showDiff"
                width="100"
                class-name="i-editor-fullscreen"
                footer-hide
                :transition-names="['','']"
        >
            <div v-if="showDiff" class="i-editor-fullscreen-container">
                <div slot="header" class="i-editor-fullscreen-header">
                    <p>全屏编辑</p>
                    <div class="i-editor-fullscreen-header-tip">
                        <Upload :config="config" :before-upload="beforeUpload" :styles="1" @on-success="handleUploadSuccess"></Upload>
                        <Button type="text" size="small" class="i-editor-item" @click="showDiff = false">
                            <Tooltip content="退出全屏" transfer>
                                <Icon type="md-contract"></Icon>
                            </Tooltip>
                        </Button>
                    </div>
                </div>
                <div class="i-editor-fullscreen-main">
                    <row :gutter="32">
                        <i-col span="12">
                            <Upload :paste="paste" :config="config" :before-upload="beforeUpload" v-if="showDiffEditor" type="drag" :styles="3" @on-success="handleUploadSuccess" @click.prevent.stop.native>
                                <Input
                                        v-model="content"
                                        :placeholder="placeholder"
                                        type="textarea"
                                        :autosize="autosize"
                                        ref="content"
                                />
                            </Upload>
                        </i-col>
                        <i-col span="12">
                            <Markdown :content="content" :highlight="highlight"></Markdown>
                        </i-col>
                    </row>
                </div>
                <div class="i-editor-fullscreen-tail"></div>
            </div>
        </Modal>
    </div>
</template>
<script>
    import insertText from '../util/insertText';
    import Upload from './upload.vue';
    import Markdown from './md.vue';

    export default {
        name: 'iEditor',
        components: { Upload, Markdown },
        props: {
          name: {
            type: String,
            default: 'i-editor'
          },
            affix: Boolean,
            offsetTop: Number,
            placeholder: String,
            autosize: Object,
            writeName: {
                type: String,
                default: '内容'
            },
            changeScroll: Boolean,
            cover: String,
            showSummary: {
                type: Boolean,
                default: false
            },
            config: {
                type: Object,
                default () {
                    return {
                        action: '/',
                        maxSize: 5120
                    }
                }
            },
            value: {
                type: String,
                default: ''
            },
            beforeUpload: {
                type: Function,
                default () {
                    return true;
                }
            },
            imgUrl: {
                type: Function,
                default (res) {
                    return res;
                }
            },
            highlight: {
                type: Function,
                default (code) {
                    return code;
                }
            },
            paste: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                tabType: 'write',  // write || preview || summary
                content: this.value,
                showMdTip: false,
                showDiff: false,
                showDiffEditor: false,
                summary: ''
            };
        },
        watch: {
            showDiff (val) {
                // 避免出现输入框的滚动条
                this.$nextTick(() => {
                    this.showDiffEditor = val;
                });
            },
            value (val) {
                this.content = val;
            },
            content (val) {
                this.$emit('input', val);
            }
        },
        computed: {
//            coverUrl () {
//                return config.filePrefix + this.cover + '/large';
//            }
        },
        methods: {
            handleChangeTab (name) {
                if (name === 'write') {
                    this.$nextTick(() => {
                        this.$refs.content.focus();
                    });
                } else if (name === 'preview') {
                    if (this.changeScroll) {
                        this.$nextTick(() => {
                            const md = this.$refs.markdown.$el;
                            window.scrollTo(0, md.offsetTop);
                        });
                    }
                } else if (name === 'summary') {
                    this.$nextTick(() => {
                        this.$refs.summary.focus();
                    });
                }
            },
            handleUploadSuccess (res) {
//                const url = config.filePrefix + res.key + '/large';
                const url = this.imgUrl(res);
                const md_link = `![](${url})`;

                const $content = this.$refs.content.$refs.textarea;
                insertText($content, md_link);

                this.$nextTick(() => {
                    this.content = $content.value;  // 不加此行,改变了 value 不会重绘,原数据则没有改变
                    this.$refs.content.focus();
                });
            },
            handleImportMd (result) {
                if (this.content !== '') {
                    this.$Modal.confirm({
                        title: '导入确认',
                        content: '导入后将覆盖您已经输入的内容,是否继续导入?',
                        onOk: () => {
                            this.content = result;
                        }
                    });
                } else {
                    this.content = result;
                }
            },
            focus () {
                if (this.$refs.content) {
                    this.$refs.content.focus();
                }
            }
        }
    }
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant