docs: ✏️ 文档修复至rate组件

docs/component/picker.md

@@ -7,24 +7,19 @@ Picker 组件为 popup 和 pickerView 的组合。
 
 ## 基本用法
 
-`columns` 设置选项数据源，选项可以为字符串，也可以为对象，如果为对象则默认取 `label` 属性为选项内容进行渲染。`label` 设置左侧文本内容，`value` 设置选中项的值。label 可以不传。可以通过 `label-width` 设置标题宽度，默认为 '33%'，监听 `bind:confirm` 事件，获取选中值，传出一个 evnet 对象， `event.detail = { value, selectedItems }`，value 为绑定值，selectedItems 为选中选项的对象。
+`columns` 设置选项数据源，选项可以为字符串，也可以为对象，如果为对象则默认取 `label` 属性为选项内容进行渲染。`label` 设置左侧文本内容，`v-model` 设置选中项的值。label 可以不传。可以通过 `label-width` 设置标题宽度，默认为 '33%'，监听 `confirm` 事件，获取选中值，传出一个 evnet 对象， `event = { value, selectedItems }`，value 为绑定值，selectedItems 为选中选项的对象。
 
 ```html
-<wd-picker columns="{{columns1}}" label="单列选项" value="{{value}}" bind:confirm="handleConfirm" />
+<wd-picker :columns="columns" label="单列选项" v-model="value" @confirm="handleConfirm" />
 ```
 
 ```typescript
-Page({
+const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
-  data: {
+const value = ref('选项1')
-    columns: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'],
+
-    value: ''
+function handleConfirm({ value }) {
-  },
+  value.value = value
-  handleConfirm (event) {
+}
-    this.setData({
-      value: event.detail.value
-    })
-  }
-})
 ```
 
 当 `columns` 选项为对象时，其数据结构为：
@@ -40,15 +35,13 @@ Page({
 设置 `disabled` 属性。
 
 ```html
-<wd-picker columns="{{columns}}" label="禁用" value="{{value}}" disabled />
+<wd-picker :columns="columns" label="禁用" v-model="value" disabled />
 ```
 ```typescript
-Page({
+const value = ref('选项3')
-  data: {
+
-    columns: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'],
+const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
-    value: '选项3'
+
-  }
-})
 ```
 
 ## 只读
@@ -56,7 +49,7 @@ Page({
 设置 `readonly` 属性。
 
 ```html
-<wd-picker columns="{{columns}}" label="只读" value="{{value}}" readonly />
+<wd-picker :columns="columns" label="只读" v-model="value" readonly />
 ```
 
 ## 文案标题
@@ -64,14 +57,14 @@ Page({
 设置 `title` 属性。
 
 ```html
-<wd-picker label="标题" columns="{{columns7}}" title="文案标题"/>
+<wd-picker label="标题" :columns="columns" title="文案标题"/>
 ```
 ## 加载中
 
 设置 `loading` 属性。
 
 ```html
-<wd-picker-view columns="{{columns}}" loading />
+<wd-picker-view :columns="columns" loading />
 ```
 
 ## 多列
@@ -79,18 +72,15 @@ Page({
 `columns` 属性设置为二维数组，`value` 为数组。
 
 ```html
-<wd-picker columns="{{columns}}" label="多列" value="{{value}}" />
+<wd-picker :columns="columns" label="多列" v-model="value" />
 ```
 ```typescript
-Page({
+const value = ref(['中南大学', '软件工程'])
-  data: {
+
-   value: ['中南大学', '软件工程'],
+const columns = ref([
-   columns: [
   ['中山大学', '中南大学', '华南理工大学'],
   ['计算机科学与技术', '软件工程', '通信工程', '法学', '经济学']
-   ],
+])
-  }
-})
 ```
 
 ## 多级联动
@@ -101,11 +91,11 @@ Page({
 
 ```html
 <wd-picker
-  columns="{{columns}}"
+  :columns="columns"
   label="多列联动"
-  value="{{value}}"
+  v-model="value"
-  column-change="{{onChangeDistrict}}"
+  :column-change="onChangeDistrict"
-  display-format="{{displayFormat}}"
+  :display-format="displayFormat"
  />
 ```
 
@@ -121,34 +111,30 @@ const district = {
   '440400': [{ label: '香洲区', value: '440402' }, { label: '斗门区', value: '440403' }, { label: '金湾区', value: '440404' }],
   '440500': [{ label: '龙湖区', value: '440507' }, { label: '金平区', value: '440511' }]
 }
-Page({
-  data: {
-    value: ['110000', '110100', '110102'],
-    columns: [
-      district[0],
-      district[district[0][0].value],
-      district[district[district[0][0].value][0].value]
-    ],
 
-    onChangeDistrict (pickerView, value, columnIndex, resolve) {
+const value = ref(['110000', '110100', '110102'])
+
+const columns = ref([district[0], district[district[0][0].value], district[district[district[0][0].value][0].value]])
+
+const onChangeDistrict = (pickerView, value, columnIndex, resolve) => {
   const item = value[columnIndex]
   if (columnIndex === 0) {
     pickerView.setColumnData(1, district[item.value])
     pickerView.setColumnData(2, district[district[item.value][0].value])
-        return
   } else if (columnIndex === 1) {
     pickerView.setColumnData(2, district[item.value])
   }
   resolve()
-    },
+}
 
-    displayFormat (items) {
+const displayFormat = (items) => {
-      return items.map(item => {
+  return items
+    .map((item) => {
       return item.label
-      }).join('-')
+    })
-    }
+    .join('-')
-  }
+}
-})
+
 ```
 
 ## 选择器大小
@@ -156,7 +142,7 @@ Page({
 通过设置 `size` 修改选择器大小，将 `size` 设置为 'large' 时字号为 16px。
 
 ```html
-<wd-picker label="单列选项" size="large" value="{{value}}" columns="{{columns}}" />
+<wd-picker label="单列选项" size="large" v-model="value" :columns="columns" />
 ```
 
 ## 必填属性
@@ -164,7 +150,7 @@ Page({
 设置 `required` 属性，展示必填样式。
 
 ```html
-<wd-picker label="必填属性" error columns="{{columns}}" value="{{value}}" required/>
+<wd-picker label="必填属性" error :columns="columns" v-model="value" required/>
 ```
 
 ## 错误状态
@@ -172,7 +158,7 @@ Page({
 设置 `error` 属性，选择器的值显示为红色。
 
 ```html
-<wd-picker label="单列选项" error columns="{{columns}}" value="{{value}}"/>
+<wd-picker label="单列选项" error :columns="columns" v-model="value"/>
 ```
 
 ## 值靠右展示
@@ -180,7 +166,7 @@ Page({
 设置 `align-right` 属性，选择器的值靠右展示。
 
 ```html
-<wd-picker label="单列选项" align-right columns="{{columns}}" value="{{value}}"/>
+<wd-picker label="单列选项" align-right :columns="columns" v-model="value"/>
 ```
 
 ## 确定前校验
@@ -188,37 +174,48 @@ Page({
 设置 `before-confirm` 函数，在用户点击`确定`按钮时，会执行 `before-confirm` 函数，并传入 `value` 、 `resolve` 和 `picker` 参数，可以对 `value` 进行校验，并通过 `resolve` 函数告知组件是否确定通过，`resolve` 接受1个 boolean 值，`resolve(true)` 表示选项通过，`resolve(false)` 表示选项不通过，不通过时不会关闭 `picker`弹窗。可以通过 `picker` 参数直接设置 `loading`、`columns` 等属性。
 
 ```html
-<wd-picker label="before-confirm" columns="{{columns}}" value="{{value}}" before-confirm="{{beforeConfirm}}" bind:confirm="handleConfirm" />
+<wd-toast />
+
+<wd-picker label="before-confirm" :columns="columns" v-model="value" :before-confirm="beforeConfirm" @confirm="handleConfirm" />
 ```
 
 ```typescript
-Page({
+import { useToast } from '@/uni_modules/wot-design-uni'
-  data: {
+
-    columns: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'],
+const toast = useToast()
-    value: '',
+
-    beforeConfirm: function (value, resolve, picker) {
+const beforeConfirm = (value, resolve, picker) => {
-      picker.setData({
+  picker.setLoading(true)
-        loading: true
-      })
   setTimeout(() => {
-        picker.setData({
+    picker.setLoading(false)
-          loading: false
-        })
     if (['选项2', '选项3'].indexOf(value) > -1) {
       resolve(false)
-          Toast.error('选项校验不通过，请重新选择')
+      toast.error('选项校验不通过，请重新选择')
     } else {
       resolve(true)
     }
   }, 2000)
+}
+
+const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
+const value = ref('')
+
+const beforeConfirm = (value, resolve, picker) => {
+  picker.setLoading(true)
+  setTimeout(() => {
+    picker.setLoading(false)
+    if (['选项2', '选项3'].indexOf(value) > -1) {
+      resolve(false)
+      toast.error('选项校验不通过，请重新选择')
+    } else {
+      resolve(true)
     }
-  },
+  }, 2000)
-  handleConfirm (event) {
+}
-    this.setData({
+
-      value: event.detail.detail
+function handleConfirm({ value }) {
-    })
+  value.value = value
-  }
+}
-})
 ```
 
 ## 唤起项插槽
@@ -226,7 +223,7 @@ Page({
 开启 `use-default-slot` ，设置默认插槽修改唤起picker组件的形式。
 
 ```html
-<wd-picker columns="{{columns}}" value="{{value}}" use-default-slot>
+<wd-picker :columns="columns" v-model="value" use-default-slot>
   <wd-button>插槽唤起</wd-button>
 </wd-picker>
 ```
@@ -235,7 +232,7 @@ Page({
 
 | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
 |-----|------|-----|-------|-------|---------|
-| value | 选中项，如果为多列选择器，则其类型应为数组 | string / number / boolean / array | - | - |
+| v-model	 | 选中项，如果为多列选择器，则其类型应为数组 | string / number / boolean / array | - | - |
 | columns | 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器 | array | - | - | - |
 | loading | 加载中 | boolean | - | false | - |
 | loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | string | - | #4D80F0 | - |
@@ -261,17 +258,17 @@ Page({
 | before-confirm | 确定前校验函数，接收 (value, resolve, picker) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数 | function | - | - | - |
 | name | form 表单中的字段名 | string | - | - | - |
 | close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
-| z-index | 弹窗层级 | number | - | 15 | 2.3.0 |
+| z-index | 弹窗层级 | number | - | 15 | - |
-| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | 2.3.0 |
+| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |
-| ellipsis | 是否超出隐藏 | boolean | - | false | 2.3.0 |
+| ellipsis | 是否超出隐藏 | boolean | - | false | - |
 
 ## Events
 
 | 事件名称 | 说明 | 参数 | 最低版本 |
 |--------|------|-----|---------|
-| bind:confirm | 点击右侧按钮触发 | event.detail = { value, selectedItems }， value 为选中值(多列则为数组)，selectedItems为选中项(多列则为数组) | - |
+| confirm | 点击右侧按钮触发 | event.detail = { value, selectedItems }， value 为选中值(多列则为数组)，selectedItems为选中项(多列则为数组) | - |
-| bind:cancel | 点击左侧按钮触发 | - | - |
+| cancel | 点击左侧按钮触发 | - | - |
-| bind:open | 打开选择器弹出层时触发 | - | - |
+| open | 打开选择器弹出层时触发 | - | - |
 
 ## Methods
 

docs/component/pickerView.md

@@ -7,18 +7,17 @@
 单列选择器，给 `columns` 传入一个数值数组，设置 `value` 绑定值。选项可以为字符串，也可以为对象，如果为对象则默认取 `label` 属性为选项内容进行渲染，`value` 获取的值为 `value` 属性的值，如果 `value` 属性不存在，则取 `label` 的值。
 
 ```html
-<wd-picker-view columns="{{columns}}" value="{{value}}" bind:change="onChange" />
+<wd-picker-view :columns="columns" v-model="value" @change="onChange" />
 ```
 ```typescript
-Page({
+import { useToast } from '@/uni_modules/wot-design-uni'
-  data: {
+const toast = useToast()
-    columns: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'],
+const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
-    value: ''
+const value3 = ref<string>('')
-  },
+function onChange({picker, value, index}) {
-  onChange (picker, value, index) {
+  toast.show(`当前选中项: ${value}, 下标: ${index}`)
-    Toast(`当前选中项: ${value}, 下标: ${index}`)
+}
-  }
+
-})
 ```
 
 当 `columns` 选项为对象时，其数据结构为：
@@ -34,15 +33,11 @@ Page({
 选项可以为对象，设置 `disabled` 属性。
 
 ```html
-<wd-picker-view columns="{{columns}}" value="{{value}}" disabled />
+<wd-picker-view :columns="columns" v-model="value" disabled />
 ```
 ```typescript
-Page({
+const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
-  data: {
+const value = ref('选项3')
-    columns: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'],
-    value: '选项3'
-  }
-})
 ```
 
 ## 加载中
@@ -50,35 +45,31 @@ Page({
 设置 `loading` 属性。
 
 ```html
-<wd-picker-view columns="{{columns}}" loading />
+<wd-picker-view :columns="columns" loading />
 ```
 ## 多列
 
 `columns` 属性设置为二维数组，`value` 为数组。
 
 ```html
-<wd-picker-view columns="{{columns}}" value="{{value}}" />
+<wd-picker-view :columns="columns" v-model="value" />
 ```
 ```typescript
-Page({
+const value = ref(['中南大学', '软件工程'])
-  data: {
+
-   value: ['中南大学', '软件工程'],
+const columns = ref([
-   columns: [
   ['中山大学', '中南大学', '华南理工大学'],
   ['计算机科学与技术', '软件工程', '通信工程', '法学', '经济学']
-   ],
+])
-  }
+
-})
 ```
 
 ## 多级联动
 
 传入 `column-change` 属性，其类型为 `function`，接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源，当修改完成后需要执行 `resolve()` 告知组件修改完成以继续执行，如果 `column-change` 包含异步操作，也可以使组件按照异步顺序进行执行。
 
-> resolve 参数为 1.4.0 添加，每次修改完后都需要调用 resolve() 通知组件。
-
 ```html
-<wd-picker-view columns="{{columns}}" value="{{value}}" column-change="{{onChangeDistrict}}" />
+<wd-picker-view :columns="columns" v-model="value" :column-change="onChangeDistrict" />
 ```
 
 ```typescript
@@ -93,16 +84,12 @@ const district = {
   '440400': [{ label: '香洲区', value: '440402' }, { label: '斗门区', value: '440403' }, { label: '金湾区', value: '440404' }],
   '440500': [{ label: '龙湖区', value: '440507' }, { label: '金平区', value: '440511' }]
 }
-Page({
-  data: {
-    value: ['110000', '110100', '110102'],
-    columns: [
-      district[0],
-      district[district[0][0].value],
-      district[district[district[0][0].value][0].value]
-    ],
 
-    onChangeDistrict (pickerView, value, columnIndex, resolve) {
+const value = ref(['110000', '110100', '110102'])
+const columns = ref([district[0], district[district[0][0].value], district[district[district[0][0].value][0].value]])
+
+
+const onChangeDistrict = (pickerView, value, columnIndex, resolve) => {
   const item = value[columnIndex]
   if (columnIndex === 0) {
     pickerView.setColumnData(1, district[item.value])
@@ -111,9 +98,7 @@ Page({
     pickerView.setColumnData(2, district[item.value])
   }
   resolve()
-    }
+}
-  }
-})
 ```
 
 
@@ -121,7 +106,7 @@ Page({
 
 | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
 |-----|------|-----|-------|-------|---------|
-| value | 选中项，如果为多列选择器，则其类型应为数组 | string / number / boolean / array | - | - | - |
+| v-model | 选中项，如果为多列选择器，则其类型应为数组 | string / number / boolean / array | - | - | - |
 | columns | 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器 | array | - | - | - |
 | loading | 加载中 | boolean | - | false | - |
 | loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | string | - | #4D80F0 | - |
@@ -144,9 +129,9 @@ Page({
 
 | 事件名称 | 说明 | 参数 | 最低版本 |
 |--------|------|------|--------|
-| bind:change | 选项值修改时触发 | event.detail = { value, picker, index }, 单列: picker实例, 选中项值, 选中项下标; 多列: picker实例, 所有列选中项值, 当前列的下标 | - |
+| change | 选项值修改时触发 | event = { value, picker, index }, 单列: picker实例, 选中项值, 选中项下标; 多列: picker实例, 所有列选中项值, 当前列的下标 | - |
-| bind:pickstart | 当滚动选择开始时候触发事件 | - | - |
+| pickstart | 当滚动选择开始时候触发事件 | - | - |
-| bind:pickend | 当滚动选择结束时候触发事件 | - | - |
+| pickend | 当滚动选择结束时候触发事件 | - | - |
 
 ## 外部样式类
 

docs/component/popover.md

@@ -4,39 +4,34 @@
 
 常用于展示提示信息。
 
-
 ## 基本用法
 
 Popover 的属性与 [Tooltip](/#/components/tooltip) 很类似，因此对于重复属性，请参考 [Tooltip](/#/components/tooltip) 的文档，在此文档中不做详尽解释。
 
-因为小程序组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 popover ，建议引入组件库的 clickoutside 函数（会关闭所有 dropmenu、popover、toast、swipeAction），在页面的根元素上监听点击事件的冒泡。
+因为小程序组件无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 popover ，建议引入组件库的 clickOut 函数（会关闭所有 dropmenu、popover、toast、swipeAction），在页面的根元素上监听点击事件的冒泡。
 
 :::warning
-如果存在用户手动点击 popover 以外某个地方如按钮弹出 popover 的场景，则需要在点击的元素（在这里上按钮）加上 catchtap 阻止事件冒泡到根元素上，避免触发 clickoutside 把要手动打开的 popover 关闭了。
+如果存在用户手动点击 popover 以外某个地方如按钮弹出 popover 的场景，则需要在点击的元素（在这里上按钮）加上 click 阻止事件冒泡到根元素上，避免触发 clickoutside 把要手动打开的 popover 关闭了。
 :::
 
 ```html
-<view catchtap="clickoutside">
+<view @click="clickoutside">
-  <wd-popover show="{{show}}" content="这是一段信息。" bind:change="handleChange">
+  <wd-popover v-model:show="show" content="这是一段信息。" @change="handleChange">
-    <wd-button >点击展示</wd-button>
+    <wd-button>点击展示</wd-button>
   </wd-popover>
 </view>
 ```
 
 ```typescript
-import clickoutside from '/wot-design/common/clickoutside'
+import { clickOut } from '@/uni_modules/wot-design-uni'
 
-Page({
+function clickoutside() {
-  data: {
+  clickOut.closeOutside()
-    show: false
+}
-  },
+const show = ref<boolean>(false)
-
+function handleChange1({ show }) {
-  handleChange (event) {
+  console.log(show)
-    this.setData({ show: event.detail.show })
+}
-  },
-
-  clickoutside: clickoutside
-})
 ```
 
 ## 模式 mode
@@ -44,6 +39,7 @@ Page({
 使用 `mode` 属性控制当前文字提示的展示模式。`mode` 可选参数为 `normal` / `menu`：
 
 - **normal**（普通文字模式）:
+
   - 当 `mode` 处于默认状态，`content` 属性传入要显示的 `String` 字符串。
 
 - **menu**（列表模式）:
@@ -53,23 +49,26 @@ Page({
 列表模式下 `content` 数组内对象的数据结构：
 
 | 键名                                  | 说明   | 类型   | 是否必填 | 最低版本 |
-|-----|------|-----|---------|--------|
+| ------------------------------------- | ------ | ------ | -------- | -------- |
 | content                               | 选项名 | string | 是       | -        |
 | iconClass（不设置该属性时只展示标题） | 选项值 | string | 否       | -        |
 
 **注意：iconClass 属性值为组件库内部的 icon 图标名。**
 
 ```html
-<wd-popover show="{{show}}" mode="menu" content="{{ menu }}" bind:menu-click="link" bind:change="handleChange">
+<wd-popover v-model:show="show" mode="menu" :content="menu" @menu-click="link" @change="handleChange">
-  <wd-button >列表</wd-button>
+  <wd-button>列表</wd-button>
 </wd-popover>
 ```
 
 ```typescript
-Page({
+import { clickOut, useToast } from '@/uni_modules/wot-design-uni'
-  data: {
+
-    show: false,
+const toast = useToast()
-    menu: [
+
+const show = ref<boolean>(false)
+
+const menu = ref<Array<Record<string, any>>>([
   {
     iconClass: 'read',
     content: '全部标记已读'
@@ -86,16 +85,11 @@ Page({
     iconClass: 'subscribe',
     content: '消息异常检测'
   }
-    ]
+])
-  },
+
-  link (param) {
+function link(e) {
-    const data = param.detail.item
+  toast.show('选择了' + e.item.content)
-    Toast('选择了' + data.content)
+}
-  },
-  handleChange (event) {
-    this.setData({ show: event.detail.show })
-  }
-})
 ```
 
 ## 嵌套信息
@@ -104,15 +98,13 @@ Page({
 
 ```html
 <wd-popover use-content-slot>
-  <view class="pop-content" slot="content">
+  <template #content>
-    这是一段自定义样式的内容。
+    <view class="pop-content">这是一段自定义样式的内容。</view>
-  </view>
+  </template>
-  <wd-button>点击展示</wd-button>
+  <wd-button data-id="pop2">点击展示</wd-button>
 </wd-popover>
 ```
 
-小程序中组件插槽内部样式不生效，因此需要在外手动设置样式，在content插槽使用过程中，插槽最外层样式需要添加 `position: relative;z-index: 500;border-radius: 4px;` 保证位置不受影响，其余样式可随意添加。
-
 ```scss
 .pop-content {
   /* 必填 开始 */
@@ -126,15 +118,14 @@ Page({
   padding: 10px;
   width: 150px;
 }
-
 ```
 
 ## Popover Attributes
 
 | 参数          | 说明                                       | 类型                                                         | 可选值                                                                                                                          | 默认值 | 最低版本 |
-|-----|------|-----|-------|-------|---------|
+| ------------- | ------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- |
 | value         | 手动状态是否可见                           | boolean                                                      | -                                                                                                                               | false  | -        |
-| content | 显示的内容，也可以通过 `slot#content` 传入 | string/array（当模式为菜单模式时，content属性格式为Array） | - | - | - |
+| content       | 显示的内容，也可以通过 `slot#content` 传入 | string/array（当模式为菜单模式时，content 属性格式为 Array） | -                                                                                                                               | -      | -        |
 | mode          | 当前显示的模式，决定内容的展现形式         | string                                                       | normal（普通模式）/ menu（菜单模式）                                                                                            | normal | -        |
 | placement     | popover 的出现位置                         | string                                                       | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | bottom | -        |
 | visible-arrow | 是否显示 popover 箭头                      | boolean                                                      | -                                                                                                                               | true   | -        |
@@ -144,29 +135,29 @@ Page({
 ## Slot
 
 | name    | 说明                     | 最低版本 |
-|------|-----|---------|
+| ------- | ------------------------ | -------- |
 | content | 多行内容或用户自定义样式 | -        |
 
 ## Events
 
 | 事件名称       | 说明                        | 回调参数          | 最低版本 |
-|---------|-----| --------|--------|
+| -------------- | --------------------------- | ----------------- | -------- |
-| bind:open | 显示时触发 | - | - |
+| open      | 显示时触发                  | -                 | -        |
-| bind:close | 隐藏时触发 | - | - |
+| close     | 隐藏时触发                  | -                 | -        |
-| bind:change | pop显隐值变化时触发 | - | - |
+| change    | pop 显隐值变化时触发        | -                 | -        |
-| bind:menuclick | menu 模式下点击某一选项触发 |  `{ item, index }`  | - |
+| menuclick | menu 模式下点击某一选项触发 | `{ item, index }` | -        |
 
 ## Methods
 
 | 方法名称 | 说明             | 参数 | 最低版本 |
-|---------|-----|-----|---------|
+| -------- | ---------------- | ---- | -------- |
 | open     | 打开文字提示弹框 | -    | -        |
 | close    | 关闭文字提示弹框 | -    | -        |
 
 ## Popover 外部样式类
 
 | 类名         | 说明         | 最低版本 |
-|-----|------|--------|
+| ------------ | ------------ | -------- |
 | custom-class | 根结点样式   | -        |
 | custom-arrow | 尖角样式     | -        |
 | custom-pop   | 文字提示样式 | -        |

docs/component/popup.md

@@ -5,10 +5,10 @@
 
 ## 基本用法
 
-通过 `show` 属性设置显示隐藏，监听 `bind:close` 事件修改 `show`。
+`v-model` 为绑定值，表示是否展示弹出层。
 
 ```html
-<wd-popup show="{{ show }}" custom-style="padding: 30px 40px;" bind:close="handleClose">内容</wd-popup>
+<wd-popup v-model="show" custom-style="padding: 30px 40px;" @close="handleClose">内容</wd-popup>
 ```
 
 ## 弹出位置
@@ -16,7 +16,7 @@
 设置 `position`，默认为 'center'，可选值 'top', 'right', 'bottom', 'left'。
 
 ```html
-<wd-popup show="{{ show }}" position="top" custom-style="height: 200px;" bind:close="handleClose"></wd-popup>
+<wd-popup v-model="show" position="top" custom-style="height: 200px;" @close="handleClose"></wd-popup>
 ```
 
 ## 关闭按钮
@@ -24,14 +24,14 @@
 设置 `closable` 属性。
 
 ```html
-<wd-popup show="{{ show }}" position="bottom" closable custom-style="height: 200px;" bind:close="handleClose"></wd-popup>
+<wd-popup v-model="show" position="bottom" closable custom-style="height: 200px;" @close="handleClose"></wd-popup>
 ```
 
 ## Attributes
 
 | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
 |-----|-----|------|-------|-------|---------|
-| show | 弹出层是否显示 | boolean | - | - | - |
+| v-model | 弹出层是否显示 | boolean | - | - | - |
 | position | 弹出位置 | string | center / top / right / bottom / left | center | - |
 | closable | 关闭按钮 | boolean | - | false | - |
 | close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
@@ -42,20 +42,20 @@
 | modal-style | 自定义modal蒙层样式 | string | - | - | - |
 | hide-when-close | 是否当关闭时将弹出层隐藏（display: none) | boolean | - | true | - |
 | lazy-render | 弹层内容懒渲染，触发展示时才渲染内容 | boolean | - | true | - |
-| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | false | 2.3.0 |
+| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | false | - |
 
 ## Events
 
 | 事件名称 | 说明 | 参数 | 最低版本 |
 |---------|-----|-----|---------|
-| bind:close | 弹出层关闭时触发 | - | - |
+| close | 弹出层关闭时触发 | - | - |
-| bind:clickmodal | 点击遮罩时触发 | - | - |
+| clickmodal | 点击遮罩时触发 | - | - |
-| bind:beforeenter | 进入前触发 | - | - |
+| beforeenter | 进入前触发 | - | - |
-| bind:enter | 进入时触发 | - | - |
+| enter | 进入时触发 | - | - |
-| bind:afterenter | 进入后触发 | - | - |
+| afterenter | 进入后触发 | - | - |
-| bind:beforeleave | 离开前触发 | - | - |
+| beforeleave | 离开前触发 | - | - |
-| bind:leave | 离开时触发 | - | - |
+| leave | 离开时触发 | - | - |
-| bind:afterleave | 离开后触发| - | - |
+| afterleave | 离开后触发| - | - |
 
 ## 外部样式类
 

docs/component/progress.md

@@ -3,12 +3,16 @@
 #  Progress 进度条
 
 
+用于展示操作的当前进度。
+
+
+
 ## 基本用法
 
 设置百分比 `percentage`。
 
 ```html
-<wd-progress percentage="30" />
+<wd-progress :percentage="30" />
 ```
 
 ## 隐藏进度文字
@@ -16,7 +20,7 @@
 设置 `hide-text` 隐藏进度文字。
 
 ```html
-<wd-progress percentage="60" hide-text>
+<wd-progress :percentage="60" hide-text>
 ```
 
 ## 设置状态
@@ -24,8 +28,8 @@
 设置 `status`，告知用户当前状态和预期。
 
 ```html
-<wd-progress percentage="100" hide-text status="success" />
+<wd-progress :percentage="100" hide-text status="success" />
-<wd-progress percentage="70" hide-text status="danger" />
+<wd-progress :percentage="70" hide-text status="danger" />
 ```
 
 ## 修改颜色
@@ -33,25 +37,23 @@
 设置 `color` 修改进度条颜色。
 
 ```html
-<wd-progress percentage="80" color="#00c740">
+<wd-progress :percentage="80" color="#00c740">
 ```
 
 `color` 也可以设置为数组或者函数。数组如果只传入颜色，则自动计算每个颜色的进度边界。函数需要返回一个颜色值。
 
 ```html
-<wd-progress percentage="100" color="{{[ '#00c740', '#ffb300', '#e2231a', '#0083ff' ]}}" />
+<wd-progress :percentage="100" :color="['#00c740', '#ffb300', '#e2231a', '#0083ff']" />
 ```
 
 数组也可以设置为以下格式：
 
 ```html
-  <wd-progress percentage="{{percentage}}" color="{{colorObject}}"/>
+  <wd-progress :percentage="percentage" :color="colorObject"/>
 ```
 
 ```typescript
-Page({
+const colorObject = ref<any>([
-  data: {
-    colorObject: [
   {
     color: 'yellow',
     percentage: 30
@@ -68,10 +70,8 @@ Page({
     color: 'black',
     percentage: 90
   }
-    ],
+])
-    percentage: 100
+const percentage = ref<number>(100)
-  }
-})
 ```
 
 ## Attributes

docs/component/radio.md

@@ -10,24 +10,19 @@
 
 ```html
 <demo-block title="基本用法">
-  <wd-radio-group value="{{value}}" bind:change="change">
+  <wd-radio-group v-model="value" @change="change">
-    <wd-radio value="{{1}}">单选框1</wd-radio>
+    <wd-radio :value="1">单选框1</wd-radio>
-    <wd-radio value="{{2}}">单选框2</wd-radio>
+    <wd-radio :value="2">单选框2</wd-radio>
   </wd-radio-group>
   <view>当前选中的值为:{{value}}</view>
 </demo-block>
 ```
 ```typescript
-Page({
+const value = ref<number>(1)
-  data: {
+
-    value: 1
+function change(e) {
-  },
+  console.log(e)
-  change (event) {
+}
-    this.setData({
-      value: event.detail.value
-    })
-  }
-})
 ```
 
 ## 修改图标形状
@@ -36,23 +31,18 @@ Page({
 
 ```html
 <!-- button 按钮式单选 -->
-<wd-radio-group value="{{value}}" shape="button" bind:change="change">
+<wd-radio-group v-model="value" shape="button" @change="change">
-  <wd-radio value="{{1}}">沃特</wd-radio>
+  <wd-radio :value="1">沃特</wd-radio>
-  <wd-radio value="{{2}}">商家后台</wd-radio>
+  <wd-radio :value="2">商家后台</wd-radio>
 </wd-radio-group>
 ```
 
 ```typescript
-Page({
+const value = ref<number>(1)
-  data: {
+
-    value: 1
+function change(e) {
-  },
+  console.log(e)
-  change (event) {
+}
-    this.setData({
-      value: event.detail.value
-    })
-  }
-})
 ```
 
 > <div style="color: #FA4350;font-weight: 500;">注意：</div>
@@ -60,24 +50,19 @@ Page({
 
 ```html
 <!-- dot 点状单选 -->
-<wd-radio-group value="{{value}}" shape="dot" bind:change="change">
+<wd-radio-group v-model="value" shape="dot" @change="change">
-  <wd-radio value="{{1}}">沃特</wd-radio>
+  <wd-radio :value="1">沃特</wd-radio>
-  <wd-radio value="{{2}}">商家后台</wd-radio>
+  <wd-radio :value="2">商家后台</wd-radio>
 </wd-radio-group>
 ```
 
 
 ```typescript
-Page({
+const value = ref<number>(1)
-  data: {
+
-    value: 1
+function change(e) {
-  },
+  console.log(e)
-  change (event) {
+}
-    this.setData({
-      value: event.detail.value
-    })
-  }
-})
 ```
 
 ## 表单模式
@@ -87,7 +72,7 @@ Page({
 开启表单模式时，如果同时设置 `shape` 为 `button` 开启表单复选按钮组模式。
 
 ```html
-<wd-radio-group value="1" cell>
+<wd-radio-group modelValue="1" cell>
   <wd-radio value="1">选项一</wd-radio>
   <wd-radio value="2">选项二</wd-radio>
   <wd-radio value="3">选项三</wd-radio>
@@ -103,7 +88,7 @@ Page({
 设置 `inline` 属性，使单选框在同一行展示。
 
 ```html
-<wd-radio-group value="1" inline>
+<wd-radio-group modelValue="1" inline>
   <wd-radio value="1">单选框1</wd-radio>
   <wd-radio value="2">单选框2</wd-radio>
 </wd-radio-group>
@@ -114,7 +99,7 @@ Page({
 设置 `checked-color` 属性。
 
 ```html
-<wd-radio-group value="1" checked-color="#fa4350">
+<wd-radio-group modelValue="1" checked-color="#fa4350">
   <wd-radio value="1">沃特</wd-radio>
   <wd-radio value="2">商家后台</wd-radio>
 </wd-radio-group>
@@ -125,7 +110,7 @@ Page({
 可以在 `radio-group` 上面设置 `disabled`，禁用所有单选框，也可以在单个单选框上面设置 `disabled` 属性，禁用某个单选框。
 
 ```html
-<wd-radio-group value="1" disabled>
+<wd-radio-group modelValue="1" disabled>
   <wd-radio value="1">沃特</wd-radio>
   <wd-radio value="2">商家后台</wd-radio>
 </wd-radio-group>
@@ -136,7 +121,7 @@ Page({
 设置 `size` 属性，可选 `large`。
 
 ```html
-<wd-radio-group value="1" size="large">
+<wd-radio-group modelValue="1" size="large">
   <wd-radio value="1">沃特</wd-radio>
   <wd-radio value="2">商家后台</wd-radio>
 </wd-radio-group>
@@ -147,9 +132,9 @@ Page({
 radio设置的props优先级比radioGroup上设置的props优先级更高
 
 ```html
-  <wd-radio-group value="1" shape="button" disabled checked-color="#f00">
+  <wd-radio-group modelValue="1" shape="button" disabled checked-color="#f00">
-    <wd-radio value="1" disabled="{{false}}" checked-color="#000">商家后台</wd-radio>
+    <wd-radio value="1" :disabled="false" checked-color="#000">商家后台</wd-radio>
-    <wd-radio value="2" disabled="{{false}}">沃特</wd-radio>
+    <wd-radio value="2" :disabled="false">沃特</wd-radio>
     <wd-radio value="3">商家智能</wd-radio>
   </wd-radio-group>
 ```
@@ -172,7 +157,7 @@ radio设置的props优先级比radioGroup上设置的props优先级更高
 
 | 事件名称 | 说明 | 参数 | 最低版本 |
 |---------|-----|-----|---------|
-| bind:change | 绑定值变化时触发 | `{ value }`  | - |
+| change | 绑定值变化时触发 | `{ value }`  | - |
 
 ## Radio Attributes
 

docs/component/rate.md

@@ -8,20 +8,16 @@
 设置`value`分数，设置`num`总分数，默认为5分，监听 `change` 事件获取新值。
 
 ```html
-<wd-rate value="{{value}}" bind:change="handleChange" />
+<wd-rate v-model="value" bind:change="handleChange" />
 ```
 
 ```typescript
-Page({
+
-  data: {
+const value = ref<number>(1)
-    value: 1
+
-  },
+function changeValue({ value }) {
-  handleChange (event) {
+  console.log(value)
-    this.setData({
+}
-      value: event.detail.value
-    })
-  }
-})
 ```
 
 ## 只读
@@ -29,7 +25,7 @@ Page({
 设置 `readonly` 属性。
 
 ```html
-<wd-rate value="{{3}}" readonly />
+<wd-rate v-model="value" readonly />
 ```
 
 ## 禁用
@@ -45,8 +41,8 @@ Page({
 可以通过 `color` 属性修改未选中的颜色，`active-color` 修改选中的颜色。
 
 ```html
-<wd-rate value="{{3}}" active-color="linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)" />
+<wd-rate v-model="value" active-color="linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)" />
-<wd-rate value="{{4}}" active-color="{{['linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)', 'linear-gradient(315deg, rgba(245,34,34,1) 0%,rgba(255,117,102,1) 100%)']}}" />
+<wd-rate v-model="value" :active-color="['linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)', 'linear-gradient(315deg, rgba(245,34,34,1) 0%,rgba(255,117,102,1) 100%)']" />
 ```
 
 ## 修改icon
@@ -54,7 +50,7 @@ Page({
 可以通过 `icon` 属性修改未选中的图标，`active-icon` 修改选中的图标。
 
 ```html
-<wd-rate value="{{3}}" icon="wd-icon-dong" active-icon="wd-icon-dong" active-color="#4D80F0"/>
+<wd-rate v-model="value" icon="wd-icon-dong" active-icon="wd-icon-dong" active-color="#4D80F0"/>
 ```
 
 ## 修改大小、间隔
@@ -62,7 +58,7 @@ Page({
 可以通过 `size` 属性修改图标的大小，`space` 修改图标之间的间隔。
 
 ```html
-<wd-rate value="{{3}}" size="30px" space="10px"/>
+<wd-rate v-model="value" size="30px" space="10px"/>
 ```
 
 ## Attributes

docs/index.md

@@ -15,12 +15,12 @@ hero:
     - theme: brand
       text: 快速上手
       link: /guide/quickUse
+    - theme: alt
+      text: 组件列表
+      link: /component/button
     - theme: alt
       text: 捐赠作者
       link: /reward/reward
-    - theme: alt
-      text: 查看源码
-      link: https://github.com/Moonofweisheng/wot-design-uni
 
 features:
   - icon: 🚀

src/pages/picker/Index.vue

@@ -4,7 +4,7 @@
     <wd-cell-group border>
       <wd-picker label="单列选项" :columns="columns0" />
       <wd-picker label="禁用" disabled v-model="value1" :columns="columns1" />
-      <wd-picker label="只读" readonly v v-model="value2" :columns="columns2" />
+      <wd-picker label="只读" readonly v-model="value2" :columns="columns2" />
       <wd-picker label="loading" loading :columns="columns3" />
       <wd-picker label="多列" v-model="value4" :columns="columns4" />
       <wd-picker label="多级联动" v-model="value5" :columns="columns5" :column-change="onChangeDistrict" />

src/pages/popover/Index.vue

@@ -12,19 +12,19 @@
 
     <demo-block custom-class="pop" title="嵌套信息">
       <view class="center list">
-        <wd-popover id="pop2" v-model:show="show2" use-content-slot @change="handleChange2">
+        <wd-popover v-model:show="show2" use-content-slot @change="handleChange2">
           <template #content>
             <view class="pop-content">这是一段自定义样式的内容。</view>
           </template>
-          <wd-button data-id="pop2">点击展示</wd-button>
+          <wd-button>点击展示</wd-button>
         </wd-popover>
       </view>
     </demo-block>
 
     <demo-block custom-class="pop" title="列表展示">
       <view class="center list">
-        <wd-popover id="pop3" v-model:show="show3" mode="menu" :content="menu" @menuclick="link" @change="handleChange3">
+        <wd-popover v-model:show="show3" mode="menu" :content="menu" @menuclick="link" @change="handleChange3">
-          <wd-button data-id="pop3">列表</wd-button>
+          <wd-button>列表</wd-button>
         </wd-popover>
       </view>
     </demo-block>

src/pages/rate/Index.vue

@@ -1,3 +1,12 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2023-07-29 17:03:39
+ * @LastEditTime: 2023-08-01 23:46:20
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: \wot-design-uni\src\pages\rate\Index.vue
+ * 记得注释
+-->
 <template>
   <demo-block title="基本用法">
     <wd-rate v-model="value1" @change="changeValue1" />

src/uni_modules/wot-design-uni/components/wd-picker-view/wd-picker-view.vue

@@ -356,7 +356,7 @@ function handleChange(index: number) {
   // 延迟一下，避免组件刚渲染时调用者的事件未初始化好
   setTimeout(() => {
     emit('change', {
-      proxy,
+      picker: proxy.$.exposed,
       value,
       index
     })

src/uni_modules/wot-design-uni/components/wd-picker/props.js

@@ -1,58 +0,0 @@
-export default {
-  // 选择器左侧文案
-  label: String,
-  // 选择器占位符
-  placeholder: {
-    type: String,
-    value: '请选择'
-  },
-  // 禁用
-  disabled: {
-    type: Boolean,
-    value: false
-  },
-  // 只读
-  readonly: {
-    type: Boolean,
-    value: false
-  },
-  loading: {
-    type: Boolean,
-    value: false
-  },
-  loadingColor: {
-    type: String,
-    value: '#4D80F0'
-  },
-  /* popup */
-  // 弹出层标题
-  title: String,
-  // 取消按钮文案
-  cancelButtonText: {
-    type: String,
-    value: '取消'
-  },
-  // 确认按钮文案
-  confirmButtonText: {
-    type: String,
-    value: '完成'
-  },
-  // 是否必填
-  required: Boolean,
-  size: String,
-  labelWidth: String,
-  useDefaultSlot: Boolean,
-  useLabelSlot: Boolean,
-  error: Boolean,
-  alignRight: Boolean,
-  beforeConfirm: null,
-  closeOnClickModal: {
-    type: Boolean,
-    value: true
-  },
-  safeAreaInsetBottom: {
-    type: Boolean,
-    value: true
-  },
-  ellipsis: Boolean
-}

src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue

@@ -1,12 +1,3 @@
-<!--
- * @Author: weisheng
- * @Date: 2023-06-12 18:40:58
- * @LastEditTime: 2023-07-20 17:20:13
- * @LastEditors: weisheng
- * @Description: 
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-picker\wd-picker.vue
- * 记得注释
--->
 <template>
   <view
     :class="`wd-picker ${disabled ? 'is-disabled' : ''} ${size ? 'is-' + size : ''}  ${cell.border.value ? 'is-border' : ''} ${