OrderRemark 订单备注

用于提交订单前补充备注信息，支持快捷标签、自定义文案和事件回调。

演示

9:41

代码示例

<!-- 基本用法 -->
  <re-icon name="chevron-right" size="18px" color="#9ca3af"></re-icon>

<!-- 带有标签 -->
  <re-icon name="chevron-right" size="18px" color="#9ca3af"></re-icon>

<!-- 自定义文案 -->
  <re-icon name="chevron-right" size="18px" color="#9ca3af"></re-icon>

<!-- 事件演示 -->
  <re-icon name="chevron-right" size="18px" color="#9ca3af"></re-icon>
  <re-order-remark :visible="show" :remark="mark" @update:visible="onShowChange" @close="onClose" @submit="onSubmit1" />
  <re-order-remark :visible="show2" :remark="mark2" :maxLength="100" :recommendTags="tagArr" @update:visible="onShow2Change" @close="onClose" @submit="onSubmit2" />
  <re-order-remark :visible="show3" :remark="mark3" :recommendTags="tagArr" submitText="提交" placeholderText="请填写备注信息" title="备注信息" tagTitle="快捷选择" @update:visible="onShow3Change" @close="onClose" @submit="onSubmit3" />
  <re-order-remark :visible="show4" :remark="mark4" :recommendTags="tagArr" @open="onOpen" @update:visible="onShow4Change" @click-overlay="onClickOverlay" @click-tag="onClickTag" @change="onChange" @submit="onSubmit4" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-order-remark />。

API

OrderRemark Props

名称	类型	默认值	描述	必传
visible	`boolean`	false	是否显示备注弹窗	N
remark	`string`	""	当前备注信息	N
maxLength	`number`	50	备注最大长度	N
closeOnClickOverlay	`boolean`	true	点击遮罩是否关闭	N
placeholderText	`string`	"请输入备注内容"	输入框占位符	N
title	`string`	"订单备注"	标题	N
tagTitle	`string`	"推荐标签"	标签标题	N
submitText	`string`	"确定"	提交按钮文案	N
recommendTags	`Array<string>`		推荐标签	N

OrderRemark Events

名称	参数	描述
open	-	打开时触发
click-overlay	remark: string	-
close	remark: string	关闭时触发
submit	remark: string	提交时触发
change	remark: string	值变化时触发
click-tag	tag: string	-
update:visible	value: boolean	显隐变化时触发

OrderRemark Slots

名称	描述
-	-

OrderCancelPanel 订单取消面板

订单取消原因选择面板，支持提示文案、其它原因输入和勾选确认等业务场景。

ProductFeed 商品 Feed 流

商品流列表组件，支持单列双列布局、刷新场景和滚动加载更多。

内容锚点

演示
代码示例
引入
API