zji-uview

Zji-Uview-Form

基于uview2.0 的uni-app组件——Жидзин（Zidjin）系列组件库。

安装

推荐使用npm的方式安装

npm install uview-ui
npm i node-sass -D  # HBuilder默认已安装
npm i sass-loader -D  # HBuilder默认已安装
npm install zji-uview

引入

1. main.js引入uView主js库

import App from './App'
import Vue from 'vue'
import UViewUi from "./uview-ui"; //引入uview库，必须
import ZjiUview from "zji-uview"; //引入ZjiUview库

Vue.use(UViewUi); //注册uView，必须
Vue.use(ZjiUview);//注册ZjiView，必须

// 配置，可省略
// uni.$u.config.unit = 'px';
// 调用setConfig方法，方法内部会进行对象属性深度合并，可以放心嵌套配置
// 需要在Vue.use(uView)之后执行
uni.$u.setConfig({
	// 修改$u.config对象的属性
	config: {
		// 修改默认单位为rpx，相当于执行 uni.$u.config.unit = 'rpx'
		unit: 'rpx'
	},
	props: {
		// 修改radio组件的size参数的默认值，相当于执行 uni.$u.props.radio.size = 30
		radio: {
			size: 15
		}
	}
})

Vue.config.productionTip = false

App.mpType = 'app'
new Vue({
	...App,
    store,
    i18n,
}).$mount()

2. 在引入uView的全局SCSS主题文件

在项目src目录的uni.scss中引入此文件。

/* uni.scss */
@import 'uview-ui/theme.scss';

3. 引入uView基础样式

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

4. 配置easycom组件模式

此配置需要在项目src目录的pages.json中进行。

// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

5. Cli模式额外配置

如果您是vue-cli模式的项目，还需要在项目根目录的vue.config.js文件中进行如下配置：

// vue.config.js，如没有此文件则手动创建
module.exports = {
    transpileDependencies: ['uview-ui']
}

基本用法

<template>
	<view class="content">
		<zji-uview-form :headers.sync="headers" :form-data.sync='formData' show-button></zji-uview-form>
	</view>
</template>
<script>
    import {ZjiUviewForm} from '....zji-uview-form';
    export default {
        components: {
            ZjiUviewForm,
        },
        data: () => ({
            headers: [
                {
                    key: 'company_name',
                    label: '公司名称',
                    type: 'text',
                    value: '北京某某科技有限公司',
                    placeholder: "请输入公司名称",
                    rules: [
                        { 
                            required: true, 
                            message: '请输入姓名', 
                            // 可以单个或者同时写两个触发验证方式 
                            trigger: ['change','blur'],
                        }
                    ],
                    required: true,
                },
            ],
            formData: {},
        })
    };
</script>

Zji-Uview-Form Attributes

参数	说明	类型	可选值	默认值
headers	表单配置	array	-	-
form-data	存储输入表单的值（已取消）	object	-	-
show-button	显示确定按钮	boolean	false	true
only-read	是否禁止输入或点击	boolean	true	false
placement	如果表单里面有复选框类型的话显示横向或竖向 （已取消）	string	column	row
label-width	标签宽度	string	-	"45px"

"headers" Options

参数	说明	类型	可选值	默认值
type	表单类型	object	text, select, checkbox, date, images, files, plain	text
key	表单数据的键名	string	-	-
value	表单数据的(默认)值。 在headers.sync修饰符时，value同步更新（不兼容徽信小程序）	string, number	-	-
label	表单标签。即左侧文字	string	-	-
sub_label	表单副标签。即下方提示文字	string	-	-
placeholder	输入框为空时的占位符	string	-	-
editable	是否可编辑	boolean	false	true
required	是否显示左边的"*"号，这里仅起展示作用，如需校验必填，请通过rules配置必填规则，如需在swiper标签内显示星号，需要给予swiper-item内第一个根节点一定的margin样式	boolean	false	true
rules	当前校验字段在 rules 中所对应的校验规则。通过ref设置，如果rules中有自定义方法等，需要使用setRules方法设置规则，	objce	'required','message','trigger'
groups	表单分组。可对表单进行分组，其内容同"headers" Options	array	-	-
list	数据选项列表 适用：checkbox, select	array	如：[ {value: 0, label: '女'}, {value: 1,label: '男'}, ] 又如，适用select：[ {value: 86, label: '中国大陆'}, {value: 860,label: '中国海外地区', children: [ {value: 852, label: '香港'}, {value: 853, label: '澳门'}, {value: 886,label: '台湾'}, ], }, ]	-
split	数据分割符。将字符串通过分割符转成列表 适用：checkbox, select	string	";", ","	-
color	输入框字体颜色 适用：text	string	"#303133"	-
unit	单位，尾辍	string	"元"	-
mode	日期模式 适用于：date	string	single:单个日期 range:日期范围 multiple：可以选择多个日期	single
minDate	最小可选日期 适用于：date	number|string
maxDate	最大可选日期 适用于：date	number|string
next_days	已弃用< 最大可选日期	number|string	-	14
last_days	已弃用< 最小可选日期	number|string	-	0
name	已弃用< 适用于：images	string	-	image
max	已弃用< 图片数量 适用于：images	number	-	1
emit	适用于：images, radio, checkbox	string	-	upload
action	上传的url地址 适用于：images	string	'https://bgapi.hzhuishi.cn/api/uploadImg'	'/api/upload

Headers inner Rules Options

参数	说明	类型	可选值	默认值
required	是否显示左边的"*"号，这里仅起展示作用，如需校验必填，请通过rules配置必填规则，如需在swiper标签内显示星号，需要给予swiper-item内第一个根节点一定的margin样式	Boolean	'false','true'	true
message	校验不通过时的提示信息	string	-	-
trigger	触发校验的方式有2种： change：字段值发生变化时校验 blur：输入框失去焦点时触发	String |Array	'change','blur'

zji-uview-form Events

参数	说明	回调参数
change	表单数据变化就触发 并得到一个对象 对象里面是表单的key和value
submit	点击确定按钮获取form 表单的key和value
cancle	点击取消按钮

comfirm in Events

参数	说明