demo 原始链接:https://vux.li/demos/v2/#/component/x-input
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n\n <group title=\"禁用内置验证及显示成功或者错误样式\">\n <x-input title=\"禁用验证\" placeholder=\"I'm placeholder\" novalidate :icon-type=\"iconType\" :show-clear=\"false\" @on-blur=\"onBlur\" placeholder-align=\"right\"></x-input>\n </group>\n <div style=\"padding:15px;\">\n <x-button @click.native=\"iconType = 'success'\" type=\"primary\"> set success</x-button>\n <x-button @click.native=\"iconType = 'error'\" type=\"primary\"> set error</x-button>\n <x-button @click.native=\"iconType = ''\" type=\"primary\"> set empty</x-button>\n </div>\n\n <group title=\"is-type传入function\">\n <x-input title=\"必须输入2333\" :is-type=\"be2333\" placeholder=\"I'm placeholder\"></x-input>\n </group>\n\n <group title=\"mask\">\n <x-input title=\"手机号码格式化\" mask=\"999 9999 9999\" v-model=\"maskValue\" :max=\"13\" is-type=\"china-mobile\"></x-input>\n <cell title=\"value\" :value=\"maskValue\"></cell>\n <x-input title=\"(99) 9-99\" mask=\"(99) 9-99\" v-model=\"maskValue2\" :max=\"9\"></x-input>\n </group>\n\n <group title=\"使用icon代替title\">\n <x-input title=\"必须输入2333\" :is-type=\"be2333\" placeholder=\"I'm placeholder\">\n <img slot=\"label\" style=\"padding-right:10px;display:block;\" src=\"http://dn-placeholder.qbox.me/110x110/FF2D55/000\" width=\"24\" height=\"24\">\n </x-input>\n </group>\n\n <group title=\"max is alias to maxlength\">\n <x-input title='max=5' :max=\"5\" @on-change=\"change\" v-model=\"maxValue\"></x-input>\n </group>\n\n <group title=\"debounce = 1000\">\n <x-input title='debounce' :debounce=\"500\" @on-change=\"change\" v-model=\"debounceValue\"></x-input>\n </group>\n\n <group title=\"disabled\">\n <x-input title='value' disabled v-model=\"disabledValue\"></x-input>\n </group>\n\n <group title=\"set type = tel\">\n <x-input title='value' type=\"tel\"></x-input>\n </group>\n\n\n <group title=\"html title\">\n <x-input label-width=\"4em\" :title='`<span style=\"${style}\">hello</span>`' placeholder=\"I'm placeholder\"></x-input>\n </group>\n <div style=\"padding:15px;\">\n <x-button @click.native=\"style = 'color:red;'\" type=\"primary\">set red</x-button>\n <x-button @click.native=\"style = 'color:green'\" type=\"primary\">set green</x-button>\n <x-button @click.native=\"style = 'color:#000'\" type=\"primary\">set default</x-button>\n </div>\n\n <group title=\"Default\">\n <x-input title=\"message\" placeholder=\"I'm placeholder\"></x-input>\n </group>\n\n <group title=\"不显示清除按钮\">\n <x-input title=\"message\" required placeholder=\"I'm placeholder\" :show-clear=\"false\" autocapitalize=\"characters\"></x-input>\n </group>\n\n <group title=\"focus事件\">\n <x-input title=\"focus-handler\" placeholder=\"focus me!\" :show-clear=\"true\" @on-focus=\"onFocus\"></x-input>\n </group>\n\n <group title=\"set is-type=china-name\">\n <x-input title=\"姓名\" name=\"username\" placeholder=\"请输入姓名\" is-type=\"china-name\"></x-input>\n </group>\n\n <group title=\"set keyboard=number and is-type=china-mobile\">\n <x-input title=\"手机号码\" name=\"mobile\" placeholder=\"请输入手机号码\" keyboard=\"number\" is-type=\"china-mobile\"></x-input>\n </group>\n\n <group title=\"set is-type=email\">\n <x-input title=\"邮箱\" name=\"email\" placeholder=\"请输入邮箱地址\" is-type=\"email\"></x-input>\n </group>\n\n <group title=\"set min=2 and max=5\">\n <x-input title=\"2-5个字符\" placeholder=\"\" :min=\"2\" :max=\"5\"></x-input>\n </group>\n\n <group title=\"确认输入\">\n <x-input title=\"请输入6位数字\" type=\"text\" placeholder=\"\" v-model=\"password\" :min=\"6\" :max=\"6\" @on-change=\"change\"></x-input>\n <x-input title=\"请确认6位数字\" v-model=\"password2\" type=\"text\" placeholder=\"\" :equal-with=\"password\"></x-input>\n </group>\n\n <group title=\"enter事件\">\n <x-input title=\"输入完成后回车\" type=\"text\" placeholder=\"\" v-model=\"enterText\"\n @on-enter=\"onEnter\"></x-input>\n </group>\n\n <group title=\"验证码\">\n <x-input title=\"验证码\">\n <img slot=\"right-full-height\" src=\"https://i.loli.net/2017/09/18/59bf7f32425d5.jpg\">\n </x-input>\n <x-input title=\"发送验证码\" class=\"weui-vcode\">\n <x-button slot=\"right\" type=\"primary\" mini>发送验证码</x-button>\n </x-input>\n </group>\n\n <group title=\"check if value is valid when required===true\">\n <x-input title=\"message\" placeholder=\"I'm placeholder\" ref=\"input01\" required></x-input>\n <cell title=\"click to get valid value\" :value=\"'$valid value:' + valid1\" @click.native=\"getValid1\"></cell>\n </group>\n\n <group title=\"check if value is valid when required===false\">\n <x-input title=\"message\" placeholder=\"I'm placeholder\" :required=\"false\" ref=\"input02\" @click.native=\"getValid2\"></x-input>\n <cell title=\"click to get valid value\" :value=\"'$valid value:' + valid2\" @click.native=\"getValid2\"></cell>\n </group>\n\n </div>\n</template>\n\n<script>\nimport { XInput, Group, XButton, Cell } from 'vux'\n\nexport default {\n components: {\n XInput,\n XButton,\n Group,\n Cell\n },\n data () {\n return {\n password: '123465',\n password2: '',\n enterText: '',\n valid1: false,\n valid2: false,\n iconType: '',\n be2333: function (value) {\n return {\n valid: value === '2333',\n msg: 'Must be 2333'\n }\n },\n style: '',\n disabledValue: 'hello',\n debounceValue: '',\n maxValue: '',\n maskValue: '13545678910',\n maskValue2: ''\n }\n },\n methods: {\n getValid1 () {\n this.valid1 = this.$refs.input01.valid\n },\n getValid2 () {\n this.valid2 = this.$refs.input02.valid\n },\n change (val) {\n console.log('on change', val)\n },\n onBlur (val) {\n console.log('on blur', val)\n },\n onFocus (val, $event) {\n console.log('on focus', val, $event)\n },\n onEnter (val) {\n console.log('click enter!', val)\n }\n }\n}\n</script>\n<style scoped>\n.red {\n color: red;\n}\n.green {\n color: green;\n}\n</style>\n\n
\n