Skip to content

V
vue-gic-people
Commit 614787cc by 无尘
Options

fix: 修改 tag 组件和插件内颜色

parent 3130bf14
Showing with 285 additions and 16 deletions
dist/vue-gic-people.js
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/vue-gic-people.js.map
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
......@@ -2,7 +2,7 @@
"name": "@gic-test/vue-gic-people",
"description": "vue-gic-people Plugin",
"author": "fairyly <498745097@qq.com>",
"version": "1.1.48",
"version": "1.2.3",
"license": "MIT",
"private": false,
"main": "dist/vue-gic-people.js",
......
src/lib/tags.vue 0 → 100644
<template>
<div
@click="focusNewTag()"
:class="{
'read-only': readOnly,
'vue-input-tag-wrapper--active': isInputActive,
'gic-select': 'gic-select'
}"
class="vue-input-tag-wrapper el-select"
>
<span v-for="(tag, index) in innerTags" :key="index" class="input-tag el-tag el-tag--info el-tag--small">
<span class="el-select__tags-text">{{ tag }}</span>
<i v-if="!readOnly" @click.prevent.stop="remove(index)" class="el-tag__close el-icon-close"></i>
</span>
<input
v-if = "!readOnly && !isLimit"
ref = "inputtag"
:placeholder = "placeholder"
type = "text"
v-model = "newTag"
v-on:keydown.delete.stop = "removeLastTag"
v-on:keydown = "addNew"
v-on:blur = "handleInputBlur"
v-on:focus = "handleInputFocus"
class = "new-tag"
/>
</div>
</template>
<script>
/* eslint-disable */
const validators = {
email: new RegExp(
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
),
url: new RegExp(
/^(https?|ftp|rmtp|mms):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(:(\d+))?\/?/i
),
text: new RegExp(/^[a-zA-Z]+$/),
digits: new RegExp(/^[\d() \.\:\-\+#]+$/),
isodate: new RegExp(
/^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/
)
};
/* eslint-enable */
export default {
name: "InputTag",
props: {
tags: {
type: Array,
default: () => []
},
placeholder: {
type: String,
default: ""
},
readOnly: {
type: Boolean,
default: false
},
validate: {
type: String | Function | Object,
default: ""
},
addTagOnKeys: {
type: Array,
default: function() {
return [
13, // Return
188, // Comma ','
9 // Tab
];
}
},
addTagOnBlur: {
type: Boolean,
default: false
},
limit: {
type: Number,
default: -1
},
allowDuplicates: {
type: Boolean,
default: false
}
},
data() {
return {
newTag: "",
innerTags: [...this.tags],
isInputActive: false
};
},
watch: {
tags() {
this.innerTags = [...this.tags];
}
},
computed: {
isLimit: function() {
return this.limit > 0 && Number(this.limit) === this.innerTags.length;
}
},
methods: {
focusNewTag() {
if (this.readOnly || !this.$el.querySelector(".new-tag")) {
return;
}
this.$el.querySelector(".new-tag").focus();
},
handleInputFocus() {
this.isInputActive = true;
},
handleInputBlur(e) {
this.isInputActive = false;
this.addNew(e);
},
addNew(e) {
const keyShouldAddTag = e
? this.addTagOnKeys.indexOf(e.keyCode) !== -1
: true;
const typeIsNotBlur = e && e.type !== "blur";
if (
(!keyShouldAddTag && (typeIsNotBlur || !this.addTagOnBlur)) ||
this.isLimit
) {
return;
}
if (this.innerTags.indexOf(this.newTag.trim())!== -1) {
this.newTag = ''
return
}
if (
this.newTag.trim() &&
(this.allowDuplicates || this.innerTags.indexOf(this.newTag) === -1) &&
this.validateIfNeeded(this.newTag)
) {
this.innerTags.push(this.newTag.trim());
this.newTag = "";
this.tagChange();
}
},
validateIfNeeded(tagValue) {
if (this.validate === "" || this.validate === undefined) {
return true;
}
if (typeof this.validate === "function") {
return this.validate(tagValue);
}
if (
typeof this.validate === "string" &&
Object.keys(validators).indexOf(this.validate) > -1
) {
return validators[this.validate].test(tagValue);
}
if (
typeof this.validate === "object" &&
this.validate.test !== undefined
) {
return this.validate.test(tagValue);
}
return true;
},
remove(index) {
this.innerTags.splice(index, 1);
this.tagChange();
},
removeLastTag() {
if (this.newTag) {
return;
}
this.innerTags.pop();
this.tagChange();
},
tagChange() {
this.$emit("update:tags", this.innerTags);
this.chageTag();
},
chageTag() {
// console.log(">>>>>>",this.innerTags)
this.$emit("tagsChange", this.innerTags);
}
}
};
</script>
<style>
.vue-input-tag-wrapper {
background-color: #fff;
border: 1px solid #e7e7eb;
overflow: hidden;
padding-left: 4px;
padding: 7px 2px;
cursor: text;
text-align: left;
-webkit-appearance: textfield;
display: flex;
flex-wrap: wrap;
border-radius: 4px;
max-width: 208px;
}
.vue-input-tag-wrapper .input-tag {
background-color: #f0f2f5;
border-radius: 2px;
border: 1px solid #e7e7eb;
border-color: transparent;
color: #909399;
display: inline-block;
font-size: 12px;
font-weight: 400;
max-width: 182px;
position: relative;
/*margin-bottom: 4px;
margin-right: 4px;*/
/*padding: 3px;*/
}
.vue-input-tag-wrapper .el-select__tags-text {
display: inline-block;
vertical-align: top;
max-width: 148px;
overflow: hidden;
text-overflow: ellipsis;
}
.vue-input-tag-wrapper .input-tag .remove {
cursor: pointer;
font-weight: bold;
color: #638421;
}
.vue-input-tag-wrapper .input-tag .remove:hover {
/*text-decoration: none;*/
}
.vue-input-tag-wrapper .input-tag .remove::before {
/*content: " x";*/
}
.vue-input-tag-wrapper .new-tag {
background: transparent;
border: none;
outline: none;
padding: 0;
margin-left: 15px;
color: #666;
font-size: 14px;
font-weight: 400;
padding: 4px;
padding-left: 0;
flex: 1;
min-width: 20px;
max-width: 190px;
}
.vue-input-tag-wrapper.read-only {
cursor: default;
}
</style>
src/lib/vue-gic-people.vue
......@@ -127,6 +127,7 @@
remote
reserve-keyword
placeholder="请输入关键词"
:reserve-keyword="false"
:remote-method="remoteMethod"
@focus="selectFocus(index,key,ind)"
@change="changeRemote($event,index,key,ind)"
......@@ -136,8 +137,9 @@
:key="item.key"
:label="item.value"
:value="item.key">
</el-option><!-- :key="item.key" -->
</el-option>
</el-select>
</div>
<!-- 时间区间年月日-年月日 最后控件-->
<div class="gic-select-wrap inline-block" v-if="childCell.templateCode == 'com006'">
......@@ -203,14 +205,15 @@
<!-- input tag 最后控件-->
<div class="gic-select-wrap inline-block input-tags" v-if="childCell.templateCode == 'com010'">
<el-select
<!-- <el-select
v-model="childCell.levelModel"
multiple
filterable
allow-create
default-first-option
no-data-text= ''
no-match-text=''
:popper-append-to-body="false"
no-data-text= ' '
no-match-text=' '
placeholder="请输入"
@focus="selectFocus(index,key,ind)"
@change = "changeCreate($event,index,key,ind)">
......@@ -220,7 +223,8 @@
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-select> -->
<tags :tags.sync="childCell.levelModel" @click="selectFocus(index,key,ind)" @tagsChange="changeCreate($event,index,key,ind)"/>
</div>
<!-- 门店区域省市县树形 最后控件-->
......@@ -309,6 +313,7 @@
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// import vueAreaAb from './vue-area-ab'
import tags from './tags'
import localforage from 'localforage';
import { _debounce } from "./public";
......@@ -916,7 +921,7 @@
changeCreate(e,index,key,ind){
var that = this
console.log("create input tag:",e,index,key,ind)
that.conditionsList[that.andIndex].children[that.orIndex].columnValue = e.join(' ')
that.conditionsList[index].children[key].columnValue = e.join(' ')
},
// 输入框输入的时候
......@@ -1584,13 +1589,16 @@
if (!!resData.result.detail && !!resData.result.detail.length) {
var resDetail = JSON.parse(resData.result.detail)
resDetail.forEach(function(ele,index){
// console.log(ele,">>>>>>>>>>>>>>>>>>")
if (ele.esScreeningWidgetChainId == '8b0f770c72c24158bda1105b40d7336c') {
// console.log(ele,">>>>>>>>>>>>>>>>>>",ele.esScreeningWidgetChainId )
ele.children.forEach(function(el,key){
// console.log(el,"//////")
if (el.esScreeningWidgetChainId == '8b0f770c72c24158bda1105b40d7336c') {
// console.log(el,"//////>>>",el.children)
let maps = el.children[0].levelOptions.map(item=>item.key)
if (maps.indexOf(that.addObjKey.key) == -1) {
el.children[0].levelOptions.push(that.addObjKey)
})
}
}
})
})
that.conditionsList = resDetail
that.$emit("editHide")
......@@ -1796,6 +1804,7 @@
components: {
Treeselect,
tags
// vueAreaAb
}
}
......@@ -1888,7 +1897,7 @@
}
.screening-condition .btn-edit-group:hover {
color: #409eff;
color: #1890ff;
}
.screening-condition .el-icon-delete:hover {
......@@ -1950,7 +1959,7 @@
padding: 0 24px;
font-size: 14px;
border-radius: 2px;
background: #409eff;
background: #1890ff;
border: none;
outline: none;
cursor: pointer;
......@@ -2008,7 +2017,7 @@
}
.filter-box {
border-left: 10px solid #409eff;
border-left: 10px solid #1890ff;
}
.filter-message {
......@@ -2054,12 +2063,12 @@
}
.filter-button li:hover {
background: #409eff;
background: #1890ff;
color: #fff;
}
.filter-button .filter-active {
background: #409eff;
background: #1890ff;
color: #fff;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment