feat: filed

src/config.json

@@ -1,403 +1,412 @@
 {
-  "sorts": [
-    "数据展示",
-    "数据录入",
-    "操作反馈",
-    "导航组件",
-    "布局组件",
-    "基础组件",
-    "业务组件"
-  ],
-  "packages": [
-    {
-      "name": "Cell",
-      "version": "1.0.0",
-      "sort": "4",
-      "chnName": "列表项",
-      "type": "component",
-      "showDemo": true,
-      "desc": "列表项，可组合成列表",
-      "author": "Frans、玉磊"
-    },
-    {
-      "name": "Dialog",
-      "version": "1.0.0",
-      "sort": "2",
-      "chnName": "对话框",
-      "type": "method",
-      "showDemo": true,
-      "desc": "模态弹窗，支持按钮交互，支持图片弹窗。",
-      "star": 5,
-      "author": "Frans、肖晓"
-    },
-    {
-      "name": "Icon",
-      "version": "1.0.0",
-      "sort": "5",
-      "chnName": "图标",
-      "type": "component",
-      "showDemo": true,
-      "desc": "网页小图标。",
-      "author": "Frans"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Toast",
-      "sort": "2",
-      "chnName": "吐司",
-      "desc": "轻提示。",
-      "type": "method",
-      "showDemo": true,
-      "star": 4,
-      "author": "Frans、张宇"
-    },
-    {
-      "version": "1.0.0",
-      "name": "ActionSheet",
-      "sort": "2",
-      "chnName": "动作面板",
-      "desc": "从底部弹出的动作菜单面板。",
-      "type": "component",
-      "showDemo": true,
-      "star": 5,
-      "author": "iris"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Tab",
-      "sort": "3",
-      "chnName": "选项卡",
-      "desc": "常用于平级区域大块内容的的收纳和展现。",
-      "type": "component",
-      "showDemo": true,
-      "star": 3,
-      "author": "甄玉磊"
-    },
-    {
-      "version": "1.0.0",
-      "name": "TabPanel",
-      "sort": "3",
-      "chnName": "选项卡",
-      "desc": "标签栏 选项卡组件",
-      "type": "component",
-      "showDemo": false,
-      "author": "甄玉磊"
-    },
-    {
-      "version": "1.0.0",
-      "name": "TabBar",
-      "sort": "3",
-      "chnName": "标签栏",
-      "desc": "用于不同模块以之间的切换",
-      "type": "component",
-      "showDemo": true,
-      "star": 3,
-      "author": "甄玉磊"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Calendar",
-      "sort": "1",
-      "chnName": "日历",
-      "desc": "日历",
-      "type": "component",
-      "showDemo": true,
-      "star": 5,
-      "author": "iris"
-    },
-    {
-      "version": "1.0.0",
-      "name": "DatePicker",
-      "sort": "1",
-      "chnName": "日期选择",
-      "desc": "日期选择",
-      "type": "component",
-      "showDemo": true,
-      "star": 5,
-      "author": "iris"
-    },
-    {
-      "version": "1.0.0",
-      "name": "NavBar",
-      "sort": "3",
-      "chnName": "导航栏",
-      "desc": "移动端头部导航栏",
-      "type": "component",
-      "showDemo": true,
-      "author": "lishaoqi"
-    },
-    {
-      "version": "1.0.0",
-      "name": "NoticeBar",
-      "sort": "3",
-      "chnName": "公告栏",
-      "desc": "移动端公告栏",
-      "type": "component",
-      "showDemo": true,
-      "author": "wangyue"
-    },
-    {
-      "name": "Switch",
-      "version": "1.0.0",
-      "sort": "1",
-      "chnName": "开关",
-      "type": "component",
-      "showDemo": true,
-      "desc": "滑动开关，通过点击使按钮左右滑动，同时触发对应的开关状态",
-      "author": "Frans"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Picker",
-      "sort": "1",
-      "chnName": "拾取器",
-      "desc": "提供多个选项集合供用户选择其中一项。",
-      "type": "component",
-      "showDemo": true,
-      "star": 5,
-      "author": "iris"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Button",
-      "sort": "5",
-      "chnName": "按钮",
-      "desc": "各式各样的按钮",
-      "type": "component",
-      "showDemo": true,
-      "author": "杨磊"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Rate",
-      "sort": "1",
-      "chnName": "评分",
-      "desc": "用于快速的评级操作，或对评价进行展示。",
-      "type": "component",
-      "showDemo": true,
-      "star": 4,
-      "author": "永无止晋"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Stepper",
-      "chnName": "步进器",
-      "desc": "通过点击按钮控制数字加减",
-      "type": "component",
-      "sort": "1",
-      "showDemo": true,
-      "star": 3,
-      "author": "famanoder"
-    },
-    {
-      "version": "1.0.0",
-      "name": "SearchBar",
-      "chnName": "搜索栏",
-      "desc": "搜索栏",
-      "type": "component",
-      "sort": "1",
-      "showDemo": true,
-      "author": "lemon"
-    },
-    {
-      "version": "1.0.0",
-      "name": "ImagePicker",
-      "sort": "1",
-      "chnName": "图片选择器",
-      "desc": "图片选择器",
-      "type": "component",
-      "showDemo": true,
-      "author": "苏子刚"
-    },
-    {
-      "name": "Radio",
-      "version": "1.0.0",
-      "sort": "1",
-      "chnName": "单选按钮",
-      "type": "component",
-      "showDemo": true,
-      "desc": "单选按钮，可组合成单选按钮组",
-      "author": "Frans"
-    },
-    {
-      "name": "RadioGroup",
-      "version": "1.0.0",
-      "sort": "1",
-      "chnName": "单选按钮组",
-      "type": "component",
-      "showDemo": false,
-      "desc": "单选按钮组",
-      "author": "Frans"
-    },
-    {
-      "version": "1.0.0",
-      "name": "CheckBox",
-      "sort": "1",
-      "chnName": "复选按钮",
-      "desc": "复选多个选项",
-      "type": "component",
-      "showDemo": true,
-      "author": "Vicky.Ye"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Skeleton",
-      "chnName": "骨架屏",
-      "des": "在页面上待加载区域填充灰色的占位图，本质上是界面加载过程中的过渡效果",
-      "type": "component",
-      "sort": "0",
-      "showDemo": true,
-      "author": "wangnan31"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Uploader",
-      "chnName": "上传",
-      "desc": "文件上传组件",
-      "type": "component",
-      "sort": "5",
-      "showDemo": true,
-      "author": "林如风"
-    },
-    {
-      "version": "1.0.0",
-      "name": "TextInput",
-      "chnName": "文本框",
-      "desc": "单行文本框",
-      "type": "component",
-      "sort": "1",
-      "showDemo": true,
-      "author": "Frans"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Avatar",
-      "chnName": "头像",
-      "desc": "用来表示用户或事物，支持图片或字符展示。",
-      "type": "component",
-      "sort": "5",
-      "showDemo": true,
-      "author": "zhenyulei"
-    },
-    {
-      "version": "1.0.0",
-      "name": "TextBox",
-      "chnName": "文本域",
-      "desc": "文本域",
-      "type": "component",
-      "sort": "1",
-      "showDemo": true,
-      "author": "guoxiaoxiao"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Popup",
-      "chnName": "弹出层",
-      "desc": "弹出层",
-      "type": "component",
-      "sort": "5",
-      "showDemo": true,
-      "author": "杨凯旋"
-    },
-    {
-      "version": "1.0.0",
-      "name": "LeftSlip",
-      "chnName": "左滑删除",
-      "desc": "手势左滑删除元素",
-      "type": "component",
-      "sort": "2",
-      "showDemo": true,
-      "author": "vickyYE"
-    },
-    {
-      "version": "1.0.0",
-      "name": "TabSelect",
-      "chnName": "分类选择",
-      "desc": "两级分类选择",
-      "type": "component",
-      "sort": "6",
-      "showDemo": true,
-      "author": "dsj"
-    },
-    {
-      "version": "1.0.0",
-      "name": "SideNavBar",
-      "chnName": "侧边栏导航",
-      "desc": "侧边栏导航",
-      "type": "component",
-      "sort": "3",
-      "showDemo": true,
-      "author": "szg2008"
-    },
-    {
-      "version": "1.0.0",
-      "name": "SubSideNavBar",
-      "chnName": "侧边栏导航",
-      "desc": "侧边栏导航",
-      "type": "component",
-      "sort": "3",
-      "showDemo": false,
-      "author": "szg2008"
-    },
-    {
-      "version": "1.0.0",
-      "name": "SideNavBarItem",
-      "chnName": "侧边栏导航",
-      "desc": "侧边栏导航",
-      "type": "component",
-      "sort": "3",
-      "showDemo": false,
-      "author": "szg2008"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Address",
-      "chnName": "地址选择",
-      "desc": "业务功能-地址选择",
-      "type": "component",
-      "sort": "6",
-      "showDemo": true,
-      "author": "yangxiaolu"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Tag",
-      "chnName": "标签",
-      "desc": "Tag 标签组件",
-      "type": "component",
-      "sort": "0",
-      "showDemo": true,
-      "author": "ivanwancy"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Swiper",
-      "chnName": "滑动切换",
-      "desc": "Swiper 滑动切换",
-      "type": "component",
-      "sort": "0",
-      "showDemo": true,
-      "author": "ivanwancy"
-    },
-    {
-      "version": "1.0.0",
-      "name": "ImagePreview",
-      "chnName": "图片预览",
-      "desc": "ImagePreview 图片预览",
-      "type": "component",
-      "sort": "0",
-      "showDemo": true,
-      "author": "ivanwancy"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Badge",
-      "sort": "0",
-      "chnName": "徽标",
-      "desc": "出现在图标或文字右上角的红色圆点、数字或者文字，表示有新内容或者待处理的信息",
-      "type": "component",
-      "showDemo": true,
-      "author": "jeffreyzhang23"
-    }
-  ]
+    "sorts": [
+        "数据展示",
+        "数据录入",
+        "操作反馈",
+        "导航组件",
+        "布局组件",
+        "基础组件",
+        "业务组件"
+    ],
+    "packages": [{
+            "name": "Cell",
+            "version": "1.0.0",
+            "sort": "4",
+            "chnName": "列表项",
+            "type": "component",
+            "showDemo": true,
+            "desc": "列表项，可组合成列表",
+            "author": "Frans、玉磊"
+        },
+        {
+            "name": "Dialog",
+            "version": "1.0.0",
+            "sort": "2",
+            "chnName": "对话框",
+            "type": "method",
+            "showDemo": true,
+            "desc": "模态弹窗，支持按钮交互，支持图片弹窗。",
+            "star": 5,
+            "author": "Frans、肖晓"
+        },
+        {
+            "name": "Icon",
+            "version": "1.0.0",
+            "sort": "5",
+            "chnName": "图标",
+            "type": "component",
+            "showDemo": true,
+            "desc": "网页小图标。",
+            "author": "Frans"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Toast",
+            "sort": "2",
+            "chnName": "吐司",
+            "desc": "轻提示。",
+            "type": "method",
+            "showDemo": true,
+            "star": 4,
+            "author": "Frans、张宇"
+        },
+        {
+            "version": "1.0.0",
+            "name": "ActionSheet",
+            "sort": "2",
+            "chnName": "动作面板",
+            "desc": "从底部弹出的动作菜单面板。",
+            "type": "component",
+            "showDemo": true,
+            "star": 5,
+            "author": "iris"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Tab",
+            "sort": "3",
+            "chnName": "选项卡",
+            "desc": "常用于平级区域大块内容的的收纳和展现。",
+            "type": "component",
+            "showDemo": true,
+            "star": 3,
+            "author": "甄玉磊"
+        },
+        {
+            "version": "1.0.0",
+            "name": "TabPanel",
+            "sort": "3",
+            "chnName": "选项卡",
+            "desc": "标签栏 选项卡组件",
+            "type": "component",
+            "showDemo": false,
+            "author": "甄玉磊"
+        },
+        {
+            "version": "1.0.0",
+            "name": "TabBar",
+            "sort": "3",
+            "chnName": "标签栏",
+            "desc": "用于不同模块以之间的切换",
+            "type": "component",
+            "showDemo": true,
+            "star": 3,
+            "author": "甄玉磊"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Calendar",
+            "sort": "1",
+            "chnName": "日历",
+            "desc": "日历",
+            "type": "component",
+            "showDemo": true,
+            "star": 5,
+            "author": "iris"
+        },
+        {
+            "version": "1.0.0",
+            "name": "DatePicker",
+            "sort": "1",
+            "chnName": "日期选择",
+            "desc": "日期选择",
+            "type": "component",
+            "showDemo": true,
+            "star": 5,
+            "author": "iris"
+        },
+        {
+            "version": "1.0.0",
+            "name": "NavBar",
+            "sort": "3",
+            "chnName": "导航栏",
+            "desc": "移动端头部导航栏",
+            "type": "component",
+            "showDemo": true,
+            "author": "lishaoqi"
+        },
+        {
+            "version": "1.0.0",
+            "name": "NoticeBar",
+            "sort": "3",
+            "chnName": "公告栏",
+            "desc": "移动端公告栏",
+            "type": "component",
+            "showDemo": true,
+            "author": "wangyue"
+        },
+        {
+            "name": "Switch",
+            "version": "1.0.0",
+            "sort": "1",
+            "chnName": "开关",
+            "type": "component",
+            "showDemo": true,
+            "desc": "滑动开关，通过点击使按钮左右滑动，同时触发对应的开关状态",
+            "author": "Frans"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Picker",
+            "sort": "1",
+            "chnName": "拾取器",
+            "desc": "提供多个选项集合供用户选择其中一项。",
+            "type": "component",
+            "showDemo": true,
+            "star": 5,
+            "author": "iris"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Button",
+            "sort": "5",
+            "chnName": "按钮",
+            "desc": "各式各样的按钮",
+            "type": "component",
+            "showDemo": true,
+            "author": "杨磊"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Rate",
+            "sort": "1",
+            "chnName": "评分",
+            "desc": "用于快速的评级操作，或对评价进行展示。",
+            "type": "component",
+            "showDemo": true,
+            "star": 4,
+            "author": "永无止晋"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Stepper",
+            "chnName": "步进器",
+            "desc": "通过点击按钮控制数字加减",
+            "type": "component",
+            "sort": "1",
+            "showDemo": true,
+            "star": 3,
+            "author": "famanoder"
+        },
+        {
+            "version": "1.0.0",
+            "name": "SearchBar",
+            "chnName": "搜索栏",
+            "desc": "搜索栏",
+            "type": "component",
+            "sort": "1",
+            "showDemo": true,
+            "author": "lemon"
+        },
+        {
+            "version": "1.0.0",
+            "name": "ImagePicker",
+            "sort": "1",
+            "chnName": "图片选择器",
+            "desc": "图片选择器",
+            "type": "component",
+            "showDemo": true,
+            "author": "苏子刚"
+        },
+        {
+            "name": "Radio",
+            "version": "1.0.0",
+            "sort": "1",
+            "chnName": "单选按钮",
+            "type": "component",
+            "showDemo": true,
+            "desc": "单选按钮，可组合成单选按钮组",
+            "author": "Frans"
+        },
+        {
+            "name": "RadioGroup",
+            "version": "1.0.0",
+            "sort": "1",
+            "chnName": "单选按钮组",
+            "type": "component",
+            "showDemo": false,
+            "desc": "单选按钮组",
+            "author": "Frans"
+        },
+        {
+            "version": "1.0.0",
+            "name": "CheckBox",
+            "sort": "1",
+            "chnName": "复选按钮",
+            "desc": "复选多个选项",
+            "type": "component",
+            "showDemo": true,
+            "author": "Vicky.Ye"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Skeleton",
+            "chnName": "骨架屏",
+            "des": "在页面上待加载区域填充灰色的占位图，本质上是界面加载过程中的过渡效果",
+            "type": "component",
+            "sort": "0",
+            "showDemo": true,
+            "author": "wangnan31"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Uploader",
+            "chnName": "上传",
+            "desc": "文件上传组件",
+            "type": "component",
+            "sort": "5",
+            "showDemo": true,
+            "author": "林如风"
+        },
+        {
+            "version": "1.0.0",
+            "name": "TextInput",
+            "chnName": "文本框",
+            "desc": "单行文本框",
+            "type": "component",
+            "sort": "1",
+            "showDemo": true,
+            "author": "Frans"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Avatar",
+            "chnName": "头像",
+            "desc": "用来表示用户或事物，支持图片或字符展示。",
+            "type": "component",
+            "sort": "5",
+            "showDemo": true,
+            "author": "zhenyulei"
+        },
+        {
+            "version": "1.0.0",
+            "name": "TextBox",
+            "chnName": "文本域",
+            "desc": "文本域",
+            "type": "component",
+            "sort": "1",
+            "showDemo": true,
+            "author": "guoxiaoxiao"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Popup",
+            "chnName": "弹出层",
+            "desc": "弹出层",
+            "type": "component",
+            "sort": "5",
+            "showDemo": true,
+            "author": "杨凯旋"
+        },
+        {
+            "version": "1.0.0",
+            "name": "LeftSlip",
+            "chnName": "左滑删除",
+            "desc": "手势左滑删除元素",
+            "type": "component",
+            "sort": "2",
+            "showDemo": true,
+            "author": "vickyYE"
+        },
+        {
+            "version": "1.0.0",
+            "name": "TabSelect",
+            "chnName": "分类选择",
+            "desc": "两级分类选择",
+            "type": "component",
+            "sort": "6",
+            "showDemo": true,
+            "author": "dsj"
+        },
+        {
+            "version": "1.0.0",
+            "name": "SideNavBar",
+            "chnName": "侧边栏导航",
+            "desc": "侧边栏导航",
+            "type": "component",
+            "sort": "3",
+            "showDemo": true,
+            "author": "szg2008"
+        },
+        {
+            "version": "1.0.0",
+            "name": "SubSideNavBar",
+            "chnName": "侧边栏导航",
+            "desc": "侧边栏导航",
+            "type": "component",
+            "sort": "3",
+            "showDemo": false,
+            "author": "szg2008"
+        },
+        {
+            "version": "1.0.0",
+            "name": "SideNavBarItem",
+            "chnName": "侧边栏导航",
+            "desc": "侧边栏导航",
+            "type": "component",
+            "sort": "3",
+            "showDemo": false,
+            "author": "szg2008"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Address",
+            "chnName": "地址选择",
+            "desc": "业务功能-地址选择",
+            "type": "component",
+            "sort": "6",
+            "showDemo": true,
+            "author": "yangxiaolu"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Tag",
+            "chnName": "标签",
+            "desc": "Tag 标签组件",
+            "type": "component",
+            "sort": "0",
+            "showDemo": true,
+            "author": "ivanwancy"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Swiper",
+            "chnName": "滑动切换",
+            "desc": "Swiper 滑动切换",
+            "type": "component",
+            "sort": "0",
+            "showDemo": true,
+            "author": "ivanwancy"
+        },
+        {
+            "version": "1.0.0",
+            "name": "ImagePreview",
+            "chnName": "图片预览",
+            "desc": "ImagePreview 图片预览",
+            "type": "component",
+            "sort": "0",
+            "showDemo": true,
+            "author": "ivanwancy"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Badge",
+            "sort": "0",
+            "chnName": "徽标",
+            "desc": "出现在图标或文字右上角的红色圆点、数字或者文字，表示有新内容或者待处理的信息",
+            "type": "component",
+            "showDemo": true,
+            "author": "jeffreyzhang23"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Field",
+            "type": "component",
+            "chnName": "文本框",
+            "desc": "包含文本框，文本域",
+            "sort": "1",
+            "showDemo": true,
+            "author": "guoxiaoxiao"
+        }
+    ]
 }

src/nutui.js

@@ -82,6 +82,8 @@ import ImagePreview from './packages/imagepreview/index.js';
 import './packages/imagepreview/imagepreview.scss';
 import Badge from './packages/badge/index.js';
 import './packages/badge/badge.scss';
+import Field from "./packages/field/index.js";
+import "./packages/field/field.scss";
 
 const packages = {
   Cell,
@@ -126,6 +128,7 @@ const packages = {
   Swiper,
   ImagePreview,
   Badge,
+  Field: Field
 };
 
 const components = {};
@@ -153,7 +156,7 @@ pkgList.map(item => {
   }
 });
 
-const install = function(Vue, opts = {}) {
+const install = function (Vue, opts = {}) {
   if (install.installed) return;
 
   if (opts.locale) {
@@ -202,4 +205,4 @@ export default {
   ...filters,
   ...directives,
   ...methods
-};
+};

src/packages/field/demo.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="textinput-demo">
+    <h4>标准样式</h4>
+    <div>
+      <nut-cell>
+        <span slot="title">
+          <nut-field label="标题内容：" placeholder="请输入内容" v-model="val" />
+        </span>
+      </nut-cell>
+    </div>
+    <h4>文字左对齐，且不展示 清除 按钮</h4>
+    <div>
+      <nut-cell>
+        <span slot="title">
+          <nut-field :disableClear="true" v-model="val2"  label="文本左对齐：" textAlign="left" placeholder="请输入内容" />
+        </span>
+      </nut-cell>
+    </div> 
+     <h4>标题超出长度限制</h4>
+    <div>
+      <nut-cell>
+        <span slot="title">
+          <nut-field  v-model="val2"  label="标题长度超出超出超出范围：" textAlign="right" placeholder="请输入内容" />
+        </span>
+      </nut-cell>
+    </div> 
+     <h4>数字</h4>
+    <div>
+      <nut-cell>
+        <span slot="title">
+          <nut-field  v-model="val4"  label="请输入数字"  type="number"  />
+        </span>
+      </nut-cell>
+    </div> 
+        <h4>错误验证</h4>
+    <div>
+      <nut-cell>
+        <span slot="title">
+          <nut-field  v-model="val5" :state="state"  :requireShow="true" label="手机号码"   />
+        </span>
+      </nut-cell>
+    </div> 
+     <h4>禁用输入框</h4>
+    <div>
+      <nut-cell>
+        <span slot="title">
+          <nut-field  v-model="val6"  :readonly="true" label="标题内容"   />
+        </span>
+      </nut-cell>
+    </div> 
+    <div>
+      <nut-cell >
+        <span slot="title">
+          <nut-field  v-model="val7" :disabled="true"  label="标题内容"   />
+        </span>
+      </nut-cell>
+    </div> 
+    <h4>文本域</h4>
+      <div class="text-area">
+          <nut-field  label="自我介绍" placeholder="自我介绍" v-model="val3"  type="textarea" maxLength="20" rows="4"  />
+    </div> 
+
+      <h4>事件</h4>
+       <div>
+      <nut-cell>
+        <span slot="title">
+          <nut-field label="标题内容：" placeholder="请输入内容" v-model="val" inputFunc="a" />
+        </span>
+      </nut-cell>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      val: '',
+      val2: '这里文本内容',
+      val3: '',
+      val4: '',
+      val5: '12345678985',
+      val6: '输入框只读',
+      val7: '输入框已禁用',
+      val8: '',
+      val9: '',
+      result: '尚未触发',
+      state:"error"
+    };
+  },
+
+  mounted() {
+    const th = this;
+    this.$nextTick(function() {
+      setTimeout(function() {
+        th.$refs.myInput.focus();
+      }, 2000);
+    });
+  },
+  methods: {
+    onFocus() {
+      this.result = 'focus事件触发！';
+    },
+    onBlur() {
+      this.result = 'blur事件触发！';
+    },
+    a(data){
+      console.log(data)
+    },
+    submit() {
+      this.$refs.myInput.blur();
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.demo{
+  padding:0px;
+}
+.textinput-demo>div{
+  width:100%;
+}
+.text-area{
+  width:100%;
+background: rgba(255,255,255,1);
+
+}
+</style>

src/packages/field/doc.md

@@ -0,0 +1,102 @@
+# Field 输入框
+
+## 基本用法
+
+标准样式
+```html
+    <nut-cell>
+        <span slot="title">
+          <nut-field label="标题内容：" placeholder="请输入内容" v-model="val" />
+        </span>
+      </nut-cell>
+```
+
+文字左对齐，且不展示清除按钮
+```html
+    <nut-cell>
+        <span slot="title">
+          <nut-field :disableClear="true" v-model="val2"  label="文本左对齐：" textAlign="left" placeholder="请输入内容" />
+        </span>
+      </nut-cell>
+```
+
+标题超出范围展示
+```html
+   <span slot="title">
+          <nut-field  v-model="val2"  label="标题长度超出超出超出范围：" textAlign="right" placeholder="请输入内容" />
+        </span>
+      </nut-cell>
+```
+
+只输入数字
+
+```html
+ <nut-cell>
+        <span slot="title">
+          <nut-field  v-model="val4"  label="请输入数字"  type="number"  />
+        </span>
+  </nut-cell>
+
+```
+
+
+错误提示
+
+```html
+ <nut-cell>
+        <span slot="title">
+          <nut-field  v-model="val5" :state="state"  :requireShow="true" label="手机号码"   />
+        </span>
+      </nut-cell>
+```
+```javascript
+ export default {
+  data() {
+    return {
+      val5: '12345678985',
+      state:"error"
+    };
+  },
+
+};
+```
+禁用输入框
+
+```html
+ <div>
+      <nut-cell>
+        <span slot="title">
+          <nut-field  v-model="val6"  :readonly="true" label="标题内容"   />
+        </span>
+      </nut-cell>
+    </div> 
+    <div>
+      <nut-cell >
+        <span slot="title">
+          <nut-field  v-model="val7" :disabled="true"  label="标题内容"   />
+        </span>
+      </nut-cell>
+    </div> 
+```
+
+文本域
+
+```html
+<div class="text-area">
+    <nut-field  label="自我介绍" placeholder="自我介绍" v-model="val3"  type="textarea" maxLength="20" rows="4"  />
+</div> 
+```
+
+
+
+
+## Prop
+
+| 字段  | 说明                                                                                     | 类型    | 默认值 |
+| ----- | ---------------------------------------------------------------------------------------- | ------- | ------ |
+| type  | 按钮类型，可选类型包含：空/bottom/red/gray/light/lightred/primary/default/actived/dashed | String  | -      |
+| block | 是否为通栏                                                                               | Boolean | false  |
+| size  | big /middle/small                                                                      | String  | big |
+| shape | 形状配置，可选类型：空、circle                                                           | String  | -      |
+| icon  | 按钮前的图标，参考Icon组件                                                               | String  | -      |
+| color | 自定义颜色，包含文字与图片颜色                                                           | String  | -      |

src/packages/field/field.scss

@@ -0,0 +1,108 @@
+.nut-field {
+    display: flex;
+    box-sizing: border-box;
+    // flex-wrap: wrap;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    .nut-require {
+        color: #ee0a24;
+        margin-right: 5px;
+    }
+    .nut-field-label {
+        display: inline-block;
+        margin-right: 20px;
+        max-width: 120px;
+        overflow: hidden;
+        font-size: 16px;
+        color: rgba(100, 100, 100, 1);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    input {
+        flex: 1;
+        height: 40px;
+        appearance: none;
+        font-size: 14px;
+        box-sizing: border-box;
+        border-radius: 4px;
+        border: none;
+        background-color: '#FFFFFF';
+        padding: 0 25px 0 10px;
+        &::-webkit-input-placeholder {
+            color: #c1c4cb;
+            font-style: normal;
+        }
+        &::-webkit-search-cancel-button {
+            display: none;
+        }
+    }
+    .nut-text-core {
+        flex: 1;
+        padding: 5px 15px 5px 0px;
+        appearance: none;
+        font-size: 14px;
+        box-sizing: border-box;
+        border-radius: 4px;
+        border: none;
+        background-color: '#FFFFFF';
+        &::-webkit-input-placeholder {
+            color: #c1c4cb;
+            font-style: normal;
+        }
+        &::-webkit-search-cancel-button {
+            display: none;
+        }
+        textarea {
+            width: 100%;
+            border: none;
+            outline: none;
+            margin: 0;
+            padding: 0;
+            background: transparent;
+            display: block;
+        }
+        span {
+            float: right;
+            margin-right: 15px;
+        }
+    }
+    .nut-textinput-clear {
+        opacity: 0.5;
+        position: absolute;
+        right: 0px;
+        top: 50%;
+        transform: translateY(-50%);
+        height: 20px;
+        width: 20px;
+        svg {
+            vertical-align: top;
+            fill: #999999;
+        }
+    }
+    .nut-field-error {
+        width: 100%;
+        height: 5px;
+        border-bottom: 1px solid red;
+        box-sizing: border-box;
+        position: absolute;
+        bottom: 0px;
+    }
+    .input-error {
+        color: red;
+    }
+}
+
+.nut-filed-disabled {
+    input {
+        background-color: #f5f7fa;
+        border-color: #e5e7ed;
+        color: #999999;
+        &::-webkit-input-placeholder {
+            color: hsl(225, 10%, 84%);
+        }
+        &::-webkit-search-cancel-button {
+            display: none;
+        }
+    }
+}

src/packages/field/field.vue

@@ -0,0 +1,147 @@
+<template>
+  <form action="javascript:return true" :class="['nut-field', { 'nut-filed-disabled': disabled }]">
+    <span class="nut-require" v-if="requireShow">*</span>
+    <span class="nut-field-label" v-if="label">{{ label }}</span>
+
+         <div  v-if="type === 'textarea'"  class="nut-text-core">
+          <textarea
+            @change="$emit('change', currentValue)"
+            ref="textarea"
+            :maxlength="maxLength"
+            :placeholder="placeholder"
+            :rows="rows"
+            :disabled="disabled"
+            :readonly="readonly"
+            @input="txtIptLength"
+            v-model="currentValue">
+          </textarea>
+          <span  v-if="limitShow">{{ txtNum }}/{{ maxLength }}</span>
+    </div>
+     <input
+     :class="['input-'+state]"
+      @change="$emit('change', currentValue)"
+      @focus="focus"
+      ref="input"
+      :style="initCssStyle()"
+      class="nut-field-core"
+      :placeholder="placeholder"
+      :number="type === 'number'"
+      v-else
+      :type="type"
+      :disabled="disabled"
+      :readonly="readonly"
+      :value="currentValue"
+      @input="handleInput">
+      
+    <div
+      @click="handleClear"
+      class="nut-textinput-clear"
+      v-if="!disableClear"
+      v-show="currentValue && type !== 'textarea' && active">
+     <svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" >
+        <path
+          d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm2.8 9.7c.3.3.3.8 0 1.1s-.8.3-1.1 0L8 9.1l-1.7 1.7c-.3.3-.8.3-1.1 0-.3-.3-.3-.8 0-1.1L6.9 8 5.2 6.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0L8 6.9l1.7-1.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1L9.1 8l1.7 1.7z"
+        />
+      </svg>
+    </div>
+   
+    <div class="nut-field-other">
+      <slot></slot>
+    </div>
+   <div class="nut-field-error" v-if="state" :class="['is-'+state]">
+    </div>
+    
+  </form>
+</template>
+<script>
+export default {
+ name: 'nut-field',
+  data() {
+    return {
+      active: false,
+      txtNum:0,
+      currentValue: this.value
+    };
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    textAlign:{
+      type: String,
+      default: 'right'
+    },
+    limitShow:{
+      type: Boolean,
+      default:true
+    },
+    maxLength:{
+      type:String,
+      default:"50"
+    },
+    state: {
+        type:String,
+        default:""
+    },
+    requireShow:{
+       type: Boolean,
+        default:false
+    },
+    rows: String,
+    label: String,
+    placeholder: String,
+    readonly: Boolean,
+    disabled: Boolean,
+    disableClear: {
+       type: Boolean,
+        default:false
+    },
+    value: String,
+    attr: Object
+  },
+  mounted(){
+    this.txtNum=this.value.length;
+  },
+  methods: {
+    initCssStyle(){
+        return `text-align:${this.textAlign}`
+    },
+    doCloseActive() {
+      this.active = false;
+    },
+    focus(){
+      this.active=true;
+    },
+    handleInput(evt) {
+      this.currentValue = evt.target.value;
+       this.$emit('inputFunc', evt.target.value);
+       this.$emit('input', evt.target.value);
+    },
+    handleClear() {
+      if (this.disabled || this.readonly) return;
+      this.currentValue = '';
+    },
+    txtIptLength(event) {
+      const data = event.target;
+      const txtLength = data.length;
+      this.txtNum = txtLength;
+      if (txtLength > this.maxLength) {
+        this.$emit('errorFunc');
+      } else {
+      }
+      this.$emit('inputFunc', data);
+      this.$emit('input', data);
+    }
+  },
+  watch: {
+    value(val) {
+      this.currentValue = val;
+    },
+    currentValue(val) {
+      this.$emit('input', val);
+    }
+   
+  }
+};
+</script>

src/packages/field/index.js

@@ -0,0 +1,8 @@
+import Field from './field.vue';
+import './field.scss';
+
+Field.install = function(Vue) {
+  Vue.component(Field.name, Field);
+};
+
+export default Field

types/nutui.d.ts

@@ -81,3 +81,4 @@ export declare class SideNavBarItem extends UIComponent {}
 export declare class Qart extends UIComponent {}
 export declare class Drag extends UIComponent {}
 export declare class Address extends UIComponent {}
+export declare class Field extends UIComponent {}