@opentiny/vue-docs 2.2.4 → 2.2.6

package/demos/mobile/app/container/basic-usage.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="demo-container">
+    <div class="option-row">
+      <span class="tip">选择版型：</span>
+      <tiny-radio-group v-model="pattern">
+        <tiny-radio label="default">默认:default</tiny-radio>
+        <tiny-radio label="classic">经典:classic</tiny-radio>
+      </tiny-radio-group>
+    </div>
+    <tiny-container :pattern="pattern">
+      <template #left>
+        <div>标题</div>
+      </template>
+      <template #center>
+        <div>
+          内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
+        </div>
+      </template>
+      <template #right>
+        <div>状态</div>
+      </template>
+    </tiny-container>
+
+    <tiny-container :pattern="pattern">
+      <template #left>
+        <div>标题标题标题标题标题</div>
+      </template>
+      <template #center>
+        <div>
+          内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
+        </div>
+      </template>
+      <template #right>
+        <div>状态状态状态状态状态</div>
+      </template>
+    </tiny-container>
+  </div>
+</template>
+
+<script>
+import { Container, Radio, RadioGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyContainer: Container,
+    TinyRadio: Radio,
+    TinyRadioGroup: RadioGroup
+  },
+  data() {
+    return {
+      pattern: 'default'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.option-row {
+  display: flex;
+  align-items: center;
+}
+.option-row > span {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 100px;
+  font-size: 16px;
+  font-weight: bold;
+}
+.option-row .tiny-radio-group {
+  flex-wrap: wrap;
+  height: 60px;
+}
+.demo-container .tiny-container {
+  height: 300px;
+  color: #5f6774;
+  text-align: center;
+  font-size: 18px;
+  position: relative;
+  margin-top: 24px;
+}
+
+.demo-container .tiny-container :deep(.tiny-container__header) {
+  background-color: #ecf8ff;
+  border: 3px solid #ffffff;
+  color: #5b90af;
+}
+
+.demo-container .tiny-container :deep(.tiny-container__aside) {
+  background-color: #fff0f0;
+  border: 3px solid #ffffff;
+  color: #d27070;
+}
+
+.demo-container .tiny-container :deep(.tiny-container__main) {
+  background-color: #fffdec;
+  border: 3px solid #ffffff;
+  color: #b1a859;
+}
+
+.demo-container .tiny-container :deep(.tiny-container__footer) {
+  background-color: #e8ffed;
+  border: 3px solid #ffffff;
+  color: #84a18a;
+}
+</style>

package/demos/mobile/app/container/custom-width.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="demo-container">
+    <div class="option-row">
+      <span class="tip">选择版型：</span>
+      <tiny-radio-group v-model="pattern">
+        <tiny-radio label="default">默认:default</tiny-radio>
+        <tiny-radio label="classic">经典:classic</tiny-radio>
+      </tiny-radio-group>
+    </div>
+    <tiny-container :pattern="pattern" :left-width="leftWidth" :right-width="rightWidth">
+      <template #left>
+        <div>标题标题标题标题标题</div>
+      </template>
+      <template #center>
+        <div>
+          内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
+        </div>
+      </template>
+      <template #right>
+        <div>状态状态状态状态状态</div>
+      </template>
+    </tiny-container>
+  </div>
+</template>
+
+<script>
+import { Container, Radio, RadioGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyContainer: Container,
+    TinyRadio: Radio,
+    TinyRadioGroup: RadioGroup
+  },
+  data() {
+    return {
+      pattern: 'default',
+      leftWidth: 80,
+      rightWidth: 80
+    }
+  }
+}
+</script>
+
+<style scoped>
+.option-row {
+  display: flex;
+  align-items: center;
+}
+.option-row > span {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 100px;
+  font-size: 16px;
+  font-weight: bold;
+}
+.option-row .tiny-radio-group {
+  flex-wrap: wrap;
+  height: 60px;
+}
+.demo-container .tiny-container {
+  height: 300px;
+  color: #5f6774;
+  text-align: center;
+  font-size: 18px;
+  position: relative;
+  margin-top: 24px;
+}
+
+.demo-container .tiny-container :deep(.tiny-container__header) {
+  background-color: #ecf8ff;
+  border: 3px solid #ffffff;
+  color: #5b90af;
+}
+
+.demo-container .tiny-container :deep(.tiny-container__aside) {
+  background-color: #fff0f0;
+  border: 3px solid #ffffff;
+  color: #d27070;
+}
+
+.demo-container .tiny-container :deep(.tiny-container__main) {
+  background-color: #fffdec;
+  border: 3px solid #ffffff;
+  color: #b1a859;
+}
+
+.demo-container .tiny-container :deep(.tiny-container__footer) {
+  background-color: #e8ffed;
+  border: 3px solid #ffffff;
+  color: #84a18a;
+}
+</style>

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

@@ -0,0 +1,7 @@
+---
+title: Container 版型
+---
+
+# Container 版型
+
+<div> 内置2种常见布局版型，方便快速搭建页面。</div>

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

@@ -0,0 +1,7 @@
+---
+title: Container dimension
+---
+
+# Container dimension
+
+<div>Container component for layout, which facilitates page layout creation.</div>

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

@@ -0,0 +1,80 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      'demoId': 'basic-usage',
+      'name': { 'zh-CN': '基础用法', 'en-US': 'Basic Usage' },
+      'desc': {
+        'zh-CN': '基础用法',
+        'en-US': 'base'
+      },
+      'codeFiles': ['basic-usage.vue']
+    },
+    {
+      'demoId': 'custom-width',
+      'name': { 'zh-CN': '自定义宽度和高度', 'en-US': 'Custom width ' },
+      'desc': {
+        'zh-CN': '自定义宽度',
+        'en-US': 'custom width'
+      },
+      'codeFiles': ['custom-width.vue']
+    }
+  ],
+  apis: [
+    {
+      'name': 'container',
+      'type': 'component',
+      'props': [
+        {
+          'name': 'pattern',
+          'type': `'default' | 'classic'`,
+          'defaultValue': '"default"',
+          'desc': {
+            'zh-CN': '版型类型',
+            'en-US': 'Measurement type'
+          },
+          'demoId': 'basic-usaage'
+        },
+        {
+          'name': 'left-width',
+          'type': 'number | string',
+          'defaultValue': '60',
+          'desc': { 'zh-CN': '左侧宽度', 'en-US': 'Left width' },
+          'demoId': 'custom-width'
+        },
+        {
+          'name': 'right-width',
+          'type': 'number | string',
+          'defaultValue': '44',
+          'desc': { 'zh-CN': '右侧宽度', 'en-US': 'right width' },
+          'demoId': 'custom-width'
+        }
+      ],
+      'events': [],
+      'slots': [
+        {
+          'name': 'left',
+          'type': '',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '左侧内容插槽', 'en-US': 'Title Slot' },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'center',
+          'type': '',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '中部内容插槽', 'en-US': 'Renter Slot' },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'right',
+          'type': '',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '右侧内容插槽', 'en-US': 'Right Slot' },
+          'demoId': 'basic-usage'
+        }
+      ]
+    }
+  ]
+}

package/demos/mobile/app/pull-refresh/animation-duration.vue

@@ -1,10 +1,24 @@
 <template>
-  <tiny-pull-refresh :pullDown="pullDownRefresh" :animation-duration="1000">
-    <h3>hello pull-refresh</h3>
-  </tiny-pull-refresh>
+  <div>
+    <div class="page__hd">
+      <h1 class="page__title">Refresh</h1>
+      <p class="page__desc">刷新</p>
+    </div>
+    <div class="page__content">
+      <tiny-pull-refresh
+        animation-duration="1000"
+        v-model="value"
+        :has-more="hasMore"
+        @pullDown="handlerPullDownRefresh"
+        @pullUp="handlerPullUpLoad"
+      >
+        <div :key="item.name" v-for="item in data">{{ item.label }}</div>
+      </tiny-pull-refresh>
+    </div>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { PullRefresh } from '@opentiny/vue'
 
 export default {
@@ -13,19 +27,51 @@ export default {
   },
   data() {
     return {
-      pullDownRefresh: {
-        handler: () => this.handlerPullDownRefresh()
-      }
+      data: [...Array(30)].map((i, index) => {
+        return { label: `${index + 1} list data` }
+      }),
+      value: true,
+      hasMore: true
     }
   },
   methods: {
+    handlerPullUpLoad() {
+      setTimeout(() => {
+        const length = this.data.length
+        for (let i = 1; i <= 10; i++) {
+          this.data.push({ label: `${i + length} list data` })
+        }
+        this.value = false
+      }, 2000)
+    },
     handlerPullDownRefresh() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve()
-        }, 1000)
-      })
+      setTimeout(() => {
+        this.value = false
+      }, 2000)
     }
   }
 }
 </script>
+
+<style scoped>
+.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;
+}
+
+.page__content {
+  height: 350px;
+}
+</style>

package/demos/mobile/app/pull-refresh/base.vue

@@ -2,20 +2,22 @@
   <div>
     <div class="page__hd">
       <h1 class="page__title">Refresh</h1>
-      <p class="page__desc">下拉刷新</p>
+      <p class="page__desc">刷新</p>
+    </div>
+    <div class="page__content">
+      <tiny-pull-refresh
+        v-model="value"
+        :has-more="hasMore"
+        @pullDown="handlerPullDownRefresh"
+        @pullUp="handlerPullUpLoad"
+      >
+        <div :key="item.name" v-for="item in data">{{ item.label }}</div>
+      </tiny-pull-refresh>
     </div>
-    <tiny-pull-refresh
-      :pullDown="pullDownRefresh"
-      success-text="刷新成功"
-      animation-duration="500"
-      success-duration="500"
-    >
-      <h3>hello pull-refresh</h3>
-    </tiny-pull-refresh>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { PullRefresh } from '@opentiny/vue'
 
 export default {
@@ -24,18 +26,24 @@ export default {
   },
   data() {
     return {
-      pullDownRefresh: {
-        handler: () => this.handlerPullDownRefresh()
-      }
+      data: [...Array(30)].map((i, index) => {
+        return { label: `${index} list data` }
+      }),
+      value: true,
+      hasMore: true
     }
   },
   methods: {
+    handlerPullUpLoad() {
+      setTimeout(() => {
+        this.value = false
+        this.hasMore = false
+      }, 3000)
+    },
     handlerPullDownRefresh() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve()
-        }, 1000)
-      })
+      setTimeout(() => {
+        this.value = false
+      }, 3000)
     }
   }
 }
@@ -45,15 +53,21 @@ export default {
 .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;
 }
+
+.page__content {
+  height: 350px;
+}
 </style>

package/demos/mobile/app/pull-refresh/disabled-pull-down.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <div class="page__hd">
+      <h1 class="page__title">Refresh</h1>
+      <p class="page__desc">刷新</p>
+    </div>
+    <div class="page__content">
+      <tiny-pull-refresh v-model="value" :has-more="hasMore" disabled-pull-down @pullUp="handlerPullUpLoad">
+        <div :key="item.name" v-for="item in data">{{ item.label }}</div>
+      </tiny-pull-refresh>
+    </div>
+  </div>
+</template>
+
+<script>
+import { PullRefresh } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPullRefresh: PullRefresh
+  },
+  data() {
+    return {
+      data: [...Array(30)].map((i, index) => {
+        return { label: `${index + 1} list data` }
+      }),
+      value: false,
+      hasMore: true
+    }
+  },
+  methods: {
+    handlerPullUpLoad() {
+      setTimeout(() => {
+        const length = this.data.length
+        for (let i = 1; i <= 10; i++) {
+          this.data.push({ label: `${i + length} list data` })
+        }
+        this.value = false
+      }, 3000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.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;
+}
+
+.page__content {
+  height: 350px;
+}
+</style>

package/demos/mobile/app/pull-refresh/disabled-pull-up.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <div class="page__hd">
+      <h1 class="page__title">Refresh</h1>
+      <p class="page__desc">刷新</p>
+    </div>
+    <div class="page__content">
+      <tiny-pull-refresh v-model="value" :has-more="hasMore" disabled-pull-up @pullDown="handlerPullDown">
+        <div :key="item.name" v-for="item in data">{{ item.label }}</div>
+      </tiny-pull-refresh>
+    </div>
+  </div>
+</template>
+
+<script>
+import { PullRefresh } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPullRefresh: PullRefresh
+  },
+  data() {
+    return {
+      data: [...Array(30)].map((i, index) => {
+        return { label: `${index + 1} list data` }
+      }),
+      value: false,
+      hasMore: true
+    }
+  },
+  methods: {
+    handlerPullDown() {
+      setTimeout(() => {
+        this.data = []
+        const length = this.data.length
+        for (let i = 1; i <= 20; i++) {
+          this.data.push({ label: `${i + length} list data` })
+        }
+        this.value = false
+      }, 3000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.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;
+}
+
+.page__content {
+  height: 350px;
+}
+</style>

package/demos/mobile/app/pull-refresh/{hasmore.vue → event.vue}

@@ -6,11 +6,10 @@
     </div>
     <div class="page__content">
       <tiny-pull-refresh
-        :pullUp="pullUpLoad"
-        :hasMore="hasMore"
-        success-text="刷新成功"
-        animation-duration="500"
-        success-duration="500"
+        v-model="value"
+        :has-more="hasMore"
+        @pullDown="handlerPullDownRefresh"
+        @pullUp="handlerPullUpLoad"
       >
         <div :key="item.name" v-for="item in data">{{ item.label }}</div>
       </tiny-pull-refresh>
@@ -27,25 +26,24 @@ export default {
   },
   data() {
     return {
-      data: [{ label: 'hello pull-refresh' }],
-      pullUpLoad: {
-        handler: () => this.handlerPullUpLoad()
-      },
+      data: [...Array(30)].map((i, index) => {
+        return { label: `${index} list data` }
+      }),
+      value: true,
       hasMore: true
     }
   },
   methods: {
     handlerPullUpLoad() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          if (this.data.length === 5) {
-            this.hasMore = false
-          } else {
-            this.data.unshift({ label: 'hello pull-refresh up' })
-            resolve(this.data)
-          }
-        }, 1000)
-      })
+      setTimeout(() => {
+        this.value = false
+        this.hasMore = false
+      }, 3000)
+    },
+    handlerPullDownRefresh() {
+      setTimeout(() => {
+        this.value = false
+      }, 3000)
     }
   }
 }
@@ -55,18 +53,21 @@ export default {
 .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;
 }
+
 .page__content {
-  height: 250px;
+  height: 350px;
 }
 </style>