Commit 614787cc by 无尘

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

parent 3130bf14
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
"name": "@gic-test/vue-gic-people", "name": "@gic-test/vue-gic-people",
"description": "vue-gic-people Plugin", "description": "vue-gic-people Plugin",
"author": "fairyly <498745097@qq.com>", "author": "fairyly <498745097@qq.com>",
"version": "1.1.48", "version": "1.2.3",
"license": "MIT", "license": "MIT",
"private": false, "private": false,
"main": "dist/vue-gic-people.js", "main": "dist/vue-gic-people.js",
......
<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>
...@@ -127,6 +127,7 @@ ...@@ -127,6 +127,7 @@
remote remote
reserve-keyword reserve-keyword
placeholder="请输入关键词" placeholder="请输入关键词"
:reserve-keyword="false"
:remote-method="remoteMethod" :remote-method="remoteMethod"
@focus="selectFocus(index,key,ind)" @focus="selectFocus(index,key,ind)"
@change="changeRemote($event,index,key,ind)" @change="changeRemote($event,index,key,ind)"
...@@ -136,8 +137,9 @@ ...@@ -136,8 +137,9 @@
:key="item.key" :key="item.key"
:label="item.value" :label="item.value"
:value="item.key"> :value="item.key">
</el-option><!-- :key="item.key" --> </el-option>
</el-select> </el-select>
</div> </div>
<!-- 时间区间年月日-年月日 最后控件--> <!-- 时间区间年月日-年月日 最后控件-->
<div class="gic-select-wrap inline-block" v-if="childCell.templateCode == 'com006'"> <div class="gic-select-wrap inline-block" v-if="childCell.templateCode == 'com006'">
...@@ -203,14 +205,15 @@ ...@@ -203,14 +205,15 @@
<!-- input tag 最后控件--> <!-- input tag 最后控件-->
<div class="gic-select-wrap inline-block input-tags" v-if="childCell.templateCode == 'com010'"> <div class="gic-select-wrap inline-block input-tags" v-if="childCell.templateCode == 'com010'">
<el-select <!-- <el-select
v-model="childCell.levelModel" v-model="childCell.levelModel"
multiple multiple
filterable filterable
allow-create allow-create
default-first-option default-first-option
no-data-text= '' :popper-append-to-body="false"
no-match-text='' no-data-text= ' '
no-match-text=' '
placeholder="请输入" placeholder="请输入"
@focus="selectFocus(index,key,ind)" @focus="selectFocus(index,key,ind)"
@change = "changeCreate($event,index,key,ind)"> @change = "changeCreate($event,index,key,ind)">
...@@ -220,7 +223,8 @@ ...@@ -220,7 +223,8 @@
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select> -->
<tags :tags.sync="childCell.levelModel" @click="selectFocus(index,key,ind)" @tagsChange="changeCreate($event,index,key,ind)"/>
</div> </div>
<!-- 门店区域省市县树形 最后控件--> <!-- 门店区域省市县树形 最后控件-->
...@@ -309,6 +313,7 @@ ...@@ -309,6 +313,7 @@
import '@riophae/vue-treeselect/dist/vue-treeselect.css' import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// import vueAreaAb from './vue-area-ab' // import vueAreaAb from './vue-area-ab'
import tags from './tags'
import localforage from 'localforage'; import localforage from 'localforage';
import { _debounce } from "./public"; import { _debounce } from "./public";
...@@ -916,7 +921,7 @@ ...@@ -916,7 +921,7 @@
changeCreate(e,index,key,ind){ changeCreate(e,index,key,ind){
var that = this var that = this
console.log("create input tag:",e,index,key,ind) 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 @@ ...@@ -1584,13 +1589,16 @@
if (!!resData.result.detail && !!resData.result.detail.length) { if (!!resData.result.detail && !!resData.result.detail.length) {
var resDetail = JSON.parse(resData.result.detail) var resDetail = JSON.parse(resData.result.detail)
resDetail.forEach(function(ele,index){ resDetail.forEach(function(ele,index){
// console.log(ele,">>>>>>>>>>>>>>>>>>") // console.log(ele,">>>>>>>>>>>>>>>>>>",ele.esScreeningWidgetChainId )
if (ele.esScreeningWidgetChainId == '8b0f770c72c24158bda1105b40d7336c') { ele.children.forEach(function(el,key){
ele.children.forEach(function(el,key){ if (el.esScreeningWidgetChainId == '8b0f770c72c24158bda1105b40d7336c') {
// console.log(el,"//////") // console.log(el,"//////>>>",el.children)
el.children[0].levelOptions.push(that.addObjKey) 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.conditionsList = resDetail
that.$emit("editHide") that.$emit("editHide")
...@@ -1796,6 +1804,7 @@ ...@@ -1796,6 +1804,7 @@
components: { components: {
Treeselect, Treeselect,
tags
// vueAreaAb // vueAreaAb
} }
} }
...@@ -1888,7 +1897,7 @@ ...@@ -1888,7 +1897,7 @@
} }
.screening-condition .btn-edit-group:hover { .screening-condition .btn-edit-group:hover {
color: #409eff; color: #1890ff;
} }
.screening-condition .el-icon-delete:hover { .screening-condition .el-icon-delete:hover {
...@@ -1950,7 +1959,7 @@ ...@@ -1950,7 +1959,7 @@
padding: 0 24px; padding: 0 24px;
font-size: 14px; font-size: 14px;
border-radius: 2px; border-radius: 2px;
background: #409eff; background: #1890ff;
border: none; border: none;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
...@@ -2008,7 +2017,7 @@ ...@@ -2008,7 +2017,7 @@
} }
.filter-box { .filter-box {
border-left: 10px solid #409eff; border-left: 10px solid #1890ff;
} }
.filter-message { .filter-message {
...@@ -2054,12 +2063,12 @@ ...@@ -2054,12 +2063,12 @@
} }
.filter-button li:hover { .filter-button li:hover {
background: #409eff; background: #1890ff;
color: #fff; color: #fff;
} }
.filter-button .filter-active { .filter-button .filter-active {
background: #409eff; background: #1890ff;
color: #fff; 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