@opentiny/vue-docs 2.0.9 → 2.1.1

package/.prettierrc

@@ -11,6 +11,7 @@
   "useTabs": false,
   "tabWidth": 2,
   "proseWrap": "preserve",
+  "arrowParens": "always",
   "overrides": [
     {
       "files": ".prettierrc",
@@ -19,4 +20,4 @@
       }
     }
   ]
-}
+}

package/demos/mobile/app/actionsheet/clickfn.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="tiny-mobile-action-sheet-demo">
+    <div class="page__hd">
+      <p class="page__desc">点击事件获取返回值</p>
+    </div>
+    <tiny-button _mode="mobile" @click="fn">cliclk me!</tiny-button>
+    <tiny-action-sheet
+      _mode="mobile"
+      v-model="activeName"
+      :menus="menus"
+      :visible="boxVisibility"
+      @update:visible="boxVisibility = $event"
+      @click="clickItem"
+      content-position
+    ></tiny-action-sheet>
+  </div>
+</template>
+
+<script lang="jsx">
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      activeName: '',
+      boxVisibility: false,
+      menus: [
+        {
+          id: 1,
+          label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
+        },
+        {
+          id: 2,
+          label: '我是小树'
+        },
+        {
+          id: 3,
+          label: '我是小草'
+        },
+        {
+          id: 4,
+          label: '我是小叶',
+          warn: true
+        }
+      ]
+    }
+  },
+  methods: {
+    fn() {
+      this.boxVisibility = true
+    },
+    clickItem(value) {
+      console.log(value, '获取了当前点击的返回值')
+    }
+  }
+}
+</script>
+
+<style>
+.page__hd {
+  padding: 40px;
+}
+.page__desc {
+  margin-top: 5px;
+  color: #888;
+  font-size: 14px;
+  text-align: left;
+}
+</style>

package/demos/mobile/app/actionsheet/ellipsis.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="tiny-mobile-action-sheet-demo">
+    <div class="page__hd">
+      <p class="page__desc">超长文字</p>
+    </div>
+    <tiny-button _mode="mobile" @click="fn">cliclk me!</tiny-button>
+    <tiny-action-sheet
+      _mode="mobile"
+      v-model="activeName"
+      :menus="menus"
+      ellipsis
+      :visible="boxVisibility"
+      @update:visible="boxVisibility = $event"
+      content-position
+    ></tiny-action-sheet>
+  </div>
+</template>
+
+<script lang="jsx">
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      activeName: '',
+      boxVisibility: false,
+      menus: [
+        {
+          id: 1,
+          label:
+            '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
+        },
+        {
+          id: 2,
+          label: '我是小树'
+        },
+        {
+          id: 3,
+          label: '我是小草'
+        },
+        {
+          id: 4,
+          label: '我是小叶',
+          warn: true
+        }
+      ]
+    }
+  },
+  methods: {
+    fn() {
+      this.boxVisibility = true
+    }
+  }
+}
+</script>
+
+<style>
+.page__hd {
+  padding: 40px;
+}
+.page__desc {
+  margin-top: 5px;
+  color: #888;
+  font-size: 14px;
+  text-align: left;
+}
+</style>

package/demos/mobile/app/actionsheet/slot-action.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="tiny-mobile-action-sheet-demo action-sheet-wrap">
+    <div class="page__hd">
+      <h1 class="page__title">上滑列表</h1>
+      <p class="page__desc">弹出式菜单</p>
+    </div>
+    <tiny-button _mode="mobile" @click="fn" type="primary" size="large">上滑列表</tiny-button>
+    <tiny-action-sheet
+      _mode="mobile"
+      v-model="activeName"
+      :menus="menus"
+      :visible="boxVisibility"
+      @update:visible="boxVisibility = $event"
+      content-position
+    ></tiny-action-sheet>
+  </div>
+</template>
+
+<script lang="jsx">
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      activeName: 1,
+      boxVisibility: false,
+      menus: [
+        {
+          id: 1,
+          label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
+        },
+        {
+          id: 2,
+          label: '我是小树'
+        },
+        {
+          id: 3,
+          label: '我是小草'
+        },
+        {
+          id: 4,
+          label: '我是小叶',
+          warn: true
+        },
+        {
+          id: 5,
+          label: '我是小茎'
+        },
+        {
+          id: 6,
+          label: '我是小根'
+        },
+        {
+          id: 7,
+          label: '我是小枝'
+        },
+        {
+          id: 8,
+          label: '我是小木'
+        }
+      ]
+    }
+  },
+  methods: {
+    visibleHandle() {
+      this.$refs.action.visibleHandle()
+    },
+    fn() {
+      this.boxVisibility = true
+    }
+  }
+}
+</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;
+}
+</style>

package/demos/mobile/app/actionsheet/slot-item.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="tiny-mobile-action-sheet-demo action-sheet-slot">
+    <div class="page__hd">
+      <h1 class="page__title">上滑列表</h1>
+      <p class="page__desc">弹出式菜单</p>
+    </div>
+    <tiny-button @click="fn" type="primary" size="large">上滑列表</tiny-button>
+    <tiny-action-sheet
+      v-model="activeName"
+      :menus="menus"
+      :visible="boxVisibility"
+      @update:visible="boxVisibility = $event"
+      content-position
+    >
+      <template #item="data">
+        <div>
+          {{ data.item.label }}
+        </div>
+      </template>
+    </tiny-action-sheet>
+  </div>
+</template>
+
+<script lang="jsx">
+import { ActionSheet, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      activeName: 1,
+      boxVisibility: false,
+      menus: [
+        {
+          id: 1,
+          label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
+        },
+        {
+          id: 2,
+          label: '我是小树'
+        },
+        {
+          id: 3,
+          label: '我是小草'
+        },
+        {
+          id: 4,
+          label: '我是小叶',
+          warn: true
+        }
+      ]
+    }
+  },
+  methods: {
+    fn() {
+      this.boxVisibility = true
+    }
+  }
+}
+</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;
+}
+</style>

package/demos/mobile/app/actionsheet/webdoc/actionsheet.cn.md

@@ -0,0 +1,11 @@
+---
+title: ActionSheet 上滑列表组件
+---
+
+# ActionSheet 上滑列表组件
+
+<div> 
+
+ActionSheet 上滑列表组件
+
+</div>

package/demos/mobile/app/actionsheet/webdoc/actionsheet.en.md

@@ -0,0 +1,7 @@
+---
+title: ActionSheet 上滑列表组件
+---
+
+# ActionSheet 上滑列表组件
+
+<div> ActionSheet </div>

package/demos/mobile/app/actionsheet/webdoc/actionsheet.js

@@ -0,0 +1,138 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'clickfn',
+      name: {
+        'zh-CN': '点击列表事件',
+        'en-US': 'button type'
+      },
+      desc: {
+        'zh-CN': '<p>点击列表事件</p>',
+        'en-US': '<p>button type</p>'
+      },
+      codeFiles: ['clickfn.vue']
+    },
+    {
+      demoId: 'ellipsis',
+      name: {
+        'zh-CN': '内容超出显示省略号',
+        'en-US': 'button round'
+      },
+      desc: {
+        'zh-CN': '<p>内容超出显示省略号</p>',
+        'en-US': '<p>button round</p>'
+      },
+      codeFiles: ['ellipsis.vue']
+    },
+    {
+      demoId: 'slot-item',
+      name: {
+        'zh-CN': '插槽',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过<code>item</code>插槽自定义下拉列表内容<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['slot-item.vue']
+    },
+    {
+      demoId: 'slot-action',
+      name: {
+        'zh-CN': '插槽',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过<code>action</code>插槽自定义操作项内容<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['slot-action.vue']
+    }
+  ],
+  apis: [
+    {
+      name: 'actionsheet ', // 组件名称展示使用
+      type: 'component', // API 类型
+      properties: [
+        {
+          name: 'ellipsis',
+          type: 'Boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>是否省略显示，该属性默认为false</p>',
+            'en-US': 'display different button'
+          },
+          demoId: 'ellipsis'
+        },
+        {
+          name: 'menus',
+          type: 'Array',
+          defaultValue: '50',
+          desc: {
+            'zh-CN': '<p>列表数组</p>',
+            'en-US': 'display different button'
+          },
+          demoId: 'ellipsis'
+        },
+        {
+          name: 'visible',
+          type: 'Boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '<p>上划列表显示隐藏,该属性默认为false</p>',
+            'en-US': 'display different button'
+          },
+          demoId: 'ellipsis'
+        }
+      ],
+      methods: [
+        {
+          name: 'visibleHandle',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>菜单列表隐藏方法</p>',
+            'en-US': 'Click'
+          },
+          demoId: 'slot-item'
+        }
+      ],
+      events: [
+        {
+          name: 'click',
+          type: 'Function()',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置组件点击列表项时触发的回调函数</p>',
+            'en-US': 'Click'
+          },
+          demoId: 'clickfn'
+        }
+      ],
+      slot: [
+        {
+          name: 'action',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>自定义操作项内容</p>',
+            'en-US': 'Click'
+          },
+          demoId: 'slot-action'
+        },
+        {
+          name: ' item',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>自定义列表项内容</p>',
+            'en-US': 'Click'
+          },
+          demoId: 'slot-item'
+        }
+      ]
+    }
+  ]
+}

package/demos/mobile/app/alert/custom-close.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="alert-wrap">
+    <tiny-alert>默认关闭按钮</tiny-alert>
+    <tiny-alert :closable="false"> 不可关闭 </tiny-alert>
+    <tiny-alert close-text="关闭"> 自定义关闭按钮为文本 </tiny-alert>
+    <tiny-alert type="warning" description="type 为 warning"></tiny-alert>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  },
+  methods: {
+    close() {
+      console.log('已关闭！')
+    }
+  }
+}
+</script>
+
+<style>
+.alert-wrap .tiny-mobile-alert {
+  margin-bottom: 8px;
+}
+</style>

package/demos/mobile/app/alert/icon.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="alert-wrap">
+    <tiny-alert :icon="IconCustom">自定义图标</tiny-alert>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Alert } from '@opentiny/vue'
+import { iconCustom } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  },
+  data() {
+    return {
+      IconCustom: iconCustom()
+    }
+  }
+}
+</script>
+
+<style>
+.alert-wrap .tiny-mobile-alert {
+  margin-bottom: 8px;
+}
+</style>

package/demos/mobile/app/alert/size.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="alert-wrap">
+    <tiny-alert>默认大小</tiny-alert>
+    <tiny-alert size="normal">size 为 normal</tiny-alert>
+    <tiny-alert size="large">size 为 large</tiny-alert>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  }
+}
+</script>
+
+<style>
+.alert-wrap .tiny-mobile-alert {
+  margin-bottom: 8px;
+}
+</style>

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

@@ -0,0 +1,23 @@
+<template>
+  <div class="alert-wrap">
+    <tiny-alert>
+      <span style="color: red">根据 default slot 自定义内容</span>
+    </tiny-alert>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert
+  }
+}
+</script>
+
+<style>
+.alert-wrap .tiny-mobile-alert {
+  margin-bottom: 8px;
+}
+</style>

package/demos/mobile/app/alert/webdoc/alert.cn.md

@@ -0,0 +1,13 @@
+---
+title: Alert 提示 
+---
+
+# Alert 提示 
+
+<div>
+
+Alert 提示 
+
+
+
+</div>

package/demos/mobile/app/alert/webdoc/alert.en.md

@@ -0,0 +1,11 @@
+---
+title: Alert 提示 
+---
+
+# Alert 提示 
+
+<div>
+
+
+
+</div>