更新筛选条件的高亮显示

.babelrc

@@ -2,5 +2,6 @@
   "presets": [
     ["env", { "modules": false }],
     "stage-3"
-  ]
+  ],
+  "plugins": ["transform-vue-jsx"]
 }

.vscode/settings.json

+{
+  "editor.fontSize": 20
+}
\ No newline at end of file

package.json

 {
-    "name": "@gic-test/vue-gic-people",
-    "description": "vue-gic-people Plugin",
-    "author": "fairyly <498745097@qq.com>",
-    "version": "1.2.11",
-    "license": "MIT",
-    "private": false,
-    "main": "dist/vue-gic-people.js",
-    "scripts": {
-        "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
-    },
-    "dependencies": {
-        "@riophae/vue-treeselect": "0.0.35",
-        "axios": "^0.18.0",
-        "localforage": "^1.7.2",
-        "vue": "^2.5.11"
-    },
-    "browserslist": [
-        "> 1%",
-        "last 2 versions",
-        "not ie <= 8"
-    ],
-    "devDependencies": {
-        "babel-core": "^6.26.0",
-        "babel-loader": "^7.1.2",
-        "babel-preset-env": "^1.6.0",
-        "babel-preset-stage-3": "^6.24.1",
-        "cross-env": "^5.0.5",
-        "css-loader": "^0.28.7",
-        "file-loader": "^1.1.4",
-        "less-loader": "^4.1.0",
-        "node-sass": "^4.5.3",
-        "sass-loader": "^6.0.6",
-        "vue-loader": "^13.0.5",
-        "vue-template-compiler": "^2.4.4",
-        "webpack": "^3.8.1",
-        "webpack-dev-server": "^2.9.1"
-    }
-}
+  "name": "@gic-test/vue-gic-people",
+  "description": "vue-gic-people Plugin",
+  "author": "fairyly <498745097@qq.com>",
+  "version": "1.2.27",
+  "license": "MIT",
+  "private": false,
+  "main": "dist/vue-gic-people.js",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+  },
+  "dependencies": {
+    "@riophae/vue-treeselect": "0.0.35",
+    "axios": "^0.18.0",
+    "localforage": "^1.7.2",
+    "vue": "^2.5.11"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ],
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-vue-jsx": "^3.7.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-stage-3": "^6.24.1",
+    "cross-env": "^5.0.5",
+    "css-loader": "^0.28.7",
+    "file-loader": "^1.1.4",
+    "less-loader": "^4.1.0",
+    "node-sass": "^4.5.3",
+    "sass-loader": "^6.0.6",
+    "vue-loader": "^13.0.5",
+    "vue-template-compiler": "^2.4.4",
+    "webpack": "^3.8.1",
\ No newline at end of file
+    "webpack-dev-server": "^2.9.1"
+  }
+}

src/lib/filter-txt.vue

+<template>
+	<p class="filtertxt">
+		<span v-if="singleTxt">{{singleTxt}}</span>
+		<span v-for="(txt, i) in templateArr" :key="i" v-if="templateArr && templateArr.length">
+			<span v-if="i !== 0">&nbsp;且&nbsp;</span>
+			<span v-for="(item, index) in templateArr[i]" :key="index">
+				<span v-if="index !== 0 && index !== templateArr[i].length - 1">&nbsp;或&nbsp;</span>
+				<span :class="(index !== 0 && index !== templateArr[i].length - 1) ? 'light-txt' : ''">{{item}}</span>
+			</span>
+		</span>
+	</p>
+</template>
+
+<script>
+export default {
+	name: 'filter-txt',
+	props: {
+		templatetxt: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			templateArr: [],
+			singleTxt: ''
+		}
+	},
+	beforeMount() {
+		let middletxt = this.templatetxt;
+		// 只有一条 没有或
+		if (!middletxt.includes('或') && !middletxt.includes('且')) {
+			this.singleTxt = middletxt;
+		}
+		// 只有一条 有或 没有且
+		if (middletxt.includes('或') && !middletxt.includes('且')) {
+			middletxt = middletxt.replace(/\)/g, '').split('或');
+			middletxt.push(')');
+			this.templateArr = [middletxt];
+		}
+
+		// 两条 有且 有或 没有 或
+		if (middletxt.includes('且')) {
+			if (middletxt.includes('或')) {
+				// (年龄等于12且(所属主门店包含自营)
+				middletxt = middletxt.split('且');
+				middletxt = middletxt.map(ele => {
+					let eletxt = ele.replace(/\)/g, '');
+					let ret = eletxt.split('或');
+					ret.push(')');
+					return ret;
+				});
+				this.templateArr = middletxt;
+			} else {
+				this.singleTxt = middletxt;
+			}
+		}
+	}
+};
+</script>
+<style>
+.filtertxt {
+	display: inline-block;
+	vertical-align: middle;
+}
+.light-txt {
+	display: inline-block;
+	padding: 2px 10px;
+	background-color: #e2eaf1;
+}	
+</style>

src/lib/vue-gic-people.vue

@@ -31,7 +31,7 @@
             <span class="bg_blue"><b>新增于</b>最近30天</span>
             <span class="word">或者</span>
             <span class="bg_blue"><b>活跃于</b>最近30天</span>) -->
-            {{templateData}}
+            <filter-txt :templatetxt="templatetxt"></filter-txt>
           </div>
           <span class="el-icon-edit btn-edit-group" id="btn-edit-group-tempcondition" title="编辑用户群" @click="editTemp" style="display: inline-block;"></span>
           <span class="el-icon-delete btn-cancel-group" id="btn-cancel-group-tempcondition" title="重置条件" @click="resetTemp"></span>
@@ -311,7 +311,7 @@
   import Treeselect from '@riophae/vue-treeselect'
   // import the styles
   import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-
+  import FilterTxt from './filter-txt';
   // import vueAreaAb from './vue-area-ab'
   import tags from './tags'
 
@@ -336,7 +336,8 @@
 
         // 查询 list
         selectDataList: [],
-
+        // 显示缩略的文字
+        templatetxt: '',
         responseData: '',
 
         // 获取 location origin
@@ -1286,7 +1287,7 @@
 
         //判断隐藏/显示按钮
         if (that.conditionsList.length===0) {
-          that.$emit('hideBtn')
+          that.$emit('hideBtn', 0)
         }
       },
 
@@ -1510,7 +1511,9 @@
           console.log(res,res.data,res.data.errorCode)
           var resData = res.data
           if (resData.errorCode == 0) {
-            that.templateData = resData.result.replace(/或/g, ' 或 ').replace(/且/g, ' 且 ')
+            that.templateData = resData.result.replace(/或/g, ' 或 ').replace(/且/g, ' 且 ');
+            that.templatetxt = resData.result;
+            
             // 隐藏筛选条件
             that.conditionsShow = false;
             // 显示缩略信息
@@ -1805,7 +1808,8 @@
 
     components: {
       Treeselect,
-      tags
+      tags,
+      FilterTxt
       // vueAreaAb
     }
   }
@@ -2187,7 +2191,7 @@
 
   .vue-treeselect /deep/ {
     width: 217px;
-
+    font-size: 12px;
     /deep/ .vue-treeselect__control {
       height: 32px;
       /*line-height: 36px;*/

webpack.config.js

 var path = require('path')
 var webpack = require('webpack')
+const isDev = process.env.NODE_ENV === 'development';
 
 module.exports = {
-  // entry: './src/main.js',
-  entry: './src/lib/index.js',
+  entry: isDev ? './src/main.js' : './src/lib/index.js',
   output: {
     path: path.resolve(__dirname, './dist'),
     publicPath: '/dist/',