### TmFormItem Vue Component Setup

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/com/form-item.md

This snippet shows the setup for a Vue component that imports and uses `mobileWebview.vue` and `headertips.vue`. It demonstrates basic component composition within a Vue 3 project using the `<script setup>` syntax.

```vue
<script setup>
import webview from '../components/mobileWebview.vue'
import headertips from '../components/headertips.vue'
</script>

<headertips></headertips>
```

--------------------------------

### Install TMUI CLI Tool

Source: https://github.com/bhsdn/tmui3.2/blob/master/src/uni_modules/tm-ui/readme.md

Instructions for installing the TMUI CLI tool globally using npm. This tool helps in creating and managing TMUI projects.

```bash
npm -g install tmui-cli
安装成功后输入：tmui 按回车
查看所有可用命令
```

--------------------------------

### Vue.js Script Setup for TMUI Components

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/start/介绍.md

This snippet demonstrates the setup of Vue.js components for TMUI, specifically importing 'mobileWebview.vue' and 'headertips.vue'. It shows how to integrate these components within a Vue application.

```Vue.js
<script setup>
import webview from '../components/mobileWebview.vue'
import headertips from '../components/headertips.vue'
</script>

<headertips></headertips>
```

--------------------------------

### Vue 组件脚本设置

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/start/更新日志.md

这是一个 Vue 3 的 `<script setup>` 块，用于导入所需的子组件，包括 `mobileWebview.vue` 和 `headertips.vue`，为页面的构建和功能实现做准备。

```javascript
<script setup>
import webview from '../components/mobileWebview.vue'
import headertips from '../components/headertips.vue'
</script>
```

--------------------------------

### TmSheet Component Example

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/com/sheet.md

This snippet demonstrates the usage of the TmSheet component, a container designed for flexible content wrapping and layout. It includes basic setup and usage within a Vue application.

```Vue
<script setup>
import webview from '../components/mobileWebview.vue'
import headertips from '../components/headertips.vue'
</script>

<headertips></headertips>

#### 常用组件

# 容器 TmSheet

像一张纸张一样，用于包裹内容区域,可塑性高,可以快速用来布局.

## :hot_pepper: 示例

<webview url="https://tmui.design/h5by32/#/pages/index/sheet"></webview>

::: details 示例模板

<<< ../../../src/pages/index/sheet.vue{vue}

:::

## :hot_pepper: 兼容性

平台兼容
|H5|uniAPP|小程序|version|
|---|---|---|---|
|☑️|☑️|☑️|☑️|☑️|1.0.0|

## :seedling: 参数
| 参数名 | 类型 | 默认值 | 描述 |
| :--: | :--: | :--: | :-- |
| borderColor | string\|Array<string> | "" | 遵循规则：string或者[x]：全部边线[x,x]左右边线，上下边线[x,x,x]左，上，右[x,x,x,x]左，上，右,下 |
| darkBorderColor | string\|Array<string> | "transparent" | - |
| borderWidth | string\|number\|Array<string \| number> | 0 | 规则同borderColor |
| borderStyle | string\|Array<string> | "solid" | 规则同borderColor |
| round | string\|number\|Array<string \| number> | '' | 规则同borderColor左上，右上，右下，左下 |
| margin | string\|number\|Array<string \| number> | '' | 遵循规则：填写0关闭,填写空值取全局string,number,或者[x]：全部[x,x]左右，上下[x,x,x]左，上，右[x,x,x,x]左，上，右,下 |
| padding | string\|number\|Array<string \| number> | '' | 遵循规则：填写0关闭,填写空值取全局string,number,或者[x]：全部[x,x]左右，上下[x,x,x]左，上，右[x,x,x,x]左，上，右,下 |
| width | string\|number | "" | - |
| height | string\|number | "" | - |
| loading | boolean | false | - |
| flowTheme | boolean | false | 是否跟随主题背景色下方的color失效 |
| color | string | "white" | 背景主题 |
| darkBgColor | string | "" | 自定义暗黑背景空值时取全局配置 |
| linear | Array<string> | ()=>[] | 渐变，前面的color,bgColor,darkBgColor失效 |
| shadow | string\|number\|Array<string> | '' | 数字或者字符串时自动计算投影,它会投影大小数组时(必须为4),第一个x,第二为y,第三个为大小,第四个为投影颜色空字符串时,取全局配置,如果不想投影设置为none即可. |
| loadIconSize | string\|number | "50" | - |


## :rose: 事件
| 事件名 | 参数 | 返回数据 | 描述 |
| --- | --- | --- | --- |
| click | 名称：evt,事件参数, | - | 点击事件 |


## :corn: slot插槽
| 插槽名 | 数据 | 描述 |
| :--: | :--: |  :-- |
| default | - | 默认插槽 |


## :green_salad: ref方法
| 方法名 | 参数 | 返回值 | 描述 |
| :--: | :--: | :--: | :-- |

```

--------------------------------

### tmCodeInput Component Example

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/com/code-input.md

This snippet provides a Vue.js template for the tmCodeInput component, demonstrating its usage within a mobile webview context. It includes importing necessary components and basic structure.

```vue
<script setup>
import webview from '../components/mobileWebview.vue'
import headertips from '../components/headertips.vue'
</script>

<headertips></headertips>

#### 其它组件

# 验证码输入框 tmCodeInput

验证码输入框

## :hot_pepper: 示例

<webview url="https://tmui.design/h5by32/#/pages/index/code-input"></webview>

::: details 示例模板

<<< ../../../src/pages/index/code-input.vue{vue}

:::

## :hot_pepper: 兼容性

平台兼容
|H5|uniAPP|小程序|version|
|---|---|---|---|
|☑️|☑️|☑️|☑️|☑️|1.0.0|

## :seedling: 参数
| 参数名 | 类型 | 默认值 | 描述 |
| :--: | :--: | :--: | :-- |
| autoFocus | boolean | false | 进入时自动获取焦点，并弹出系统自带的键盘(需要useSysKeyborad=true)。 |
| useSysKeyborad | boolean | true | 是否使用系统自带的键盘。，如果为false你需要自行配置输入键盘比如使用我的keyborad键盘组件。 |
| modelValue | string | "" | 当前输入的值 |
| maxlength | number | 4 | 最大长度 |
| gutter | string | "16" | 间距 |
| width | string\|number | "100" | 验证码框的宽 |
| height | string\|number | "100" | 验证码框的高 |
| fontColor | string | "" | 当前输入项激活时的文字颜色同时也是高亮时的背景色。默认取全局主题 |
| darkFontColor | string | "" | 暗黑时的主题色，不填写等同fontColor |
| fontSize | string | "42" | 文字大小 |
| round | string | "16" | 圆角 |
| bgColor | string | "#f0f0f0" | skin=fill时的背景 |
| darkBgColor | string | "#272727" | skin=fill时的暗黑背景 |
| borderColor | string | "" | skin=outline时的边线颜色 |
| darkBorderColor | string | "" | skin=outline时的暗黑边线颜色 |
| unBorderColor | string | "#e3e3e3" | skin=outline时的边线颜色[非激活时] |
| unDarkBorderColor | string | "#2c2b2c" | skin=outline时的暗黑边线颜色[非激活时] |
| skin | string | "outline" | - |
| placeShape | string | "round" | 待输入时的占位形状line线型round圆形空值表示不需要占位符号 |


## :rose: 事件
| 事件名 | 参数 | 返回数据 | 描述 |
| --- | --- | --- | --- |
| click | - | - | 输入框点击时触发 |
| confirm | 名称：value,值, | - | 自带键盘上确认或者达到指定长度位数时触发，可能会多次触发 |
| change | 名称：value,值, | - | 输入时触发 |
| update:modelValue | - | - | 等同vmodel，可与我的keyborad键盘配合使用。 |


## :corn: slot插槽
| 插槽名 | 数据 | 描述 |
| :--: | :--: |  :-- |


## :green_salad: ref方法
| 方法名 | 参数 | 返回值 | 描述 |
| :--: | :--: | :--: | :-- |

```

--------------------------------

### TmNavbar Example Template

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/com/navbar.md

Provides an example template for the TmNavbar component, demonstrating its usage and integration within a page. This template is intended for direct use or modification.

```vue
import { reactive } from "vue";

const proxy = reactive({
    tmuiConfig: {
        "color": {
            "brand": {
                "1": "#ff5500"
            }
        }
    }
});






















































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































```

--------------------------------

### TmButton Component Example (Vue)

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/com/button.md

This snippet demonstrates the usage of the TmButton component in a Vue.js application. It shows how to import and use the component, along with its basic structure and potential attributes.

```vue
<script setup>
import webview from '../components/mobileWebview.vue'
import headertips from '../components/headertips.vue'
</script>

<headertips></headertips>

#### 常用组件

# 按钮 TmButton

圆角，主题可通过配置统一设置或者动态全局设置，使设计风格统一并保持一致性。让你的风格独一无二。

## :hot_pepper: 示例

<webview url="https://tmui.design/h5by32/#/pages/index/button"></webview>

::: details 示例模板

<<< ../../../src/pages/index/button.vue{vue}

:::

## :hot_pepper: 兼容性

平台兼容
|H5|uniAPP|小程序|version|
|---|---|---|---|
|☑️|☑️|☑️|☑️|☑️|1.0.0|

## :seedling: 参数
| 参数名 | 类型 | 默认值 | 描述 |
| :--: | :--: | :--: | :-- |
| size | string | "n" | 尺寸大小,可选值：s/m/n/g/xs |
| skin | string | "normal" | 样式可选值：thin/outlined/text/normal/dashed |
| borderWidth | string\|number\|Array<string \| number> | 1 | 遵循规则：string或者[x]：全部边线[x,x]左右边线，上下边线[x,x,x]左，上，右[x,x,x,x]左，上，右,下 |
| round | string\|number\|Array<string \| number> | '' | 圆角半径左上，右上，右下，左下 |
| rounded | boolean | false | 50%圆角 |
| width | string\|number | "" | - |
| height | string\|number | "" | - |
| openType | string | "" | - |
| block | boolean | false | - |
| disabled | boolean | false | - |
| icon | string | "" | - |
| iconSize | string | "" | - |
| btnIcon | boolean | false | 是否开启仅图标按钮模式,宽和高相等 |
| loading | boolean | false | - |
| fontSize | string | "" | - |
| color | string | "" | 自定义主题颜色 |
| bgColor | string | "" | 自定义背景 |
| darkBgColor | string | "" | - |
| fontColor | string | "" | - |
| darkFontColorColor | string | "" | - |
| linear | string[] | ()=>[] | 渐变，前面的color,bgColor,darkBgColor失效 |
| shadow | string\|number\|Array<string> | '' | 数字或者字符串时自动计算投影,它会投影大小数组时(必须为4),第一个x,第二为y,第三个为大小,第四个为投影颜色空字符串时,取全局配置,如果不想投影设置为none即可. |
| formType | string | "" | - |
| disableHover | boolean | false | 禁止hover效果，点按没有hover效果，有时可能不需要。 |
| url | string | "" | 跳转的地址链接，出现时点击click会跳转以/pages开头。 |
| navigatorMode | string | "navigateTo" | url跳转模式 |
| appParameter | string | "" | - |
| lang | string | "en" | - |
| sessionFrom | string | "" | - |
| sendMessageTitle | string | "" | - |
| sendMessagePath | string | "" | - |
| sendMessageImg | string | "" | - |
| showMessageCard | boolean | false | - |
| groupId | string | "" | - |
| guildId | string | "" | - |
| publicId | string | "" | - |
| dataImId | string | "" | - |
| dataImType | string | "" | - |
| dataGoodsId | string | "" | - |
| dataOrderId | string | "" | - |
| dataBizLine | string | "" | - |


## :rose: 事件
| 事件名 | 参数 | 返回数据 | 描述 |
| --- | --- | --- | --- |
| click | 名称：evt,事件参数, | - | 点击事件 |
| getphonenumber | - | - | - |
| getuserinfo | - | - | - |
| error | - | - | - |
| opensetting | - | - | - |
| launchapp | - | - | - |
| contact | - | - | - |
| chooseavatar | - | - | - |
| agreeprivacyauthorization | - | - | - |
| addgroupapp | - | - | - |
| chooseaddress | - | - | - |
| chooseinvoicetitle | - | - | - |
| subscribe | - | - | - |
| login | - | - | - |
| im | - | - | - |


## :corn: slot插槽
| 插槽名 | 数据 | 描述 |
| :--: | :--: |  :-- |
| icon | - | icon图标 |
| default | - | 默认插槽 |


## :green_salad: ref方法
| 方法名 | 参数 | 返回值 | 描述 |
| :--: | :--: | :--: | :-- |

```

--------------------------------

### TmHtml 组件示例模板

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/com/html.md

这是 tmui 3.2.0 组件库中 TmHtml 组件的示例模板。它展示了如何使用 TmHtml 组件来渲染 HTML 内容，并包含了组件的 script setup 部分，导入了 webview 和 headertips 组件。

```vue
<script setup>
import webview from '../components/mobileWebview.vue'
import headertips from '../components/headertips.vue'
</script>

<headertips></headertips>

#### 展示组件

# HTML TmHtml

html渲染组件,这是精简后的不是所有插件都带上容易让组件变大，如果想要全部的，可以去用作者的,它是引用第三方实现见：https://github.com/jin-yufeng/mp-html

## :hot_pepper: 示例

<webview url="https://tmui.design/h5by32/#/pages/index/html"></webview>

::: details 示例模板

<<< ../../../src/pages/index/html.vue{vue}

:::

## :hot_pepper: 兼容性

平台兼容
|H5|uniAPP|小程序|version|
|---|---|---|---|
|☑️|☑️|☑️|☑️|☑️|1.0.0|

## :seedling: 参数
| 参数名 | 类型 | 默认值 | 描述 |
| :--: | :--: | :--: | :-- |
| width | string | 'auto' | 窗口宽 |
| height | string | 'auto' | 窗口高 |
| value | string | "" | 需要渲染的markdow或者html内容。 |
| selectable | boolean\|string | false | 需要渲染的markdow或者html内容。 |
| lazyLoad | boolean\|string | false | 需要渲染的markdow或者html内容。 |
| loadingImg | boolean\|string | true | 需要渲染的markdow或者html内容。 |
| errorImg | string | '' | - |
| showImgMenu | boolean\|string | true | - |
| previewImg | boolean\|number | '' | - |


## :rose: 事件
| 事件名 | 参数 | 返回数据 | 描述 |
| --- | --- | --- | --- |
| load | - | - | - |
| ready | - | - | - |
| imgtap | - | - | - |
| linktap | - | - | - |
| play | - | - | - |
| error | - | - | - |


## :corn: slot插槽
| 插槽名 | 数据 | 描述 |
| :--: | :--: |  :-- |
| default | - | - |


## :green_salad: ref方法
| 方法名 | 参数 | 返回值 | 描述 |
| :--: | :--: | :--: | :-- |

```

--------------------------------

### CLI SDK升级命令

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/start/快速上手.md

用于升级TMUI3.2的CLI SDK版本。通过修改package.json文件中的版本号并执行npm install命令来完成升级。

```bash
npm view @dcloudio/uni-app
```

```bash
npm install
```

--------------------------------

### Configure VS Code for Nvue File Associations

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/advanced/vscode配置.md

This configuration ensures VS Code correctly recognizes and provides IntelliSense for .nvue and .wxs files, treating them as .vue and .javascript respectively. It requires installing the 'Vue Volar extension Pack' and manually setting file associations in VS Code settings.

```json
{
    "files.associations": {
        "*.nvue": "vue",
        "*.wxs": "javascript"
    }
}
```

--------------------------------

### TmEchart Component Usage Example

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/com/echart.md

An example of how to use the TmEchart component in a Vue.js application. It includes importing necessary components and rendering the TmEchart with a specified URL.

```vue
<script setup>
import webview from '../components/mobileWebview.vue'
import headertips from '../components/headertips.vue'
</script>

<headertips></headertips>

<webview url="https://tmui.design/h5by32/#/pages/index/echart"></webview>
```

--------------------------------

### tmStickyHeader Component Example (Vue)

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/com/sticky-header.md

This snippet provides an example template for the tmStickyHeader component in Vue. It demonstrates how to use the component and its basic structure within a Vue application.

```vue
<script setup>
import webview from '../components/mobileWebview.vue'
import headertips from '../components/headertips.vue'
</script>

<headertips></headertips>

#### 导航组件

# 粘性布局头 tmStickyHeader

只能是tm-sticky直接子节点,可以在节点内自由布局.可以多个放到tm-sticky中形成多个头置顶,当滚动到此位置时自动置顶.

## :hot_pepper: 示例

<webview url="https://tmui.design/h5by32/#/pages/index/sticky"></webview>

::: details 示例模板

<<< ../../../src/pages/index/sticky.vue{vue}

:::

## :hot_pepper: 兼容性

平台兼容
|H5|uniAPP|小程序|version|
|---|---|---|---|
|☑️|☑️|☑️|☑️|☑️|1.0.0|

## :seedling: 参数
| 参数名 | 类型 | 默认值 | 描述 |
| :--: | :--: | :--: | :-- |
| top | number\|string | 0 | 顶部偏移距离,必须是px单位. |
| zIndex | number\|string | 2 | 顶部距离 |


## :rose: 事件
| 事件名 | 参数 | 返回数据 | 描述 |
| --- | --- | --- | --- |


## :corn: slot插槽
| 插槽名 | 数据 | 描述 |
| :--: | :--: |  :-- |
| default | - | 头部内容 |


## :green_salad: ref方法
| 方法名 | 参数 | 返回值 | 描述 |
| :--: | :--: | :--: | :-- |

```

--------------------------------

### 请求类自动缓存和队列等待

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/start/更新日志.md

介绍了 TMUI 3.0 新增的请求类，支持在未授权时进行队列等待自动请求，特别适用于小程序中的静默登录和自动授权处理。该请求类还支持接口自动缓存，可通过 uni.tmRq 调用，并提供了路由示例。

```javascript
uni.tmRq
```

--------------------------------

### 配置 TMUI 国际化插件

Source: https://github.com/bhsdn/tmui3.2/blob/master/src/uni_modules/tm-ui/local/README.md

在 uni-app 项目的 main.ts 文件中配置 TMUI 国际化插件，设置默认语言、回退语言以及翻译消息。此配置是实现多语言功能的基础。

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import tmui from '@/uni_modules/tm-ui'

const app = createApp(App)

// 配置 TMUI
app.use(tmui, {
  language: 'zh-Hans',
  i18n: {
    locale: 'zh-Hans',
    fallbackLocale: 'en',
    messages: {
      'zh-Hans': {
        welcome: '欢迎使用 TMUI',
        hello: '你好，{name}！',
        count: '你有 {count} 条消息 | 你有 {count} 条消息'
      },
      'en': {
        welcome: 'Welcome to TMUI',
        hello: 'Hello, {name}!',
        count: 'You have {count} message | You have {count} messages'
      }
    }
  }
})

app.mount('#app')
```

--------------------------------

### TMUI3.2 CLI编译运行命令

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/start/快速上手.md

提供TMUI3.2 CLI项目在不同平台编译和运行的命令，包括H5、App和小程序等。

```json
"dev:app": "uni -p app",
"dev:custom": "uni -p",
"dev:h5": "uni",
"dev:h5:ssr": "uni --ssr",
"dev:mp-alipay": "uni -p mp-alipay",
"dev:mp-baidu": "uni -p mp-baidu",
"dev:mp-kuaishou": "uni -p mp-kuaishou",
"dev:mp-lark": "uni -p mp-lark",
"dev:mp-qq": "uni -p mp-qq",
"dev:mp-toutiao": "uni -p mp-toutiao",
"dev:mp-weixin": "uni -p mp-weixin",
"dev:quickapp-webview": "uni -p quickapp-webview",
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
"dev:quickapp-webview-union": "uni -p quickapp-webview-union",
"build:app": "uni build -p app",
"build:custom": "uni build -p",
"build:h5": "uni build",
"build:h5:ssr": "uni build --ssr",
"build:mp-alipay": "uni build -p mp-alipay",
"build:mp-baidu": "uni build -p mp-baidu",
"build:mp-kuaishou": "uni build -p mp-kuaishou",
"build:mp-lark": "uni build -p mp-lark",
"build:mp-qq": "uni build -p mp-qq",
"build:mp-toutiao": "uni build -p mp-toutiao",
"build:mp-weixin": "uni build -p mp-weixin",
"build:quickapp-webview": "uni build -p quickapp-webview",
"build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
"build:quickapp-webview-union": "uni build -p quickapp-webview-union"
```

--------------------------------

### Vue 3 Setup Script for tmui Component Library

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/com/模板.md

This script setup imports the mobileWebview component from the components directory. It's typically used in Vue.js applications for the tmui component library.

```vue
import webview from '../components/mobileWebview.vue'
```

--------------------------------

### Flex布局：一排显示固定宽度和自动宽度

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/start/常见问题.md

演示如何使用flex布局实现一行中一个视图固定宽度，另一个视图自动占满剩余空间。适用于uniapp的NVUE环境。

```ts
<view class="flex flex-row">
    <view style="width:100rpx"><text>1</text></view>
    <view class="flex-1" style="width:0px"><text>2</text></view>
</view>
```

--------------------------------

### TmNavbar Component Setup

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/com/navbar.md

This snippet shows the basic setup for the TmNavbar component within a Vue.js application, including importing necessary child components like webview and headertips.

```vue
<script setup>
import webview from '../components/mobileWebview.vue'
import headertips from '../components/headertips.vue'
</script>

<headertips></headertips>
```

--------------------------------

### TmRate Component Example

Source: https://github.com/bhsdn/tmui3.2/blob/master/tmuidocs/doc/com/rate.md

This snippet provides an example template for the TmRate component, demonstrating its usage within a Vue.js application. It includes the necessary import statements and basic structure for integrating the rating component.

```vue
<script setup>
import webview from '../components/mobileWebview.vue'
import headertips from '../components/headertips.vue'
</script>

<headertips></headertips>

#### 表单组件

# 评分 TmRate

评分组件，只读和禁用等属性

## :hot_pepper: 示例

<webview url="https://tmui.design/h5by32/#/pages/index/rate"></webview>

::: details 示例模板

<<< ../../../src/pages/index/rate.vue{vue}

:::

## :hot_pepper: 兼容性

平台兼容
|H5|uniAPP|小程序|version|
|---|---|---|---|
|☑️|☑️|☑️|☑️|☑️|1.0.0|

## :seedling: 参数
| 参数名 | 类型 | 默认值 | 描述 |
| :--: | :--: | :--: | :-- |
| modelValue | number | 0 | 当前分值，等同v-model |
| count | number | 5 | 最大评分数量 |
| color | string | "" | 选中的颜色，默认空值取全局值 |
| unColor | string | "#cacaca" | 未选中的颜色 |
| darkUnColor | string | "#8b8b8b" | 未选中的暗黑背景颜色空时取InputDark表单颜色 |
| size | string | "42" | 尺寸 |
| space | string\|number | "8" | 间隙 |
| icon | string | "star-fill" | 选中的图标 |
| unicon | string | "star-line" | 未选中的图标 |
| readonly | boolean | false | 是否只读状态 |
| disabled | boolean | false | 是否禁用状态 |
| showScore | boolean | false | 是否显示右侧评分值 |
| fontSize | string | "28" | 右侧文本分值文本的字号 |
| half | boolean | false | 是否开启半星开启半星后，自定的unicon和icon失效。 |


## :rose: 事件
| 事件名 | 参数 | 返回数据 | 描述 |
| --- | --- | --- | --- |
| change | - | - | - |
| update:modelValue | - | - | - |


## :corn: slot插槽
| 插槽名 | 数据 | 描述 |
| :--: | :--: |  :-- |
| score | 名称：binding,score 类型：number 
 | 文本分值的右侧插槽 |


## :green_salad: ref方法
| 方法名 | 参数 | 返回值 | 描述 |
| :--: | :--: | :--: | :-- |

```