37 KiB

Raw Permalink Blame History

wot-design-ui 组件完整指南

wot-design-ui 是一个专为移动端设计的 Vue 3 组件库，提供丰富的组件和强大的功能，支持微信小程序、支付宝小程序、H5 等多个平台。

基础组件

wd-button

按钮组件，用于触发操作，支持多种类型、尺寸和状态。

基础用法：

<!-- 基本按钮 -->
<wd-button customClass="flex-grow">默认按钮</wd-button>
<wd-button customClass="flex-grow" type="primary">主要按钮</wd-button>
<wd-button customClass="flex-grow" type="success">成功按钮</wd-button>
<wd-button customClass="flex-grow" type="warning">警告按钮</wd-button>
<wd-button customClass="flex-grow" type="error">危险按钮</wd-button>

<!-- 不同尺寸 -->
<wd-button customClass="flex-grow" size="small">小号按钮</wd-button>
<wd-button customClass="flex-grow" size="medium">中号按钮</wd-button>
<wd-button customClass="flex-grow" size="large">大号按钮</wd-button>

<!-- 特殊状态 -->
<wd-button customClass="flex-grow" disabled>禁用按钮</wd-button>
<wd-button customClass="flex-grow" loading>加载中</wd-button>
<wd-button customClass="flex-grow" plain>幽灵按钮</wd-button>
<wd-button customClass="flex-grow" block>块状按钮</wd-button>

<!-- 图标按钮 -->
<wd-button icon="search">搜索</wd-button>
<wd-button type="icon" icon="picture"></wd-button>

wd-icon

不需要使用，所有需要图标的地方都可以这样

wd-cell

单元格组件，列表中的单个展示项，可单独使用或与 cell-group 组合。

基础用法：

<!-- 单独使用 -->
<wd-cell title="标题文字" value="内容" />

<!-- 组合使用 -->
<wd-cell-group border>
  <wd-cell title="标题文字" value="内容" />
  <wd-cell title="标题文字" label="描述信息" value="内容" />
  <wd-cell title="标题文字" icon="setting" value="内容" is-link />
  <wd-cell title="跳转页面" is-link to="/pages/detail/index" />
</wd-cell-group>

<!-- 自定义内容 -->
<wd-cell title="开关">
  <wd-switch v-model="switchValue" />
</wd-cell>

wd-cell-group

单元格组，用于包装多个 cell 组件。

基础用法：

<wd-cell-group title="基础信息" border>
  <wd-cell title="姓名" value="张三" />
  <wd-cell title="手机号" value="13800138000" />
</wd-cell-group>

wd-tag

标签组件，用于标记和分类。

基础用法：

<!-- 基本标签 -->
<wd-tag>默认标签</wd-tag>
<wd-tag type="primary">主要标签</wd-tag>
<wd-tag type="success">成功标签</wd-tag>
<wd-tag type="warning">警告标签</wd-tag>
<wd-tag type="error">错误标签</wd-tag>

<!-- 特殊样式 -->
<wd-tag plain>朴素标签</wd-tag>
<wd-tag round>圆角标签</wd-tag>
<wd-tag closable @close="handleClose">可关闭</wd-tag>

<!-- 自定义颜色 -->
<wd-tag color="#7232dd">自定义颜色</wd-tag>

wd-badge

徽标组件，显示消息数量或状态点。

基础用法：

<!-- 数字徽标 -->
<wd-badge :value="5">
  <wd-button>按钮</wd-button>
</wd-badge>

<!-- 最大值限制 -->
<wd-badge :value="100" :max="99">
  <wd-button>按钮</wd-button>
</wd-badge>

<!-- 小红点 -->
<wd-badge is-dot>
  <wd-button>按钮</wd-button>
</wd-badge>

<!-- 独立使用 -->
<wd-badge :value="10" />

wd-card

卡片容器，用于包装内容。

基础用法：

<wd-card header="卡片标题">
  <view>卡片内容</view>
  <template #footer>
    <wd-button size="small">操作按钮</wd-button>
  </template>
</wd-card>

wd-divider

分割线组件，用于分隔内容。

基础用法：

<!-- 基本分割线 -->
<wd-divider />

<!-- 带文字的分割线 -->
<wd-divider>分割文字</wd-divider>

<!-- 不同位置的文字 -->
<wd-divider content-position="left">左侧文字</wd-divider>
<wd-divider content-position="right">右侧文字</wd-divider>

<!-- 虚线分割线 -->
<wd-divider dashed>虚线分割</wd-divider>

wd-gap

间距组件，提供空白间距。

基础用法：

<!-- 基本间距 -->
<wd-gap />

<!-- 自定义大小 -->
<wd-gap size="20px" />
<wd-gap size="40rpx" />

<!-- 自定义背景色 -->
<wd-gap size="30px" bg-color="#f5f5f5" />

布局组件

wd-layout

布局容器，提供基础的页面布局。

基础用法：

<wd-layout>
  <wd-header>头部</wd-header>
  <wd-main>主体内容</wd-main>
  <wd-footer>底部</wd-footer>
</wd-layout>

wd-grid

网格布局，用于展示同类信息。

基础用法：

<wd-grid :column-num="3" border>
  <wd-grid-item
    v-for="item in 6"
    :key="item"
    icon="picture"
    :text="`选项${item}`"
    @click="handleClick"
  />
</wd-grid>

<!-- 自定义内容 -->
<wd-grid :column-num="2">
  <wd-grid-item>
    <wd-icon name="home" size="28px" />
    <text>首页</text>
  </wd-grid-item>
</wd-grid>

wd-row / wd-col

栅格布局系统，基于24栅格。

基础用法：

<!-- 基础栅格 -->
<wd-row>
  <wd-col :span="12">col-12</wd-col>
  <wd-col :span="12">col-12</wd-col>
</wd-row>

<!-- 分栏间隔 -->
<wd-row :gutter="20">
  <wd-col :span="6">col-6</wd-col>
  <wd-col :span="6">col-6</wd-col>
  <wd-col :span="6">col-6</wd-col>
  <wd-col :span="6">col-6</wd-col>
</wd-row>

<!-- 偏移列 -->
<wd-row>
  <wd-col :span="6" :offset="6">偏移6列</wd-col>
</wd-row>

wd-sticky

粘性定位组件，滚动时可以固定在顶部。

基础用法：

<!-- 基础粘性定位 -->
<wd-sticky>
  <wd-button type="primary">粘性元素</wd-button>
</wd-sticky>

<!-- 自定义粘性距离 -->
<wd-sticky :offset-top="50">
  <wd-navbar title="粘性导航" />
</wd-sticky>

表单组件

wd-form

表单容器，提供数据验证和收集功能。

基础用法：

<template>
  <wd-form ref="form" :model="model" :rules="rules">
    <wd-cell-group border>
      <wd-input
        label="用户名"
        prop="username"
        v-model="model.username"
        placeholder="请输入用户名"
      />
      <wd-input
        label="密码"
        prop="password"
        type="password"
        v-model="model.password"
        placeholder="请输入密码"
      />
      <wd-picker
        label="城市"
        prop="city"
        :columns="cityOptions"
        v-model="model.city"
      />
    </wd-cell-group>
    <view class="footer">
      <wd-button type="primary" @click="submit" block>提交</wd-button>
    </view>
  </wd-form>
</template>

<script setup>
const form = ref()
const model = reactive({
  username: '',
  password: '',
  city: ''
})

const rules = {
  username: [
    { required: true, message: '请输入用户名' }
  ],
  password: [
    { required: true, message: '请输入密码' },
    { pattern: /^.{6,}$/, message: '密码至少6位' }
  ]
}

const submit = () => {
  form.value.validate().then(({ valid }) => {
    if (valid) {
      console.log('验证通过', model)
    }
  })
}
</script>

wd-input

输入框组件，支持多种输入类型和验证。

基础用法：

<!-- 基础输入框 -->
<wd-input v-model="value" placeholder="请输入内容" />

<!-- 不同类型 -->
<wd-input type="number" v-model="number" placeholder="数字输入" />
<wd-input type="password" v-model="password" placeholder="密码输入" />
<wd-input type="tel" v-model="phone" placeholder="手机号" />

<!-- 带标签的输入框 -->
<wd-input label="姓名" v-model="name" placeholder="请输入姓名" />

<!-- 功能增强 -->
<wd-input
  v-model="text"
  clearable
  show-word-limit
  :maxlength="20"
  placeholder="可清空，显示字数"
/>

<!-- 前后图标 -->
<wd-input
  v-model="search"
  prefix-icon="search"
  suffix-icon="scan"
  placeholder="搜索"
/>

<!-- 验证状态 -->
<wd-input
  v-model="error"
  label="错误状态"
  error
  placeholder="错误输入"
/>

wd-textarea

多行文本输入框。

基础用法：

<!-- 基础文本域 -->
<wd-textarea v-model="content" placeholder="请输入内容" />

<!-- 带标签和字数限制 -->
<wd-textarea
  label="备注"
  v-model="remark"
  :maxlength="200"
  show-word-limit
  placeholder="请输入备注信息"
/>

<!-- 自动调整高度 -->
<wd-textarea
  v-model="autoText"
  autosize
  placeholder="自动调整高度"
/>

<!-- 固定行数 -->
<wd-textarea
  v-model="fixedText"
  :rows="4"
  placeholder="固定4行"
/>

wd-picker

选择器组件，支持单列和多列选择。

基础用法：

<template>
  <!-- 单列选择 -->
  <wd-picker
    label="城市"
    :columns="cities"
    v-model="selectedCity"
    @confirm="handleConfirm"
  />

  <!-- 多列选择 -->
  <wd-picker
    label="时间"
    :columns="timeColumns"
    v-model="selectedTime"
  />

  <!-- 多级联动 -->
  <wd-picker
    label="地区"
    :columns="areaColumns"
    :column-change="handleAreaChange"
    v-model="selectedArea"
  />

  <!-- 自定义展示 -->
  <wd-picker
    :columns="options"
    v-model="value"
    :display-format="formatDisplay"
  />
</template>

<script setup>
const cities = ['北京', '上海', '广州', '深圳']
const selectedCity = ref('北京')

const timeColumns = [
  ['上午', '下午'],
  ['09:00', '10:00', '11:00', '14:00', '15:00']
]
const selectedTime = ref(['上午', '09:00'])

const formatDisplay = (items) => {
  return items.join(' - ')
}
</script>

wd-datetime-picker

日期时间选择器。

基础用法：

<!-- 日期选择 -->
<wd-datetime-picker
  label="日期"
  type="date"
  v-model="date"
/>

<!-- 时间选择 -->
<wd-datetime-picker
  label="时间"
  type="time"
  v-model="time"
/>

<!-- 日期时间选择 -->
<wd-datetime-picker
  label="日期时间"
  type="datetime"
  v-model="datetime"
/>

<!-- 年月选择 -->
<wd-datetime-picker
  label="年月"
  type="year-month"
  v-model="yearMonth"
/>

<!-- 自定义范围 -->
<wd-datetime-picker
  label="自定义范围"
  type="date"
  :min-date="new Date(2020, 0, 1)"
  :max-date="new Date(2025, 11, 31)"
  v-model="customDate"
/>

wd-calendar

日历选择器，支持多种选择模式。

基础用法：

<!-- 单日期选择 -->
<wd-calendar
  label="日期"
  v-model="singleDate"
  @confirm="handleDateConfirm"
/>

<!-- 多日期选择 -->
<wd-calendar
  label="多选日期"
  type="dates"
  v-model="multipleDates"
/>

<!-- 日期范围选择 -->
<wd-calendar
  label="日期范围"
  type="daterange"
  v-model="dateRange"
/>

<!-- 周选择 -->
<wd-calendar
  label="周选择"
  type="week"
  v-model="week"
/>

<!-- 月选择 -->
<wd-calendar
  label="月选择"
  type="month"
  v-model="month"
/>

<!-- 快捷选择 -->
<wd-calendar
  label="快捷选择"
  type="daterange"
  :show-confirm="false"
  v-model="quickDate"
/>

<!-- 自定义格式化 -->
<wd-calendar
  label="自定义格式"
  v-model="formatDate"
  :formatter="dateFormatter"
  :display-format="displayFormatter"
/>

wd-col-picker

多列选择器，支持级联选择。

基础用法：

<template>
  <wd-col-picker
    label="省市区"
    :columns="areaData"
    :column-change="handleAreaChange"
    v-model="selectedArea"
  />
</template>

<script setup>
const areaData = ref([
  [
    { label: '北京市', value: '110000' },
    { label: '广东省', value: '440000' }
  ]
])

const handleAreaChange = ({ selectedItem, resolve, finish }) => {
  // 根据选中项加载下级数据
  if (selectedItem.value === '110000') {
    resolve([
      { label: '东城区', value: '110101' },
      { label: '西城区', value: '110102' }
    ])
  } else {
    finish() // 没有下级数据
  }
}
</script>

wd-select-picker

单复选选择器。

基础用法：

<!-- 单选 -->
<wd-select-picker
  label="单选"
  :columns="options"
  v-model="singleValue"
/>

<!-- 多选 -->
<wd-select-picker
  label="多选"
  type="checkbox"
  :columns="options"
  v-model="multipleValue"
/>

<!-- 分组选择 -->
<wd-select-picker
  label="分组选择"
  :columns="groupOptions"
  v-model="groupValue"
/>

wd-checkbox

复选框组件。

基础用法：

<!-- 基础复选框 -->
<wd-checkbox v-model="checked">同意协议</wd-checkbox>

<!-- 复选框组 -->
<wd-checkbox-group v-model="checkedList">
  <wd-checkbox value="apple">苹果</wd-checkbox>
  <wd-checkbox value="banana">香蕉</wd-checkbox>
  <wd-checkbox value="orange">橙子</wd-checkbox>
</wd-checkbox-group>

<!-- 全选 -->
<wd-checkbox
  v-model="checkAll"
  :indeterminate="indeterminate"
  @change="handleCheckAllChange"
>
  全选
</wd-checkbox>

<!-- 禁用状态 -->
<wd-checkbox disabled>禁用选项</wd-checkbox>

<!-- 自定义形状 -->
<wd-checkbox shape="button" v-model="buttonCheck">
  按钮样式
</wd-checkbox>

wd-radio

单选框组件。

基础用法：

<!-- 基础单选框 -->
<wd-radio-group v-model="radioValue">
  <wd-radio value="1">选项一</wd-radio>
  <wd-radio value="2">选项二</wd-radio>
  <wd-radio value="3">选项三</wd-radio>
</wd-radio-group>

<!-- 按钮样式 -->
<wd-radio-group v-model="buttonValue" shape="button">
  <wd-radio value="large">大</wd-radio>
  <wd-radio value="medium">中</wd-radio>
  <wd-radio value="small">小</wd-radio>
</wd-radio-group>

<!-- 禁用选项 -->
<wd-radio-group v-model="disabledValue">
  <wd-radio value="1">正常选项</wd-radio>
  <wd-radio value="2" disabled>禁用选项</wd-radio>
</wd-radio-group>

<!-- 内联布局 -->
<wd-radio-group v-model="inlineValue" inline>
  <wd-radio value="1">选项1</wd-radio>
  <wd-radio value="2">选项2</wd-radio>
</wd-radio-group>

wd-switch

开关组件。

基础用法：

<!-- 基础开关 -->
<wd-switch v-model="switchValue" />

<!-- 自定义颜色 -->
<wd-switch
  v-model="colorSwitch"
  active-color="#13ce66"
  inactive-color="#ff4949"
/>

<!-- 自定义大小 -->
<wd-switch v-model="sizeSwitch" size="24px" />

<!-- 禁用状态 -->
<wd-switch v-model="disabledSwitch" disabled />

<!-- 异步控制 -->
<wd-switch
  v-model="asyncSwitch"
  :before-change="beforeChange"
/>

<!-- 自定义文案 -->
<wd-switch
  v-model="textSwitch"
  active-text="开启"
  inactive-text="关闭"
/>

wd-slider

滑块组件，用于在给定的范围内选择值。

基础用法：

<!-- 基础滑块 -->
<wd-slider v-model="sliderValue" />

<!-- 设置范围 -->
<wd-slider
  v-model="rangeValue"
  :min="0"
  :max="100"
  :step="10"
/>

<!-- 显示刻度 -->
<wd-slider
  v-model="markValue"
  :marks="marks"
  show-marks
/>

<!-- 范围选择 -->
<wd-slider
  v-model="doubleValue"
  range
/>

<!-- 垂直滑块 -->
<wd-slider
  v-model="verticalValue"
  vertical
  height="200px"
/>

<!-- 禁用状态 -->
<wd-slider v-model="disabledSlider" disabled />

wd-rate

评分组件。

基础用法：

<!-- 基础评分 -->
<wd-rate v-model="rateValue" />

<!-- 自定义星星数量 -->
<wd-rate v-model="customRate" :count="10" />

<!-- 允许半星 -->
<wd-rate v-model="halfRate" allow-half />

<!-- 自定义颜色 -->
<wd-rate
  v-model="colorRate"
  active-color="#ff9500"
  void-color="#c7c7c7"
/>

<!-- 只读状态 -->
<wd-rate v-model="readonlyRate" readonly />

<!-- 自定义图标 -->
<wd-rate
  v-model="iconRate"
  icon="heart"
  void-icon="heart-outline"
/>

<!-- 显示分数 -->
<wd-rate v-model="scoreRate" show-text />

wd-input-number

数字输入框，用于输入数字。

基础用法：

<!-- 基础数字输入 -->
<wd-input-number v-model="numberValue" />

<!-- 设置范围和步长 -->
<wd-input-number
  v-model="rangeNumber"
  :min="1"
  :max="10"
  :step="0.1"
/>

<!-- 精度控制 -->
<wd-input-number
  v-model="precisionNumber"
  :precision="2"
  :step="0.1"
/>

<!-- 禁用状态 -->
<wd-input-number v-model="disabledNumber" disabled />

<!-- 自定义大小 -->
<wd-input-number v-model="sizeNumber" size="large" />

<!-- 严格步数 -->
<wd-input-number
  v-model="strictNumber"
  :step="2"
  step-strictly
/>

wd-upload

文件上传组件，但不需要你使用它。我有更高级的封装，位于 src/components/FileUpload/FileUpload.vue

你可以直接使用

wd-search

搜索框组件。

基础用法：

<!-- 基础搜索框 -->
<wd-search v-model="searchValue" placeholder="请输入搜索关键词" />

<!-- 显示搜索按钮 -->
<wd-search
  v-model="searchText"
  show-action
  @search="handleSearch"
  @cancel="handleCancel"
/>

<!-- 自定义样式 -->
<wd-search
  v-model="customSearch"
  shape="round"
  background="#f2f2f2"
  @search="handleCustomSearch"
/>

<!-- 禁用状态 -->
<wd-search v-model="disabledSearch" disabled />

反馈组件

wd-toast

轻提示组件，用于消息通知、加载提示等。

基础用法：

<template>
  <wd-toast />
  <wd-button @click="showToast">显示提示</wd-button>
  <wd-button @click="showSuccess">成功提示</wd-button>
  <wd-button @click="showError">错误提示</wd-button>
  <wd-button @click="showLoading">加载提示</wd-button>
</template>

<script setup>
// 不需要导入 useToast
const toast = useToast()

const showToast = () => {
  toast.show('这是一条提示信息')
}

const showSuccess = () => {
  toast.success('操作成功')
}

const showError = () => {
  toast.error('操作失败，请重试')
}

const showLoading = () => {
  toast.loading('加载中...')
  setTimeout(() => {
    toast.close()
  }, 3000)
}

// 自定义配置
const showCustom = () => {
  toast.show({
    msg: '自定义提示',
    duration: 5000,
    position: 'top',
    iconClass: 'star'
  })
}
</script>

wd-message-box

消息弹框组件，用于确认操作、输入等场景。

基础用法：

<template>
  <wd-message-box />
  <wd-button @click="showAlert">警告框</wd-button>
  <wd-button @click="showConfirm">确认框</wd-button>
  <wd-button @click="showPrompt">输入框</wd-button>
</template>

<script setup>
// 不需要导入 useMessage
const messageBox = useMessage()

const showAlert = () => {
  messageBox.alert({
    title: '提示',
    msg: '这是一条警告信息'
  })
}

const showConfirm = () => {
  messageBox.confirm({
    title: '确认',
    msg: '确定要删除这条记录吗？'
  }).then(() => {
    console.log('用户确认')
  }).catch(() => {
    console.log('用户取消')
  })
}

const showPrompt = () => {
  messageBox.prompt({
    title: '输入',
    msg: '请输入您的姓名',
    inputPlaceholder: '请输入姓名'
  }).then(({ value }) => {
    console.log('输入的值:', value)
  })
}
</script>

wd-notify

通知栏组件，用于展示重要的全局消息。

基础用法：

<template>
  <wd-notify />
  <wd-button @click="showNotify">显示通知</wd-button>
</template>

<script setup>
// 不需要导入 useNotify
const notify = useNotify()

const showNotify = () => {
  notify.show({
    type: 'primary',
    message: '这是一条通知消息',
    duration: 3000
  })
}

// 不同类型的通知
const showSuccess = () => {
  notify.success('操作成功')
}

const showWarning = () => {
  notify.warning('警告信息')
}

const showError = () => {
  notify.error('错误信息')
}
</script>

弹出层组件，支持多种弹出位置和动画效果。

基础用法：

<template>
  <!-- 中央弹出 -->
  <wd-popup v-model="centerShow">
    <view class="popup-content">
      中央弹出内容
    </view>
  </wd-popup>

  <!-- 底部弹出 -->
  <wd-popup v-model="bottomShow" position="bottom">
    <view class="popup-content">
      底部弹出内容
    </view>
  </wd-popup>

  <!-- 左侧弹出 -->
  <wd-popup v-model="leftShow" position="left">
    <view class="popup-content">
      左侧弹出内容
    </view>
  </wd-popup>

  <!-- 顶部弹出 -->
  <wd-popup v-model="topShow" position="top">
    <view class="popup-content">
      顶部弹出内容
    </view>
  </wd-popup>

  <!-- 右侧弹出 -->
  <wd-popup v-model="rightShow" position="right">
    <view class="popup-content">
      右侧弹出内容
    </view>
  </wd-popup>

  <!-- 圆角弹窗 -->
  <wd-popup v-model="roundShow" round>
    <view class="popup-content">
      圆角弹窗
    </view>
  </wd-popup>

  <!-- 可关闭弹窗 -->
  <wd-popup v-model="closableShow" closable>
    <view class="popup-content">
      可关闭弹窗
    </view>
  </wd-popup>
</template>

<script setup>
const centerShow = ref(false)
const bottomShow = ref(false)
const leftShow = ref(false)
const topShow = ref(false)
const rightShow = ref(false)
const roundShow = ref(false)
const closableShow = ref(false)
</script>

wd-action-sheet

动作面板，从底部弹出的操作菜单。

基础用法：

<template>
  <wd-action-sheet
    v-model="show"
    :actions="actions"
    @select="handleSelect"
    @cancel="handleCancel"
  />

  <!-- 带取消按钮 -->
  <wd-action-sheet
    v-model="cancelShow"
    :actions="actions"
    cancel-text="取消"
    @select="handleSelect"
  />

  <!-- 自定义面板 -->
  <wd-action-sheet
    v-model="customShow"
    :panels="panels"
    @select="handlePanelSelect"
  />
</template>

<script setup>
const show = ref(false)
const cancelShow = ref(false)
const customShow = ref(false)

const actions = [
  { name: '选项一' },
  { name: '选项二' },
  { name: '选项三', color: '#ff4757' },
  { name: '禁用选项', disabled: true }
]

const panels = [
  {
    iconUrl: 'https://example.com/icon1.png',
    title: '微信'
  },
  {
    iconUrl: 'https://example.com/icon2.png',
    title: '微博'
  }
]

const handleSelect = ({ item, index }) => {
  console.log('选中:', item, index)
}

const handlePanelSelect = ({ item, index }) => {
  console.log('面板选中:', item, index)
}
</script>

wd-overlay

遮罩层组件。

基础用法：

<template>
  <wd-overlay v-model="overlayShow" @click="hideOverlay">
    <view class="overlay-content" @click.stop>
      点击遮罩关闭
    </view>
  </wd-overlay>
</template>

<script setup>
const overlayShow = ref(false)

const hideOverlay = () => {
  overlayShow.value = false
}
</script>

wd-status-tip

缺省页组件，用于显示空状态、网络错误等。

基础用法：

<!-- 空数据 -->
<wd-status-tip image="search" tip="暂无搜索结果" />

<!-- 网络错误 -->
<wd-status-tip image="network" tip="网络不给力">
  <wd-button @click="retry">重新加载</wd-button>
</wd-status-tip>

<!-- 自定义图片 -->
<wd-status-tip :image="customImage" tip="自定义状态">
  <wd-button type="primary">操作按钮</wd-button>
</wd-status-tip>

展示组件

wd-collapse

折叠面板，可以折叠/展开的内容区域。

基础用法：

<template>
  <wd-collapse v-model="activeNames">
    <wd-collapse-item name="1" title="标题1">
      <view>内容1</view>
    </wd-collapse-item>
    <wd-collapse-item name="2" title="标题2">
      <view>内容2</view>
    </wd-collapse-item>
    <wd-collapse-item name="3" title="标题3" disabled>
      <view>内容3</view>
    </wd-collapse-item>
  </wd-collapse>

  <!-- 手风琴模式 -->
  <wd-collapse v-model="accordionName" accordion>
    <wd-collapse-item name="1" title="手风琴1">
      <view>内容1</view>
    </wd-collapse-item>
    <wd-collapse-item name="2" title="手风琴2">
      <view>内容2</view>
    </wd-collapse-item>
  </wd-collapse>

  <!-- 自定义标题 -->
  <wd-collapse v-model="customNames">
    <wd-collapse-item name="1">
      <template #title>
        <view class="custom-title">
          <wd-icon name="star" />
          <text>自定义标题</text>
        </view>
      </template>
      <view>自定义内容</view>
    </wd-collapse-item>
  </wd-collapse>
</template>

<script setup>
const activeNames = ref(['1'])
const accordionName = ref('1')
const customNames = ref(['1'])
</script>

wd-notice-bar

通知栏，用于循环播放展示一组消息通知。

基础用法：

<!-- 基础通知栏 -->
<wd-notice-bar text="这是一条通知信息" />

<!-- 滚动播放 -->
<wd-notice-bar 
  text="这是一条很长的通知信息，会自动滚动播放"
  scrollable
/>

<!-- 可关闭 -->
<wd-notice-bar 
  text="这是一条可关闭的通知"
  closeable
  @close="handleClose"
/>

<!-- 带图标 -->
<wd-notice-bar 
  text="带图标的通知"
  left-icon="volume"
  @click="handleClick"
/>

<!-- 多行显示 -->
<wd-notice-bar 
  text="这是一条多行显示的通知信息，内容比较长，需要换行显示"
  :wrapable="true"
/>

<!-- 不同类型 -->
<wd-notice-bar text="普通通知" type="info" />
<wd-notice-bar text="警告通知" type="warning" />
<wd-notice-bar text="错误通知" type="error" />

wd-steps

步骤条，引导用户按照流程完成任务。

基础用法：

<template>
  <!-- 基础步骤条 -->
  <wd-steps :active="activeStep">
    <wd-step title="步骤一" content="步骤一的描述信息" />
    <wd-step title="步骤二" content="步骤二的描述信息" />
    <wd-step title="步骤三" content="步骤三的描述信息" />
    <wd-step title="步骤四" content="步骤四的描述信息" />
  </wd-steps>

  <!-- 垂直步骤条 -->
  <wd-steps :active="verticalStep" direction="vertical">
    <wd-step title="订单确认" content="2023-05-01 12:00" />
    <wd-step title="支付完成" content="2023-05-01 12:05" />
    <wd-step title="商品发货" content="2023-05-02 10:00" />
    <wd-step title="确认收货" content="待完成" />
  </wd-steps>

  <!-- 带图标的步骤条 -->
  <wd-steps :active="iconStep">
    <wd-step title="购物车" icon="cart" />
    <wd-step title="确认订单" icon="bag" />
    <wd-step title="支付" icon="pay" />
    <wd-step title="完成" icon="check" />
  </wd-steps>

  <!-- 错误状态 -->
  <wd-steps :active="errorStep">
    <wd-step title="步骤一" />
    <wd-step title="步骤二" status="error" />
    <wd-step title="步骤三" />
  </wd-steps>
</template>

<script setup>
const activeStep = ref(1)
const verticalStep = ref(2)
const iconStep = ref(2)
const errorStep = ref(1)
</script>

wd-tabs

标签页组件，用于在不同的内容区域之间进行切换。

基础用法：

<template>
  <!-- 基础标签页 -->
  <wd-tabs v-model="activeTab">
    <wd-tab title="标签一">
      <view class="tab-content">内容一</view>
    </wd-tab>
    <wd-tab title="标签二">
      <view class="tab-content">内容二</view>
    </wd-tab>
    <wd-tab title="标签三">
      <view class="tab-content">内容三</view>
    </wd-tab>
  </wd-tabs>

  <!-- 粘性定位 -->
  <wd-tabs v-model="stickyTab" sticky>
    <wd-tab title="标签一">内容一</wd-tab>
    <wd-tab title="标签二">内容二</wd-tab>
  </wd-tabs>

  <!-- 手势滑动 -->
  <wd-tabs v-model="swipeTab" swipeable>
    <wd-tab title="可滑动1">内容1</wd-tab>
    <wd-tab title="可滑动2">内容2</wd-tab>
  </wd-tabs>

  <!-- 切换动画 -->
  <wd-tabs v-model="animatedTab" animated>
    <wd-tab title="动画1">内容1</wd-tab>
    <wd-tab title="动画2">内容2</wd-tab>
  </wd-tabs>

  <!-- 禁用标签 -->
  <wd-tabs v-model="disabledTab">
    <wd-tab title="正常">正常内容</wd-tab>
    <wd-tab title="禁用" disabled>禁用内容</wd-tab>
  </wd-tabs>

  <!-- 带徽标 -->
  <wd-tabs v-model="badgeTab">
    <wd-tab title="消息" :badge-props="{ value: 5 }">
      消息内容
    </wd-tab>
    <wd-tab title="通知" :badge-props="{ isDot: true }">
      通知内容
    </wd-tab>
  </wd-tabs>
</template>

<script setup>
const activeTab = ref(0)
const stickyTab = ref(0)
const swipeTab = ref(0)
const animatedTab = ref(0)
const disabledTab = ref(0)
const badgeTab = ref(0)
</script>

wd-swiper

轮播图组件，用于展示一组图片或内容。

基础用法：

<template>
  <!-- 基础轮播 -->
  <wd-swiper>
    <wd-swiper-item v-for="item in images" :key="item">
      <image :src="item" mode="aspectFill" />
    </wd-swiper-item>
  </wd-swiper>

  <!-- 自动播放 -->
  <wd-swiper autoplay :interval="3000">
    <wd-swiper-item v-for="item in images" :key="item">
      <image :src="item" mode="aspectFill" />
    </wd-swiper-item>
  </wd-swiper>

  <!-- 垂直滚动 -->
  <wd-swiper direction="vertical" height="200px">
    <wd-swiper-item v-for="item in images" :key="item">
      <image :src="item" mode="aspectFill" />
    </wd-swiper-item>
  </wd-swiper>

  <!-- 自定义指示器 -->
  <wd-swiper
    :indicator-dots="true"
    indicator-color="rgba(0,0,0,0.3)"
    indicator-active-color="#fff"
  >
    <wd-swiper-item v-for="item in images" :key="item">
      <image :src="item" mode="aspectFill" />
    </wd-swiper-item>
  </wd-swiper>

  <!-- 循环播放 -->
  <wd-swiper circular>
    <wd-swiper-item v-for="item in images" :key="item">
      <image :src="item" mode="aspectFill" />
    </wd-swiper-item>
  </wd-swiper>
</template>

<script setup>
const images = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg'
]
</script>

wd-img

图片组件，增强版的 image 标签。

基础用法：

<!-- 基础图片 -->
<wd-img src="https://example.com/image.jpg" />

<!-- 设置宽高 -->
<wd-img 
  src="https://example.com/image.jpg"
  width="200px"
  height="200px"
/>

<!-- 填充模式 -->
<wd-img 
  src="https://example.com/image.jpg"
  mode="aspectFill"
  width="100%"
  height="200px"
/>

<!-- 圆形图片 -->
<wd-img 
  src="https://example.com/avatar.jpg"
  round
  width="80px"
  height="80px"
/>

<!-- 懒加载 -->
<wd-img 
  src="https://example.com/image.jpg"
  lazy-load
/>

<!-- 加载中提示 -->
<wd-img 
  src="https://example.com/image.jpg"
  loading-text="加载中..."
/>

<!-- 加载失败提示 -->
<wd-img 
  src="https://example.com/not-found.jpg"
  error-text="加载失败"
  @error="handleError"
/>

<!-- 预览功能 -->
<wd-img 
  src="https://example.com/image.jpg"
  preview-src-list="[imageUrl1, imageUrl2]"
  @preview="handlePreview"
/>

wd-progress

进度条组件，用于展示操作的当前进度。

基础用法：

<!-- 基础进度条 -->
<wd-progress :percentage="50" />

<!-- 自定义颜色 -->
<wd-progress :percentage="80" color="#ff4757" />

<!-- 显示百分比 -->
<wd-progress :percentage="60" show-text />

<!-- 自定义文本 -->
<wd-progress :percentage="40" show-text text="40%" />

<!-- 不同状态 -->
<wd-progress :percentage="100" status="success" />
<wd-progress :percentage="50" status="exception" />

<!-- 自定义高度 -->
<wd-progress :percentage="70" :stroke-width="8" />

<!-- 条纹动画 -->
<wd-progress :percentage="60" striped active />

wd-circle

环形进度条。

基础用法：

<!-- 基础环形进度条 -->
<wd-circle :percentage="75" />

<!-- 自定义大小和颜色 -->
<wd-circle 
  :percentage="60"
  :width="120"
  color="#ff4757"
/>

<!-- 显示文本 -->
<wd-circle :percentage="80" show-text />

<!-- 自定义文本 -->
<wd-circle :percentage="90">
  <text>90%</text>
</wd-circle>

<!-- 渐变色 -->
<wd-circle 
  :percentage="70"
  :color="{ '0%': '#108ee9', '100%': '#87d068' }"
/>

wd-table

表格组件，用于展示行列数据。

基础用法：

<template>
  <wd-table :data="tableData" :columns="columns" />
</template>

<script setup>
const tableData = [
  { name: '张三', age: 25, city: '北京' },
  { name: '李四', age: 30, city: '上海' },
  { name: '王五', age: 28, city: '广州' }
]

const columns = [
  { prop: 'name', label: '姓名', width: 100 },
  { prop: 'age', label: '年龄', width: 80 },
  { prop: 'city', label: '城市', width: 100 }
]
</script>

wd-pagination

分页组件。

基础用法：

<!-- 基础分页 -->
<wd-pagination 
  :current="currentPage"
  :total="100"
  @change="handlePageChange"
/>

<!-- 显示总数 -->
<wd-pagination 
  :current="currentPage"
  :total="100"
  show-total
/>

<!-- 每页条数选择器 -->
<wd-pagination 
  :current="currentPage"
  :total="100"
  :page-size="pageSize"
  show-size-changer
  @change="handlePageChange"
  @size-change="handleSizeChange"
/>

导航组件

下面的几个，如需了解详情，自己去查 doc/wot-design-ui/对应文件.md

导航栏组件，用于页面顶部导航。

wd-tabbar

底部标签栏，用于在不同页面之间进行切换。

wd-sidebar

侧边导航栏。

wd-index-bar

索引栏，用于长列表的快速定位。

wd-backtop

回到顶部组件。

基础用法：

<!-- 基础回到顶部 -->
<wd-backtop />

<!-- 自定义位置和样式 -->
<wd-backtop 
  :right="30"
  :bottom="100"
  :visibility-height="200"
/>

<!-- 自定义内容 -->
<wd-backtop>
  <view class="custom-backtop">
    <wd-icon name="arrow-up" />
    <text>顶部</text>
  </view>
</wd-backtop>

业务组件

wd-calendar-view

日历视图组件，用于展示日历界面。

wd-count-down

倒计时组件。

基础用法：

<!-- 基础倒计时 -->
<wd-count-down :time="60000" />

<!-- 自定义格式 -->
<wd-count-down 
  :time="3600000"
  format="HH:mm:ss"
/>

<!-- 毫秒级渲染 -->
<wd-count-down 
  :time="10000"
  format="ss:SSS"
  millisecond
/>

<!-- 自定义样式 -->
<wd-count-down :time="86400000">
  <template #default="{ timeData }">
    <span class="countdown-item">{{ timeData.days }}天</span>
    <span class="countdown-item">{{ timeData.hours }}时</span>
    <span class="countdown-item">{{ timeData.minutes }}分</span>
    <span class="countdown-item">{{ timeData.seconds }}秒</span>
  </template>
</wd-count-down>

<!-- 手动控制 -->
<wd-count-down 
  ref="countDown"
  :time="60000"
  :auto-start="false"
  @finish="handleFinish"
/>
<wd-button @click="start">开始</wd-button>
<wd-button @click="pause">暂停</wd-button>
<wd-button @click="reset">重置</wd-button>

wd-count-to

数字动画组件，用于数字递增动画效果。

下拉菜单组件。

基础用法：

<template>
  <wd-drop-menu>
    <wd-drop-menu-item 
      v-model="value1"
      :options="options1"
      title="排序"
    />
    <wd-drop-menu-item 
      v-model="value2"
      :options="options2"
      title="筛选"
    />
  </wd-drop-menu>

  <!-- 自定义内容 -->
  <wd-drop-menu>
    <wd-drop-menu-item title="自定义">
      <wd-cell title="选项一" />
      <wd-cell title="选项二" />
      <wd-cell title="选项三" />
    </wd-drop-menu-item>
  </wd-drop-menu>

  <!-- 禁用选项 -->
  <wd-drop-menu>
    <wd-drop-menu-item 
      v-model="value3"
      :options="options3"
      title="正常"
    />
    <wd-drop-menu-item 
      title="禁用"
      disabled
    />
  </wd-drop-menu>
</template>

<script setup>
const value1 = ref(0)
const value2 = ref(0)
const value3 = ref(0)

const options1 = [
  { text: '默认排序', value: 0 },
  { text: '价格从低到高', value: 1 },
  { text: '价格从高到低', value: 2 }
]

const options2 = [
  { text: '全部', value: 0 },
  { text: '新品', value: 1 },
  { text: '热销', value: 2 }
]

const options3 = [
  { text: '选项一', value: 0 },
  { text: '选项二', value: 1 }
]
</script>

wd-fab

悬浮操作按钮。

wd-floating-panel

浮动面板组件。

wd-img-cropper

图片裁剪组件。

wd-swipe-action

滑动操作组件，用于左滑显示操作按钮。

基础用法：

<!-- 基础滑动操作 -->
<wd-swipe-action>
  <template #content>
    <wd-cell title="单元格内容" />
  </template>
  <template #right>
    <wd-button type="error" @click="handleDelete">删除</wd-button>
  </template>
</wd-swipe-action>

<!-- 多个操作按钮 -->
<wd-swipe-action>
  <template #content>
    <wd-cell title="多操作" />
  </template>
  <template #right>
    <wd-button @click="handleEdit">编辑</wd-button>
    <wd-button type="warning" @click="handleShare">分享</wd-button>
    <wd-button type="error" @click="handleDelete">删除</wd-button>
  </template>
</wd-swipe-action>

<!-- 左右滑动 -->
<wd-swipe-action>
  <template #left>
    <wd-button type="success">标记</wd-button>
  </template>
  <template #content>
    <wd-cell title="左右滑动" />
  </template>
  <template #right>
    <wd-button type="error">删除</wd-button>
  </template>
</wd-swipe-action>

wd-sort-button

排序按钮组件。

基础用法：

<!-- 基础排序按钮 -->
<wd-sort-button 
  v-model="sortOrder"
  @change="handleSortChange"
>
  价格排序
</wd-sort-button>

<!-- 自定义排序状态 -->
<wd-sort-button 
  v-model="customSort"
  :options="sortOptions"
  @change="handleCustomSort"
>
  自定义排序
</wd-sort-button>

wd-text

文本组件，用于文本展示和处理。

基础用法：

<!-- 基础文本 -->
<wd-text>普通文本内容</wd-text>

<!-- 不同类型 -->
<wd-text type="primary">主要文本</wd-text>
<wd-text type="success">成功文本</wd-text>
<wd-text type="warning">警告文本</wd-text>
<wd-text type="error">错误文本</wd-text>

<!-- 不同大小 -->
<wd-text size="small">小号文本</wd-text>
<wd-text size="medium">中号文本</wd-text>
<wd-text size="large">大号文本</wd-text>

<!-- 文本省略 -->
<wd-text 
  :lines="2"
  text="这是一段很长的文本内容，超出指定行数时会自动省略显示"
/>

<!-- 可折叠文本 -->
<wd-text 
  :lines="3"
  expand-text="展开"
  collapse-text="收起"
  text="可折叠的长文本内容..."
/>

<!-- 选择器文本 -->
<wd-text selectable>可选择的文本内容</wd-text>

<!-- 文本装饰 -->
<wd-text decoration="underline">下划线文本</wd-text>
<wd-text decoration="line-through">删除线文本</wd-text>

37 KiB Raw Permalink Blame History Unescape Escape

wot-design-ui 组件完整指南

基础组件

wd-button

wd-icon

wd-cell

wd-cell-group

wd-tag

wd-badge

wd-card

wd-divider

wd-gap

布局组件

wd-layout

wd-grid

wd-row / wd-col

wd-sticky

表单组件

wd-form

wd-input

wd-textarea

wd-picker

wd-datetime-picker

wd-calendar

wd-col-picker

wd-select-picker

wd-checkbox

wd-radio

wd-switch

wd-slider

wd-rate

wd-input-number

wd-upload

wd-search

反馈组件

wd-toast

wd-message-box

wd-notify

wd-popup

wd-action-sheet

wd-overlay

wd-status-tip

展示组件

wd-collapse

wd-notice-bar

wd-steps

wd-tabs

wd-swiper

wd-img

wd-progress

wd-circle

wd-table

wd-pagination

导航组件

wd-navbar

wd-tabbar

wd-sidebar

wd-index-bar

wd-backtop

业务组件

wd-calendar-view

wd-count-down

wd-count-to

wd-drop-menu

wd-fab

wd-floating-panel

wd-img-cropper

wd-swipe-action

wd-sort-button

wd-text

37 KiB

Raw Permalink Blame History