@opentiny/vue-docs 2.2.6 → 2.2.7

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

@@ -0,0 +1,32 @@
+<template>
+  <div class="demo-input">
+    <tiny-input v-model="input" :placeholder="placeholder"></tiny-input>
+    <br />
+    <tiny-input v-model="textareaVal" type="textarea" placeholder="用作文本框"></tiny-input>
+  </div>
+</template>
+
+<script>
+import { Input } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyInput: Input
+  },
+  data() {
+    return {
+      input: '',
+      textareaVal: '',
+      placeholder: '请输入内容'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-input {
+  padding: 20px 16px;
+  height: 100%;
+  background: #f5f5f5;
+}
+</style>

package/demos/mobile/app/input/clearable.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="input-wrap">
+  <div class="demo-input">
     <tiny-input v-model="input" clearable></tiny-input>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Input } from '@opentiny/vue'
 
 export default {
@@ -13,16 +13,16 @@ export default {
   },
   data() {
     return {
-      input: '这是输入框'
+      input: '可一键清空'
     }
   }
 }
 </script>
 
-<style>
-.input-wrap {
-  padding-top: 20px;
+<style scoped>
+.demo-input {
+  padding: 20px 16px;
   height: 100%;
-  background: #f4f4f4;
+  background: #f5f5f5;
 }
 </style>

package/demos/mobile/app/input/counter.vue

@@ -1,10 +1,12 @@
 <template>
-  <div class="input-wrap">
-    <tiny-input v-model="input" type="textarea" counter show-word-limit :maxlength="20"></tiny-input>
+  <div class="demo-input">
+    <tiny-input v-model="input1" counter :maxlength="20"></tiny-input>
+
+    <tiny-input v-model="input2" type="textarea" show-word-limit :maxlength="20"></tiny-input>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Input } from '@opentiny/vue'
 
 export default {
@@ -13,16 +15,21 @@ export default {
   },
   data() {
     return {
-      input: '测试 counter 属性'
+      input1: 'counter 示例',
+      input2: 'show-word-limit 示例'
     }
   }
 }
 </script>
 
-<style>
-.input-wrap {
-  padding-top: 20px;
+<style scoped>
+.demo-input {
+  padding: 20px 16px;
   height: 100%;
-  background: #f4f4f4;
+  background: #f5f5f5;
+}
+
+.demo-input [class^='tiny'] {
+  margin-bottom: 8px;
 }
 </style>

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

@@ -0,0 +1,31 @@
+<template>
+  <div class="demo-input">
+    <tiny-input v-model="input" disabled :placeholder="placeholder"></tiny-input>
+    <br />
+    <tiny-input v-model="text" type="textarea" disabled></tiny-input>
+  </div>
+</template>
+
+<script>
+import { Input } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyInput: Input
+  },
+  data() {
+    return {
+      input: '',
+      text: '已输入值',
+      placeholder: '请输入内容'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-input {
+  padding: 20px;
+  height: 100%;
+}
+</style>

package/demos/mobile/app/input/events.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="input-wrap">
-    <tiny-input v-model="input" clearable @change="change" @clear="clear"></tiny-input>
+  <div class="demo-input-events">
+    <tiny-input v-model="inputValue" placeholder="input" @input="onInput"></tiny-input>
+    <tiny-input v-model="inputChange" placeholder="change" @change="onChange"></tiny-input>
+    <tiny-input v-model="focusBlur" placeholder="focus, blur" @focus="onFocus" @blur="onBlur"></tiny-input>
+    <tiny-input v-model="clearValue" placeholder="cleared" clearable @clear="onClear"></tiny-input>
   </div>
 </template>
 
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
+<script>
+import { Input, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -13,24 +16,40 @@ export default {
   },
   data() {
     return {
-      input: '事件测试'
+      inputValue: '',
+      inputChange: '',
+      focusBlur: '',
+      clearValue: 'clear event'
     }
   },
   methods: {
-    change(val) {
-      console.log('当前内容：' + val)
+    onChange() {
+      Modal.message('change')
     },
-    clear() {
-      console.log('clear 事件')
+    onInput() {
+      Modal.message('input')
+    },
+    onBlur() {
+      Modal.message('blur')
+    },
+    onFocus() {
+      Modal.message('focus')
+    },
+    onClear() {
+      Modal.message('clear')
     }
   }
 }
 </script>
 
-<style>
-.input-wrap {
-  padding-top: 20px;
+<style scoped>
+.demo-input-events {
   height: 100%;
-  background: #f4f4f4;
+  padding: 20px 16px;
+  background: #f5f5f5;
+}
+
+.demo-input-events [class^='tiny'] {
+  margin-bottom: 16px;
 }
 </style>

package/demos/mobile/app/input/max-min-length.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="input-wrap">
+  <div class="demo-input">
     <tiny-input v-model="input" counter :maxlength="10" :minlength="5"></tiny-input>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Input } from '@opentiny/vue'
 
 export default {
@@ -19,10 +19,10 @@ export default {
 }
 </script>
 
-<style>
-.input-wrap {
+<style scoped>
+.demo-input {
   padding-top: 20px;
   height: 100%;
-  background: #f4f4f4;
+  background: #f5f5f5;
 }
 </style>

package/demos/mobile/app/input/methods.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="demo-input-methods">
+    <section>
+      <tiny-button plain @click="focus">focus</tiny-button>
+      <tiny-button plain @click="blur">blur</tiny-button>
+      <tiny-input ref="inputRef" v-model="value" placeholder="Please input"></tiny-input>
+    </section>
+    <section>
+      <tiny-button plain @click="select">select</tiny-button>
+      <tiny-input ref="selectRef" v-model="selectValue" placeholder="Please input"></tiny-input>
+    </section>
+  </div>
+</template>
+
+<script>
+import { Input, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyInput: Input,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      value: '',
+      selectValue: '123456'
+    }
+  },
+  methods: {
+    select() {
+      this.$refs.selectRef.select()
+    },
+    blur() {
+      this.$refs.inputRef.blur()
+    },
+    focus() {
+      this.$refs.inputRef.focus()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-input-methods {
+  height: 100%;
+  padding: 20px 16px;
+  background: #f5f5f5;
+}
+
+.demo-input-methods [class^='tiny'] {
+  margin: 5px;
+}
+</style>

package/demos/mobile/app/input/native-attributes.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="demo-input">
+    <div class="demo-input-item">
+      <span>autofocus</span>
+      <tiny-input v-model="autofocusVal" autofocus></tiny-input>
+    </div>
+    <div class="demo-input-item">
+      <span>readonly</span>
+      <tiny-input v-model="input" readonly></tiny-input>
+    </div>
+    <div class="demo-input-item">
+      <span>autocomplete="on"</span>
+      <form>
+        <tiny-input v-model="inputAutocomplete" autocomplete="on" name="email" type="email"></tiny-input>
+      </form>
+    </div>
+    <div class="demo-input-item">
+      <span>step=2</span>
+      <tiny-input type="number" v-model="inputStep" :step="2" placeholder="step 为 2"></tiny-input>
+    </div>
+    <div class="demo-input-item">
+      <span>min=2; max=11</span>
+      <tiny-input type="number" v-model="inputMaxMin" :min="2" :max="11"></tiny-input>
+    </div>
+    <div class="demo-input-item">
+      <span>name</span>
+      <tiny-input v-model="username" name="username"></tiny-input>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Input } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyInput: Input
+  },
+  data() {
+    return {
+      autofocusVal: '',
+      input: 'readonly',
+      inputStep: 2,
+      inputMaxMin: 1,
+      inputAutocomplete: '',
+      username: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-input {
+  padding: 20px 16px;
+  height: 100%;
+  background: #f5f5f5;
+}
+
+.demo-input .demo-input-item {
+  margin-bottom: 12px;
+}
+</style>

package/demos/mobile/app/input/prefix-suffix-icon.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="demo-input-icons">
+    <tiny-input v-model="value" :prefix-icon="IconSearch" placeholder="前置图标示例"></tiny-input>
+    <tiny-input v-model="value" :suffix-icon="IconSearch"  placeholder="后置图标示例"></tiny-input>
+  </div>
+</template>
+
+<script>
+import { Input } from '@opentiny/vue'
+import { iconSearch } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyInput: Input
+  },
+  data() {
+    return {
+      value: '',
+      IconSearch: iconSearch()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-input-icons {
+  height: 100%;
+  padding: 20px 16px;
+  background: #f5f5f5;
+}
+
+.demo-input-icons .tiny-mobile-input {
+  margin-bottom: 16px;
+}
+</style>

package/demos/mobile/app/input/show-password.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-wrap">
+  <div class="demo-input">
     <tiny-input v-model="input" show-password></tiny-input>
   </div>
 </template>
@@ -19,10 +19,10 @@ export default {
 }
 </script>
 
-<style>
-.input-wrap {
-  padding-top: 20px;
+<style scoped>
+.demo-input {
   height: 100%;
-  background: #f4f4f4;
+  padding: 20px 16px;
+  background: #f5f5f5;
 }
 </style>

package/demos/mobile/app/input/slots.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="demo-input">
+    <tiny-input placeholder="prepend" v-model="input">
+      <template #prepend>Http://</template>
+    </tiny-input>
+    <tiny-input placeholder="append" v-model="input">
+      <template #append>.com</template>
+    </tiny-input>
+    <tiny-input placeholder="prefix" v-model="input">
+      <template #prefix>
+        <tiny-icon-search/>
+      </template>
+    </tiny-input>
+    <tiny-input placeholder="suffix" v-model="input">
+      <template #suffix>
+        <tiny-icon-calendar/>
+      </template>
+    </tiny-input>
+    <br />
+    
+    <tiny-input placeholder="suffix" v-model="input">
+      <template #title>
+        <span>标题插槽内容</span>
+      </template>
+
+      <template #tips>
+        <span class="tips">提示插槽内容</span>
+      </template>
+    </tiny-input>
+  </div>
+</template>
+
+<script>
+import { Input } from '@opentiny/vue'
+import { IconSearch, IconCalendar } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyInput: Input,
+    TinyIconSearch: IconSearch(),
+    TinyIconCalendar: IconCalendar(),
+  },
+  data() {
+    return {
+      input: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-input {
+  height: 100%;
+  padding: 20px 16px;
+  background: #f5f5f5;
+}
+
+.demo-input [class^=tiny-mobile] {
+  margin-bottom: 8px;
+}
+
+.tips {
+  color: #f23030;
+}
+</style>

package/demos/mobile/app/input/textarea-rows-cols.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="demo-input">
+    <p>rows=3 cols=80</p>
+    <tiny-input type="textarea" v-model="value" :rows="rows" :cols="cols" ></tiny-input>
+  </div>
+</template>
+
+<script>
+import { Input } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyInput: Input
+  },
+  data() {
+    return {
+      value: '杭州西湖是我国著名的旅游胜地，其位于浙江省杭州市西部。西湖是中国最美丽的湖泊之一。',
+      rows: 3,
+      cols: 30,
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-input {
+  height: 100%;
+  padding: 20px 16px;
+  background: #f5f5f5;
+}
+</style>

package/demos/mobile/app/input/textarea-scalable.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="demo-input">
+    <p>resize</p>
+    <tiny-input type="textarea" v-model="input" resize="vertical" placeholder="resize = vertical (default)"></tiny-input>
+    <tiny-input type="textarea" v-model="input" resize="none" placeholder="resize = none"></tiny-input>
+    <tiny-input type="textarea" v-model="input" resize="both" placeholder="resize = both"  width="300px"></tiny-input>
+    <tiny-input type="textarea" v-model="input" resize="horizontal" placeholder="resize = horizontal"></tiny-input>
+
+    <p>autosize</p>
+    <tiny-input type="textarea" v-model="textarea" placeholder="autosize" autosize></tiny-input>
+    <tiny-input type="textarea" v-model="textarea" placeholder="autosize = { minRows: 2, maxRows: 3 }" :autosize="{ minRows: 2, maxRows: 3 }"></tiny-input>
+  </div>
+</template>
+
+<script>
+import { Input } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyInput: Input
+  },
+  data() {
+    return {
+      input: '',
+      textarea: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-input {
+  height: 100%;
+  padding: 20px 16px;
+  background: #f5f5f5;
+}
+
+.demo-input .tiny-mobile-textarea {
+  margin-bottom: 8px;
+}
+</style>

package/demos/mobile/app/input/{type-be-form-select.vue → type-select.vue}

@@ -1,10 +1,10 @@
 <template>
-  <div class="input-wrap">
+  <div class="demo-input">
     <tiny-input v-model="input" is-select :select-menu="menus" placeholder="请输入内容" type="form"></tiny-input>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Input } from '@opentiny/vue'
 
 export default {
@@ -17,19 +17,19 @@ export default {
       menus: [
         {
           id: 1,
-          label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
+          label: '很长的选项。很长的选项。很长的选项。很长的选项。很长的选项。很长的选项。很长的选项。'
         },
         {
           id: 2,
-          label: '我是小树'
+          label: '选项2'
         },
         {
           id: 3,
-          label: '我是小草'
+          label: '选项3'
         },
         {
           id: 4,
-          label: '我是小叶',
+          label: 'warn 为true的选项',
           warn: true
         }
       ]
@@ -38,10 +38,10 @@ export default {
 }
 </script>
 
-<style>
-.input-wrap {
-  padding-top: 20px;
+<style scoped>
+.demo-input {
+  padding: 20px 16px;
   height: 100%;
-  background: #f4f4f4;
+  background: #f5f5f5;
 }
 </style>

package/demos/mobile/app/input/type.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="demo-input">
+    <tiny-input v-model="text" placeholder="text"></tiny-input>
+    <tiny-input type="password" v-model="password" placeholder="password"></tiny-input>
+    <tiny-input type="textarea" v-model="textarea" placeholder="textarea"></tiny-input>
+    <tiny-input type="email" v-model="email" placeholder="email"></tiny-input>
+    <tiny-input type="number" v-model="number" placeholder="number"></tiny-input>
+    <tiny-input type="tel" v-model="tel" placeholder="tel"></tiny-input>
+    <tiny-input type="url" v-model="url" placeholder="url"></tiny-input>
+    <tiny-input type="date" v-model="date"></tiny-input>
+    <tiny-input type="month" v-model="month"></tiny-input>
+    <tiny-input type="week" v-model="week"></tiny-input>
+    <tiny-input type="datetime-local" v-model="datetime"></tiny-input>
+    <tiny-input type="time" v-model="time"></tiny-input>
+  </div>
+</template>
+
+<script>
+import { Input } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyInput: Input
+  },
+  data() {
+    return {
+      text: '',
+      password: '',
+      textarea: '',
+      email: '',
+      number: '',
+      tel: '',
+      url: '',
+      color: '#000000',
+      date: '',
+      month: '',
+      week: '',
+      datetime: '',
+      time: '',
+      file: '',
+      range: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-input {
+  height: 100%;
+  padding: 20px 16px;
+  box-sizing: border-box;
+  overflow-y: scroll;
+  background: #f5f5f5;
+}
+
+.demo-input .tiny-mobile-input,
+.demo-input .tiny-mobile-textarea {
+  margin-bottom: 8px;
+}
+</style>