@opentiny/vue-docs 2.1.7 → 2.1.8

package/demos/mobile/menus.js

@@ -43,6 +43,7 @@ export const cmpMenus = [
     children: [
       { name: 'Navbar', nameCn: '导航栏', key: 'navbar' },
       { name: 'Tabbar', nameCn: '标签栏', key: 'tabbar' },
+      { name: 'DropdownMenu ', nameCn: '下拉菜单', key: 'dropdownmenu' },
       { name: 'Tabs', nameCn: '选项卡', key: 'tabs' },
       { name: 'TimeLine ', nameCn: '时间轴', key: 'timeline' },
       { name: 'IndexBar ', nameCn: '索引条', key: 'index-bar' }
@@ -58,23 +59,23 @@ export const cmpMenus = [
     label: '数据组件',
     labelEn: 'Data',
     key: 'cmp_data',
-    children: [{ name: 'Progress', nameCn: '进度条', key: 'progress' }]
+    children: [
+      { name: 'Table', nameCn: '表格', key: 'table' },
+      { name: 'List', nameCn: '列表', key: 'list' },
+      { name: 'Progress', nameCn: '进度条', key: 'progress' }
+    ]
   },
   {
     label: '表单组件',
     labelEn: 'Form',
     key: 'cmp_form',
     children: [
-      { name: 'Table', nameCn: '表格', key: 'table' },
       { name: 'Button', nameCn: '按钮', key: 'button' },
       { name: 'Form', nameCn: '表单', key: 'form' },
       { name: 'Checkbox', nameCn: '复选框', key: 'checkbox' },
       { name: 'Slider', nameCn: '滑块', key: 'slider' },
       { name: 'CheckboxGroup', nameCn: '复选框组', key: 'checkboxgroup' },
-      { name: 'DropdownMenu ', nameCn: '筛选排序', key: 'dropdownmenu' },
-      { name: 'ImageViewer', nameCn: '图片预览', key: 'imageviewer' },
       { name: 'Input', nameCn: '输入框', key: 'input' },
-      { name: 'List', nameCn: '列表', key: 'list' },
       { name: 'Radio', nameCn: '单选', key: 'radio' },
       { name: 'Search', nameCn: '搜索框', key: 'search' },
       { name: 'Switch', nameCn: '开关', key: 'switch' },
@@ -103,6 +104,7 @@ export const cmpMenus = [
     children: [
       { name: 'Exception', nameCn: '缺省页', key: 'exception' },
       { name: 'Avatar', nameCn: '头像', key: 'avatar' },
+      { name: 'ImageViewer', nameCn: '图片预览', key: 'imageviewer' },
       { name: 'Icon', nameCn: '图标', key: 'icon' },
       { name: 'ActionSheet', nameCn: '上滑列表组件', key: 'actionsheet' },
       { name: 'MiniPicker', nameCn: 'mini选择器', key: 'minipicker' },

package/demos/mobile-first/app/alert/custom-class.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <tiny-alert custom-class="bg-color-bg-2" type="error" description="type 为 error"></tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  }
+}
+</script>

package/demos/mobile-first/app/alert/custom-icon.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <tiny-alert :icon="IconBoat" description="自定义图标"></tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Alert } from '@opentiny/vue'
+import { iconBoat } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  },
+  data() {
+    return {
+      IconBoat: iconBoat()
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/alert/feedback-of-result.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
     <tiny-alert type="success" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
-      <tiny-button size="mini" type="primary">继续提交</tiny-button>
+      <tiny-button size="mini" type="primary" class="mr-2">继续提交</tiny-button>
       <tiny-button size="mini">取消操作</tiny-button>
     </tiny-alert>
     <br />
     <tiny-alert type="error" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。"></tiny-alert>
     <br />
     <tiny-alert type="warning" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
-      <tiny-button size="mini" type="primary">继续提交</tiny-button>
+      <tiny-button size="mini" type="primary" class="mr-2">继续提交</tiny-button>
       <tiny-button size="mini">取消操作</tiny-button>
     </tiny-alert>
   </div>

package/demos/mobile-first/app/alert/slot-default.vue

@@ -19,19 +19,19 @@
     </tiny-alert>
     <br />
     <tiny-alert size="large" title="slot 自定义交互操作" class="demo-alert">
-      <tiny-button size="mini" type="primary">确定</tiny-button>
+      <tiny-button size="mini" type="primary" class="mr-2">确定</tiny-button>
       <tiny-button size="mini">取消</tiny-button>
     </tiny-alert>
     <br />
     <tiny-alert type="success" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
-      <tiny-button size="mini" type="primary">继续提交</tiny-button>
+      <tiny-button size="mini" type="primary" class="mr-2">继续提交</tiny-button>
       <tiny-button size="mini">取消操作</tiny-button>
     </tiny-alert>
     <br />
     <tiny-alert type="error" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。"></tiny-alert>
     <br />
     <tiny-alert type="warning" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
-      <tiny-button size="mini" type="primary">继续提交</tiny-button>
+      <tiny-button size="mini" type="primary" class="mr-2">继续提交</tiny-button>
       <tiny-button size="mini">取消操作</tiny-button>
     </tiny-alert>
   </div>

package/demos/mobile-first/app/alert/type.vue

@@ -1,19 +1,24 @@
 <template>
   <div>
-    <tiny-alert type="info" description="type 为 info"></tiny-alert>
+    <tiny-alert description="type 为默认值 info"></tiny-alert>
     <tiny-alert type="error" description="type 为 error"></tiny-alert>
     <tiny-alert type="success" description="type 为 success"></tiny-alert>
     <tiny-alert type="warning" description="type 为 warning"></tiny-alert>
+    <tiny-alert
+      type="warning"
+      single-line
+      scrolling
+      description="single-line 开启单行，scrolling 开启滚动，通过属性 close-text 自定义关闭按钮文本，通过 center 属性可使文字显示居中,通过 type 设置不同的类型。可选值：success、warning、info、error，默认值：info "
+    ></tiny-alert>
   </div>
 </template>
 
 <script>
-import { Alert, Button } from '@opentiny/vue'
+import { Alert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert,
-    TinyButton: Button
+    TinyAlert: Alert
   }
 }
 </script>

package/demos/mobile-first/app/alert/webdoc/alert.js

@@ -39,6 +39,18 @@ export default {
       },
       codeFiles: ['title.vue']
     },
+    {
+      demoId: 'custom-icon',
+      name: {
+        'zh-CN': '自定义图标',
+        'en-US': 'Custom icon'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>icon</code> 属性自定义图标。<p>',
+        'en-US': '<p>Customize the icon through the <code>icon</code> attribute.</p>'
+      },
+      codeFiles: ['custom-icon.vue']
+    },
     {
       demoId: 'closable',
       name: {
@@ -124,6 +136,18 @@ export default {
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['show-foldable.vue']
+    },
+    {
+      demoId: 'custom-class',
+      name: {
+        'zh-CN': '自定义类名',
+        'en-US': 'Custom class'
+      },
+      desc: {
+        'zh-CN': '<p>通过<code>custom-class</code>属性设置自定义类名<p>',
+        'en-US': '<p>Set a custom class name through the <code>custom-class</code> attribute</p>'
+      },
+      codeFiles: ['custom-class.vue']
     }
   ],
   apis: []

package/demos/mobile-first/app/calendar-bar/cascader-position.vue

@@ -0,0 +1,18 @@
+<template>
+  <tiny-calendar-bar v-model="value" cascader-position="start"></tiny-calendar-bar>
+</template>
+
+<script>
+import { CalendarBar } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCalendarBar: CalendarBar
+  },
+  data() {
+    return {
+      value: '2022-12-18'
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/calendar-bar/expand.vue

@@ -0,0 +1,27 @@
+<template>
+  <tiny-calendar-bar v-model="value" @expand="expand"></tiny-calendar-bar>
+</template>
+
+<script>
+import { CalendarBar, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCalendarBar: CalendarBar
+  },
+  data() {
+    return {
+      value: '2022-12-18'
+    }
+  },
+  methods: {
+    expand(expanded) {
+      if (expanded) {
+        Modal.message('处于展开状态')
+      } else {
+        Modal.message('处于收起状态')
+      }
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/calendar-bar/render-current.vue

@@ -13,7 +13,7 @@ export default {
     return {
       value: '2022-12-18',
       config: {
-        currentColorClass: 'text-white',
+        currentColorClass: 'text-color-text-inverse',
         currentBackgroundColorClass: 'bg-color-success'
       }
     }

package/demos/mobile-first/app/calendar-bar/webdoc/calendar-bar.js

@@ -22,7 +22,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>使用 <code>config.disabled  </code>配置一个方法，用于判断参数日期是否禁用。 使用 <code>config.disabledColorClass </code> 配置禁用日期的字体颜色类名。 使用 <code>config.disabledBackgroundColorClass </code> 配置禁用日期的背景颜色类名。</p>',
+          '<p>使用 <code>config.disabled  </code>配置一个方法，用于判断参数日期是否禁用。<br> 使用 <code>config.disabledColorClass </code> 配置禁用日期的字体颜色类名。 <br>使用 <code>config.disabledBackgroundColorClass </code> 配置禁用日期的背景颜色类名。</p>',
         'en-US': '<p>button round</p>'
       },
       codeFiles: ['disabled.vue']
@@ -34,8 +34,10 @@ export default {
         'en-US': 'events'
       },
       desc: {
-        'zh-CN':
-          '<p>使用<code> config.mark</code> 配置一个方法，用于判断参数日期是否存在标记。 此方法返回空字符串表示不存在标记，返回非空字符串表示存在标记，且标记内容就是该字符串。 使用<code> config.markBackgroundColorClass</code> 配置标记的颜色类名。 使用<code> config.showMarkMessage</code> 配置是否开启标记<code> title</code> 提示，默认值为<code> false</code>。<p>',
+        'zh-CN': `<p>使用<code> config.mark</code> 配置一个方法，用于判断参数日期是否存在标记。<br>
+          此方法返回空字符串表示不存在标记，返回非空字符串表示存在标记，且标记内容就是该字符串。 <br>
+          使用<code> config.markBackgroundColorClass</code> 配置标记的颜色类名。 <br>
+          使用<code> config.showMarkMessage</code> 配置是否开启标记<code> title</code> 提示，默认值为<code> false</code>。<p>`,
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['marked.vue']
@@ -47,8 +49,9 @@ export default {
         'en-US': 'events'
       },
       desc: {
-        'zh-CN':
-          '<p>用户传入的日期为<code>  当前日期</code> 。 使用 <code> config.currentColorClass</code>  配置<code>  当前日期</code>  的字体颜色类名； 使用<code>  config.currentBackgroundColorClass</code>  配置<code>  当前日期</code>  的背景颜色类名。<p>',
+        'zh-CN': `<p>用户传入的日期为<code>  当前日期</code> 。<br>
+           使用 <code> config.currentColorClass</code>  配置<code>  当前日期</code>  的字体颜色类名；<br>
+           使用<code>  config.currentBackgroundColorClass</code>  配置<code>  当前日期</code>  的背景颜色类名。<p>`,
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['render-current.vue']
@@ -85,11 +88,37 @@ export default {
         'en-US': 'events'
       },
       desc: {
-        'zh-CN':
-          '<p>用户传入的日期为<code>  当前日期</code>，当前日期所在月份为<code>  当前月份</code>，当前月份周六周日为 周末，非周六周日为 工作日。 使用<code>  config.workday </code>配置一个方法，用于判断 工作日 是否作为真正的工作日； 使用<code>  config.holiday</code> 配置一个方法，用于判断 周末 是否作为真正的周末； 使用<code>  config.workdayColorClass 和 config.holidayColorClass</code> 配置工作日和周末的字体颜色类。<p>',
+        'zh-CN': `<p>用户传入的日期为<code>  当前日期</code>，当前日期所在月份为<code>  当前月份</code>，当前月份周六周日为 周末，非周六周日为 工作日。<br>
+           使用<code>  config.workday </code>配置一个方法，用于判断 工作日 是否作为真正的工作日；<br>
+           使用<code>  config.holiday</code> 配置一个方法，用于判断 周末 是否作为真正的周末； <br>
+           使用<code>  config.workdayColorClass 和 config.holidayColorClass</code> 配置工作日和周末的字体颜色类。<p>`,
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['workday.vue']
+    },
+    {
+      demoId: 'expand',
+      name: {
+        'zh-CN': '展开收起事件',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': `<p>日历栏展开或收起时触发的事件；事件参数为 true 时代表展开状态，反之为收起状态。<p>`,
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['expand.vue']
+    },
+    {
+      demoId: 'cascader-position',
+      name: {
+        'zh-CN': '年月选择的位置',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': `<p>使用 cascaderPosition 属性可以改变年月选择的位置；可选值为：<code>start | center | end</code> 默认值为<code>center</code><p>`,
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['cascader-position.vue']
     }
   ],
   apis: []

package/demos/mobile-first/app/calendar-bar/workday.vue

@@ -15,8 +15,8 @@ export default {
       config: {
         workday: this.workday,
         holiday: this.holiday,
-        workdayColorClass: 'text-black',
-        holidayColorClass: 'text-gray-200'
+        workdayColorClass: 'text-color-text-primary',
+        holidayColorClass: 'text-color-none-hover'
       }
     }
   },

package/demos/mobile-first/app/cascader-mobile/basic-usage.vue

@@ -0,0 +1,270 @@
+<template>
+  <div>
+    <tiny-button @click="fn" type="primary"> 级联选择器 </tiny-button>
+    <p>值：{{ value }}</p>
+    <tiny-cascader-mobile
+      v-model="value"
+      :data="data"
+      value-field="value"
+      text-field="label"
+      title="标题"
+      placeholder="请选择"
+      :search-config="searchConfig"
+      :node-config="nodeConfig"
+      :visible="boxVisibility"
+      @update:visible="boxVisibility = $event"
+    ></tiny-cascader-mobile>
+  </div>
+</template>
+
+<script>
+import { CascaderMobile, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCascaderMobile: CascaderMobile,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      value: ['zhinan', 'anzhuang', 'xiangmudengji', 'dengji1', 'dengji1-1'],
+      boxVisibility: false,
+      data: list,
+      searchConfig: {
+        searchMethod: null
+      },
+      nodeConfig: {
+        lazy: false,
+        load: null,
+        isLeaf: 'leaf',
+        children: 'children',
+        afterLoad: null
+      }
+    }
+  },
+  methods: {
+    fn() {
+      this.boxVisibility = true
+    }
+  }
+}
+
+const list = [
+  {
+    value: 'zhinan',
+    label: '指南',
+    children: [
+      {
+        value: 'anzhuang',
+        label: '安装',
+        children: [
+          {
+            value: 'xiangmudengji',
+            label: '项目登记',
+            children: [
+              {
+                value: 'dengji1',
+                label: '登记1登记1登记1登记1登记1登记1登记1',
+                children: [
+                  {
+                    value: 'dengji1-1',
+                    label: '登记1-1 登记1-1 登记1-1'
+                  },
+                  {
+                    value: 'dengji1-2',
+                    label: '登记1-2'
+                  }
+                ]
+              },
+              {
+                value: 'dengji2',
+                label: '项目登记2'
+              },
+              {
+                value: 'dengji3',
+                label: '项目登记3'
+              }
+            ]
+          },
+          {
+            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-component',
+        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>