@opentiny/vue-docs 2.1.9 → 2.2.0

package/demos/mobile/app/radio/base.vue

@@ -1,87 +1,20 @@
 <template>
   <div class="demo">
-    <p class="demo-title">勾选-单选</p>
-    <div>
-      <tiny-list
-        class="demo-list"
-        v-for="item of dataList"
-        :key="item.id"
-        :id="item.id"
-        :content="item.content"
-        :sub-text="item.subtext"
-        @click="clickFn"
-      >
-        <template #suffix>
-          <tiny-radio v-model="value1" :label="item.id"></tiny-radio>
-        </template>
-      </tiny-list>
-    </div>
-    <div class="withlist">
-      <tiny-list
-        class="demo-list"
-        v-for="item of dataList1"
-        :key="item.id"
-        :id="item.id"
-        :content="item.content"
-        :sub-text="item.subtext"
-        :content-des="item.contentdes"
-        @click="clickFn"
-      >
-        <template #suffix>
-          <tiny-radio v-model="value1" :label="item.id"></tiny-radio>
-        </template>
-      </tiny-list>
-    </div>
+    <p>默认</p>
+    <tiny-radio v-model="value"></tiny-radio>
   </div>
 </template>
 
-<script lang="jsx">
-import { Radio, List } from '@opentiny/vue'
+<script>
+import { Radio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyList: List
+    TinyRadio: Radio
   },
   data() {
     return {
-      value1: '1',
-      value2: '1',
-      dataList: [
-        {
-          id: '1',
-          content: '主文本1',
-          subtext: '次文本1',
-          contentdes: '这是描述文本1'
-        },
-        {
-          id: '2',
-          content: '主文本2',
-          subtext: '次文本2',
-          contentdes: '这是描述文本2'
-        }
-      ],
-      dataList1: [
-        {
-          id: '1',
-          content: '主文本1',
-          subtext: '',
-          contentdes: '这是描述文本1'
-        },
-        {
-          id: '2',
-          content: '主文本2',
-          subtext: '',
-          contentdes: '这是描述文本2'
-        }
-      ]
-    }
-  },
-  methods: {
-    clickFn(list) {
-      if (list.id) {
-        this.value1 = list.id
-      }
+      value: false
     }
   }
 }
@@ -89,39 +22,8 @@ export default {
 
 <style>
 .demo {
-  background: #eeeeee;
   height: 100%;
   overflow-y: scroll;
-}
-.demo-title {
-  padding-right: 16px;
-  padding-left: 16px;
-  margin-top: 0.77em;
-  margin-bottom: 0.3em;
-  color: #666;
-  font-size: 14px;
-}
-.demo-list {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  padding: 8px 16px;
-}
-.withlist {
-  margin-top: 20px;
-}
-.demo .tiny-mobile-list__content-des {
-  margin-top: 4px;
-  color: #999;
-  font-size: 12px;
-  line-height: 1.6;
-  text-align: justify;
-}
-.demo .tiny-mobile-radio__label {
-  display: none;
+  padding: 20px;
 }
 </style>

package/demos/mobile/app/radio/disabled.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="radio-wrap">
-    <tiny-radio v-model="value" label="1" border disabled text="单选框 1"></tiny-radio>
-    <tiny-radio v-model="value" label="2" border name="name">单选框 2</tiny-radio>
+  <div class="demo">
+    <p>禁用</p>
+    <tiny-radio v-model="value" label="1" disabled>我同意</tiny-radio>
+    <tiny-radio v-model="value" label="2" disabled>我拒绝</tiny-radio>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Radio } from '@opentiny/vue'
 
 export default {
@@ -20,8 +21,10 @@ export default {
 }
 </script>
 
-<style scoped>
-.radio-wrap {
+<style>
+.demo {
+  height: 100%;
+  overflow-y: scroll;
   padding: 20px;
 }
 </style>

package/demos/mobile/app/radio/event.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="demo">
+    <p>默认</p>
+    <tiny-radio v-model="value" label="1" @change="changeAction">男</tiny-radio>
+    <tiny-radio v-model="value" label="2" @change="changeAction">女</tiny-radio>
+    <p>{{ text }}</p>
+  </div>
+</template>
+
+<script>
+import { Radio } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyRadio: Radio
+  },
+  data() {
+    return {
+      value: '1',
+      text: '男'
+    }
+  },
+  methods: {
+    changeAction(value) {
+      this.text = value === '1' ? '男' : '女'
+    }
+  }
+}
+</script>
+
+<style>
+.demo {
+  height: 100%;
+  overflow-y: scroll;
+  padding: 20px;
+}
+</style>

package/demos/mobile/app/radio/label.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="demo">
+    <p>默认</p>
+    <tiny-radio v-model="value" label="1">男</tiny-radio>
+    <tiny-radio v-model="value" label="2">女</tiny-radio>
+  </div>
+</template>
+
+<script>
+import { Radio } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyRadio: Radio
+  },
+  data() {
+    return {
+      value: '1'
+    }
+  }
+}
+</script>
+
+<style>
+.demo {
+  height: 100%;
+  overflow-y: scroll;
+  padding: 20px;
+}
+</style>

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

@@ -15,40 +15,40 @@ export default {
       codeFiles: ['base.vue']
     },
     {
-      demoId: 'border',
+      demoId: 'disabled',
       name: {
-        'zh-CN': '显示边框',
-        'en-US': 'button type'
+        'zh-CN': '禁用状态',
+        'en-US': 'disabled'
       },
       desc: {
-        'zh-CN': '<p>显示边框</p>',
-        'en-US': '<p>button type</p>'
+        'zh-CN': '<p>禁用</p>',
+        'en-US': '<p>disabled</p>'
       },
-      codeFiles: ['border.vue']
+      codeFiles: ['disabled.vue']
     },
     {
-      demoId: 'disabled',
+      demoId: 'label',
       name: {
-        'zh-CN': '是否禁用',
-        'en-US': 'button round'
+        'zh-CN': '自定义label',
+        'en-US': 'custom label'
       },
       desc: {
-        'zh-CN': '<p>是否禁用</p>',
-        'en-US': '<p>button round</p>'
+        'zh-CN': '<p>自定义label</p>',
+        'en-US': '<p>custom label</p>'
       },
-      codeFiles: ['disabled.vue']
+      codeFiles: ['label.vue']
     },
     {
-      demoId: 'event-change',
+      demoId: 'event',
       name: {
-        'zh-CN': '值改变事件',
-        'en-US': 'events'
+        'zh-CN': '选中状态事件',
+        'en-US': 'event'
       },
       desc: {
-        'zh-CN': '<p>值改变事件</p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>事件</p>',
+        'en-US': '<p>event</p>'
       },
-      codeFiles: ['event-change.vue']
+      codeFiles: ['event.vue']
     }
   ],
   apis: [
@@ -58,7 +58,7 @@ export default {
       properties: [
         {
           name: 'disabled',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: 'false',
           desc: {
             'zh-CN': '<p>是否禁用</p>',
@@ -66,55 +66,45 @@ export default {
           },
           demoId: 'disabled'
         },
-        {
-          name: 'border',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否显示边框</p>',
-            'en-US': 'display different button'
-          },
-          demoId: 'border'
-        },
         {
           name: 'label',
-          type: 'Object | String',
+          type: 'object | string',
           defaultValue: '',
           desc: {
             'zh-CN': '<p>Radio 的 value,该属性默认为{}</p>',
             'en-US': 'display different button'
           },
-          demoId: 'event-change'
+          demoId: 'label'
         },
         {
           name: 'name',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '<p>原生 name 属性</p>',
             'en-US': 'display different button'
           },
-          demoId: 'disabled'
+          demoId: 'base'
         },
         {
           name: 'text',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '<p>文本</p>',
             'en-US': 'display different button'
           },
-          demoId: 'disabled'
+          demoId: 'base'
         },
         {
           name: 'value',
-          type: 'Object | String',
+          type: 'object | string',
           defaultValue: '{}',
           desc: {
             'zh-CN': '<p>绑定值，该属性默认为{}</p>',
             'en-US': 'display different button'
           },
-          demoId: 'border'
+          demoId: 'base'
         }
       ],
       events: [
@@ -126,7 +116,7 @@ export default {
             'zh-CN': '<p>绑定值变化时触发的事件,可获取changeValue</p>',
             'en-US': 'Click'
           },
-          demoId: 'event-change'
+          demoId: 'event'
         }
       ],
       slots: [

package/demos/mobile/app/switch/{true-false-value.vue → base.vue}

@@ -1,7 +1,7 @@
 <template>
   <div class="switch-wrap">
-    <tiny-switch v-model="value" true-value="yes" false-value="no"></tiny-switch>
-    当前值：{{ value }}
+    <p>默认</p>
+    <tiny-switch v-model="value1" true-value="1"></tiny-switch>
   </div>
 </template>
 
@@ -14,7 +14,7 @@ export default {
   },
   data() {
     return {
-      value: 'no'
+      value1: '1'
     }
   }
 }

package/demos/mobile/app/switch/disabled.vue

@@ -1,15 +1,9 @@
 <template>
   <div class="switch-wrap">
-    <div class="page__hd">
-      <h1 class="page__title">Switch</h1>
-      <p class="page__desc">Switch开关</p>
-    </div>
-    <div class="geot">
-      <div class="sbody">
-        <span class="title">禁用</span>
-      </div>
-      <tiny-switch v-model="value" disabled></tiny-switch>
-    </div>
+    <p>不可用-开</p>
+    <tiny-switch :modelValue="true" disabled></tiny-switch>
+    <p>不可用-关</p>
+    <tiny-switch :modelValue="false" disabled></tiny-switch>
   </div>
 </template>
 
@@ -19,49 +13,12 @@ import { Switch } from '@opentiny/vue'
 export default {
   components: {
     TinySwitch: Switch
-  },
-  data() {
-    return {
-      value: true
-    }
   }
 }
 </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;
-}
-.title {
-  color: #333;
-  font-size: 16px;
-}
 .switch-wrap {
   padding: 20px;
 }
-.sbody {
-  display: flex;
-  flex-direction: column;
-  height: 50px;
-  justify-content: space-around;
-}
-.geot {
-  display: flex;
-  height: 60px;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #ddd;
-}
 </style>

package/demos/mobile/app/switch/{switch-event-change.vue → event.vue}

@@ -1,6 +1,8 @@
 <template>
   <div class="switch-wrap">
-    <tiny-switch :value="value" @change="handleChange"></tiny-switch>
+    <p>默认</p>
+    <tiny-switch v-model="value1" true-value="1" @change="handleChange"></tiny-switch>
+    <span class="status">{{ status }}</span>
   </div>
 </template>
 
@@ -13,13 +15,13 @@ export default {
   },
   data() {
     return {
-      value: true
+      value1: '1',
+      status: '已开启'
     }
   },
   methods: {
     handleChange(val) {
-      let msg = val ? '已开启' : '已关闭'
-      console.log(msg)
+      this.status = val ? '已开启' : '已关闭'
     }
   }
 }
@@ -29,4 +31,8 @@ export default {
 .switch-wrap {
   padding: 20px;
 }
+
+.status {
+  margin-left: 20px;
+}
 </style>

package/demos/mobile/app/switch/loading.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="switch-wrap">
+    <p>加载状态</p>
+    <tiny-switch :modelValue="true" @change="handleChangeLoading1" :loading="loading1"></tiny-switch>
+    <p>加载状态-小尺寸</p>
+    <tiny-switch :modelValue="true" @change="handleChangeLoading2" :loading="loading2" mini></tiny-switch>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Switch } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySwitch: Switch
+  },
+  data() {
+    return {
+      loading1: false,
+      loading2: false
+    }
+  },
+  methods: {
+    handleChangeLoading1() {
+      this.loading1 = true
+      setTimeout(() => {
+        this.loading1 = false
+      }, 2000)
+    },
+    handleChangeLoading2() {
+      this.loading2 = true
+      setTimeout(() => {
+        this.loading2 = false
+      }, 2000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.switch-wrap {
+  padding: 20px;
+}
+</style>

package/demos/mobile/app/switch/mini.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="switch-wrap">
+    <p>小尺寸</p>
+    <tiny-switch mini></tiny-switch>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Switch } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySwitch: Switch
+  }
+}
+</script>
+
+<style scoped>
+.switch-wrap {
+  padding: 20px;
+}
+</style>