小程序的小组件

进度的组件
文字换行过滤 以及 排序  简单易懂   只为了记录工作
 

<template>
  <div>
    <ProgressBar  :progress="progress" />
    <button @click="increaseProgress">增加进度</button>
	
	<view class="goods-name">12312312312svcsdkjbcosdbojkcbsdjkcbdsjkbckjsbkjsd12312312312svcsdkjbcosdbojkcbsdjkcbdsjkbckjsbkjsd</view>
	
	
	<view style="display: flex; justify-content: center;align-content: center;">
	  <view  @click="onClick">{{ price }}</view>
	
	  <view class="triangle-icons">
		<view
		  style="margin: 3px;"
		  class="triangle-icon triangle-icon-up"
		  :class="{ 'active': isActiveUp }"
		></view>
		<view
		  class="triangle-icon triangle-icon-down"
		  :class="{ 'active': isActiveDown }"
		></view>
	  </view>
	</view>
	
  </div>
  
</template>

<script>
import ProgressBar from './ProgressBar.vue';

export default {
  components: {
    ProgressBar
  },
  data() {
    return {
      progress: 50 ,// 初始化进度为50%
	  price: '999',
	  isActiveDown: false,
	  isActiveUp: false,
    }
  },
  methods: { 
    increaseProgress() {
      if (this.progress < 100) {
        this.progress += 10; // 每次增加10%
      }
    },
	onClick() {
	  if (!this.isActiveUp && !this.isActiveDown) {
	    this.isActiveUp = true;
		console.log('1111')
	  } else if (this.isActiveUp && !this.isActiveDown) {
	    this.isActiveDown = true;
	    this.isActiveUp = false;
		console.log('2222')
	  } else {
	    this.isActiveDown = false;
		console.log('33333')
	  }
	},
  }
}
</script>
<style scoped lang="scss">
	.goods-name {
	  width: 500rpx;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2; /* 缩短并限制在一个确定的行数 */
	  overflow: hidden;
	  text-overflow: ellipsis; /* 文本溢出时添加省略号 */
	  word-wrap: break-word; /* 单词过长会在词间换行 */
	  white-space: normal; /* 允许正常换行 */
	  font-size: 28rpx;
	  font-family: ".PingFang SC-Regular", Arial, sans-serif;
	  font-weight: bold;
	  line-height: 36rpx;
	  margin-left: 16rpx;
	  margin-top: 16rpx;
	}
	
	
	
	
	.triangle-icons {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
	
	.triangle-icon {
	  display: inline-block;
	  width: 0;
	  height: 0;
	  border-left: 5px solid transparent;
	  border-right: 5px solid transparent;
	}
	
	.triangle-icon-down {
	  border-top: 5px solid black;
	}
	
	.triangle-icon-down.active {
	  border-top-color: blue;
	}
	
	.triangle-icon-up {
	  border-bottom: 5px solid black;
	}
	
	.triangle-icon-up.active {
	  border-bottom-color: blue;
	}
</style>

ProgressBar  组件 代码

<template>
    <div class="progress-bar">
      <div class="progress-bar-inner" :style="{ width: progress + '%' }">
        <span class="progress-text">{{ progress }}%</span>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      progress: {
        type: Number,
        default: 0 // 默认进度为0%
      }
    }
  }
  </script>
  
  <style scoped>
  .progress-bar {
    width: 100%;
    height: 20px;
    background-color: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
  }
  
  .progress-bar-inner {
    height: 100%;
    background-color: #fddeca;
    transition: width 0.3s ease-in-out;
    position: relative;
  }
  
  .progress-text {
    position: absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 12px; 
  }
  </style>