@opentiny/vue-docs 1.0.0

package/resources/mobile/app/alert/webdoc/alert.js

@@ -0,0 +1,147 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'custom-close',
+      name: {
+        'zh-CN': '自定义关闭',
+        'en-US': 'left right arrow',
+      },
+      desc: {
+        'zh-CN': '<p>自定义关闭</p>',
+        'en-US': '<p>button type</p>',
+      },
+      codeFiles: ['custom-close.vue'],
+    },
+    {
+      demoId: 'icon',
+      name: {
+        'zh-CN': '自定义提示图标',
+        'en-US': 'left right text',
+      },
+      desc: {
+        'zh-CN': '<p>自定义提示图标</p>',
+        'en-US': '<p>button round</p>',
+      },
+      codeFiles: ['icon.vue'],
+    },
+    {
+      demoId: 'size',
+      name: {
+        'zh-CN': '不同尺寸',
+        'en-US': 'size',
+      },
+      desc: {
+        'zh-CN': '<p>不同尺寸</p>',
+        'en-US': '<p>button click</p>',
+      },
+      codeFiles: ['size.vue'],
+    },
+    {
+      demoId: 'slot-default',
+      name: {
+        'zh-CN': '自定义提示内容',
+        'en-US': 'slot-default',
+      },
+      desc: {
+        'zh-CN': '<p>自定义提示内容</p>',
+        'en-US': '<p>button click</p>',
+      },
+      codeFiles: ['slot-default.vue'],
+    },
+
+  ],
+  apis: [
+    {
+      name: 'alert', // 组件名称展示使用
+      type: 'component', // API 类型
+      properties: [
+        {
+          name: 'closable',
+          type: 'Boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '<p>设置警告是否可以关闭,该属性的默认值为 true</p>',
+            'en-US': 'Is fixed top',
+          },
+          demoId: 'custom-close',
+        },
+        {
+          name: 'close-text',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>关闭按钮自定义文本</p>',
+            'en-US': 'Is show left arrow',
+          },
+          demoId: 'custom-close',
+        },
+        {
+          name: 'description',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置警告的提示内容，默认为空</p>',
+            'en-US': 'Is show right arrow',
+          },
+          demoId: 'custom-close',
+        },
+        {
+          name: 'icon',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置警告的图标，默认会根据 type 值自动使用对应图标</p>',
+            'en-US': 'Is show right text',
+          },
+          demoId: 'icon',
+        },
+        {
+          name: 'size',
+          type: 'String',
+          defaultValue: 'normal',
+          desc: {
+            'zh-CN': '<p>设置警告的大小 normal/large， 缺省为 normal。</p>',
+            'en-US': 'Is show left text',
+          },
+          demoId: 'size',
+        },
+        {
+          name: 'type',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置警告的类型</p>',
+            'en-US': 'set sub-title',
+          },
+          demoId: 'size',
+        },
+      ],
+      events: [
+        {
+          name: 'close',
+          type: 'Function()',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>关闭 alert 时触发的事件</p>',
+            'en-US': 'Click',
+          },
+          demoId: 'custom-close',
+        },
+      ],
+      slot: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>组件默认插槽</p>',
+            'en-US': 'Click',
+          },
+          demoId: 'slot-default',
+        },
+      ],
+    },
+  ],
+}

package/resources/mobile/app/avatar/avatar-size.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="avatar-wrap">
+    <div class="page__hd">
+      <h1 class="page__title">
+        HeadIcon
+      </h1>
+      <p class="page__desc">
+        头像图标
+      </p>
+    </div>
+    <tiny-avatar :src="circleUrl" size="large"></tiny-avatar>
+    <tiny-avatar :src="circleUrl" size="medium"></tiny-avatar>
+    <tiny-avatar :src="circleUrl" size="small"></tiny-avatar>
+    <tiny-avatar :src="circleUrl" :size="320"></tiny-avatar>
+    <tiny-avatar :src="circleUrl" :size="80"></tiny-avatar>
+    <tiny-avatar :src="circleUrl" :size="56"></tiny-avatar>
+    <tiny-avatar :src="circleUrl" :size="48"></tiny-avatar>
+    <tiny-avatar :src="circleUrl" :size="40"></tiny-avatar>
+    <tiny-avatar :src="circleUrl" :size="36"></tiny-avatar>
+    <tiny-avatar :src="circleUrl" :size="32"></tiny-avatar>
+    <tiny-avatar :src="circleUrl" :size="30"></tiny-avatar>
+    <tiny-avatar :src="circleUrl" :size="20"></tiny-avatar>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Avatar } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAvatar: Avatar
+  },
+  data() {
+    return {
+      circleUrl: '/static/images/circle.png'
+    }
+  }
+}
+</script>
+
+<style>
+.page__hd {
+  padding: 40px;
+}
+
+.page__title {
+  font-weight: 400;
+  font-size: 21px;
+  text-align: left;
+}
+
+.page__desc {
+  margin-top: 5px;
+  color: #888;
+  font-size: 14px;
+  text-align: left;
+}
+
+.avatar-wrap {
+  padding: 20px;
+  width: 100%;
+  height: calc(100% - 118px);
+  overflow: hidden;
+  overflow-y: auto;
+}
+</style>

package/resources/mobile/app/avatar/avatar-src-set.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="avatar-wrap">
+    <tiny-avatar :src="circleUrl" :src-set="srcSet" size="large"></tiny-avatar>
+    <tiny-avatar :icon="IconClockWork" size="large"></tiny-avatar>
+    <tiny-avatar :src="circleUrlfit" fit="none" size="large"></tiny-avatar>
+    <tiny-avatar :src="errorUrl" :error="onError" fit="none" size="large"></tiny-avatar>
+    <tiny-avatar :src="circleUrl" shape="square" fit="none" size="large"></tiny-avatar>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Avatar } from '@opentiny/vue'
+import { iconClockWork } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyAvatar: Avatar,
+  },
+  data() {
+    return {
+      IconClockWork: iconClockWork(),
+      circleUrl: 'static/images/circle.png',
+      circleUrlfit: '/static/images/dog1.png',
+      srcSet: '/static/images/dog1.png 100w,/static/images/dog2.png 300w,/static/images/dog3.png 500w',
+      errorUrl: 'error.png', // 使用错误路径
+      onError() {
+        console.log('加载失败')
+      },
+    }
+  },
+}
+</script>
+
+<style>
+.avatar-wrap {
+  padding: 20px;
+}
+.avatar-wrap svg {
+  height: 100%;
+  width: 100%;
+}
+</style>

package/resources/mobile/app/avatar/webdoc/avatar.cn.md

@@ -0,0 +1,11 @@
+---
+title: Avatar 头像 
+---
+
+# Avatar 头像 
+
+<div> 
+
+Avatar 头像 
+
+</div>

package/resources/mobile/app/avatar/webdoc/avatar.en.md

@@ -0,0 +1,7 @@
+---
+title: Avatar 头像 
+---
+
+# Avatar 头像 
+
+<div> Avatar </div>

package/resources/mobile/app/avatar/webdoc/avatar.js

@@ -0,0 +1,138 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'avatar-size',
+      name: {
+        'zh-CN': '设置头像大小',
+        'en-US': 'button type',
+      },
+      desc: {
+        'zh-CN':
+          '<p><code>size</code>可设置为<code>large,medium,small</code>,如果不能满足需要，可以设置<code>size</code>为<code>number</code>类型自定义大小</p>',
+        'en-US': '<p>button type</p>',
+      },
+      codeFiles: ['avatar-size.vue'],
+    },
+    {
+      demoId: 'avatar-src-set',
+      name: {
+        'zh-CN': '设置头像',
+        'en-US': 'button round',
+      },
+      desc: {
+        'zh-CN': `<p>
+        <code>src</code>设置<code>img</code>的展示源，<code>img</code>原生属性<br>
+        <code>srcSet</code>设置<code>img</code>在不同情况下的图片源的集合，<code>img</code>原生属性<br>
+        <code>icon</code>设置图标头像<br>
+        <code>fit</code>设置填充样式,默认为<code>cover</code>可选<code>fill，contain，cover，none，scale-down</code><br>
+        <code>error</code>设置<code>img</code>标签的<code>onerror</code>函数<br>
+        <code>shape</code>设置形状,默认为<code>circle可选circle,square</code>
+          </p>`,
+        'en-US': '<p>button round</p>',
+      },
+      codeFiles: ['avatar-src-set.vue'],
+    },
+  ],
+  apis: [
+    {
+      name: 'avatar', // 组件名称展示使用
+      type: 'component', // API 类型
+      properties: [
+        {
+          name: 'alt',
+          type: 'Function',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置图片的备用文字描述</p>',
+            'en-US': 'display different button',
+          },
+          demoId: 'avatar-src-set',
+        },
+        {
+          name: 'error',
+          type: 'Function()',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置img 标签的 onerror 函数</p>',
+            'en-US': 'display different button',
+          },
+          demoId: 'avatar-src-set',
+        },
+        {
+          name: 'fit',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置图片的 object-fit</p>',
+            'en-US': 'display different button',
+          },
+          demoId: 'avatar-src-set',
+        },
+        {
+          name: 'icon',
+          type: 'Object',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置显示内容为icon</p>',
+            'en-US': 'display different button',
+          },
+          demoId: 'avatar-src-set',
+        },
+        {
+          name: 'shape',
+          type: 'String',
+          defaultValue: 'circle',
+          desc: {
+            'zh-CN': '<p>该属性的可选值为 circle | square</p>',
+            'en-US': 'display different button',
+          },
+          demoId: 'avatar-src-set',
+        },
+        {
+          name: 'size',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>该属性的可选值为 large|medium|small</p>',
+            'en-US': 'display different button',
+          },
+          demoId: 'avatar-size',
+        },
+        {
+          name: 'src',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置图片链接地址</p>',
+            'en-US': 'display different button',
+          },
+          demoId: 'avatar-src-set',
+        },
+        {
+          name: 'src-set',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置源图容器</p>',
+            'en-US': 'display different button',
+          },
+          demoId: 'avatar-src-set',
+        },
+      ],
+      slot: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>组件默认插槽</p>',
+            'en-US': 'Click',
+          },
+          demoId: 'avatar-src-set',
+        },
+      ],
+    },
+  ],
+}

package/resources/mobile/app/badge/content.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="badge-wrap">
+    <tiny-badge :value="value1">
+      我的待办
+      <template #content>共{{ value1 }}项</template>
+    </tiny-badge>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Badge } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBadge: Badge
+  },
+  data() {
+    return {
+      value1: 2
+    }
+  }
+}
+</script>
+
+<style>
+.badge-wrap {
+  padding: 20px;
+}
+</style>

package/resources/mobile/app/badge/hidden.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="badge-wrap">
+    <tiny-badge :value="unread" :hidden="unread === 0">我的待办</tiny-badge>
+    <br />
+    <br />
+    <tiny-button :disabled="unread === 0" @click="read">读取一条消息</tiny-button>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Badge, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBadge: Badge,
+    TinyButton: Button,
+  },
+  data() {
+    return {
+      unread: 2,
+    }
+  },
+  methods: {
+    read() {
+      if (this.unread > 0) {
+        this.unread = this.unread - 1
+      }
+    },
+  },
+}
+</script>
+
+<style>
+.badge-wrap {
+  padding: 20px;
+}
+</style>

package/resources/mobile/app/badge/href-target.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="badge-wrap">
+    <tiny-badge :value="2" href="/" target="_self">当前标签页打开</tiny-badge>
+    <br />
+    <br />
+    <tiny-badge :value="2" href="/" target="_blank">新建标签页打开</tiny-badge>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Badge } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBadge: Badge,
+  },
+  data() {
+    return {
+      value1: 2,
+    }
+  },
+}
+</script>
+
+<style>
+.badge-wrap {
+  padding: 20px;
+}
+</style>

package/resources/mobile/app/badge/is-dot.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="badge-wrap">
+    <tiny-badge :value="value1" is-dot> 小圆点标记 </tiny-badge>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Badge } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBadge: Badge
+  },
+  data() {
+    return {
+      value1: 2
+    }
+  }
+}
+</script>
+
+<style>
+.badge-wrap {
+  padding: 20px;
+}
+</style>

package/resources/mobile/app/badge/is-mini.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="badge-wrap">
+    <tiny-badge :value="value1" :max="1" is-mini>小尺寸</tiny-badge>
+    <br />
+    <br />
+    <tiny-badge :value="value1" :max="1">默认尺寸</tiny-badge>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Badge } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBadge: Badge,
+  },
+  data() {
+    return {
+      value1: 2,
+    }
+  },
+}
+</script>
+
+<style>
+.badge-wrap {
+  padding: 20px;
+}
+</style>

package/resources/mobile/app/badge/type.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="badge-wrap">
+    <tiny-badge :value="value1" :max="1">默认主题</tiny-badge>
+    <br />
+    <br />
+    <tiny-badge :value="value1" :max="1" type="primary">primary</tiny-badge>
+    <br />
+    <br />
+    <tiny-badge :value="value1" :max="1" type="success">success</tiny-badge>
+    <br />
+    <br />
+    <tiny-badge :value="value1" :max="1" type="warning">warning</tiny-badge>
+    <br />
+    <br />
+    <tiny-badge :value="value1" :max="1" type="danger">danger</tiny-badge>
+    <br />
+    <br />
+    <tiny-badge :value="value1" :max="1" type="info">info</tiny-badge>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Badge } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBadge: Badge,
+  },
+  data() {
+    return {
+      value1: 2,
+    }
+  },
+}
+</script>
+
+<style>
+.badge-wrap {
+  padding: 20px;
+}
+</style>

package/resources/mobile/app/badge/webdoc/badge.cn.md

@@ -0,0 +1,12 @@
+---
+title: Badge 徽章 
+---
+
+# Badge 徽章 
+
+<div> 
+
+Badge 徽章 
+
+
+</div>

package/resources/mobile/app/badge/webdoc/badge.en.md

@@ -0,0 +1,11 @@
+---
+title: Badge 徽章 
+---
+
+# Badge 徽章 
+
+<div> 
+
+Badge 徽章 
+
+ </div>