字体高亮

前端展示

<template>
  <div>

    <myheader></myheader>

    <section class="products text-center">

      <div class="container">
        <h3 class="mb-4">商品检索</h3>

        <div class="row">
          <div v-for="item in goodslist" class="col-sm-6 col-md-3 col-product">
            <figure>
              <img class="rounded-corners img-fluid" :src="'http://localhost:8000/static/upload/'+item.img" width="240"
                   height="240">
              <figcaption>
                <div class="thumb-overlay"><a href="item.html" title="More Info">
                  <i class="fas fa-search-plus"></i>
                </a></div>
              </figcaption>
            </figure>
            <h4><a :href="'http://localhost:8080/item?id='+item.id">
              <div v-html="$options.filters.myfilter(item.name)"></div>
<!--             <-- {{ item.name | myfilter }}-->
            </a></h4>
            <p><span class="emphasis">${{ item.price }}</span></p>
          </div>
        </div>
        <!-- 分页容器 简单版 -->
        <div>
          <Pagination @change="get_goods" v-model="pagination"></Pagination>
          <Button @click="get_goods(1)">ID倒序</Button>
          <Button @click="get_goods(2)">价格倒序</Button>
        </div>
      </div>
    </section>

    <div class="divider"></div>
    <footer class="footer">
      <div class="container">
        @v3u.cn
      </div>
    </footer>

  </div>

</template>


<script>
  //导入组件
  import myheader from './myheader.vue'

  export default {
    data() {
      return {
        // 搜索关键词
        text: '',
        msg: "这是一个变量",
        // 商品列表
        goodslist: [],

        // 分页器变量
        pagination: {
          // 当前页
          page: 1,
          size: 4,
          total: 4,
        },
        //排序变量
        coloum: '',
        order: '',
      }
    },
    //注册组件标签
    components: {

      'myheader': myheader

    },
    mounted: function () {
      // 传递公共变量
      window.that = this;
      // 接收参数
      var text = this.$route.query.text;
      console.log(text);
      this.text = text;
      // 判断
      if(text.indexOf(' ')!==-1){
        text = text.split(" ");
        //格式转换
        this.text = JSON.stringify(text);
        console.log(text);
    }
      this.get_goods();
    },
    // 自定义过滤器
    filters:{
      myfilter:function (value) {
        console.log(window.that.text);

        value = value.replace(new RegExp(window.that.text,'g'),'<span class="highlight">'+window.that.text+'</span>');

        return value;
      }
    },
    methods: {
      // 获取商品  自动化分页
      get_goods: function (cid) {
        if (cid == 1) {
          this.coloum = 'id';
          this.order = '-';
        }
        if (cid == 2) {
          this.coloum = 'id';
          this.order = '-';
        }
        // 发送请求
        this.axios.get('http://localhost:8000/goodslist/', {
          params: {
            page: this.pagination.page,
            size: this.pagination.size,
            coloum: this.coloum,
            order: this.order,
            text:this.text,
          }
        }).then((result) => {
          console.log(result);
        //   手写
          // for(let i=0;i<result.data.data.length;i++){
          //   result.data.data[i]['name'] = result.data.data[i]['name'].replace(new RegExp(this.text,'g'),'<span class="highlight">'+this.text+'</span>');
          // }
          this.goodslist = result.data.data;
          this.pagination.total = result.data.total;
        })
      },
    }
  }
</script>

<style>
.highlight{
  color: orange;
}
</style>