| 1 |
- import{_ as e,G as l,b as a,d as t,p as u,w as o,i as n,o as d,f as i,k as s,t as p,C as r,R as c}from"./index-2PZN6pGH.js";import{_ as m}from"./uni-card.CpdfOoXJ.js";import{_ as f}from"./uni-easyinput.Bli_yCXp.js";import{_ as y}from"./uni-section.BISPxi99.js";const V=e({data:()=>({value:"",password:"",placeholderStyle:"color:#2979FF;font-size:14px",styles:{color:"#2979FF",borderColor:"#2979FF"}}),onLoad(){},onReady(){},methods:{input(e){console.log("输入内容：",e)},iconClick(e){l({title:`点击了${"prefix"===e?"左侧":"右侧"}的图标`,icon:"none"})}}},[["render",function(e,l,V,h,v,_){const b=r,x=a(t("uni-card"),m),I=a(t("uni-easyinput"),f),g=a(t("uni-section"),y),U=n,k=c;return d(),u(U,null,{default:o((()=>[i(x,{"is-shadow":!1,"is-full":""},{default:o((()=>[i(b,{class:"uni-h6"},{default:o((()=>[s("easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件 uni-forms 而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能")])),_:1})])),_:1}),i(g,{title:"默认",subTitle:"使用 focus 属性自动获取输入框焦点",type:"line",padding:""},{default:o((()=>[i(I,{errorMessage:"",modelValue:v.value,"onUpdate:modelValue":l[0]||(l[0]=e=>v.value=e),focus:"",placeholder:"请输入内容",onInput:_.input},null,8,["modelValue","onInput"])])),_:1}),i(g,{title:"去除空格",subTitle:"使用 trim 属性 ,可以控制返回内容的空格 ",type:"line",padding:""},{default:o((()=>[i(b,{class:"uni-subtitle"},{default:o((()=>[s("输入内容："+p('"'+v.value+'"'),1)])),_:1}),i(I,{class:"uni-mt-5",trim:"all",modelValue:v.value,"onUpdate:modelValue":l[1]||(l[1]=e=>v.value=e),placeholder:"请输入内容",onInput:_.input},null,8,["modelValue","onInput"])])),_:1}),i(g,{title:"自定义样式",subTitle:"使用 styles 属性 ,可以自定义输入框样式",type:"line",padding:""},{default:o((()=>[i(I,{modelValue:v.value,"onUpdate:modelValue":l[2]||(l[2]=e=>v.value=e),styles:v.styles,placeholderStyle:v.placeholderStyle,placeholder:"请输入内容",onInput:_.input},null,8,["modelValue","styles","placeholderStyle","onInput"])])),_:1}),i(g,{title:"图标",subTitle:"使用 prefixIcon / suffixIcon 属性 ,可以自定义输入框左右侧图标",type:"line",padding:""},{default:o((()=>[i(I,{prefixIcon:"search",modelValue:v.value,"onUpdate:modelValue":l[3]||(l[3]=e=>v.value=e),placeholder:"左侧图标",onIconClick:_.iconClick},null,8,["modelValue","onIconClick"]),i(I,{class:"uni-mt-5",suffixIcon:"search",modelValue:v.value,"onUpdate:modelValue":l[4]||(l[4]=e=>v.value=e),placeholder:"右侧图标",onIconClick:_.iconClick},null,8,["modelValue","onIconClick"])])),_:1}),i(g,{title:"插槽",subTitle:"使用 prefixIcon / suffixIcon 插槽 ,可以自定义输入框左右侧内容",type:"line",padding:""},{default:o((()=>[i(I,{modelValue:v.value,"onUpdate:modelValue":l[5]||(l[5]=e=>v.value=e),placeholder:"请输入网址"},{prefixIcon:o((()=>[i(U,{style:{"background-color":"#f2f2f2",padding:"0 10rpx",height:"70rpx","line-height":"70rpx","margin-right":"10rpx"}},{default:o((()=>[s("https://")])),_:1})])),_:1},8,["modelValue"]),i(I,{class:"uni-mt-5",prefixIcon:"search",modelValue:v.value,"onUpdate:modelValue":l[6]||(l[6]=e=>v.value=e),placeholder:"想看什么,搜索一下"},{suffixIcon:o((()=>[i(k,{class:"uni-btn uni-btn-mini uni-btn-radius",type:"primary",size:"mini"},{default:o((()=>[s("搜索")])),_:1})])),_:1},8,["modelValue"])])),_:1}),i(g,{title:"禁用",subTitle:"使用 disabled 属性禁用输入框",type:"line",padding:""},{default:o((()=>[i(I,{disabled:"",value:"已禁用",placeholder:"请输入内容"})])),_:1}),i(g,{title:"密码框",subTitle:"指定属性 type=password 使用密码框,右侧会显示眼睛图标",type:"line",padding:""},{default:o((()=>[i(I,{type:"password",modelValue:v.password,"onUpdate:modelValue":l[7]||(l[7]=e=>v.password=e),placeholder:"请输入密码"},null,8,["modelValue"])])),_:1}),i(g,{title:"多行文本",subTitle:"指定属性 type=textarea 使用多行文本框",type:"line",padding:""},{default:o((()=>[i(I,{type:"textarea",modelValue:v.value,"onUpdate:modelValue":l[8]||(l[8]=e=>v.value=e),placeholder:"请输入内容"},null,8,["modelValue"])])),_:1}),i(g,{title:"多行文本自动高度",subTitle:"使用属性 autoHeight 使多行文本框自动增高",type:"line",padding:""},{default:o((()=>[i(I,{type:"textarea",autoHeight:"",modelValue:v.value,"onUpdate:modelValue":l[9]||(l[9]=e=>v.value=e),placeholder:"请输入内容"},null,8,["modelValue"])])),_:1})])),_:1})}],["__scopeId","data-v-792f35bb"]]);export{V as default};
|
