更新筛选条件的高亮显示

.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

@@ -2,7 +2,7 @@
   "name": "@gic-test/vue-gic-people",
   "description": "vue-gic-people Plugin",
   "author": "fairyly <498745097@qq.com>",
-    "version": "1.2.11",
+  "version": "1.2.27",
   "license": "MIT",
   "private": false,
   "main": "dist/vue-gic-people.js",
@@ -23,8 +23,11 @@
   ],
   "devDependencies": {
     "babel-core": "^6.26.0",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^7.1.2",
-        "babel-preset-env": "^1.6.0",
+    "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",

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/',