cxc/yshop-pro-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

v1.0

Browse Source
This commit is contained in:
hupeng
2023-10-11 11:27:47 +08:00
commit d0b337c596
659 changed files with 67106 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
uni_modules/uv-form/components/uv-form-item/props.js Normal file
View File

@ -0,0 +1,49 @@
export default {
props: {
// input的label提示语
label: {
type: String,
default: ''
},
// 绑定的值
prop: {
type: String,
default: ''
},
// 是否显示表单域的下划线边框
borderBottom: {
type: [Boolean],
default: false
},
// label的位置，left-左边，top-上边
labelPosition: {
type: String,
default: ''
},
// label的宽度，单位px
labelWidth: {
type: [String, Number],
default: ''
},
// 右侧图标
rightIcon: {
type: String,
default: ''
},
// 左侧图标
leftIcon: {
type: String,
default: ''
},
// 是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置
required: {
type: Boolean,
default: false
},
leftIconStyle: {
type: [String, Object],
default: ''
},
...uni.$uv?.props?.formItem
}
}

226
uni_modules/uv-form/components/uv-form-item/uv-form-item.vue Normal file
View File

@ -0,0 +1,226 @@
<template>
<view class="uv-form-item">
<view
class="uv-form-item__body"
@tap="clickHandler"
:style="[$uv.addStyle(customStyle), {
flexDirection: (labelPosition || parentData.labelPosition) === 'left' ? 'row' : 'column'
}]"
>
<!-- 微信小程序中，将一个参数设置空字符串，结果会变成字符串"true" -->
<slot name="label">
<view
class="uv-form-item__body__left"
v-if="required || leftIcon || label"
:style="{
width: $uv.addUnit(labelWidth || parentData.labelWidth),
marginBottom: parentData.labelPosition === 'left' ? 0 : '5px',
}"
>
<!-- 为了块对齐 -->
<view class="uv-form-item__body__left__content">
<!-- nvue不支持伪元素before -->
<text
v-if="required"
class="uv-form-item__body__left__content__required"
>*</text>
<view
class="uv-form-item__body__left__content__icon"
v-if="leftIcon"
>
<uv-icon
:name="leftIcon"
:custom-style="leftIconStyle"
></uv-icon>
</view>
<text
class="uv-form-item__body__left__content__label"
:style="[parentData.labelStyle, {
justifyContent: parentData.labelAlign === 'left' ? 'flex-start' : parentData.labelAlign === 'center' ? 'center' : 'flex-end'
}]"
>{{ label }}</text>
</view>
</view>
</slot>
<view class="uv-form-item__body__right">
<view class="uv-form-item__body__right__content">
<view class="uv-form-item__body__right__content__slot">
<slot />
</view>
<view class="item__body__right__content__icon">
<slot name="right" />
</view>
</view>
</view>
</view>
<slot name="error">
<uv-transition
:show="true"
:duration="100"
mode="fade"
v-if="!!message && parentData.errorType === 'message'"
>
<text
class="uv-form-item__body__right__message"
:style="{
marginLeft: $uv.addUnit(parentData.labelPosition === 'top' ? 0 : (labelWidth || parentData.labelWidth))
}"
>{{ message }}</text>
</uv-transition>
</slot>
<uv-line
v-if="borderBottom"
:color="message && parentData.errorType === 'border-bottom' ? '#f56c6c' : '#d6d7d9'"
></uv-line>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* Form 表单
* @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
* @tutorial https://www.uvui.cn/components/form.html
* @property {String} label input的label提示语
* @property {String} prop 绑定的值
* @property {String | Boolean} borderBottom 是否显示表单域的下划线边框
* @property {String | Number} labelWidth label的宽度，单位px
* @property {String} rightIcon 右侧图标
* @property {String} leftIcon 左侧图标
* @property {String | Object} leftIconStyle 左侧图标的样式
* @property {Boolean} required 是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置 (默认 false )
*
* @example <uv-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1"></uv-form-item>
*/
export default {
name: 'uv-form-item',
emits: ['click'],
mixins: [mpMixin, mixin, props],
data() {
return {
// 错误提示语
message: '',
parentData: {
// 提示文本的位置
labelPosition: 'left',
// 提示文本对齐方式
labelAlign: 'left',
// 提示文本的样式
labelStyle: {},
// 提示文本的宽度
labelWidth: 45,
// 错误提示方式
errorType: 'message'
}
}
},
created() {
this.init()
},
methods: {
init() {
// 父组件的实例
this.updateParentData()
if (!this.parent) {
this.$uv.error('uv-form-item需要结合uv-form组件使用')
}
},
// 获取父组件的参数
updateParentData() {
// 此方法写在mixin中
this.getParentData('uv-form');
},
// 移除uv-form-item的校验结果
clearValidate() {
this.message = null
},
// 清空当前的组件的校验结果，并重置为初始值
resetField() {
// 找到原始值
const value = this.$uv.getProperty(this.parent.originalModel, this.prop)
// 将uv-form的model的prop属性链还原原始值
this.$uv.setProperty(this.parent.model, this.prop, value)
// 移除校验结果
this.message = null
},
// 点击组件
clickHandler() {
this.$emit('click')
}
}
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
.uv-form-item {
@include flex(column);
font-size: 14px;
color: $uv-main-color;
&__body {
@include flex;
padding: 10px 0;
&__left {
@include flex;
align-items: center;
&__content {
position: relative;
@include flex;
align-items: center;
padding-right: 10rpx;
flex: 1;
&__icon {
margin-right: 8rpx;
}
&__required {
position: absolute;
left: -9px;
color: $uv-error;
line-height: 20px;
font-size: 20px;
top: 3px;
}
&__label {
@include flex;
align-items: center;
flex: 1;
color: $uv-main-color;
font-size: 15px;
}
}
}
&__right {
flex: 1;
&__content {
@include flex;
align-items: center;
flex: 1;
&__slot {
flex: 1;
/* #ifndef MP */
@include flex;
align-items: center;
/* #endif */
}
&__icon {
margin-left: 10rpx;
color: $uv-light-color;
font-size: 30rpx;
}
}
&__message__box {
height: 16px;
line-height: 16px;
}
&__message {
margin-top: -6px;
line-height: 24px;
font-size: 12px;
color: $uv-error;
}
}
}
}
</style>