@tanzhenxing/zx-order-remark v1.0.1

OrderRemark 订单备注

订单备注组件，专门用于订单备注场景，支持字数限制、快捷短语、清除功能、表单验证等功能。

特性

• 📝 支持多行文本输入
• 🔢 字数统计和限制
• 🚀 快捷短语选择
• ✨ 清除按钮
• 📋 表单验证
• 🎨 多种边框样式
• 📱 多端兼容（H5、小程序、App）
• 🎯 专为订单备注场景设计

基础用法

<template>
  <zx-order-remark 
    v-model="remark" 
    title="订单备注" 
    placeholder="请输入您的订单备注"
  />
</template>

<script setup>
import { ref } from 'vue'

const remark = ref('')
</script>

快捷短语

<template>
  <zx-order-remark 
    v-model="remark" 
    title="订单备注" 
    :quick-phrases="phrases"
    phrases-title="常用备注"
    @phrase-select="onPhraseSelect"
  />
</template>

<script setup>
import { ref } from 'vue'

const remark = ref('')
const phrases = [
  '尽快发货',
  '包装仔细一点',
  '送货上门',
  '工作日配送',
  '周末配送',
  '节假日不配送'
]

const onPhraseSelect = (phrase) => {
  console.log('选择了短语:', phrase)
}
</script>

表单验证

<template>
  <zx-order-remark 
    v-model="remark" 
    title="订单备注" 
    required
    :min-length="5"
    :max-length="100"
    :error-message="errorMsg"
    @validate="onValidate"
  />
</template>

<script setup>
import { ref } from 'vue'

const remark = ref('')
const errorMsg = ref('')

const onValidate = (result) => {
  if (!result.valid) {
    errorMsg.value = result.message
  } else {
    errorMsg.value = ''
  }
}
</script>

自定义样式

<template>
  <zx-order-remark 
    v-model="remark" 
    title="订单备注" 
    border="bottom"
    background-color="#f8f9fa"
    border-color="#409eff"
    border-radius="12rpx"
    font-size="16px"
    color="#303133"
    padding="32rpx"
  />
</template>

禁用状态

<template>
  <zx-order-remark 
    v-model="remark" 
    title="订单备注" 
    disabled
    :quick-phrases="phrases"
  />
</template>

API

Props

Events

Methods

通过 ref 可以获取到 OrderRemark 实例并调用实例方法。

Slots

暂无插槽。

样式变量

组件提供了下列 CSS 变量，可用于自定义样式。

注意事项

1. 组件基于 textarea 原生组件实现，在不同平台可能存在样式差异
2. 在小程序中，textarea 是原生组件，层级较高，使用时需注意遮挡问题
3. 快捷短语功能会直接替换当前输入内容，而不是追加
4. 字数限制是按字符数计算，包括中英文、数字、符号等
5. 验证功能需要配合 validate-on-blur 或手动调用 validate 方法

更新日志

v1.0.0

• 🎉 新增 OrderRemark 订单备注组件
• ✨ 支持字数统计和限制
• ✨ 支持快捷短语选择
• ✨ 支持表单验证
• ✨ 支持多种边框样式
• ✨ 支持多端兼容