提交初始版本,使用vant ui库
This commit is contained in:
1
miniprogram_npm/@vant/weapp/checkbox/index.d.ts
vendored
Normal file
1
miniprogram_npm/@vant/weapp/checkbox/index.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export {};
|
79
miniprogram_npm/@vant/weapp/checkbox/index.js
Normal file
79
miniprogram_npm/@vant/weapp/checkbox/index.js
Normal file
@@ -0,0 +1,79 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var relation_1 = require("../common/relation");
|
||||
var component_1 = require("../common/component");
|
||||
function emit(target, value) {
|
||||
target.$emit('input', value);
|
||||
target.$emit('change', value);
|
||||
}
|
||||
(0, component_1.VantComponent)({
|
||||
field: true,
|
||||
relation: (0, relation_1.useParent)('checkbox-group'),
|
||||
classes: ['icon-class', 'label-class'],
|
||||
props: {
|
||||
value: Boolean,
|
||||
disabled: Boolean,
|
||||
useIconSlot: Boolean,
|
||||
checkedColor: String,
|
||||
labelPosition: {
|
||||
type: String,
|
||||
value: 'right',
|
||||
},
|
||||
labelDisabled: Boolean,
|
||||
shape: {
|
||||
type: String,
|
||||
value: 'round',
|
||||
},
|
||||
iconSize: {
|
||||
type: null,
|
||||
value: 20,
|
||||
},
|
||||
},
|
||||
data: {
|
||||
parentDisabled: false,
|
||||
direction: 'vertical',
|
||||
},
|
||||
methods: {
|
||||
emitChange: function (value) {
|
||||
if (this.parent) {
|
||||
this.setParentValue(this.parent, value);
|
||||
}
|
||||
else {
|
||||
emit(this, value);
|
||||
}
|
||||
},
|
||||
toggle: function () {
|
||||
var _a = this.data, parentDisabled = _a.parentDisabled, disabled = _a.disabled, value = _a.value;
|
||||
if (!disabled && !parentDisabled) {
|
||||
this.emitChange(!value);
|
||||
}
|
||||
},
|
||||
onClickLabel: function () {
|
||||
var _a = this.data, labelDisabled = _a.labelDisabled, parentDisabled = _a.parentDisabled, disabled = _a.disabled, value = _a.value;
|
||||
if (!disabled && !labelDisabled && !parentDisabled) {
|
||||
this.emitChange(!value);
|
||||
}
|
||||
},
|
||||
setParentValue: function (parent, value) {
|
||||
var parentValue = parent.data.value.slice();
|
||||
var name = this.data.name;
|
||||
var max = parent.data.max;
|
||||
if (value) {
|
||||
if (max && parentValue.length >= max) {
|
||||
return;
|
||||
}
|
||||
if (parentValue.indexOf(name) === -1) {
|
||||
parentValue.push(name);
|
||||
emit(parent, parentValue);
|
||||
}
|
||||
}
|
||||
else {
|
||||
var index = parentValue.indexOf(name);
|
||||
if (index !== -1) {
|
||||
parentValue.splice(index, 1);
|
||||
emit(parent, parentValue);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
6
miniprogram_npm/@vant/weapp/checkbox/index.json
Normal file
6
miniprogram_npm/@vant/weapp/checkbox/index.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-icon": "../icon/index"
|
||||
}
|
||||
}
|
31
miniprogram_npm/@vant/weapp/checkbox/index.wxml
Normal file
31
miniprogram_npm/@vant/weapp/checkbox/index.wxml
Normal file
@@ -0,0 +1,31 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
<wxs src="./index.wxs" module="computed" />
|
||||
|
||||
<view class="{{ utils.bem('checkbox', [{ horizontal: direction === 'horizontal' }]) }} custom-class">
|
||||
<view
|
||||
wx:if="{{ labelPosition === 'left' }}"
|
||||
class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}"
|
||||
bindtap="onClickLabel"
|
||||
>
|
||||
<slot />
|
||||
</view>
|
||||
<view class="van-checkbox__icon-wrap" bindtap="toggle">
|
||||
<slot wx:if="{{ useIconSlot }}" name="icon" />
|
||||
<van-icon
|
||||
wx:else
|
||||
name="success"
|
||||
size="0.8em"
|
||||
class="{{ utils.bem('checkbox__icon', [shape, { disabled: disabled || parentDisabled, checked: value }]) }}"
|
||||
style="{{ computed.iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) }}"
|
||||
custom-class="icon-class"
|
||||
custom-style="line-height: 1.25em;"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
wx:if="{{ labelPosition === 'right' }}"
|
||||
class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}"
|
||||
bindtap="onClickLabel"
|
||||
>
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
20
miniprogram_npm/@vant/weapp/checkbox/index.wxs
Normal file
20
miniprogram_npm/@vant/weapp/checkbox/index.wxs
Normal file
@@ -0,0 +1,20 @@
|
||||
/* eslint-disable */
|
||||
var style = require('../wxs/style.wxs');
|
||||
var addUnit = require('../wxs/add-unit.wxs');
|
||||
|
||||
function iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) {
|
||||
var styles = {
|
||||
'font-size': addUnit(iconSize),
|
||||
};
|
||||
|
||||
if (checkedColor && value && !disabled && !parentDisabled) {
|
||||
styles['border-color'] = checkedColor;
|
||||
styles['background-color'] = checkedColor;
|
||||
}
|
||||
|
||||
return style(styles);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
iconStyle: iconStyle,
|
||||
};
|
1
miniprogram_npm/@vant/weapp/checkbox/index.wxss
Normal file
1
miniprogram_npm/@vant/weapp/checkbox/index.wxss
Normal file
@@ -0,0 +1 @@
|
||||
@import '../common/index.wxss';.van-checkbox{align-items:center;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.van-checkbox--horizontal{margin-right:12px}.van-checkbox__icon-wrap,.van-checkbox__label{line-height:var(--checkbox-size,20px)}.van-checkbox__icon-wrap{flex:none}.van-checkbox__icon{align-items:center;border:1px solid var(--checkbox-border-color,#c8c9cc);box-sizing:border-box;color:transparent;display:flex;font-size:var(--checkbox-size,20px);height:1em;justify-content:center;text-align:center;transition-duration:var(--checkbox-transition-duration,.2s);transition-property:color,border-color,background-color;width:1em}.van-checkbox__icon--round{border-radius:100%}.van-checkbox__icon--checked{background-color:var(--checkbox-checked-icon-color,#1989fa);border-color:var(--checkbox-checked-icon-color,#1989fa);color:#fff}.van-checkbox__icon--disabled{background-color:var(--checkbox-disabled-background-color,#ebedf0);border-color:var(--checkbox-disabled-icon-color,#c8c9cc)}.van-checkbox__icon--disabled.van-checkbox__icon--checked{color:var(--checkbox-disabled-icon-color,#c8c9cc)}.van-checkbox__label{word-wrap:break-word;color:var(--checkbox-label-color,#323233);padding-left:var(--checkbox-label-margin,10px)}.van-checkbox__label--left{float:left;margin:0 var(--checkbox-label-margin,10px) 0 0}.van-checkbox__label--disabled{color:var(--checkbox-disabled-label-color,#c8c9cc)}.van-checkbox__label:empty{margin:0}
|
Reference in New Issue
Block a user