前情提要
做的一个需求是想要鼠标进入弹框便不消失,移出鼠标弹框消失(即iview的 notice),仔细查看了iview/notice模块发现并不支持此功能
因此 只能自己尝试修改iview源代码(以下修改流程以修改notice为例)

首先将iview的官方源码库clone下来

  1. cd iview
  2. git clone https://github.com/iview/iview.git npm install
  3. //安装依赖(必需,否则打包错误)

修改js

src/components文件夹中存放的就是各种iview组件源码,可以根据需要自行修改,修改完成后重新执行npm run dist就会重新打包

修改代码过程就不赘述了 ,粘贴如下(修改部分加粗)
修改文件目录

<template>
    <transition :name="transitionName" @enter="handleEnter" @leave="handleLeave" >
        <div :class="classes" :style="styles" **@mouseenter="exist" @mouseleave="noexist"**>
            
            <template v-if="type === 'notice'" >
                <div :class="contentClasses" ref="content" v-html="content" ></div>
                <div :class="contentWithIcon">
                    <render-cell
                        :render="renderFunc"
                    ></render-cell>
                </div>
                <a :class="[baseClass + '-close']" @click="close" v-if="closable">
                    <i class="ivu-icon ivu-icon-ios-close-empty"></i>
                </a>
            </template>
            <template v-if="type === 'message'">
                <div :class="[baseClass + '-content']" ref="content">
                    <div :class="[baseClass + '-content-text']" v-html="content"></div>
                    <div :class="[baseClass + '-content-text']">
                        <render-cell
                            :render="renderFunc"
                        ></render-cell>
                    </div>
                    <a :class="[baseClass + '-close']" @click="close" v-if="closable">
                        <i class="ivu-icon ivu-icon-ios-close-empty"></i>
                    </a>
                </div>
            </template>
        </div>
    </transition>
</template>
<script>
    import RenderCell from '../render';
    export default {
        components: {
            RenderCell
        },
        props: {
            prefixCls: {
                type: String,
                default: ''
            },
            duration: {
                type: Number,
                default: 1.5
            },
            type: {
                type: String
            },
            content: {
                type: String,
                default: ''
            },
            withIcon: Boolean,
            render: {
                type: Function
            },
            hasTitle: Boolean,
            styles: {
                type: Object,
                default: function() {
                    return {
                        right: '50%'
                    };
                }
            },
            closable: {
                type: Boolean,
                default: false
            },
            className: {
                type: String
            },
            name: {
                type: String,
                required: true
            },
            onClose: {
                type: Function
            },
            transitionName: {
                type: String
            }
        },
        data () {
            return {
                withDesc: false,
            };
        },
        computed: {
            baseClass () {
                return `${this.prefixCls}-notice`;
            },
            renderFunc () {
                return this.render || function () {};
            },
            classes () {
                return [
                    this.baseClass,
                    {
                        [`${this.className}`]: !!this.className,
                        [`${this.baseClass}-closable`]: this.closable,
                        [`${this.baseClass}-with-desc`]: this.withDesc
                    }
                ];
            },
            contentClasses () {
                return [
                    `${this.baseClass}-content`,
                    this.render !== undefined ? `${this.baseClass}-content-with-render` : ''
                ];
            },
            contentWithIcon () {
                return [
                    this.withIcon ? `${this.prefixCls}-content-with-icon` : '',
                    !this.hasTitle && this.withIcon ? `${this.prefixCls}-content-with-render-notitle` : ''
                ];
            },
            messageClasses () {
                return [
                    `${this.baseClass}-content`,
                    this.render !== undefined ? `${this.baseClass}-content-with-render` : ''
                ];
            }
        },
        methods: {
            **exist(){
                    clearTimeout(this.closeTimer);
                    clearTimeout(this.outTimer);
                    this.outTimer = null;
                    this.closeTimer = null;
            },
            noexist(){
               this.outTimer = setTimeout(() => {
                    this.$parent.close(this.name)
                }, 1000);
                
            },**
            clearCloseTimer () {
                if (this.closeTimer) {
                    clearTimeout(this.closeTimer);
                    this.closeTimer = null;
                }
            },
            close () {
                this.clearCloseTimer();
                this.onClose();
                this.$parent.close(this.name);
            },
            handleEnter (el) {
                if (this.type === 'message') {
                    el.style.height = el.scrollHeight + 'px';
                }
            },
            handleLeave (el) {
                if (this.type === 'message') {
                    // 优化一下,如果当前只有一个 Message,则不使用 js 过渡动画,这样更优美
                    if (document.getElementsByClassName('ivu-message-notice').length !== 1) {
                        el.style.height = 0;
                        el.style.paddingTop = 0;
                        el.style.paddingBottom = 0;
                    }
                }
            }
        },
        mounted () {
            this.clearCloseTimer();

            if (this.duration !== 0) {
                this.closeTimer = setTimeout(() => {
                    this.close();
                }, this.duration * 1000);
            }

            // check if with desc in Notice component
            if (this.prefixCls === 'ivu-notice') {
                let desc = this.$refs.content.querySelectorAll(`.${this.prefixCls}-desc`)[0];
                this.withDesc = this.render ? true : (desc ? desc.innerHTML !== '' : false);
            }
        },
        beforeDestroy () {
            this.clearCloseTimer();
        },
    };
</script>

修改完成后 npm run dist 打包,直接将整个iview文件替换项目中node_modules/iview即可

修改css部分

直接找到项目中node_modules/iview/dist/styles下的iview.css文件
根据需要自行修改

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐