@@ -68,6 +68,12 @@
</span>
</nut-cell>
</div>
+ <h4>右侧自定义DOM</h4>
+ <div class="filed-wrap">
+ <nut-field label="验证码:" textAlign="left" placeholder="请输入内容" v-model="val" @inputFunc="a" >
+ <div class="get-code"> 获取验证码</div>
+ </nut-field>
+ </div>
</template>
@@ -135,4 +141,18 @@ export default {
background: rgba(255,255,255,1);
}
+.wrapper-cell .nut-cell{
+ margin:0 0 0 20px;
+}
+.filed-wrap{
+ background: #ffffff;
+
+ .get-code{
+ min-width: 80px;
+ background-color: #07c160;
+ border: 1px solid #07c160;
+ color: #ffffff;
+ margin: 10px;
+ }
</style>
@@ -86,7 +86,15 @@
<nut-field label="自我介绍" placeholder="自我介绍" v-model="val3" type="textarea" maxLength="20" rows="4" />
```
+右侧自定义demo
+```html
+<div class="filed-wrap">
+```
@@ -20,6 +20,7 @@
text-overflow: ellipsis;
input {
+ min-width: 100px;
flex: 1;
height: 40px;
appearance: none;
@@ -69,9 +70,9 @@
.nut-textinput-clear {
opacity: 0.5;
- position: absolute;
- right: 0px;
- top: 50%;
+ position: relative;
+ right: 20px;
+ top: 10px;
transform: translateY(-50%);
height: 20px;
width: 20px;
@@ -97,8 +97,7 @@ export default {
type: Boolean,
default:false
},
- value: String,
- attr: Object
+ value: String
mounted(){
this.txtNum=this.value.length;
@@ -123,7 +122,7 @@ export default {
this.currentValue = '';
txtIptLength(event) {
- const data = event.target;
+ const data = event.target.value;
const txtLength = data.length;
this.txtNum = txtLength;
if (txtLength > this.maxLength) {