pit-docs-mcp 1.0.2

package/docs/pitElementUi/radio.md

@@ -0,0 +1,211 @@
+## Radio 单选框
+
+在一组备选项中进行单选
+
+### 基础用法
+
+由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
+
+:::demo 要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`、`Number`或`Boolean`。
+
+```html
+<template>
+  <el-radio v-model="radio" label="1">备选项</el-radio>
+  <el-radio v-model="radio" label="2">备选项</el-radio>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio: '1'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### 禁用状态
+
+单选框不可用的状态。
+
+:::demo 只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
+```html
+<template>
+  <el-radio disabled v-model="radio" label="禁用">备选项</el-radio>
+  <el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio: '选中且禁用'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### 单选框组
+
+适用于在多个互斥的选项中选择的场景
+
+:::demo 结合`el-radio-group`元素和子元素`el-radio`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio`中设置好`label`即可，无需再给每一个`el-radio`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。
+
+```html
+<template>
+  <el-radio-group v-model="radio">
+    <el-radio :label="3">备选项</el-radio>
+    <el-radio :label="6">备选项</el-radio>
+    <el-radio :label="9">备选项</el-radio>
+  </el-radio-group>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio: 3
+      };
+    }
+  }
+</script>
+```
+:::
+
+### 按钮样式
+
+按钮样式的单选组合。
+
+:::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性。
+```html
+<template>
+  <div>
+    <el-radio-group v-model="radio1">
+      <el-radio-button label="上海"></el-radio-button>
+      <el-radio-button label="北京"></el-radio-button>
+      <el-radio-button label="广州"></el-radio-button>
+      <el-radio-button label="深圳"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio2" size="medium">
+      <el-radio-button label="上海" ></el-radio-button>
+      <el-radio-button label="北京"></el-radio-button>
+      <el-radio-button label="广州"></el-radio-button>
+      <el-radio-button label="深圳"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio3" size="small">
+      <el-radio-button label="上海"></el-radio-button>
+      <el-radio-button label="北京" disabled ></el-radio-button>
+      <el-radio-button label="广州"></el-radio-button>
+      <el-radio-button label="深圳"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio4" disabled size="mini">
+      <el-radio-button label="上海"></el-radio-button>
+      <el-radio-button label="北京"></el-radio-button>
+      <el-radio-button label="广州"></el-radio-button>
+      <el-radio-button label="深圳"></el-radio-button>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio1: '上海',
+        radio2: '上海',
+        radio3: '上海',
+        radio4: '上海'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### 带有边框
+
+:::demo 设置`border`属性可以渲染为带有边框的单选框。
+```html
+<template>
+  <div>
+    <el-radio v-model="radio1" label="1" border>备选项1</el-radio>
+    <el-radio v-model="radio1" label="2" border>备选项2</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio>
+    <el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio3" size="small">
+      <el-radio label="1" border>备选项1</el-radio>
+      <el-radio label="2" border disabled>备选项2</el-radio>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio4" size="mini" disabled>
+      <el-radio label="1" border>备选项1</el-radio>
+      <el-radio label="2" border>备选项2</el-radio>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio1: '1',
+        radio2: '1',
+        radio3: '1',
+        radio4: '1'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Radio Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | string / number / boolean | — | — |
+| label     | Radio 的 value   | string / number / boolean    |       —        |      —   |
+| disabled  | 是否禁用    | boolean   | — | false   |
+| border  | 是否显示边框  | boolean   | — | false   |
+| size  | Radio 的尺寸，仅在 border 为真时有效  | string  | medium / small / mini | — |
+| name | 原生 name 属性 | string    |      —         |     —    |
+
+### Radio Events
+| 事件名称 | 说明 | 回调参数 |
+|---------- |-------- |---------- |
+| change  | 绑定值变化时触发的事件 |  选中的 Radio label 值  |
+
+### Radio-group Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | string / number / boolean | — | — |
+| size     | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效   | string  | medium / small / mini |    —     |
+| disabled  | 是否禁用    | boolean   | — | false   |
+| text-color  | 按钮形式的 Radio 激活时的文本颜色    | string   | — | #ffffff   |
+| fill  | 按钮形式的 Radio 激活时的填充色和边框色    | string   | — | #409EFF   |
+
+### Radio-group Events
+| 事件名称 | 说明 | 回调参数 |
+|---------- |-------- |---------- |
+| change  | 绑定值变化时触发的事件 |  选中的 Radio label 值  |
+
+### Radio-button Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| label     | Radio 的 value  | string / number  |        —       |     —    |
+| disabled  | 是否禁用    | boolean   | — | false   |
+| name | 原生 name 属性 | string    |      —         |     —    |

package/docs/pitElementUi/rate.md

@@ -0,0 +1,135 @@
+## Rate 评分
+
+评分组件
+
+### 基础用法
+
+:::demo 评分默认被分为三个等级，可以利用颜色数组对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用`colors`属性设置，而它们对应的两个阈值则通过 `low-threshold` 和 `high-threshold` 设定。你也可以通过传入颜色对象来自定义分段，键名为分段的界限值，键值为对应的颜色。
+```html
+<div class="block">
+  <span class="demonstration">默认不区分颜色</span>
+  <el-rate v-model="value1"></el-rate>
+</div>
+<div class="block">
+  <span class="demonstration">区分颜色</span>
+  <el-rate
+    v-model="value2"
+    :colors="colors">
+  </el-rate>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: null,
+        value2: null,
+        colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 辅助文字
+
+用辅助文字直接地表达对应分数
+
+:::demo 为组件设置 `show-text` 属性会在右侧显示辅助文字。通过设置 `texts` 可以为每一个分值指定对应的辅助文字。`texts` 为一个数组，长度应等于最大值 `max`。
+```html
+<el-rate
+  v-model="value"
+  show-text>
+</el-rate>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: null
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 其它 icon
+
+当有多层评价时，可以用不同类型的 icon 区分评分层级
+
+:::demo 设置`icon-classes`属性可以自定义不同分段的图标。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名。本例还使用`void-icon-class`指定了未选中时的图标类名。
+```html
+<el-rate
+  v-model="value"
+  :icon-classes="iconClasses"
+  void-icon-class="icon-rate-face-off"
+  :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
+</el-rate>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: null,
+        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 只读
+
+只读的评分用来展示分数，允许出现半星
+
+:::demo 为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-score`，则会在右侧显示目前的分值。可以提供 `score-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。
+```html
+<el-rate
+  v-model="value"
+  disabled
+  show-score
+  text-color="#ff9900"
+  score-template="{value}">
+</el-rate>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: 3.7
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | number | — | 0 |
+| max | 最大分值 | number | — | 5 |
+| disabled | 是否为只读 | boolean | — | false |
+| allow-half | 是否允许半选 | boolean | — | false |
+| low-threshold | 低分和中等分数的界限值，值本身被划分在低分中 | number | — | 2 |
+| high-threshold | 高分和中等分数的界限值，值本身被划分在高分中 | number | — | 4 |
+| colors | icon 的颜色。若传入数组，共有 3 个元素，为 3 个分段所对应的颜色；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的颜色 | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
+| void-color | 未选中 icon 的颜色 | string | — | #C6D1DE |
+| disabled-void-color | 只读时未选中 icon 的颜色 | string | — | #EFF2F7 |
+| icon-classes | icon 的类名。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名 | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
+| void-icon-class | 未选中 icon 的类名 | string | — | el-icon-star-off |
+| disabled-void-icon-class | 只读时未选中 icon 的类名 | string | — | el-icon-star-on |
+| show-text | 是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容 | boolean | — | false |
+| show-score | 是否显示当前分数，show-score 和 show-text 不能同时为真 | boolean | — | false |
+| text-color | 辅助文字的颜色 | string | — | #1F2D3D |
+| texts | 辅助文字数组 | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
+| score-template | 分数显示模板 | string | — | {value} |
+
+### Events
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| change | 分值改变时触发 | 改变后的分值 |
+

package/docs/pitElementUi/result.md

@@ -0,0 +1,76 @@
+## Result 结果
+
+用于对用户的操作结果或者异常状态做反馈。
+
+### 基础用法
+
+:::demo
+
+```html
+<el-row>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="success" title="成功提示" subTitle="请根据提示进行操作">
+      <template slot="extra">
+        <el-button type="primary" size="medium">返回</el-button>
+      </template>
+    </el-result>
+  </el-col>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作">
+      <template slot="extra">
+        <el-button type="primary" size="medium">返回</el-button>
+      </template>
+    </el-result>
+  </el-col>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="error" title="错误提示" subTitle="请根据提示进行操作">
+      <template slot="extra">
+        <el-button type="primary" size="medium">返回</el-button>
+      </template>
+    </el-result>
+  </el-col>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="info" title="信息提示" subTitle="请根据提示进行操作">
+      <template slot="extra">
+        <el-button type="primary" size="medium">返回</el-button>
+      </template>
+    </el-result>
+  </el-col>
+</el-row>
+```
+
+:::
+
+### 自定义内容
+
+:::demo
+
+```html
+<el-result title="404" subTitle="抱歉，请求错误">
+  <template slot="icon">
+    <el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
+  </template>
+  <template slot="extra">
+    <el-button type="primary" size="medium">返回</el-button>
+  </template>
+</el-result>
+```
+
+:::
+
+### Result Attributes
+
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| title          | 标题         | string  |          —             |    —     |
+| sub-title    | 二级标题  | string | — |    —  |
+| icon  | 图标类型    | string  |    success / warning / info / error  |  info |
+
+### Result Slots
+
+| Name | 说明 |
+|------|--------|
+| icon | 自定义图标  |
+| title | 自定义标题     |
+| subTitle | 自定义二级标题     |
+| extra | 自定义底部额外区域     |