uniapp删除线

uniapp 添加删除线的方法

在 uniapp 中可以通过 CSS 或特定组件实现删除线效果，以下是几种常见方法：

使用 CSS text-decoration 属性

在样式文件中添加以下代码：

.text-strikethrough {
  text-decoration: line-through;
}

在模板中使用：

<view class="text-strikethrough">这段文字会有删除线</view>

使用 rich-text 组件

对于需要更复杂排版的场景：

<rich-text :nodes="htmlContent"></rich-text>

在 script 中定义：

data() {
  return {
    htmlContent: '<div style="text-decoration:line-through">带删除线文本</div>'
  }
}

动态切换删除线

结合条件渲染实现动态效果：

<view :class="{'strikethrough': isDeleted}">可切换删除线的文本</view>
<button @click="toggleDelete">切换删除线</button>

data() {
  return {
    isDeleted: false
  }
},
methods: {
  toggleDelete() {
    this.isDeleted = !this.isDeleted
  }
}

.strikethrough {
  text-decoration: line-through;
  color: #999;
}

注意事项

1. 某些小程序平台对 text-decoration 支持有限，建议测试目标平台兼容性
2. 使用 rich-text 时需注意组件性能影响
3. 删除线颜色默认与文字颜色相同，可通过 border-bottom 模拟自定义颜色效果

以上方法适用于 uniapp 的 vue 文件结构，可根据实际需求选择合适方案。