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

<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"><viewstyle="margin: 3px;"class="triangle-icon triangle-icon-up":class="{ 'active': isActiveUp }"></view><viewclass="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>