hongze_yb_xcx/pages/chart/component/chartItem.vue

<template>
  <view class="chart-item" :data-id="itemData.dragId" @click.stop="itemClick">
      <rich-text 
        class="van-multi-ellipsis--l2 title" 
        :nodes="formatTitle(itemData.ChartName)"
        @longpress.stop="chartTitle(itemData,$event)"
      ></rich-text>
      <view class="pop-title" v-if="showPopTitle">{{itemData.ChartName}}</view>
      <image lazy-load class="img" :src="itemData.ChartImage" mode="aspectFill"/>
  </view>
</template>

<script>
export default {
    name:"chartItem",
    props: {
        itemData:{
          type: Object,
			    value: {}
        },
        searchVal:""
    },
    data () {
      return {
        showPopTitle:false,
        title:"",
      }
    },
    methods: {
      itemClick(){
        this.$emit('click')
        this.showPopTitle=false
      },

      formatTitle(e){
        const reg=new RegExp(this.searchVal,'gi')
        return e.replace(reg,`<span style="color:#FF0000">${this.searchVal}</span>`)
      },

      // 长按标题
      chartTitle(data,e){
        this.showPopTitle=true
        this.title=data.ChartName
        uni.setClipboardData({
          data: data.ChartName,
          success: (result) => {},
          fail: (error) => {}
        })
      }
    }
}
</script>

<style lang='scss' scoped>
.chart-item{
    height: 380rpx;
    background: #FFFFFF;
    box-shadow: 0px 0px 12rpx rgba(154, 141, 123, 0.16);
    border-radius: 8rpx;
    margin-left: 10rpx;
    margin-right: 10rpx;
    margin-bottom: 20rpx;
    padding: 20rpx 20rpx 33rpx 20rpx;
    position: relative;
    .title{
      font-size: 26rpx;
      min-height: 68rpx;
    }
    .pop-title{
      position: absolute;
      width: 80%;
      font-size: 24rpx;
      padding: 8rpx;
      border-radius: 4rpx;
      top: 80rpx;
      left: 10%;
      background-color: #fff;
      box-shadow: 0px 0px 12rpx rgba(154, 141, 123, 0.16);
    }
    .img{
      margin-top: 10rpx;
      width: 100%;
      height: 261rpx;
      display: block;
      margin-left: auto;
      margin-right: auto;
      background-color: #f6f6f6;
    }
}
</style>