@opentiny/vue-docs 3.17.3 → 3.17.4

package/demos/pc/app/cascader-panel/multiple-composition-api.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="cascader-panel-demo-props">
+    <div>
+      选中值：<span>{{ value }}</span>
+    </div>
+    <tiny-cascader-panel
+      v-model="value"
+      :options="optionsCascader"
+      :props="{
+        multiple: true
+      }"
+    ></tiny-cascader-panel>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { CascaderPanel as TinyCascaderPanel } from '@opentiny/vue'
+
+const value = ref([
+  ['zhinan', 'anzhuang', 'xiangmudengji'],
+  ['zhinan', 'anzhuang', 'huanjingzhunbei'],
+  ['zhinan', 'anzhuang', 'anzhuangcli'],
+  ['zhinan', 'kaifa', 'monishuju']
+])
+const optionsCascader = ref([
+  {
+    value: 'zhinan',
+    label: '指南',
+    children: [
+      {
+        value: 'anzhuang',
+        label: '安装',
+        children: [
+          {
+            value: 'xiangmudengji',
+            label: '项目登记'
+          },
+          {
+            value: 'huanjingzhunbei',
+            label: '环境准备'
+          },
+          {
+            value: 'anzhuangcli',
+            label: '安装 CLI'
+          },
+          {
+            value: 'chuangjianxiangmu',
+            label: '创建项目'
+          }
+        ]
+      },
+      {
+        value: 'kaifa',
+        label: '开发',
+        children: [
+          {
+            value: 'yinruzujian',
+            label: '引入组件'
+          },
+          {
+            value: 'monishuju',
+            label: '模拟数据'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: 'zujian',
+    label: '组件',
+    children: [
+      {
+        value: 'basic',
+        label: '框架风格',
+        children: [
+          {
+            value: 'layout',
+            label: 'Layout 布局'
+          },
+          {
+            value: 'color',
+            label: 'Color 色彩'
+          },
+          {
+            value: 'font',
+            label: 'Font 字体'
+          },
+          {
+            value: 'icon',
+            label: 'Icon 图标'
+          }
+        ]
+      },
+      {
+        value: 'form',
+        label: '表单组件',
+        children: [
+          {
+            value: 'radio',
+            label: 'Radio 单选框'
+          },
+          {
+            value: 'checkbox',
+            label: 'Checkbox 多选框'
+          },
+          {
+            value: 'input',
+            label: 'Input 输入框'
+          },
+          {
+            value: 'number',
+            label: 'Numeric 计数器'
+          },
+          {
+            value: 'select',
+            label: 'Select 选择器'
+          },
+          {
+            value: 'cascader',
+            label: 'Cascader 级联选择器'
+          },
+          {
+            value: 'switch',
+            label: 'Switch 开关'
+          },
+          {
+            value: 'slider',
+            label: 'Slider 滑块'
+          },
+          {
+            value: 'time-picker',
+            label: 'TimePicker 时间选择器'
+          },
+          {
+            value: 'date-picker',
+            label: 'DatePicker 日期选择器'
+          },
+          {
+            value: 'form',
+            label: 'Form 表单'
+          }
+        ]
+      },
+      {
+        value: 'data',
+        label: '数据组件',
+        children: [
+          {
+            value: 'tree',
+            label: 'Tree 树形控件'
+          },
+          {
+            value: 'pager',
+            label: 'Pager 分页'
+          }
+        ]
+      },
+      {
+        value: 'notice',
+        label: '提示组件',
+        children: [
+          {
+            value: 'alert',
+            label: 'Alert 警告'
+          },
+          {
+            value: 'loading',
+            label: 'Loading 加载'
+          }
+        ]
+      },
+      {
+        value: 'navigation',
+        label: '导航组件',
+        children: [
+          {
+            value: 'menu',
+            label: 'NavMenu 导航菜单'
+          },
+          {
+            value: 'tabs',
+            label: 'Tabs 标签页'
+          },
+          {
+            value: 'breadcrumb',
+            label: 'Breadcrumb 面包屑'
+          },
+          {
+            value: 'steps',
+            label: 'Steps 步骤条'
+          }
+        ]
+      },
+      {
+        value: 'others',
+        label: '其他组件',
+        children: [
+          {
+            value: 'rate',
+            label: 'Rate 评分'
+          },
+          {
+            value: 'tag',
+            label: 'Tag 标签'
+          },
+          {
+            value: 'usercontact',
+            label: 'UserContact 联系人'
+          },
+          {
+            value: 'slidebar',
+            label: 'SlideBar 滚动块'
+          }
+        ]
+      }
+    ]
+  }
+])
+</script>
+
+<style scoped>
+.cascader-panel-demo-props > :not(:last-child) {
+  margin-bottom: 12px;
+}
+</style>

package/demos/pc/app/cascader-panel/multiple.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('多选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('cascader-panel#multiple')
+  const multipleText1 = page.getByText(
+    '选中值：[ [ "zhinan", "anzhuang", "xiangmudengji" ], [ "zhinan", "anzhuang", "huanjingzhunbei" ], [ "zhinan", "anzhuang", "anzhuangcli" ], [ "zhinan", "kaifa", "monishuju" ] ]'
+  )
+  await expect(multipleText1).toBeVisible()
+  await page.getByRole('menuitem', { name: '创建项目' }).locator('span').nth(1).click()
+  const multipleText2 = page.getByText(
+    '选中值：[ [ "zhinan", "anzhuang", "xiangmudengji" ], [ "zhinan", "anzhuang", "huanjingzhunbei" ], [ "zhinan", "anzhuang", "anzhuangcli" ], [ "zhinan", "anzhuang", "chuangjianxiangmu" ], [ "zhinan", "kaifa", "monishuju" ] ]'
+  )
+  await expect(multipleText2).toBeVisible()
+})

package/demos/pc/app/cascader-panel/multiple.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="cascader-panel-demo-props">
+    <div>
+      选中值：<span>{{ value }}</span>
+    </div>
+    <tiny-cascader-panel
+      v-model="value"
+      :options="optionsCascader"
+      :props="{
+        multiple: true
+      }"
+    ></tiny-cascader-panel>
+  </div>
+</template>
+
+<script>
+import { CascaderPanel } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCascaderPanel: CascaderPanel
+  },
+  data() {
+    return {
+      value: [
+        ['zhinan', 'anzhuang', 'xiangmudengji'],
+        ['zhinan', 'anzhuang', 'huanjingzhunbei'],
+        ['zhinan', 'anzhuang', 'anzhuangcli'],
+        ['zhinan', 'kaifa', 'monishuju']
+      ],
+      optionsCascader: [
+        {
+          value: 'zhinan',
+          label: '指南',
+          children: [
+            {
+              value: 'anzhuang',
+              label: '安装',
+              children: [
+                {
+                  value: 'xiangmudengji',
+                  label: '项目登记'
+                },
+                {
+                  value: 'huanjingzhunbei',
+                  label: '环境准备'
+                },
+                {
+                  value: 'anzhuangcli',
+                  label: '安装 CLI'
+                },
+                {
+                  value: 'chuangjianxiangmu',
+                  label: '创建项目'
+                }
+              ]
+            },
+            {
+              value: 'kaifa',
+              label: '开发',
+              children: [
+                {
+                  value: 'yinruzujian',
+                  label: '引入组件'
+                },
+                {
+                  value: 'monishuju',
+                  label: '模拟数据'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          value: 'zujian',
+          label: '组件',
+          children: [
+            {
+              value: 'basic',
+              label: '框架风格',
+              children: [
+                {
+                  value: 'layout',
+                  label: 'Layout 布局'
+                },
+                {
+                  value: 'color',
+                  label: 'Color 色彩'
+                },
+                {
+                  value: 'font',
+                  label: 'Font 字体'
+                },
+                {
+                  value: 'icon',
+                  label: 'Icon 图标'
+                }
+              ]
+            },
+            {
+              value: 'form',
+              label: '表单组件',
+              children: [
+                {
+                  value: 'radio',
+                  label: 'Radio 单选框'
+                },
+                {
+                  value: 'checkbox',
+                  label: 'Checkbox 多选框'
+                },
+                {
+                  value: 'input',
+                  label: 'Input 输入框'
+                },
+                {
+                  value: 'number',
+                  label: 'Numeric 计数器'
+                },
+                {
+                  value: 'select',
+                  label: 'Select 选择器'
+                },
+                {
+                  value: 'cascader',
+                  label: 'Cascader 级联选择器'
+                },
+                {
+                  value: 'switch',
+                  label: 'Switch 开关'
+                },
+                {
+                  value: 'slider',
+                  label: 'Slider 滑块'
+                },
+                {
+                  value: 'time-picker',
+                  label: 'TimePicker 时间选择器'
+                },
+                {
+                  value: 'date-picker',
+                  label: 'DatePicker 日期选择器'
+                },
+                {
+                  value: 'form',
+                  label: 'Form 表单'
+                }
+              ]
+            },
+            {
+              value: 'data',
+              label: '数据组件',
+              children: [
+                {
+                  value: 'tree',
+                  label: 'Tree 树形控件'
+                },
+                {
+                  value: 'pager',
+                  label: 'Pager 分页'
+                }
+              ]
+            },
+            {
+              value: 'notice',
+              label: '提示组件',
+              children: [
+                {
+                  value: 'alert',
+                  label: 'Alert 警告'
+                },
+                {
+                  value: 'loading',
+                  label: 'Loading 加载'
+                }
+              ]
+            },
+            {
+              value: 'navigation',
+              label: '导航组件',
+              children: [
+                {
+                  value: 'menu',
+                  label: 'NavMenu 导航菜单'
+                },
+                {
+                  value: 'tabs',
+                  label: 'Tabs 标签页'
+                },
+                {
+                  value: 'breadcrumb',
+                  label: 'Breadcrumb 面包屑'
+                },
+                {
+                  value: 'steps',
+                  label: 'Steps 步骤条'
+                }
+              ]
+            },
+            {
+              value: 'others',
+              label: '其他组件',
+              children: [
+                {
+                  value: 'rate',
+                  label: 'Rate 评分'
+                },
+                {
+                  value: 'tag',
+                  label: 'Tag 标签'
+                },
+                {
+                  value: 'usercontact',
+                  label: 'UserContact 联系人'
+                },
+                {
+                  value: 'slidebar',
+                  label: 'SlideBar 滚动块'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.cascader-panel-demo-props > :not(:last-child) {
+  margin-bottom: 12px;
+}
+</style>

package/demos/pc/app/cascader-panel/webdoc/cascader-panel.js

@@ -30,6 +30,18 @@ export default {
       },
       codeFiles: ['custom-option-content.vue']
     },
+    {
+      demoId: 'multiple',
+      name: {
+        'zh-CN': '多选',
+        'en-US': 'Multiple Choices'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>props.multiple = true</code> 来开启多选模式。</p>\n',
+        'en-US': '<p>Use <code>props.multiple = true</code> to enable the multi-selection mode. </p>\n'
+      },
+      codeFiles: ['multiple.vue']
+    },
     {
       demoId: 'cascader-panel-props',
       name: {

package/demos/pc/app/chart/webdoc/chart-docs.cn.md

@@ -0,0 +1,126 @@
+## 安装
+
+推荐使用`npm`或者`yarn`方式进行开发
+
+```javascript
+npm i @opentiny/vue
+# 或者
+yarn add @opentiny/vue
+```
+
+## 使用
+
+`tinyChart`支持多组件引入、单组件引入以及完整引入三种方式。
+
+### 多组件引入
+
+`TinyChart`多组件引用即从依赖包 @opentiny/vue中引用多个组件,参考示例如下(以 `ChartLine` 和 `ChartBar` 组件为例):
+
+```html
+<template>
+  <div>
+    <tiny-chart-line></tiny-chart-line>
+    <tiny-chart-bar></tiny-chart-bar>
+  </div>
+</template>
+<script>
+  import { ChartLine, ChartBar } from '@opentiny/vue'
+  export default {
+    components: {
+      TinyChartLine: ChartLine,
+      TinyChartBar: ChartBar
+    }
+  }
+</script>
+```
+
+### 单组件引入
+
+`TinyChart` 每个组件都可以独立安装、独立使用,即只安装单个组件的依赖并单独引用该组件，参考示例如下(以 `ChartLine`和`ChartBar` 组件为例):
+
+```html
+<template>
+  <div>
+    <tiny-chart-line></tiny-chart-line>
+    <tiny-chart-bar></tiny-chart-bar>
+  </div>
+</template>
+<script>
+  import ChartLine from '@opentiny/vue/ChartLine'
+  import ChartBar from '@opentiny/vue/chartBar'
+  export default {
+    components: {
+      TinyChartLine: ChartLine,
+      TinyChartBar: ChartBar
+    }
+  }
+</script>
+```
+
+### 完整引入
+
+完整引入组建后，可以通过 `type` 属性去获取想要的图表，我们并不推荐直接使用完整引入，这样会全量引入所有组件，无法实现按需加载。但如果确实有场景的需求，可以通过以下方式引用，参考示例如下(以 `ChartLine` 和 `ChartBar` 组件为例):
+
+```html
+<template>
+  <div>
+    <tiny-chart type="line"></tiny-chart>
+    <tiny-chart type="bar"></tiny-chart>
+  </div>
+</template>
+<script>
+  import { Chart } from '@opentiny/vue'
+  export default {
+    components: {
+      TinyChart: Chart
+    }
+  }
+</script>
+```
+
+## 组件使用
+
+下面是一个简单的小示例
+
+```html
+<template>
+  <div>
+    <tiny-chart-line></tiny-chart-line>
+    <tiny-chart-bar></tiny-chart-bar>
+  </div>
+</template>
+<script>
+  import { ChartLine, ChartBar } from '@opentiny/vue'
+  export default {
+    components: {
+      TinyChartLine: ChartLine,
+      TinyChartBar: ChartBar
+    },
+    data() {
+      return {
+        options: {
+          padding: [50, 30, 50, 20],
+          legend: {
+            show: true,
+            icon: 'line'
+          },
+          data: [
+            { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
+            { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
+            { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
+            { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
+            { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
+            { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
+            { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
+            { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
+            { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
+            { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
+            { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
+            { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+          ]
+        }
+      }
+    }
+  }
+</script>
+```