如何修改iview源码
前情提要做的一个需求是想要鼠标进入弹框便不消失,移出鼠标弹框消失(即iview的 notice),仔细查看了iview/notice模块发现并不支持此功能因此 只能自己尝试修改iview源代码(以下修改流程以修改notice为例)首先将iview的官方源码库clone下来cd iviewgit clone https://github.com/iview/iview.git npm i...
·
前情提要
做的一个需求是想要鼠标进入弹框便不消失,移出鼠标弹框消失(即iview的 notice),仔细查看了iview/notice模块发现并不支持此功能
因此 只能自己尝试修改iview源代码(以下修改流程以修改notice为例)
首先将iview的官方源码库clone下来
- cd iview
- git clone https://github.com/iview/iview.git npm install
- //安装依赖(必需,否则打包错误)
修改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文件
更多推荐
已为社区贡献1条内容
所有评论(0)