仿互站小程序
This commit is contained in:
Drawfans
142
vant/stepper/index.js
Normal file
142
vant/stepper/index.js
Normal file
@@ -0,0 +1,142 @@
|
||||
function t(t, e) {
|
||||
var i = Math.pow(10, 10);
|
||||
return Math.round((t + e) * i) / i;
|
||||
}
|
||||
|
||||
var e = require("../common/component"), i = require("../common/utils");
|
||||
|
||||
(0, e.VantComponent)({
|
||||
field: !0,
|
||||
classes: [ "input-class", "plus-class", "minus-class" ],
|
||||
props: {
|
||||
unit: String,
|
||||
value: null,
|
||||
integer: Boolean,
|
||||
disabled: Boolean,
|
||||
inputWidth: null,
|
||||
buttonSize: null,
|
||||
asyncChange: Boolean,
|
||||
disableInput: Boolean,
|
||||
decimalLength: {
|
||||
type: Number,
|
||||
value: null
|
||||
},
|
||||
min: {
|
||||
type: null,
|
||||
value: 1
|
||||
},
|
||||
max: {
|
||||
type: null,
|
||||
value: Number.MAX_SAFE_INTEGER
|
||||
},
|
||||
step: {
|
||||
type: null,
|
||||
value: 1
|
||||
},
|
||||
showPlus: {
|
||||
type: Boolean,
|
||||
value: !0
|
||||
},
|
||||
showMinus: {
|
||||
type: Boolean,
|
||||
value: !0
|
||||
},
|
||||
disablePlus: Boolean,
|
||||
disableMinus: Boolean
|
||||
},
|
||||
watch: {
|
||||
value: function(t) {
|
||||
if ("" !== t) {
|
||||
var e = this.range(t);
|
||||
"number" == typeof e && +this.data.value !== e && this.setData({
|
||||
value: e
|
||||
});
|
||||
}
|
||||
},
|
||||
inputWidth: function() {
|
||||
this.set({
|
||||
inputStyle: this.computeInputStyle()
|
||||
});
|
||||
},
|
||||
buttonSize: function() {
|
||||
this.set({
|
||||
inputStyle: this.computeInputStyle(),
|
||||
buttonStyle: this.computeButtonStyle()
|
||||
});
|
||||
}
|
||||
},
|
||||
data: {
|
||||
focus: !1,
|
||||
inputStyle: "",
|
||||
buttonStyle: ""
|
||||
},
|
||||
created: function() {
|
||||
this.setData({
|
||||
value: this.range(this.data.value)
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
isDisabled: function(t) {
|
||||
return "plus" === t ? this.data.disabled || this.data.disablePlus || this.data.value >= this.data.max : this.data.disabled || this.data.disableMinus || this.data.value <= this.data.min;
|
||||
},
|
||||
onFocus: function(t) {
|
||||
this.$emit("focus", t.detail);
|
||||
},
|
||||
onBlur: function(t) {
|
||||
var e = this.range(this.data.value);
|
||||
this.triggerInput(e), this.$emit("blur", t.detail);
|
||||
},
|
||||
range: function(t) {
|
||||
return t = String(t).replace(/[^0-9.-]/g, ""), t = "" === t ? 0 : +t, t = Math.max(Math.min(this.data.max, t), this.data.min),
|
||||
(0, i.isDef)(this.data.decimalLength) && (t = t.toFixed(this.data.decimalLength)),
|
||||
t;
|
||||
},
|
||||
onInput: function(t) {
|
||||
var e = (t.detail || {}).value, i = void 0 === e ? "" : e;
|
||||
this.triggerInput(i);
|
||||
},
|
||||
onChange: function() {
|
||||
var e = this.type;
|
||||
if (this.isDisabled(e)) this.$emit("overlimit", e); else {
|
||||
var i = "minus" === e ? -this.data.step : +this.data.step, a = t(+this.data.value, i);
|
||||
this.triggerInput(this.range(a)), this.$emit(e);
|
||||
}
|
||||
},
|
||||
longPressStep: function() {
|
||||
var t = this;
|
||||
this.longPressTimer = setTimeout(function() {
|
||||
t.onChange(), t.longPressStep();
|
||||
}, 200);
|
||||
},
|
||||
onTap: function(t) {
|
||||
var e = t.currentTarget.dataset.type;
|
||||
this.type = e, this.onChange();
|
||||
},
|
||||
onTouchStart: function(t) {
|
||||
var e = this;
|
||||
clearTimeout(this.longPressTimer);
|
||||
var i = t.currentTarget.dataset.type;
|
||||
this.type = i, this.isLongPress = !1, this.longPressTimer = setTimeout(function() {
|
||||
e.isLongPress = !0, e.onChange(), e.longPressStep();
|
||||
}, 600);
|
||||
},
|
||||
onTouchEnd: function() {
|
||||
clearTimeout(this.longPressTimer);
|
||||
},
|
||||
triggerInput: function(t) {
|
||||
this.setData({
|
||||
value: this.data.asyncChange ? this.data.value : t
|
||||
}), this.$emit("change", t);
|
||||
},
|
||||
computeInputStyle: function() {
|
||||
var t = "";
|
||||
return this.data.inputWidth && (t = "width: " + (0, i.addUnit)(this.data.inputWidth) + ";"),
|
||||
this.data.buttonSize && (t += "height: " + (0, i.addUnit)(this.data.buttonSize) + ";"),
|
||||
t;
|
||||
},
|
||||
computeButtonStyle: function() {
|
||||
var t = "", e = (0, i.addUnit)(this.data.buttonSize);
|
||||
return this.data.buttonSize && (t = "width: " + e + ";height: " + e + ";"), t;
|
||||
}
|
||||
}
|
||||
});
|
||||
13
vant/stepper/index.json
Normal file
13
vant/stepper/index.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"forview": "/utils/forview/index",
|
||||
"van-loading": "/vant/loading/index",
|
||||
"van-dialog": "/vant/dialog/index",
|
||||
"van-button": "/vant/button/index",
|
||||
"van-icon": "/vant/icon/index",
|
||||
"van-popup": "/vant/popup/index",
|
||||
"van-tab": "/vant/tab/index",
|
||||
"van-tabs": "/vant/tabs/index"
|
||||
}
|
||||
}
|
||||
7
vant/stepper/index.wxml
Normal file
7
vant/stepper/index.wxml
Normal file
@@ -0,0 +1,7 @@
|
||||
<view class="van-stepper custom-class">
|
||||
<view bind:tap="onTap" bind:touchend="onTouchEnd" bind:touchstart="onTouchStart" class="minus-class {{utils.bem( 'stepper__minus',{disabled:disabled||disableMinus||value<=min} )}}" data-type="minus" hoverClass="van-stepper__minus--hover" hoverStayTime="70" style="{{buttonStyle}}" wx:if="{{showMinus}}"></view>
|
||||
<input bind:blur="onBlur" bind:focus="onFocus" bindinput="onInput" class="input-class {{utils.bem( 'stepper__input',{disabled:disabled||disableInput} )}}" disabled="{{disabled||disableInput}}" focus="{{focus}}" style="{{inputStyle}}" type="{{integer?'number':'digit'}}" value="{{value}}"></input>
|
||||
<view bind:tap="onTap" bind:touchend="onTouchEnd" bind:touchstart="onTouchStart" class="plus-class {{utils.bem( 'stepper__plus',{disabled:disabled||disablePlus||value>=max} )}}" data-type="plus" hoverClass="van-stepper__plus--hover" hoverStayTime="70" style="{{buttonStyle}}" wx:if="{{showPlus}}"></view>
|
||||
<text wx:if="{{unit}}">{{unit}}</text>
|
||||
</view>
|
||||
<wxs module="utils" src="../wxs/utils.wxs" />
|
||||
112
vant/stepper/index.wxss
Normal file
112
vant/stepper/index.wxss
Normal file
@@ -0,0 +1,112 @@
|
||||
@import "../area/index.wxss";
|
||||
|
||||
.van-stepper {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.van-stepper text {
|
||||
font-size: 14px;
|
||||
vertical-align: middle;
|
||||
padding-left: 3px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.van-stepper__minus,.van-stepper__plus {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
margin: 1px;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
background-color: #f2f3f5;
|
||||
background-color: var(--stepper-background-color,#f2f3f5);
|
||||
color: #323233;
|
||||
color: var(--stepper-button-icon-color,#323233);
|
||||
width: 28px;
|
||||
width: var(--stepper-input-height,28px);
|
||||
height: 28px;
|
||||
height: var(--stepper-input-height,28px);
|
||||
padding: 4px;
|
||||
padding: var(--padding-base,4px);
|
||||
}
|
||||
|
||||
.van-stepper__minus:before,.van-stepper__plus:before {
|
||||
width: 9px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.van-stepper__minus:after,.van-stepper__plus:after {
|
||||
width: 1px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
.van-stepper__minus:after,.van-stepper__minus:before,.van-stepper__plus:after,.van-stepper__plus:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
background-color: currentColor;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.van-stepper__minus--hover,.van-stepper__plus--hover {
|
||||
background-color: #e8e8e8;
|
||||
background-color: var(--stepper-active-color,#e8e8e8);
|
||||
}
|
||||
|
||||
.van-stepper__minus--disabled,.van-stepper__plus--disabled {
|
||||
color: #c8c9cc;
|
||||
color: var(--stepper-button-disabled-icon-color,#c8c9cc);
|
||||
}
|
||||
|
||||
.van-stepper__minus--disabled,.van-stepper__minus--disabled.van-stepper__minus--hover,.van-stepper__minus--disabled.van-stepper__plus--hover,.van-stepper__plus--disabled,.van-stepper__plus--disabled.van-stepper__minus--hover,.van-stepper__plus--disabled.van-stepper__plus--hover {
|
||||
background-color: #f7f8fa;
|
||||
background-color: var(--stepper-button-disabled-color,#f7f8fa);
|
||||
}
|
||||
|
||||
.van-stepper__minus {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-radius: var(--stepper-border-radius,4px) 0 0 var(--stepper-border-radius,4px);
|
||||
}
|
||||
|
||||
.van-stepper__minus:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.van-stepper__plus {
|
||||
border-radius: 0 4px 4px 0;
|
||||
border-radius: 0 var(--stepper-border-radius,4px) var(--stepper-border-radius,4px) 0;
|
||||
}
|
||||
|
||||
.van-stepper__input {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
min-height: 0;
|
||||
margin: 1px;
|
||||
padding: 1px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
border-width: 1px 0;
|
||||
border-radius: 0;
|
||||
-webkit-appearance: none;
|
||||
font-size: 14px;
|
||||
font-size: var(--stepper-input-font-size,14px);
|
||||
color: #323233;
|
||||
color: var(--stepper-input-text-color,#323233);
|
||||
background-color: #f2f3f5;
|
||||
background-color: var(--stepper-background-color,#f2f3f5);
|
||||
width: 32px;
|
||||
width: var(--stepper-input-width,32px);
|
||||
height: 28px;
|
||||
height: var(--stepper-input-height,28px);
|
||||
}
|
||||
|
||||
.van-stepper__input--disabled {
|
||||
color: #c8c9cc;
|
||||
color: var(--stepper-input-disabled-text-color,#c8c9cc);
|
||||
background-color: #f2f3f5;
|
||||
background-color: var(--stepper-input-disabled-background-color,#f2f3f5);
|
||||
}
|
||||
Reference in New Issue
Block a user