仿互站小程序
This commit is contained in:
Drawfans
150
vant/field/index.js
Normal file
150
vant/field/index.js
Normal file
@@ -0,0 +1,150 @@
|
||||
(0, require("../common/component").VantComponent)({
|
||||
field: !0,
|
||||
classes: [ "input-class", "right-icon-class" ],
|
||||
props: {
|
||||
size: String,
|
||||
icon: String,
|
||||
label: String,
|
||||
toggle: Boolean,
|
||||
error: Boolean,
|
||||
fixed: Boolean,
|
||||
focus: Boolean,
|
||||
center: Boolean,
|
||||
isLink: Boolean,
|
||||
leftIcon: String,
|
||||
rightIcon: String,
|
||||
disabled: Boolean,
|
||||
autosize: Boolean,
|
||||
readonly: Boolean,
|
||||
required: Boolean,
|
||||
password: Boolean,
|
||||
iconClass: String,
|
||||
clearable: Boolean,
|
||||
inputAlign: String,
|
||||
inputClass: String,
|
||||
customClass: String,
|
||||
customStyle: String,
|
||||
confirmType: String,
|
||||
confirmHold: Boolean,
|
||||
errorMessage: String,
|
||||
placeholder: String,
|
||||
placeholderStyle: String,
|
||||
errorMessageAlign: String,
|
||||
showConfirmBar: {
|
||||
type: Boolean,
|
||||
value: !0
|
||||
},
|
||||
adjustPosition: {
|
||||
type: Boolean,
|
||||
value: !0
|
||||
},
|
||||
cursorSpacing: {
|
||||
type: Number,
|
||||
value: 50
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
value: -1
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
value: "text"
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
value: !0
|
||||
},
|
||||
titleWidth: {
|
||||
type: String,
|
||||
value: "78px"
|
||||
},
|
||||
hidden: {
|
||||
type: Boolean,
|
||||
value: !1
|
||||
}
|
||||
},
|
||||
data: {
|
||||
showClear: !1
|
||||
},
|
||||
beforeCreate: function() {
|
||||
this.focused = !1, this.set({
|
||||
placeholder: 1
|
||||
});
|
||||
},
|
||||
created: function() {
|
||||
this.data.placeholder && this.set({
|
||||
placeholder: this.data.placeholder.replace(/<br>/g, "\n")
|
||||
}), "textarea" == this.data.type && this.data.value && this.set({
|
||||
value: this.data.value.replace(/\\n/g, "\n").replace(/\\t/g, "\t")
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
onLoad: function() {},
|
||||
onInput: function(e) {
|
||||
var t = this, a = (e.detail || {}).value, o = void 0 === a ? "" : a;
|
||||
this.set({
|
||||
value: o,
|
||||
showClear: this.getShowClear(o)
|
||||
}, function() {
|
||||
t.emitChange(o);
|
||||
});
|
||||
},
|
||||
onFocus: function(e) {
|
||||
var t = e.detail || {}, a = t.value, o = void 0 === a ? "" : a, i = t.height, n = void 0 === i ? 0 : i;
|
||||
this.$emit("focus", {
|
||||
value: o,
|
||||
height: n
|
||||
}), this.focused = !0, this.blurFromClear = !1, this.set({
|
||||
showClear: this.getShowClear()
|
||||
});
|
||||
},
|
||||
onBlur: function(e) {
|
||||
var t = this, a = e.detail || {}, o = a.value, i = void 0 === o ? "" : o, n = a.cursor, l = void 0 === n ? 0 : n;
|
||||
this.$emit("blur", {
|
||||
value: i,
|
||||
cursor: l
|
||||
}), this.focused = !1;
|
||||
var r = this.getShowClear();
|
||||
this.data.value === i ? this.set({
|
||||
showClear: r
|
||||
}) : this.blurFromClear || this.set({
|
||||
value: i,
|
||||
showClear: r
|
||||
}, function() {
|
||||
t.emitChange(i);
|
||||
});
|
||||
},
|
||||
onClickIcon: function() {
|
||||
this.$emit("click-icon");
|
||||
},
|
||||
getShowClear: function(e) {
|
||||
return e = void 0 === e ? this.data.value : e, this.data.clearable && this.focused && e && !this.data.readonly;
|
||||
},
|
||||
onClear: function() {
|
||||
var e = this;
|
||||
wx.showModal({
|
||||
title: "提示",
|
||||
content: "确定清空当前输入框内容吗？",
|
||||
success: function(t) {
|
||||
t.confirm && (e.blurFromClear = !0, e.set({
|
||||
value: "",
|
||||
showClear: e.getShowClear("")
|
||||
}, function() {
|
||||
e.emitChange(""), e.$emit("clear", "");
|
||||
}));
|
||||
}
|
||||
});
|
||||
},
|
||||
onConfirm: function() {
|
||||
this.$emit("confirm", this.data.value);
|
||||
},
|
||||
emitChange: function(e) {
|
||||
var t = this.data.name, a = this.data.label;
|
||||
this.$emit("input", e), this.$emit("change", {
|
||||
name: t,
|
||||
label: a,
|
||||
value: e
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
14
vant/field/index.json
Normal file
14
vant/field/index.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-cell": "../cell/index",
|
||||
"van-icon": "../icon/index",
|
||||
"forview": "/utils/forview/index",
|
||||
"van-loading": "/vant/loading/index",
|
||||
"van-dialog": "/vant/dialog/index",
|
||||
"van-button": "/vant/button/index",
|
||||
"van-popup": "/vant/popup/index",
|
||||
"van-tab": "/vant/tab/index",
|
||||
"van-tabs": "/vant/tabs/index"
|
||||
}
|
||||
}
|
||||
29
vant/field/index.wxml
Normal file
29
vant/field/index.wxml
Normal file
@@ -0,0 +1,29 @@
|
||||
<van-cell border="{{border}}" center="{{center}}" customClass="van-field" customStyle="{{customStyle}}" hidden="{{hidden}}" icon="{{leftIcon}}" isLink="{{isLink}}" required="{{required}}" size="{{size}}" title="{{label}}" titleWidth="{{titleWidth}}">
|
||||
<slot name="left-icon" slot="icon"></slot>
|
||||
<slot name="label" slot="title"></slot>
|
||||
<view class="van-field__body {{type==='textarea'?'van-field__body--textarea':''}}">
|
||||
<block wx:if="{{type==='textarea'}}">
|
||||
<view class="input-class {{utils.bem( 'field__input',[ inputAlign,{disabled:disabled,error:error} ] )}} {{inputClass||''}}" wx:if="{{toggle}}">
|
||||
{{value}}
|
||||
<text class="{{utils.bem( 'field__placeholder',{error:error} )}}" style="{{placeholderStyle}}" wx:if="{{value==null||value.length===0}}">{{placeholder}}</text>
|
||||
</view>
|
||||
<textarea adjustPosition="{{adjustPosition}}" autoHeight="{{autosize}}" bind:blur="onBlur" bind:confirm="onConfirm" bind:focus="onFocus" bindinput="onInput" class="input-class {{utils.bem( 'field__input',[ inputAlign,{disabled:disabled,error:error} ] )}} {{inputClass||''}}" cursorSpacing="{{cursorSpacing}}" disabled="{{disabled||readonly}}" fixed="{{fixed}}" focus="{{focus}}" maxlength="{{maxlength}}" showConfirmBar="{{showConfirmBar}}" value="{{value}}" wx:else>
|
||||
<text class="{{utils.bem( 'field__placeholder',{error:error} )}}" style="{{placeholderStyle}}" wx:if="{{value==null||value.length===0}}">{{placeholder}}</text>
|
||||
</textarea>
|
||||
</block>
|
||||
<input adjustPosition="{{adjustPosition}}" bind:blur="onBlur" bind:confirm="onConfirm" bind:focus="onFocus" bindinput="onInput" class="input-class {{utils.bem( 'field__input',[ inputAlign,{disabled:disabled,error:error} ] )}} {{inputClass||''}}" confirmHold="{{confirmHold}}" confirmType="{{confirmType}}" cursorSpacing="{{cursorSpacing}}" disabled="{{disabled||readonly}}" focus="{{focus}}" maxlength="{{maxlength}}" password="{{password||type==='password'}}" placeholder="{{placeholder}}" placeholderClass="{{error?'van-field__placeholder--error':'van-field__placeholder'}}" placeholderStyle="{{placeholderStyle}}" type="{{type}}" value="{{value}}" wx:else></input>
|
||||
<van-icon bindtouchstart="onClear" class="van-field__clear-root van-field__icon-root" name="clear" size="16px" wx:if="{{showClear}}"></van-icon>
|
||||
<view bind:tap="onClickIcon" class="van-field__icon-container">
|
||||
<van-icon class="van-field__icon-root {{iconClass}}" customClass="right-icon-class" name="{{rightIcon||icon}}" size="16px" wx:if="{{rightIcon||icon}}"></van-icon>
|
||||
<slot name="right-icon"></slot>
|
||||
<slot name="icon"></slot>
|
||||
</view>
|
||||
<view class="van-field__button">
|
||||
<slot name="button"></slot>
|
||||
</view>
|
||||
</view>
|
||||
<view class="van-field__error-message {{utils.bem( 'field__error',[ errorMessageAlign,{disabled:disabled,error:error} ] )}}" wx:if="{{errorMessage}}">
|
||||
{{errorMessage}}
|
||||
</view>
|
||||
</van-cell>
|
||||
<wxs module="utils" src="../wxs/utils.wxs" />
|
||||
104
vant/field/index.wxss
Normal file
104
vant/field/index.wxss
Normal file
@@ -0,0 +1,104 @@
|
||||
@import "../area/index.wxss";
|
||||
|
||||
.van-field__body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.van-field__body--textarea {
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.van-field__input {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
min-height: 24px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: inherit;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
background-color: initial;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.van-field__input--disabled {
|
||||
color: #999;
|
||||
background-color: initial;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.van-field__input--center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.van-field__input--right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.van-field__placeholder {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #999;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.van-field__placeholder--error {
|
||||
color: #f44;
|
||||
}
|
||||
|
||||
.van-field__icon-root {
|
||||
display: flex;
|
||||
min-height: 24px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.van-field__clear-root,.van-field__icon-container {
|
||||
padding: 0 10px;
|
||||
margin-right: -10px;
|
||||
line-height: inherit;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.van-field__button,.van-field__clear-root,.van-field__icon-container {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.van-field__clear-root {
|
||||
color: #c9c9c9;
|
||||
}
|
||||
|
||||
.van-field__icon-container {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.van-field__icon-container:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.van-field__button {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.van-field__button:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.van-field__error-message {
|
||||
font-size: 12px;
|
||||
color: #f44;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.van-field__error-message--center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.van-field__error-message--right {
|
||||
text-align: right;
|
||||
}
|
||||
Reference in New Issue
Block a user