概述
这个公共的库在项目中是通过dependencies引入进来的：
"dependencies": {
。。。
"frontend-library": "git+https://git.com/Frontend/library.git",
。。。
},在开发的时候可以换成file协议，这样方便调试。
在ci中，依赖的库不是每次都用npm install/update来处理，因为这样非常耗时间。所以会提前把依赖的库打到一个docker中去，那么这样就会有一个问题，一旦更新了library库，就需要更新这个docker镜像，这样不是很合理。所以我们的处理方式就是，在build之前，先会checkout下来library项目，然后执行以下两条命令，进行手工同步最新代码。
rm -rf node_modules/frontend-library/*
mv library/* node_modules/frontend-library下面简单介绍库中的几个组件，基于element-ui：
- 三种状态的checkbox
初始是ignore状态，然后选中，然后取消选中。每次点击在这三种状态循环
<template>
<el-row class="tri-state-checkbox clearfix">
<el-col :span="4"><span class="title">{{item.name}}</span></el-col>
<el-col :span="20" role="checkboxgroup" :class="'el-checkbox-group checkbox-group-' + item.key" v-if="item.options">
<label role="checkbox" tabindex="-1" :class="['multi-checkbox el-checkbox-button is-ignored']" v-for="option in item.options" :key="option.key">
<input type="checkbox" tabindex="-1"
@click="select"
:name="'option' + option.key"
class="el-checkbox-button__original"
:value="option.key">
<span class="el-checkbox-button__inner">{{option.name}}</span>
</label>
</el-col>
</el-row>
</template>
<script>
import $ from 'jquery';
/**
* TriStateCheckbox组件，三种状态多选组件
* @module TriStateCheckbox
* @fires change
* @example
* 具体使用参考{@tutorial 其它组件介绍}
*/
const STATE = ['is-ignored', 'is-checked', 'is-unchecked'],
STATE_VALUE = {'is-ignored': null, 'is-checked': true, 'is-unchecked': false};
export default {
name: 'TriStateCheckbox',
/**
* Props 接受父组件的传值
* @property {object} item 必填，需要展示的选项
* @property {string} item.name 多选的label
* @property {object} item.key 多选的key
* @property {array} item.options 多选选项[{key:,name:},{key:,name:}]
*/
props: {
item: Object
},
data () {
return {
};
},
methods: {
select (evt) {
let curTarget = evt.currentTarget,
classes = $(curTarget).closest('.el-checkbox-button').attr('class').split(/s+/),
state = classes.filter(clazz => clazz.startsWith('is-'))[0],
nextState = (STATE.indexOf(state) + 1) % 3;
$(curTarget).closest('.el-checkbox-button').removeClass(state).addClass(STATE[nextState]);
this.$emit('change');
},
/**
* 获取结果方法，父组件可以通过定义ref，调用此组件的result方法
* @method result
* @returns {object} item
* @example
* //此方法会把传入的item返回，并且会在options里面的每个选项添加checked属性
* //true：选中，false：未选中，null：没有选择
*/
result () {
this.item.options && this.item.options.forEach((opt) => {
let classes = $('.checkbox-group-' + this.item.key + ' input[value=' + opt.key + ']').closest('.el-checkbox-button').attr('class').split(/s+/),
state = classes.filter(clazz => clazz.startsWith('is-'))[0];
opt.checked = STATE_VALUE[state];
});
return this.item;
}
},
mounted () {
}
};
</script>
- 可取消的单选
<template>
<el-row class="unchecked-radio clearfix">
<el-col :span="4"><span class="title">{{item.name}}</span></el-col>
<el-col :span="20" role="radiogroup" :class="'el-radio-group radio-group-' + item.key" v-if="item.options">
<label role="radio" tabindex="-1" :class="['el-radio-button']" v-for="option in itemOptions" :key="option.value">
<input type="radio" tabindex="-1"
@click="select"
:name="'option' + item.key"
class="el-radio-button__orig-radio"
:value="option.value">
<span class="el-radio-button__inner">{{option.name}}</span>
</label>
</el-col>
</el-row>
</template>
<script>
import $ from 'jquery';
/**
* UncheckedRadio组件，可取消单选组件
* @module UncheckedRadio
* @fires change
* @example
* 具体使用参考{@tutorial 其它组件介绍}
*/
export default {
name: 'UncheckedRadio',
/**
* Props 接受父组件的传值
* @property {object} item 必填，需要展示的选项
* @property {string} item.name 多选的label
* @property {object} item.key 多选的key
* @property {array} item.options 多选选项[{value:,name:},{value:,name:}]
*/
props: {
item: Object
},
data () {
return {
lastCheckedOption: null
};
},
computed: {
itemOptions () {
return this.item.options.filter(i => i.value && i.name);
}
},
methods: {
select (evt) {
if (this.lastCheckedOption === evt.currentTarget && $(evt.currentTarget).closest('.el-radio-button').hasClass('is-active')) {
$(evt.currentTarget).closest('.el-radio-button').removeClass('is-active');
$(evt.currentTarget).prop('checked', false);
} else {
$(this.lastCheckedOption).prop('checked', false);
$(evt.currentTarget).prop('checked', true).closest('.el-radio-button').addClass('is-active');
}
this.lastCheckedOption = evt.currentTarget;
this.$emit('change');
},
/**
* 获取结果方法，父组件可以通过定义ref，调用此组件的result方法
* @method result
* @returns {object} item
* @example
* //此方法会把传入的item返回，并且会在options里面的每个选项添加checked属性
* //true：选中，false：未选中
*/
result () {
this.item.options && this.item.options.forEach((opt) => {
opt.checked = $('.radio-group-' + this.item.key + ' input[value=' + opt.value + ']').prop('checked');
});
return this.item;
}
},
mounted () {
}
};
</script>
- 使dialog可拖拽移动的指令
let DialogDraggerDirective = {
name: 'DialogDragger',
bind: function (el, binding, vnode) {
let dlg = el.getElementsByClassName('el-dialog')[0],
title = el.getElementsByClassName('job-title')[0];
title.style.cursor = 'default';
dlg.offsetX = 0;
dlg.offsetY = 0;
let move = function (e) {
dlg.style.marginLeft = '0px';
dlg.style.marginTop = '0px';
dlg.style.left = (e.pageX - dlg.offsetX) + 'px';
dlg.style.top = (e.pageY - dlg.offsetY) + 'px';
};
let up = function () {
removeEventListener('mousemove', move);
removeEventListener('mouseup', up);
};
let down = function (e) {
dlg.offsetX = (e.pageX - dlg.offsetLeft);
dlg.offsetY = (e.pageY - dlg.offsetTop);
addEventListener('mousemove', move);
addEventListener('mouseup', up);
};
let header = el.getElementsByClassName('el-dialog__header')[0];
header.addEventListener('mousedown', down);
header.style.cursor = 'move';
}
};- 使textarea可以输入tab键的指令
//代码来自互联网，进行了封装
let TabKeyEnablerDirective = {
name: 'TabKeyEnabler',
bind: function (el, binding, vnode) {
const input = $(el).find('textarea').get(0);
if (input) {
input.onkeydown = function (e) {
if (e.keyCode === 9) { // tab was pressed
// get caret position/selection
var val = this.value,
start = this.selectionStart,
end = this.selectionEnd;
// set textarea value to: text before caret + tab + text after caret
this.value = val.substring(0, start) + 't' + val.substring(end);
// put caret at right position again
this.selectionStart = this.selectionEnd = start + 1;
// prevent the focus lose
return false;
}
};
}
}
};
封装的表格控件功能比较多，需要单独写篇文章
最后
以上就是要减肥大米为你收集整理的Vue2在实际项目中的应用——公共组件介绍的全部内容，希望文章能够帮你解决Vue2在实际项目中的应用——公共组件介绍所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复