提交
This commit is contained in:
liuyuan
38
uni_modules/uni-collapse/changelog.md
Normal file
38
uni_modules/uni-collapse/changelog.md
Normal file
@@ -0,0 +1,38 @@
|
||||
## 1.4.4（2024-03-20）
|
||||
- 修复 titleBorder类型修正
|
||||
## 1.4.3（2022-01-25）
|
||||
- 修复 初始化的时候 ，open 属性失效的bug
|
||||
## 1.4.2（2022-01-21）
|
||||
- 修复 微信小程序resize后组件收起的bug
|
||||
## 1.4.1（2021-11-22）
|
||||
- 修复 vue3中个别scss变量无法找到的问题
|
||||
## 1.4.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-collapse](https://uniapp.dcloud.io/component/uniui/uni-collapse)
|
||||
## 1.3.3（2021-08-17）
|
||||
- 优化 show-arrow 属性默认为true
|
||||
## 1.3.2（2021-08-17）
|
||||
- 新增 show-arrow 属性，控制是否显示右侧箭头
|
||||
## 1.3.1（2021-07-30）
|
||||
- 优化 vue3下小程序事件警告的问题
|
||||
## 1.3.0（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.2.2（2021-07-21）
|
||||
- 修复 由1.2.0版本引起的 change 事件返回 undefined 的Bug
|
||||
## 1.2.1（2021-07-21）
|
||||
- 优化 组件示例
|
||||
## 1.2.0（2021-07-21）
|
||||
- 新增 组件折叠动画
|
||||
- 新增 value\v-model 属性 ，动态修改面板折叠状态
|
||||
- 新增 title 插槽 ，可定义面板标题
|
||||
- 新增 border 属性 ，显示隐藏面板内容分隔线
|
||||
- 新增 title-border 属性 ，显示隐藏面板标题分隔线
|
||||
- 修复 resize 方法失效的Bug
|
||||
- 修复 change 事件返回参数不正确的Bug
|
||||
- 优化 H5、App 平台自动更具内容更新高度，无需调用 reszie() 方法
|
||||
## 1.1.7（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.1.6（2021-02-05）
|
||||
- 优化 组件引用关系，通过uni_modules引用组件
|
||||
## 1.1.5（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
@@ -0,0 +1,402 @@
|
||||
<template>
|
||||
<view class="uni-collapse-item">
|
||||
<!-- onClick(!isOpen) -->
|
||||
<view @click="onClick(!isOpen)" class="uni-collapse-item__title"
|
||||
:class="{'is-open':isOpen &&titleBorder === 'auto' ,'uni-collapse-item-border':titleBorder !== 'none'}">
|
||||
<view class="uni-collapse-item__title-wrap">
|
||||
<slot name="title">
|
||||
<view class="uni-collapse-item__title-box" :class="{'is-disabled':disabled}">
|
||||
<image v-if="thumb" :src="thumb" class="uni-collapse-item__title-img" />
|
||||
<text class="uni-collapse-item__title-text">{{ title }}</text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<view v-if="showArrow"
|
||||
:class="{ 'uni-collapse-item__title-arrow-active': isOpen, 'uni-collapse-item--animation': showAnimation === true }"
|
||||
class="uni-collapse-item__title-arrow">
|
||||
<uni-icons :color="disabled?'#ddd':'#bbb'" size="14" type="bottom" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-collapse-item__wrap" :class="{'is--transition':showAnimation}"
|
||||
:style="{height: (isOpen?height:0) +'px'}">
|
||||
<view :id="elId" ref="collapse--hook" class="uni-collapse-item__wrap-content"
|
||||
:class="{open:isheight,'uni-collapse-item--border':border&&isOpen}">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const dom = weex.requireModule('dom')
|
||||
// #endif
|
||||
/**
|
||||
* CollapseItem 折叠面板子组件
|
||||
* @description 折叠面板子组件
|
||||
* @property {String} title 标题文字
|
||||
* @property {String} thumb 标题左侧缩略图
|
||||
* @property {String} name 唯一标志符
|
||||
* @property {Boolean} open = [true|false] 是否展开组件
|
||||
* @property {Boolean} titleBorder = [true|false] 是否显示标题分隔线
|
||||
* @property {String} border = ['auto'|'show'|'none'] 是否显示分隔线
|
||||
* @property {Boolean} disabled = [true|false] 是否展开面板
|
||||
* @property {Boolean} showAnimation = [true|false] 开启动画
|
||||
* @property {Boolean} showArrow = [true|false] 是否显示右侧箭头
|
||||
*/
|
||||
export default {
|
||||
name: 'uniCollapseItem',
|
||||
props: {
|
||||
// 列表标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
name: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// #ifdef APP-PLUS
|
||||
// 是否显示动画,app 端默认不开启动画，卡顿严重
|
||||
showAnimation: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
// 是否显示动画
|
||||
showAnimation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// #endif
|
||||
// 是否展开
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 缩略图
|
||||
thumb: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 标题分隔线显示类型
|
||||
titleBorder: {
|
||||
type: String,
|
||||
default: 'auto'
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showArrow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// TODO 随机生生元素ID，解决百度小程序获取同一个元素位置信息的bug
|
||||
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||
return {
|
||||
isOpen: false,
|
||||
isheight: null,
|
||||
height: 0,
|
||||
elId,
|
||||
nameSync: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
open(val) {
|
||||
this.isOpen = val
|
||||
this.onClick(val, 'init')
|
||||
}
|
||||
},
|
||||
updated(e) {
|
||||
this.$nextTick(() => {
|
||||
this.init(true)
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.collapse = this.getCollapse()
|
||||
this.oldHeight = 0
|
||||
this.onClick(this.open, 'init')
|
||||
},
|
||||
// #ifndef VUE3
|
||||
// TODO vue2
|
||||
destroyed() {
|
||||
if (this.__isUnmounted) return
|
||||
this.uninstall()
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
// TODO vue3
|
||||
unmounted() {
|
||||
this.__isUnmounted = true
|
||||
this.uninstall()
|
||||
},
|
||||
// #endif
|
||||
mounted() {
|
||||
if (!this.collapse) return
|
||||
if (this.name !== '') {
|
||||
this.nameSync = this.name
|
||||
} else {
|
||||
this.nameSync = this.collapse.childrens.length + ''
|
||||
}
|
||||
if (this.collapse.names.indexOf(this.nameSync) === -1) {
|
||||
this.collapse.names.push(this.nameSync)
|
||||
} else {
|
||||
console.warn(`name 值 ${this.nameSync} 重复`);
|
||||
}
|
||||
if (this.collapse.childrens.indexOf(this) === -1) {
|
||||
this.collapse.childrens.push(this)
|
||||
}
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init(type) {
|
||||
// #ifndef APP-NVUE
|
||||
this.getCollapseHeight(type)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.getNvueHwight(type)
|
||||
// #endif
|
||||
},
|
||||
uninstall() {
|
||||
if (this.collapse) {
|
||||
this.collapse.childrens.forEach((item, index) => {
|
||||
if (item === this) {
|
||||
this.collapse.childrens.splice(index, 1)
|
||||
}
|
||||
})
|
||||
this.collapse.names.forEach((item, index) => {
|
||||
if (item === this.nameSync) {
|
||||
this.collapse.names.splice(index, 1)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onClick(isOpen, type) {
|
||||
if (this.disabled) return
|
||||
this.isOpen = isOpen
|
||||
if (this.isOpen && this.collapse) {
|
||||
this.collapse.setAccordion(this)
|
||||
}
|
||||
if (type !== 'init') {
|
||||
this.collapse.onChange(isOpen, this)
|
||||
}
|
||||
},
|
||||
getCollapseHeight(type, index = 0) {
|
||||
const views = uni.createSelectorQuery().in(this)
|
||||
views
|
||||
.select(`#${this.elId}`)
|
||||
.fields({
|
||||
size: true
|
||||
}, data => {
|
||||
// TODO 百度中可能获取不到节点信息 ，需要循环获取
|
||||
if (index >= 10) return
|
||||
if (!data) {
|
||||
index++
|
||||
this.getCollapseHeight(false, index)
|
||||
return
|
||||
}
|
||||
// #ifdef APP-NVUE
|
||||
this.height = data.height + 1
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.height = data.height
|
||||
// #endif
|
||||
this.isheight = true
|
||||
if (type) return
|
||||
this.onClick(this.isOpen, 'init')
|
||||
})
|
||||
.exec()
|
||||
},
|
||||
getNvueHwight(type) {
|
||||
const result = dom.getComponentRect(this.$refs['collapse--hook'], option => {
|
||||
if (option && option.result && option.size) {
|
||||
// #ifdef APP-NVUE
|
||||
this.height = option.size.height + 1
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.height = option.size.height
|
||||
// #endif
|
||||
this.isheight = true
|
||||
if (type) return
|
||||
this.onClick(this.open, 'init')
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getCollapse(name = 'uniCollapse') {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false;
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-collapse-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
|
||||
/* #endif */
|
||||
&__title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
transition: border-bottom-color .3s;
|
||||
|
||||
// transition-property: border-bottom-color;
|
||||
// transition-duration: 5s;
|
||||
&-wrap {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
|
||||
}
|
||||
|
||||
&-box {
|
||||
padding: 0 15px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background-color: #fff;
|
||||
color: #303133;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
/* #endif */
|
||||
&.is-disabled {
|
||||
.uni-collapse-item__title-text {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.uni-collapse-item-border {
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
&.is-open {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
&-img {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&-text {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
/* #ifndef APP-NVUE */
|
||||
white-space: nowrap;
|
||||
color: inherit;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
lines: 1;
|
||||
/* #endif */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
transform: rotate(0deg);
|
||||
|
||||
&-active {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&__wrap {
|
||||
/* #ifndef APP-NVUE */
|
||||
will-change: height;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 0;
|
||||
|
||||
&.is--transition {
|
||||
// transition: all 0.3s;
|
||||
transition-property: height, border-bottom-width;
|
||||
transition-duration: 0.3s;
|
||||
/* #ifndef APP-NVUE */
|
||||
will-change: height;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
|
||||
|
||||
&-content {
|
||||
position: absolute;
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
// transition: height 0.3s;
|
||||
border-bottom-color: transparent;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0;
|
||||
|
||||
&.uni-collapse-item--border {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: red;
|
||||
border-bottom-color: #ebeef5;
|
||||
}
|
||||
|
||||
&.open {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--animation {
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3s;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<view class="uni-collapse">
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* Collapse 折叠面板
|
||||
* @description 展示可以折叠 / 展开的内容区域
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=23
|
||||
* @property {String|Array} value 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array)
|
||||
* @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
|
||||
* @event {Function} change 切换面板时触发，如果是手风琴模式，返回类型为string，否则为array
|
||||
*/
|
||||
export default {
|
||||
name: 'uniCollapse',
|
||||
emits:['change','activeItem','input','update:modelValue'],
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Array],
|
||||
default: ''
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Array],
|
||||
default: ''
|
||||
},
|
||||
accordion: {
|
||||
// 是否开启手风琴效果
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
// TODO 兼容 vue2 和 vue3
|
||||
dataValue() {
|
||||
let value = (typeof this.value === 'string' && this.value === '') ||
|
||||
(Array.isArray(this.value) && this.value.length === 0)
|
||||
let modelValue = (typeof this.modelValue === 'string' && this.modelValue === '') ||
|
||||
(Array.isArray(this.modelValue) && this.modelValue.length === 0)
|
||||
if (value) {
|
||||
return this.modelValue
|
||||
}
|
||||
if (modelValue) {
|
||||
return this.value
|
||||
}
|
||||
|
||||
return this.value
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataValue(val) {
|
||||
this.setOpen(val)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.childrens = []
|
||||
this.names = []
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(()=>{
|
||||
this.setOpen(this.dataValue)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
setOpen(val) {
|
||||
let str = typeof val === 'string'
|
||||
let arr = Array.isArray(val)
|
||||
this.childrens.forEach((vm, index) => {
|
||||
if (str) {
|
||||
if (val === vm.nameSync) {
|
||||
if (!this.accordion) {
|
||||
console.warn('accordion 属性为 false ,v-model 类型应该为 array')
|
||||
return
|
||||
}
|
||||
vm.isOpen = true
|
||||
}
|
||||
}
|
||||
if (arr) {
|
||||
val.forEach(v => {
|
||||
if (v === vm.nameSync) {
|
||||
if (this.accordion) {
|
||||
console.warn('accordion 属性为 true ,v-model 类型应该为 string')
|
||||
return
|
||||
}
|
||||
vm.isOpen = true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
this.emit(val)
|
||||
},
|
||||
setAccordion(self) {
|
||||
if (!this.accordion) return
|
||||
this.childrens.forEach((vm, index) => {
|
||||
if (self !== vm) {
|
||||
vm.isOpen = false
|
||||
}
|
||||
})
|
||||
},
|
||||
resize() {
|
||||
this.childrens.forEach((vm, index) => {
|
||||
// #ifndef APP-NVUE
|
||||
vm.getCollapseHeight()
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
vm.getNvueHwight()
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
onChange(isOpen, self) {
|
||||
let activeItem = []
|
||||
|
||||
if (this.accordion) {
|
||||
activeItem = isOpen ? self.nameSync : ''
|
||||
} else {
|
||||
this.childrens.forEach((vm, index) => {
|
||||
if (vm.isOpen) {
|
||||
activeItem.push(vm.nameSync)
|
||||
}
|
||||
})
|
||||
}
|
||||
this.$emit('change', activeItem)
|
||||
this.emit(activeItem)
|
||||
},
|
||||
emit(val){
|
||||
this.$emit('input', val)
|
||||
this.$emit('update:modelValue', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
.uni-collapse {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
86
uni_modules/uni-collapse/package.json
Normal file
86
uni_modules/uni-collapse/package.json
Normal file
@@ -0,0 +1,86 @@
|
||||
{
|
||||
"id": "uni-collapse",
|
||||
"displayName": "uni-collapse 折叠面板",
|
||||
"version": "1.4.4",
|
||||
"description": "Collapse 组件，可以折叠 / 展开的内容区域。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"折叠",
|
||||
"折叠面板",
|
||||
"手风琴"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-scss",
|
||||
"uni-icons"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
12
uni_modules/uni-collapse/readme.md
Normal file
12
uni_modules/uni-collapse/readme.md
Normal file
@@ -0,0 +1,12 @@
|
||||
|
||||
|
||||
## Collapse 折叠面板
|
||||
> **组件名：uni-collapse**
|
||||
> 代码块： `uCollapse`
|
||||
> 关联组件：`uni-collapse-item`、`uni-icons`。
|
||||
|
||||
|
||||
折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-collapse)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
100
uni_modules/uni-forms/changelog.md
Normal file
100
uni_modules/uni-forms/changelog.md
Normal file
@@ -0,0 +1,100 @@
|
||||
## 1.4.13（2024-10-08）
|
||||
- 修复 校验规则在抖音开发者工具上不生效的bug，详见：[https://ask.dcloud.net.cn/question/191933](https://ask.dcloud.net.cn/question/191933)
|
||||
## 1.4.12 (2024-9-21)
|
||||
- 修复 form上次修改的问题
|
||||
## 1.4.11 (2024-9-14)
|
||||
- 修复 binddata的兼容性问题
|
||||
## 1.4.10（2023-11-03）
|
||||
- 优化 labelWidth 描述错误
|
||||
## 1.4.9（2023-02-10）
|
||||
- 修复 required 参数无法动态绑定
|
||||
## 1.4.8（2022-08-23）
|
||||
- 优化 根据 rules 自动添加 required 的问题
|
||||
## 1.4.7（2022-08-22）
|
||||
- 修复 item 未设置 require 属性，rules 设置 require 后，星号也显示的 bug，详见：[https://ask.dcloud.net.cn/question/151540](https://ask.dcloud.net.cn/question/151540)
|
||||
## 1.4.6（2022-07-13）
|
||||
- 修复 model 需要校验的值没有声明对应字段时，导致第一次不触发校验的bug
|
||||
## 1.4.5（2022-07-05）
|
||||
- 新增 更多表单示例
|
||||
- 优化 子表单组件过期提示的问题
|
||||
- 优化 子表单组件uni-datetime-picker、uni-data-select、uni-data-picker的显示样式
|
||||
## 1.4.4（2022-07-04）
|
||||
- 更新 删除组件日志
|
||||
## 1.4.3（2022-07-04）
|
||||
- 修复 由 1.4.0 引发的 label 插槽不生效的bug
|
||||
## 1.4.2（2022-07-04）
|
||||
- 修复 子组件找不到 setValue 报错的bug
|
||||
## 1.4.1（2022-07-04）
|
||||
- 修复 uni-data-picker 在 uni-forms-item 中报错的bug
|
||||
- 修复 uni-data-picker 在 uni-forms-item 中宽度不正确的bug
|
||||
## 1.4.0（2022-06-30）
|
||||
- 【重要】组件逻辑重构，部分用法用旧版本不兼容，请注意兼容问题
|
||||
- 【重要】组件使用 Provide/Inject 方式注入依赖，提供了自定义表单组件调用 uni-forms 校验表单的能力
|
||||
- 新增 model 属性，等同于原 value/modelValue 属性，旧属性即将废弃
|
||||
- 新增 validateTrigger 属性的 blur 值，仅 uni-easyinput 生效
|
||||
- 新增 onFieldChange 方法，可以对子表单进行校验，可替代binddata方法
|
||||
- 新增 子表单的 setRules 方法，配合自定义校验函数使用
|
||||
- 新增 uni-forms-item 的 setRules 方法，配置动态表单使用可动态更新校验规则
|
||||
- 优化 动态表单校验方式，废弃拼接name的方式
|
||||
## 1.3.3（2022-06-22）
|
||||
- 修复 表单校验顺序无序问题
|
||||
## 1.3.2（2021-12-09）
|
||||
-
|
||||
## 1.3.1（2021-11-19）
|
||||
- 修复 label 插槽不生效的bug
|
||||
## 1.3.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-forms](https://uniapp.dcloud.io/component/uniui/uni-forms)
|
||||
## 1.2.7（2021-08-13）
|
||||
- 修复 没有添加校验规则的字段依然报错的Bug
|
||||
## 1.2.6（2021-08-11）
|
||||
- 修复 重置表单错误信息无法清除的问题
|
||||
## 1.2.5（2021-08-11）
|
||||
- 优化 组件文档
|
||||
## 1.2.4（2021-08-11）
|
||||
- 修复 表单验证只生效一次的问题
|
||||
## 1.2.3（2021-07-30）
|
||||
- 优化 vue3下事件警告的问题
|
||||
## 1.2.2（2021-07-26）
|
||||
- 修复 vue2 下条件编译导致destroyed生命周期失效的Bug
|
||||
- 修复 1.2.1 引起的示例在小程序平台报错的Bug
|
||||
## 1.2.1（2021-07-22）
|
||||
- 修复 动态校验表单，默认值为空的情况下校验失效的Bug
|
||||
- 修复 不指定name属性时，运行报错的Bug
|
||||
- 优化 label默认宽度从65调整至70，使required为true且四字时不换行
|
||||
- 优化 组件示例，新增动态校验示例代码
|
||||
- 优化 组件文档，使用方式更清晰
|
||||
## 1.2.0（2021-07-13）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.1.2（2021-06-25）
|
||||
- 修复 pattern 属性在微信小程序平台无效的问题
|
||||
## 1.1.1（2021-06-22）
|
||||
- 修复 validate-trigger属性为submit且err-show-type属性为toast时不能弹出的Bug
|
||||
## 1.1.0（2021-06-22）
|
||||
- 修复 只写setRules方法而导致校验不生效的Bug
|
||||
- 修复 由上个办法引发的错误提示文字错位的Bug
|
||||
## 1.0.48（2021-06-21）
|
||||
- 修复 不设置 label 属性 ，无法设置label插槽的问题
|
||||
## 1.0.47（2021-06-21）
|
||||
- 修复 不设置label属性，label-width属性不生效的bug
|
||||
- 修复 setRules 方法与rules属性冲突的问题
|
||||
## 1.0.46（2021-06-04）
|
||||
- 修复 动态删减数据导致报错的问题
|
||||
## 1.0.45（2021-06-04）
|
||||
- 新增 modelValue 属性 ，value 即将废弃
|
||||
## 1.0.44（2021-06-02）
|
||||
- 新增 uni-forms-item 可以设置单独的 rules
|
||||
- 新增 validate 事件增加 keepitem 参数，可以选择那些字段不过滤
|
||||
- 优化 submit 事件重命名为 validate
|
||||
## 1.0.43（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.0.42（2021-04-30）
|
||||
- 修复 自定义检验器失效的问题
|
||||
## 1.0.41（2021-03-05）
|
||||
- 更新 校验器
|
||||
- 修复 表单规则设置类型为 number 的情况下，值为0校验失败的Bug
|
||||
## 1.0.40（2021-03-04）
|
||||
- 修复 动态显示uni-forms-item的情况下，submit 方法获取值错误的Bug
|
||||
## 1.0.39（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
- 修复 校验器传入 int 等类型 ，返回String类型的Bug
|
||||
@@ -0,0 +1,632 @@
|
||||
<template>
|
||||
<view class="uni-forms-item"
|
||||
:class="['is-direction-' + localLabelPos ,border?'uni-forms-item--border':'' ,border && isFirstBorder?'is-first-border':'']">
|
||||
<slot name="label">
|
||||
<view class="uni-forms-item__label" :class="{'no-label':!label && !required}"
|
||||
:style="{width:localLabelWidth,justifyContent: localLabelAlign}">
|
||||
<text v-if="required" class="is-required">*</text>
|
||||
<text>{{label}}</text>
|
||||
</view>
|
||||
</slot>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="uni-forms-item__content">
|
||||
<slot></slot>
|
||||
<view class="uni-forms-item__error" :class="{'msg--active':msg}">
|
||||
<text>{{msg}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view class="uni-forms-item__nuve-content">
|
||||
<view class="uni-forms-item__content">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view class="uni-forms-item__error" :class="{'msg--active':msg}">
|
||||
<text class="error-text">{{msg}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* uni-fomrs-item 表单子组件
|
||||
* @description uni-fomrs-item 表单子组件，提供了基础布局已经校验能力
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=2773
|
||||
* @property {Boolean} required 是否必填，左边显示红色"*"号
|
||||
* @property {String } label 输入框左边的文字提示
|
||||
* @property {Number } labelWidth label的宽度，单位px（默认70）
|
||||
* @property {String } labelAlign = [left|center|right] label的文字对齐方式（默认left）
|
||||
* @value left label 左侧显示
|
||||
* @value center label 居中
|
||||
* @value right label 右侧对齐
|
||||
* @property {String } errorMessage 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
|
||||
* @property {String } name 表单域的属性名，在使用校验规则时必填
|
||||
* @property {String } leftIcon 【1.4.0废弃】label左边的图标，限 uni-ui 的图标名称
|
||||
* @property {String } iconColor 【1.4.0废弃】左边通过icon配置的图标的颜色（默认#606266）
|
||||
* @property {String} validateTrigger = [bind|submit|blur] 【1.4.0废弃】校验触发器方式 默认 submit
|
||||
* @value bind 发生变化时触发
|
||||
* @value submit 提交时触发
|
||||
* @value blur 失去焦点触发
|
||||
* @property {String } labelPosition = [top|left] 【1.4.0废弃】label的文字的位置（默认left）
|
||||
* @value top 顶部显示 label
|
||||
* @value left 左侧显示 label
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'uniFormsItem',
|
||||
options: {
|
||||
// #ifdef MP-TOUTIAO
|
||||
virtualHost: false,
|
||||
// #endif
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true
|
||||
// #endif
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
uniFormItem: this
|
||||
}
|
||||
},
|
||||
inject: {
|
||||
form: {
|
||||
from: 'uniForm',
|
||||
default: null
|
||||
},
|
||||
},
|
||||
props: {
|
||||
// 表单校验规则
|
||||
rules: {
|
||||
type: Array,
|
||||
default () {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
// 表单域的属性名，在使用校验规则时必填
|
||||
name: {
|
||||
type: [String, Array],
|
||||
default: ''
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// label的宽度
|
||||
labelWidth: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// label 居中方式，默认 left 取值 left/center/right
|
||||
labelAlign: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 强制显示错误信息
|
||||
errorMessage: {
|
||||
type: [String, Boolean],
|
||||
default: ''
|
||||
},
|
||||
// 1.4.0 弃用，统一使用 form 的校验时机
|
||||
// validateTrigger: {
|
||||
// type: String,
|
||||
// default: ''
|
||||
// },
|
||||
// 1.4.0 弃用，统一使用 form 的label 位置
|
||||
// labelPosition: {
|
||||
// type: String,
|
||||
// default: ''
|
||||
// },
|
||||
// 1.4.0 以下属性已经废弃，请使用 #label 插槽代替
|
||||
leftIcon: String,
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
errMsg: '',
|
||||
userRules: null,
|
||||
localLabelAlign: 'left',
|
||||
localLabelWidth: '70px',
|
||||
localLabelPos: 'left',
|
||||
border: false,
|
||||
isFirstBorder: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 处理错误信息
|
||||
msg() {
|
||||
return this.errorMessage || this.errMsg;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 规则发生变化通知子组件更新
|
||||
'form.formRules'(val) {
|
||||
// TODO 处理头条vue3 watch不生效的问题
|
||||
// #ifndef MP-TOUTIAO
|
||||
this.init()
|
||||
// #endif
|
||||
},
|
||||
'form.labelWidth'(val) {
|
||||
// 宽度
|
||||
this.localLabelWidth = this._labelWidthUnit(val)
|
||||
|
||||
},
|
||||
'form.labelPosition'(val) {
|
||||
// 标签位置
|
||||
this.localLabelPos = this._labelPosition()
|
||||
},
|
||||
'form.labelAlign'(val) {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init(true)
|
||||
if (this.name && this.form) {
|
||||
// TODO 处理头条vue3 watch不生效的问题
|
||||
// #ifdef MP-TOUTIAO
|
||||
this.$watch('form.formRules', () => {
|
||||
this.init()
|
||||
})
|
||||
// #endif
|
||||
|
||||
// 监听变化
|
||||
this.$watch(
|
||||
() => {
|
||||
const val = this.form._getDataValue(this.name, this.form.localData)
|
||||
return val
|
||||
},
|
||||
(value, oldVal) => {
|
||||
const isEqual = this.form._isEqual(value, oldVal)
|
||||
// 简单判断前后值的变化，只有发生变化才会发生校验
|
||||
// TODO 如果 oldVal = undefined ，那么大概率是源数据里没有值导致 ，这个情况不哦校验 ,可能不严谨 ，需要在做观察
|
||||
// fix by mehaotian 暂时取消 && oldVal !== undefined ，如果formData 中不存在，可能会不校验
|
||||
if (!isEqual) {
|
||||
const val = this.itemSetValue(value)
|
||||
this.onFieldChange(val, false)
|
||||
}
|
||||
}, {
|
||||
immediate: false
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
},
|
||||
// #ifndef VUE3
|
||||
destroyed() {
|
||||
if (this.__isUnmounted) return
|
||||
this.unInit()
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
unmounted() {
|
||||
this.__isUnmounted = true
|
||||
this.unInit()
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
/**
|
||||
* 外部调用方法
|
||||
* 设置规则 ，主要用于小程序自定义检验规则
|
||||
* @param {Array} rules 规则源数据
|
||||
*/
|
||||
setRules(rules = null) {
|
||||
this.userRules = rules
|
||||
this.init(false)
|
||||
},
|
||||
// 兼容老版本表单组件
|
||||
setValue() {
|
||||
// console.log('setValue 方法已经弃用，请使用最新版本的 uni-forms 表单组件以及其他关联组件。');
|
||||
},
|
||||
/**
|
||||
* 外部调用方法
|
||||
* 校验数据
|
||||
* @param {any} value 需要校验的数据
|
||||
* @param {boolean} 是否立即校验
|
||||
* @return {Array|null} 校验内容
|
||||
*/
|
||||
async onFieldChange(value, formtrigger = true) {
|
||||
const {
|
||||
formData,
|
||||
localData,
|
||||
errShowType,
|
||||
validateCheck,
|
||||
validateTrigger,
|
||||
_isRequiredField,
|
||||
_realName
|
||||
} = this.form
|
||||
const name = _realName(this.name)
|
||||
if (!value) {
|
||||
value = this.form.formData[name]
|
||||
}
|
||||
// fixd by mehaotian 不在校验前清空信息，解决闪屏的问题
|
||||
// this.errMsg = '';
|
||||
|
||||
// fix by mehaotian 解决没有检验规则的情况下，抛出错误的问题
|
||||
const ruleLen = this.itemRules.rules && this.itemRules.rules.length
|
||||
if (!this.validator || !ruleLen || ruleLen === 0) return;
|
||||
|
||||
// 检验时机
|
||||
// let trigger = this.isTrigger(this.itemRules.validateTrigger, this.validateTrigger, validateTrigger);
|
||||
const isRequiredField = _isRequiredField(this.itemRules.rules || []);
|
||||
let result = null;
|
||||
// 只有等于 bind 时 ，才能开启时实校验
|
||||
if (validateTrigger === 'bind' || formtrigger) {
|
||||
// 校验当前表单项
|
||||
result = await this.validator.validateUpdate({
|
||||
[name]: value
|
||||
},
|
||||
formData
|
||||
);
|
||||
|
||||
// 判断是否必填,非必填，不填不校验，填写才校验 ,暂时只处理 undefined 和空的情况
|
||||
if (!isRequiredField && (value === undefined || value === '')) {
|
||||
result = null;
|
||||
}
|
||||
|
||||
// 判断错误信息显示类型
|
||||
if (result && result.errorMessage) {
|
||||
if (errShowType === 'undertext') {
|
||||
// 获取错误信息
|
||||
this.errMsg = !result ? '' : result.errorMessage;
|
||||
}
|
||||
if (errShowType === 'toast') {
|
||||
uni.showToast({
|
||||
title: result.errorMessage || '校验错误',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
if (errShowType === 'modal') {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: result.errorMessage || '校验错误'
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.errMsg = ''
|
||||
}
|
||||
// 通知 form 组件更新事件
|
||||
validateCheck(result ? result : null)
|
||||
} else {
|
||||
this.errMsg = ''
|
||||
}
|
||||
return result ? result : null;
|
||||
},
|
||||
/**
|
||||
* 初始组件数据
|
||||
*/
|
||||
init(type = false) {
|
||||
const {
|
||||
validator,
|
||||
formRules,
|
||||
childrens,
|
||||
formData,
|
||||
localData,
|
||||
_realName,
|
||||
labelWidth,
|
||||
_getDataValue,
|
||||
_setDataValue
|
||||
} = this.form || {}
|
||||
// 对齐方式
|
||||
this.localLabelAlign = this._justifyContent()
|
||||
// 宽度
|
||||
this.localLabelWidth = this._labelWidthUnit(labelWidth)
|
||||
// 标签位置
|
||||
this.localLabelPos = this._labelPosition()
|
||||
// 将需要校验的子组件加入form 队列
|
||||
this.form && type && childrens.push(this)
|
||||
|
||||
if (!validator || !formRules) return
|
||||
// 判断第一个 item
|
||||
if (!this.form.isFirstBorder) {
|
||||
this.form.isFirstBorder = true;
|
||||
this.isFirstBorder = true;
|
||||
}
|
||||
|
||||
// 判断 group 里的第一个 item
|
||||
if (this.group) {
|
||||
if (!this.group.isFirstBorder) {
|
||||
this.group.isFirstBorder = true;
|
||||
this.isFirstBorder = true;
|
||||
}
|
||||
}
|
||||
this.border = this.form.border;
|
||||
// 获取子域的真实名称
|
||||
const name = _realName(this.name)
|
||||
const itemRule = this.userRules || this.rules
|
||||
if (typeof formRules === 'object' && itemRule) {
|
||||
// 子规则替换父规则
|
||||
formRules[name] = {
|
||||
rules: itemRule
|
||||
}
|
||||
validator.updateSchema(formRules);
|
||||
}
|
||||
// 注册校验规则
|
||||
const itemRules = formRules[name] || {}
|
||||
this.itemRules = itemRules
|
||||
// 注册校验函数
|
||||
this.validator = validator
|
||||
// 默认值赋予
|
||||
this.itemSetValue(_getDataValue(this.name, localData))
|
||||
},
|
||||
unInit() {
|
||||
if (this.form) {
|
||||
const {
|
||||
childrens,
|
||||
formData,
|
||||
_realName
|
||||
} = this.form
|
||||
childrens.forEach((item, index) => {
|
||||
if (item === this) {
|
||||
this.form.childrens.splice(index, 1)
|
||||
delete formData[_realName(item.name)]
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 设置item 的值
|
||||
itemSetValue(value) {
|
||||
const name = this.form._realName(this.name)
|
||||
const rules = this.itemRules.rules || []
|
||||
const val = this.form._getValue(name, value, rules)
|
||||
this.form._setDataValue(name, this.form.formData, val)
|
||||
return val
|
||||
},
|
||||
|
||||
/**
|
||||
* 移除该表单项的校验结果
|
||||
*/
|
||||
clearValidate() {
|
||||
this.errMsg = '';
|
||||
},
|
||||
|
||||
// 是否显示星号
|
||||
_isRequired() {
|
||||
// TODO 不根据规则显示 星号，考虑后续兼容
|
||||
// if (this.form) {
|
||||
// if (this.form._isRequiredField(this.itemRules.rules || []) && this.required) {
|
||||
// return true
|
||||
// }
|
||||
// return false
|
||||
// }
|
||||
return this.required
|
||||
},
|
||||
|
||||
// 处理对齐方式
|
||||
_justifyContent() {
|
||||
if (this.form) {
|
||||
const {
|
||||
labelAlign
|
||||
} = this.form
|
||||
let labelAli = this.labelAlign ? this.labelAlign : labelAlign;
|
||||
if (labelAli === 'left') return 'flex-start';
|
||||
if (labelAli === 'center') return 'center';
|
||||
if (labelAli === 'right') return 'flex-end';
|
||||
}
|
||||
return 'flex-start';
|
||||
},
|
||||
// 处理 label宽度单位 ,继承父元素的值
|
||||
_labelWidthUnit(labelWidth) {
|
||||
|
||||
// if (this.form) {
|
||||
// const {
|
||||
// labelWidth
|
||||
// } = this.form
|
||||
return this.num2px(this.labelWidth ? this.labelWidth : (labelWidth || (this.label ? 70 : 'auto')))
|
||||
// }
|
||||
// return '70px'
|
||||
},
|
||||
// 处理 label 位置
|
||||
_labelPosition() {
|
||||
if (this.form) return this.form.labelPosition || 'left'
|
||||
return 'left'
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 触发时机
|
||||
* @param {Object} rule 当前规则内时机
|
||||
* @param {Object} itemRlue 当前组件时机
|
||||
* @param {Object} parentRule 父组件时机
|
||||
*/
|
||||
isTrigger(rule, itemRlue, parentRule) {
|
||||
// bind submit
|
||||
if (rule === 'submit' || !rule) {
|
||||
if (rule === undefined) {
|
||||
if (itemRlue !== 'bind') {
|
||||
if (!itemRlue) {
|
||||
return parentRule === '' ? 'bind' : 'submit';
|
||||
}
|
||||
return 'submit';
|
||||
}
|
||||
return 'bind';
|
||||
}
|
||||
return 'submit';
|
||||
}
|
||||
return 'bind';
|
||||
},
|
||||
num2px(num) {
|
||||
if (typeof num === 'number') {
|
||||
return `${num}px`
|
||||
}
|
||||
return num
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-forms-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
/* #ifdef APP-NVUE */
|
||||
// 在 nvue 中，使用 margin-bottom error 信息会被隐藏
|
||||
padding-bottom: 22px;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
margin-bottom: 22px;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
height: 36px;
|
||||
padding: 0 12px 0 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
|
||||
/* #endif */
|
||||
&.no-label {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
/* #ifndef MP-TOUTIAO */
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
|
||||
/* #ifndef APP || H5 || MP-WEIXIN || APP-NVUE */
|
||||
// TODO 因为小程序平台会多一层标签节点 ，所以需要在多余节点继承当前样式
|
||||
&>uni-easyinput,
|
||||
&>uni-data-picker {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
}
|
||||
|
||||
& .uni-forms-item__nuve-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__error {
|
||||
color: #f56c6c;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding-top: 4px;
|
||||
position: absolute;
|
||||
/* #ifndef APP-NVUE */
|
||||
top: 100%;
|
||||
left: 0;
|
||||
transition: transform 0.3s;
|
||||
transform: translateY(-100%);
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
bottom: 5px;
|
||||
/* #endif */
|
||||
|
||||
opacity: 0;
|
||||
|
||||
.error-text {
|
||||
// 只有 nvue 下这个样式才生效
|
||||
color: #f56c6c;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&.msg--active {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
// 位置修饰样式
|
||||
&.is-direction-left {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&.is-direction-top {
|
||||
flex-direction: column;
|
||||
|
||||
.uni-forms-item__label {
|
||||
padding: 0 0 8px;
|
||||
line-height: 1.5715;
|
||||
text-align: left;
|
||||
/* #ifndef APP-NVUE */
|
||||
white-space: initial;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
|
||||
.is-required {
|
||||
// color: $uni-color-error;
|
||||
color: #dd524d;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.uni-forms-item--border {
|
||||
margin-bottom: 0;
|
||||
padding: 10px 0;
|
||||
// padding-bottom: 0;
|
||||
border-top: 1px #eee solid;
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-forms-item__content {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.uni-forms-item__error {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.uni-forms-item__error {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
padding-top: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
}
|
||||
|
||||
.is-first-border {
|
||||
/* #ifndef APP-NVUE */
|
||||
border: none;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
border-width: 0;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
404
uni_modules/uni-forms/components/uni-forms/uni-forms.vue
Normal file
404
uni_modules/uni-forms/components/uni-forms/uni-forms.vue
Normal file
@@ -0,0 +1,404 @@
|
||||
<template>
|
||||
<view class="uni-forms">
|
||||
<form>
|
||||
<slot></slot>
|
||||
</form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Validator from './validate.js';
|
||||
import {
|
||||
deepCopy,
|
||||
getValue,
|
||||
isRequiredField,
|
||||
setDataValue,
|
||||
getDataValue,
|
||||
realName,
|
||||
isRealName,
|
||||
rawData,
|
||||
isEqual
|
||||
} from './utils.js'
|
||||
|
||||
// #ifndef VUE3
|
||||
// 后续会慢慢废弃这个方法
|
||||
import Vue from 'vue';
|
||||
Vue.prototype.binddata = function(name, value, formName) {
|
||||
if (formName) {
|
||||
this.$refs[formName].setValue(name, value);
|
||||
} else {
|
||||
let formVm;
|
||||
for (let i in this.$refs) {
|
||||
const vm = this.$refs[i];
|
||||
if (vm && vm.$options && vm.$options.name === 'uniForms') {
|
||||
formVm = vm;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
|
||||
formVm.setValue(name, value);
|
||||
}
|
||||
};
|
||||
// #endif
|
||||
/**
|
||||
* Forms 表单
|
||||
* @description 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=2773
|
||||
* @property {Object} rules 表单校验规则
|
||||
* @property {String} validateTrigger = [bind|submit|blur] 校验触发器方式 默认 submit
|
||||
* @value bind 发生变化时触发
|
||||
* @value submit 提交时触发
|
||||
* @value blur 失去焦点时触发
|
||||
* @property {String} labelPosition = [top|left] label 位置 默认 left
|
||||
* @value top 顶部显示 label
|
||||
* @value left 左侧显示 label
|
||||
* @property {String} labelWidth label 宽度，默认 70px
|
||||
* @property {String} labelAlign = [left|center|right] label 居中方式 默认 left
|
||||
* @value left label 左侧显示
|
||||
* @value center label 居中
|
||||
* @value right label 右侧对齐
|
||||
* @property {String} errShowType = [undertext|toast|modal] 校验错误信息提示方式
|
||||
* @value undertext 错误信息在底部显示
|
||||
* @value toast 错误信息toast显示
|
||||
* @value modal 错误信息modal显示
|
||||
* @event {Function} submit 提交时触发
|
||||
* @event {Function} validate 校验结果发生变化触发
|
||||
*/
|
||||
export default {
|
||||
name: 'uniForms',
|
||||
emits: ['validate', 'submit'],
|
||||
options: {
|
||||
// #ifdef MP-TOUTIAO
|
||||
virtualHost: false,
|
||||
// #endif
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true
|
||||
// #endif
|
||||
},
|
||||
props: {
|
||||
// 即将弃用
|
||||
value: {
|
||||
type: Object,
|
||||
default () {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
// vue3 替换 value 属性
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default () {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
// 1.4.0 开始将不支持 v-model ，且废弃 value 和 modelValue
|
||||
model: {
|
||||
type: Object,
|
||||
default () {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
// 表单校验规则
|
||||
rules: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
//校验错误信息提示方式 默认 undertext 取值 [undertext|toast|modal]
|
||||
errShowType: {
|
||||
type: String,
|
||||
default: 'undertext'
|
||||
},
|
||||
// 校验触发器方式 默认 bind 取值 [bind|submit]
|
||||
validateTrigger: {
|
||||
type: String,
|
||||
default: 'submit'
|
||||
},
|
||||
// label 位置，默认 left 取值 top/left
|
||||
labelPosition: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
// label 宽度
|
||||
labelWidth: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// label 居中方式，默认 left 取值 left/center/right
|
||||
labelAlign: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
uniForm: this
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表单本地值的记录，不应该与传如的值进行关联
|
||||
formData: {},
|
||||
formRules: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 计算数据源变化的
|
||||
localData() {
|
||||
const localVal = this.model || this.modelValue || this.value
|
||||
if (localVal) {
|
||||
return deepCopy(localVal)
|
||||
}
|
||||
return {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听数据变化 ,暂时不使用，需要单独赋值
|
||||
// localData: {},
|
||||
// 监听规则变化
|
||||
rules: {
|
||||
handler: function(val, oldVal) {
|
||||
this.setRules(val)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// #ifdef VUE3
|
||||
let getbinddata = getApp().$vm.$.appContext.config.globalProperties.binddata
|
||||
if (!getbinddata) {
|
||||
getApp().$vm.$.appContext.config.globalProperties.binddata = function(name, value, formName) {
|
||||
if (formName) {
|
||||
this.$refs[formName].setValue(name, value);
|
||||
} else {
|
||||
let formVm;
|
||||
for (let i in this.$refs) {
|
||||
const vm = this.$refs[i];
|
||||
if (vm && vm.$options && vm.$options.name === 'uniForms') {
|
||||
formVm = vm;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
|
||||
if(formVm.model)formVm.model[name] = value
|
||||
if(formVm.modelValue)formVm.modelValue[name] = value
|
||||
if(formVm.value)formVm.value[name] = value
|
||||
}
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
||||
// 子组件实例数组
|
||||
this.childrens = []
|
||||
// TODO 兼容旧版 uni-data-picker ,新版本中无效，只是避免报错
|
||||
this.inputChildrens = []
|
||||
this.setRules(this.rules)
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 外部调用方法
|
||||
* 设置规则 ，主要用于小程序自定义检验规则
|
||||
* @param {Array} rules 规则源数据
|
||||
*/
|
||||
setRules(rules) {
|
||||
// TODO 有可能子组件合并规则的时机比这个要早，所以需要合并对象 ，而不是直接赋值，可能会被覆盖
|
||||
this.formRules = Object.assign({}, this.formRules, rules)
|
||||
// 初始化校验函数
|
||||
this.validator = new Validator(rules);
|
||||
},
|
||||
|
||||
/**
|
||||
* 外部调用方法
|
||||
* 设置数据，用于设置表单数据，公开给用户使用 ， 不支持在动态表单中使用
|
||||
* @param {Object} key
|
||||
* @param {Object} value
|
||||
*/
|
||||
setValue(key, value) {
|
||||
let example = this.childrens.find(child => child.name === key);
|
||||
if (!example) return null;
|
||||
this.formData[key] = getValue(key, value, (this.formRules[key] && this.formRules[key].rules) || [])
|
||||
return example.onFieldChange(this.formData[key]);
|
||||
},
|
||||
|
||||
/**
|
||||
* 外部调用方法
|
||||
* 手动提交校验表单
|
||||
* 对整个表单进行校验的方法，参数为一个回调函数。
|
||||
* @param {Array} keepitem 保留不参与校验的字段
|
||||
* @param {type} callback 方法回调
|
||||
*/
|
||||
validate(keepitem, callback) {
|
||||
return this.checkAll(this.formData, keepitem, callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 外部调用方法
|
||||
* 部分表单校验
|
||||
* @param {Array|String} props 需要校验的字段
|
||||
* @param {Function} 回调函数
|
||||
*/
|
||||
validateField(props = [], callback) {
|
||||
props = [].concat(props);
|
||||
let invalidFields = {};
|
||||
this.childrens.forEach(item => {
|
||||
const name = realName(item.name)
|
||||
if (props.indexOf(name) !== -1) {
|
||||
invalidFields = Object.assign({}, invalidFields, {
|
||||
[name]: this.formData[name]
|
||||
});
|
||||
}
|
||||
});
|
||||
return this.checkAll(invalidFields, [], callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 外部调用方法
|
||||
* 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
|
||||
* @param {Array|String} props 需要移除校验的字段 ，不填为所有
|
||||
*/
|
||||
clearValidate(props = []) {
|
||||
props = [].concat(props);
|
||||
this.childrens.forEach(item => {
|
||||
if (props.length === 0) {
|
||||
item.errMsg = '';
|
||||
} else {
|
||||
const name = realName(item.name)
|
||||
if (props.indexOf(name) !== -1) {
|
||||
item.errMsg = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 外部调用方法 ，即将废弃
|
||||
* 手动提交校验表单
|
||||
* 对整个表单进行校验的方法，参数为一个回调函数。
|
||||
* @param {Array} keepitem 保留不参与校验的字段
|
||||
* @param {type} callback 方法回调
|
||||
*/
|
||||
submit(keepitem, callback, type) {
|
||||
for (let i in this.dataValue) {
|
||||
const itemData = this.childrens.find(v => v.name === i);
|
||||
if (itemData) {
|
||||
if (this.formData[i] === undefined) {
|
||||
this.formData[i] = this._getValue(i, this.dataValue[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!type) {
|
||||
console.warn('submit 方法即将废弃，请使用validate方法代替！');
|
||||
}
|
||||
|
||||
return this.checkAll(this.formData, keepitem, callback, 'submit');
|
||||
},
|
||||
|
||||
// 校验所有
|
||||
async checkAll(invalidFields, keepitem, callback, type) {
|
||||
// 不存在校验规则 ，则停止校验流程
|
||||
if (!this.validator) return
|
||||
let childrens = []
|
||||
// 处理参与校验的item实例
|
||||
for (let i in invalidFields) {
|
||||
const item = this.childrens.find(v => realName(v.name) === i)
|
||||
if (item) {
|
||||
childrens.push(item)
|
||||
}
|
||||
}
|
||||
|
||||
// 如果validate第一个参数是funciont ,那就走回调
|
||||
if (!callback && typeof keepitem === 'function') {
|
||||
callback = keepitem;
|
||||
}
|
||||
|
||||
let promise;
|
||||
// 如果不存在回调，那么使用 Promise 方式返回
|
||||
if (!callback && typeof callback !== 'function' && Promise) {
|
||||
promise = new Promise((resolve, reject) => {
|
||||
callback = function(valid, invalidFields) {
|
||||
!valid ? resolve(invalidFields) : reject(valid);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
let results = [];
|
||||
// 避免引用错乱 ，建议拷贝对象处理
|
||||
let tempFormData = JSON.parse(JSON.stringify(invalidFields))
|
||||
// 所有子组件参与校验,使用 for 可以使用 awiat
|
||||
for (let i in childrens) {
|
||||
const child = childrens[i]
|
||||
let name = realName(child.name);
|
||||
const result = await child.onFieldChange(tempFormData[name]);
|
||||
if (result) {
|
||||
results.push(result);
|
||||
// toast ,modal 只需要执行第一次就可以
|
||||
if (this.errShowType === 'toast' || this.errShowType === 'modal') break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (Array.isArray(results)) {
|
||||
if (results.length === 0) results = null;
|
||||
}
|
||||
if (Array.isArray(keepitem)) {
|
||||
keepitem.forEach(v => {
|
||||
let vName = realName(v);
|
||||
let value = getDataValue(v, this.localData)
|
||||
if (value !== undefined) {
|
||||
tempFormData[vName] = value
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// TODO submit 即将废弃
|
||||
if (type === 'submit') {
|
||||
this.$emit('submit', {
|
||||
detail: {
|
||||
value: tempFormData,
|
||||
errors: results
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$emit('validate', results);
|
||||
}
|
||||
|
||||
// const resetFormData = rawData(tempFormData, this.localData, this.name)
|
||||
let resetFormData = {}
|
||||
resetFormData = rawData(tempFormData, this.name)
|
||||
callback && typeof callback === 'function' && callback(results, resetFormData);
|
||||
|
||||
if (promise && callback) {
|
||||
return promise;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回validate事件
|
||||
* @param {Object} result
|
||||
*/
|
||||
validateCheck(result) {
|
||||
this.$emit('validate', result);
|
||||
},
|
||||
_getValue: getValue,
|
||||
_isRequiredField: isRequiredField,
|
||||
_setDataValue: setDataValue,
|
||||
_getDataValue: getDataValue,
|
||||
_realName: realName,
|
||||
_isRealName: isRealName,
|
||||
_isEqual: isEqual
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-forms {}
|
||||
</style>
|
||||
293
uni_modules/uni-forms/components/uni-forms/utils.js
Normal file
293
uni_modules/uni-forms/components/uni-forms/utils.js
Normal file
@@ -0,0 +1,293 @@
|
||||
/**
|
||||
* 简单处理对象拷贝
|
||||
* @param {Obejct} 被拷贝对象
|
||||
* @@return {Object} 拷贝对象
|
||||
*/
|
||||
export const deepCopy = (val) => {
|
||||
return JSON.parse(JSON.stringify(val))
|
||||
}
|
||||
/**
|
||||
* 过滤数字类型
|
||||
* @param {String} format 数字类型
|
||||
* @@return {Boolean} 返回是否为数字类型
|
||||
*/
|
||||
export const typeFilter = (format) => {
|
||||
return format === 'int' || format === 'double' || format === 'number' || format === 'timestamp';
|
||||
}
|
||||
|
||||
/**
|
||||
* 把 value 转换成指定的类型，用于处理初始值，原因是初始值需要入库不能为 undefined
|
||||
* @param {String} key 字段名
|
||||
* @param {any} value 字段值
|
||||
* @param {Object} rules 表单校验规则
|
||||
*/
|
||||
export const getValue = (key, value, rules) => {
|
||||
const isRuleNumType = rules.find(val => val.format && typeFilter(val.format));
|
||||
const isRuleBoolType = rules.find(val => (val.format && val.format === 'boolean') || val.format === 'bool');
|
||||
// 输入类型为 number
|
||||
if (!!isRuleNumType) {
|
||||
if (!value && value !== 0) {
|
||||
value = null
|
||||
} else {
|
||||
value = isNumber(Number(value)) ? Number(value) : value
|
||||
}
|
||||
}
|
||||
|
||||
// 输入类型为 boolean
|
||||
if (!!isRuleBoolType) {
|
||||
value = isBoolean(value) ? value : false
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取表单数据
|
||||
* @param {String|Array} name 真实名称，需要使用 realName 获取
|
||||
* @param {Object} data 原始数据
|
||||
* @param {any} value 需要设置的值
|
||||
*/
|
||||
export const setDataValue = (field, formdata, value) => {
|
||||
formdata[field] = value
|
||||
return value || ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取表单数据
|
||||
* @param {String|Array} field 真实名称，需要使用 realName 获取
|
||||
* @param {Object} data 原始数据
|
||||
*/
|
||||
export const getDataValue = (field, data) => {
|
||||
return objGet(data, field)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取表单类型
|
||||
* @param {String|Array} field 真实名称，需要使用 realName 获取
|
||||
*/
|
||||
export const getDataValueType = (field, data) => {
|
||||
const value = getDataValue(field, data)
|
||||
return {
|
||||
type: type(value),
|
||||
value
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取表单可用的真实name
|
||||
* @param {String|Array} name 表单name
|
||||
* @@return {String} 表单可用的真实name
|
||||
*/
|
||||
export const realName = (name, data = {}) => {
|
||||
const base_name = _basePath(name)
|
||||
if (typeof base_name === 'object' && Array.isArray(base_name) && base_name.length > 1) {
|
||||
const realname = base_name.reduce((a, b) => a += `#${b}`, '_formdata_')
|
||||
return realname
|
||||
}
|
||||
return base_name[0] || name
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否表单可用的真实name
|
||||
* @param {String|Array} name 表单name
|
||||
* @@return {String} 表单可用的真实name
|
||||
*/
|
||||
export const isRealName = (name) => {
|
||||
const reg = /^_formdata_#*/
|
||||
return reg.test(name)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取表单数据的原始格式
|
||||
* @@return {Object|Array} object 需要解析的数据
|
||||
*/
|
||||
export const rawData = (object = {}, name) => {
|
||||
let newData = JSON.parse(JSON.stringify(object))
|
||||
let formData = {}
|
||||
for(let i in newData){
|
||||
let path = name2arr(i)
|
||||
objSet(formData,path,newData[i])
|
||||
}
|
||||
return formData
|
||||
}
|
||||
|
||||
/**
|
||||
* 真实name还原为 array
|
||||
* @param {*} name
|
||||
*/
|
||||
export const name2arr = (name) => {
|
||||
let field = name.replace('_formdata_#', '')
|
||||
field = field.split('#').map(v => (isNumber(v) ? Number(v) : v))
|
||||
return field
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象中设置值
|
||||
* @param {Object|Array} object 源数据
|
||||
* @param {String| Array} path 'a.b.c' 或 ['a',0,'b','c']
|
||||
* @param {String} value 需要设置的值
|
||||
*/
|
||||
export const objSet = (object, path, value) => {
|
||||
if (typeof object !== 'object') return object;
|
||||
_basePath(path).reduce((o, k, i, _) => {
|
||||
if (i === _.length - 1) {
|
||||
// 若遍历结束直接赋值
|
||||
o[k] = value
|
||||
return null
|
||||
} else if (k in o) {
|
||||
// 若存在对应路径，则返回找到的对象，进行下一次遍历
|
||||
return o[k]
|
||||
} else {
|
||||
// 若不存在对应路径，则创建对应对象，若下一路径是数字，新对象赋值为空数组，否则赋值为空对象
|
||||
o[k] = /^[0-9]{1,}$/.test(_[i + 1]) ? [] : {}
|
||||
return o[k]
|
||||
}
|
||||
}, object)
|
||||
// 返回object
|
||||
return object;
|
||||
}
|
||||
|
||||
// 处理 path， path有三种形式：'a[0].b.c'、'a.0.b.c' 和 ['a','0','b','c']，需要统一处理成数组，便于后续使用
|
||||
function _basePath(path) {
|
||||
// 若是数组，则直接返回
|
||||
if (Array.isArray(path)) return path
|
||||
// 若有 '[',']'，则替换成将 '[' 替换成 '.',去掉 ']'
|
||||
return path.replace(/\[/g, '.').replace(/\]/g, '').split('.')
|
||||
}
|
||||
|
||||
/**
|
||||
* 从对象中获取值
|
||||
* @param {Object|Array} object 源数据
|
||||
* @param {String| Array} path 'a.b.c' 或 ['a',0,'b','c']
|
||||
* @param {String} defaultVal 如果无法从调用链中获取值的默认值
|
||||
*/
|
||||
export const objGet = (object, path, defaultVal = 'undefined') => {
|
||||
// 先将path处理成统一格式
|
||||
let newPath = _basePath(path)
|
||||
// 递归处理，返回最后结果
|
||||
let val = newPath.reduce((o, k) => {
|
||||
return (o || {})[k]
|
||||
}, object);
|
||||
return !val || val !== undefined ? val : defaultVal
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 是否为 number 类型
|
||||
* @param {any} num 需要判断的值
|
||||
* @return {Boolean} 是否为 number
|
||||
*/
|
||||
export const isNumber = (num) => {
|
||||
return !isNaN(Number(num))
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否为 boolean 类型
|
||||
* @param {any} bool 需要判断的值
|
||||
* @return {Boolean} 是否为 boolean
|
||||
*/
|
||||
export const isBoolean = (bool) => {
|
||||
return (typeof bool === 'boolean')
|
||||
}
|
||||
/**
|
||||
* 是否有必填字段
|
||||
* @param {Object} rules 规则
|
||||
* @return {Boolean} 是否有必填字段
|
||||
*/
|
||||
export const isRequiredField = (rules) => {
|
||||
let isNoField = false;
|
||||
for (let i = 0; i < rules.length; i++) {
|
||||
const ruleData = rules[i];
|
||||
if (ruleData.required) {
|
||||
isNoField = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return isNoField;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取数据类型
|
||||
* @param {Any} obj 需要获取数据类型的值
|
||||
*/
|
||||
export const type = (obj) => {
|
||||
var class2type = {};
|
||||
|
||||
// 生成class2type映射
|
||||
"Boolean Number String Function Array Date RegExp Object Error".split(" ").map(function(item, index) {
|
||||
class2type["[object " + item + "]"] = item.toLowerCase();
|
||||
})
|
||||
if (obj == null) {
|
||||
return obj + "";
|
||||
}
|
||||
return typeof obj === "object" || typeof obj === "function" ?
|
||||
class2type[Object.prototype.toString.call(obj)] || "object" :
|
||||
typeof obj;
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断两个值是否相等
|
||||
* @param {any} a 值
|
||||
* @param {any} b 值
|
||||
* @return {Boolean} 是否相等
|
||||
*/
|
||||
export const isEqual = (a, b) => {
|
||||
//如果a和b本来就全等
|
||||
if (a === b) {
|
||||
//判断是否为0和-0
|
||||
return a !== 0 || 1 / a === 1 / b;
|
||||
}
|
||||
//判断是否为null和undefined
|
||||
if (a == null || b == null) {
|
||||
return a === b;
|
||||
}
|
||||
//接下来判断a和b的数据类型
|
||||
var classNameA = toString.call(a),
|
||||
classNameB = toString.call(b);
|
||||
//如果数据类型不相等，则返回false
|
||||
if (classNameA !== classNameB) {
|
||||
return false;
|
||||
}
|
||||
//如果数据类型相等，再根据不同数据类型分别判断
|
||||
switch (classNameA) {
|
||||
case '[object RegExp]':
|
||||
case '[object String]':
|
||||
//进行字符串转换比较
|
||||
return '' + a === '' + b;
|
||||
case '[object Number]':
|
||||
//进行数字转换比较,判断是否为NaN
|
||||
if (+a !== +a) {
|
||||
return +b !== +b;
|
||||
}
|
||||
//判断是否为0或-0
|
||||
return +a === 0 ? 1 / +a === 1 / b : +a === +b;
|
||||
case '[object Date]':
|
||||
case '[object Boolean]':
|
||||
return +a === +b;
|
||||
}
|
||||
//如果是对象类型
|
||||
if (classNameA == '[object Object]') {
|
||||
//获取a和b的属性长度
|
||||
var propsA = Object.getOwnPropertyNames(a),
|
||||
propsB = Object.getOwnPropertyNames(b);
|
||||
if (propsA.length != propsB.length) {
|
||||
return false;
|
||||
}
|
||||
for (var i = 0; i < propsA.length; i++) {
|
||||
var propName = propsA[i];
|
||||
//如果对应属性对应值不相等，则返回false
|
||||
if (a[propName] !== b[propName]) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
//如果是数组类型
|
||||
if (classNameA == '[object Array]') {
|
||||
if (a.toString() == b.toString()) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
486
uni_modules/uni-forms/components/uni-forms/validate.js
Normal file
486
uni_modules/uni-forms/components/uni-forms/validate.js
Normal file
@@ -0,0 +1,486 @@
|
||||
var pattern = {
|
||||
email: /^\S+?@\S+?\.\S+?$/,
|
||||
idcard: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
|
||||
url: new RegExp(
|
||||
"^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$",
|
||||
'i')
|
||||
};
|
||||
|
||||
const FORMAT_MAPPING = {
|
||||
"int": 'integer',
|
||||
"bool": 'boolean',
|
||||
"double": 'number',
|
||||
"long": 'number',
|
||||
"password": 'string'
|
||||
// "fileurls": 'array'
|
||||
}
|
||||
|
||||
function formatMessage(args, resources = '') {
|
||||
var defaultMessage = ['label']
|
||||
defaultMessage.forEach((item) => {
|
||||
if (args[item] === undefined) {
|
||||
args[item] = ''
|
||||
}
|
||||
})
|
||||
|
||||
let str = resources
|
||||
for (let key in args) {
|
||||
let reg = new RegExp('{' + key + '}')
|
||||
str = str.replace(reg, args[key])
|
||||
}
|
||||
return str
|
||||
}
|
||||
|
||||
function isEmptyValue(value, type) {
|
||||
if (value === undefined || value === null) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (typeof value === 'string' && !value) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (Array.isArray(value) && !value.length) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (type === 'object' && !Object.keys(value).length) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
const types = {
|
||||
integer(value) {
|
||||
return types.number(value) && parseInt(value, 10) === value;
|
||||
},
|
||||
string(value) {
|
||||
return typeof value === 'string';
|
||||
},
|
||||
number(value) {
|
||||
if (isNaN(value)) {
|
||||
return false;
|
||||
}
|
||||
return typeof value === 'number';
|
||||
},
|
||||
"boolean": function(value) {
|
||||
return typeof value === 'boolean';
|
||||
},
|
||||
"float": function(value) {
|
||||
return types.number(value) && !types.integer(value);
|
||||
},
|
||||
array(value) {
|
||||
return Array.isArray(value);
|
||||
},
|
||||
object(value) {
|
||||
return typeof value === 'object' && !types.array(value);
|
||||
},
|
||||
date(value) {
|
||||
return value instanceof Date;
|
||||
},
|
||||
timestamp(value) {
|
||||
if (!this.integer(value) || Math.abs(value).toString().length > 16) {
|
||||
return false
|
||||
}
|
||||
return true;
|
||||
},
|
||||
file(value) {
|
||||
return typeof value.url === 'string';
|
||||
},
|
||||
email(value) {
|
||||
return typeof value === 'string' && !!value.match(pattern.email) && value.length < 255;
|
||||
},
|
||||
url(value) {
|
||||
return typeof value === 'string' && !!value.match(pattern.url);
|
||||
},
|
||||
pattern(reg, value) {
|
||||
try {
|
||||
return new RegExp(reg).test(value);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
method(value) {
|
||||
return typeof value === 'function';
|
||||
},
|
||||
idcard(value) {
|
||||
return typeof value === 'string' && !!value.match(pattern.idcard);
|
||||
},
|
||||
'url-https'(value) {
|
||||
return this.url(value) && value.startsWith('https://');
|
||||
},
|
||||
'url-scheme'(value) {
|
||||
return value.startsWith('://');
|
||||
},
|
||||
'url-web'(value) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
class RuleValidator {
|
||||
|
||||
constructor(message) {
|
||||
this._message = message
|
||||
}
|
||||
|
||||
async validateRule(fieldKey, fieldValue, value, data, allData) {
|
||||
var result = null
|
||||
|
||||
let rules = fieldValue.rules
|
||||
|
||||
let hasRequired = rules.findIndex((item) => {
|
||||
return item.required
|
||||
})
|
||||
if (hasRequired < 0) {
|
||||
if (value === null || value === undefined) {
|
||||
return result
|
||||
}
|
||||
if (typeof value === 'string' && !value.length) {
|
||||
return result
|
||||
}
|
||||
}
|
||||
|
||||
var message = this._message
|
||||
|
||||
if (rules === undefined) {
|
||||
return message['default']
|
||||
}
|
||||
|
||||
for (var i = 0; i < rules.length; i++) {
|
||||
let rule = rules[i]
|
||||
let vt = this._getValidateType(rule)
|
||||
|
||||
Object.assign(rule, {
|
||||
label: fieldValue.label || `["${fieldKey}"]`
|
||||
})
|
||||
|
||||
if (RuleValidatorHelper[vt]) {
|
||||
result = RuleValidatorHelper[vt](rule, value, message)
|
||||
if (result != null) {
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (rule.validateExpr) {
|
||||
let now = Date.now()
|
||||
let resultExpr = rule.validateExpr(value, allData, now)
|
||||
if (resultExpr === false) {
|
||||
result = this._getMessage(rule, rule.errorMessage || this._message['default'])
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (rule.validateFunction) {
|
||||
result = await this.validateFunction(rule, value, data, allData, vt)
|
||||
if (result !== null) {
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (result !== null) {
|
||||
result = message.TAG + result
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
async validateFunction(rule, value, data, allData, vt) {
|
||||
let result = null
|
||||
try {
|
||||
let callbackMessage = null
|
||||
const res = await rule.validateFunction(rule, value, allData || data, (message) => {
|
||||
callbackMessage = message
|
||||
})
|
||||
if (callbackMessage || (typeof res === 'string' && res) || res === false) {
|
||||
result = this._getMessage(rule, callbackMessage || res, vt)
|
||||
}
|
||||
} catch (e) {
|
||||
result = this._getMessage(rule, e.message, vt)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
_getMessage(rule, message, vt) {
|
||||
return formatMessage(rule, message || rule.errorMessage || this._message[vt] || message['default'])
|
||||
}
|
||||
|
||||
_getValidateType(rule) {
|
||||
var result = ''
|
||||
if (rule.required) {
|
||||
result = 'required'
|
||||
} else if (rule.format) {
|
||||
result = 'format'
|
||||
} else if (rule.arrayType) {
|
||||
result = 'arrayTypeFormat'
|
||||
} else if (rule.range) {
|
||||
result = 'range'
|
||||
} else if (rule.maximum !== undefined || rule.minimum !== undefined) {
|
||||
result = 'rangeNumber'
|
||||
} else if (rule.maxLength !== undefined || rule.minLength !== undefined) {
|
||||
result = 'rangeLength'
|
||||
} else if (rule.pattern) {
|
||||
result = 'pattern'
|
||||
} else if (rule.validateFunction) {
|
||||
result = 'validateFunction'
|
||||
}
|
||||
return result
|
||||
}
|
||||
}
|
||||
|
||||
const RuleValidatorHelper = {
|
||||
required(rule, value, message) {
|
||||
if (rule.required && isEmptyValue(value, rule.format || typeof value)) {
|
||||
return formatMessage(rule, rule.errorMessage || message.required);
|
||||
}
|
||||
|
||||
return null
|
||||
},
|
||||
|
||||
range(rule, value, message) {
|
||||
const {
|
||||
range,
|
||||
errorMessage
|
||||
} = rule;
|
||||
|
||||
let list = new Array(range.length);
|
||||
for (let i = 0; i < range.length; i++) {
|
||||
const item = range[i];
|
||||
if (types.object(item) && item.value !== undefined) {
|
||||
list[i] = item.value;
|
||||
} else {
|
||||
list[i] = item;
|
||||
}
|
||||
}
|
||||
|
||||
let result = false
|
||||
if (Array.isArray(value)) {
|
||||
result = (new Set(value.concat(list)).size === list.length);
|
||||
} else {
|
||||
if (list.indexOf(value) > -1) {
|
||||
result = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!result) {
|
||||
return formatMessage(rule, errorMessage || message['enum']);
|
||||
}
|
||||
|
||||
return null
|
||||
},
|
||||
|
||||
rangeNumber(rule, value, message) {
|
||||
if (!types.number(value)) {
|
||||
return formatMessage(rule, rule.errorMessage || message.pattern.mismatch);
|
||||
}
|
||||
|
||||
let {
|
||||
minimum,
|
||||
maximum,
|
||||
exclusiveMinimum,
|
||||
exclusiveMaximum
|
||||
} = rule;
|
||||
let min = exclusiveMinimum ? value <= minimum : value < minimum;
|
||||
let max = exclusiveMaximum ? value >= maximum : value > maximum;
|
||||
|
||||
if (minimum !== undefined && min) {
|
||||
return formatMessage(rule, rule.errorMessage || message['number'][exclusiveMinimum ?
|
||||
'exclusiveMinimum' : 'minimum'
|
||||
])
|
||||
} else if (maximum !== undefined && max) {
|
||||
return formatMessage(rule, rule.errorMessage || message['number'][exclusiveMaximum ?
|
||||
'exclusiveMaximum' : 'maximum'
|
||||
])
|
||||
} else if (minimum !== undefined && maximum !== undefined && (min || max)) {
|
||||
return formatMessage(rule, rule.errorMessage || message['number'].range)
|
||||
}
|
||||
|
||||
return null
|
||||
},
|
||||
|
||||
rangeLength(rule, value, message) {
|
||||
if (!types.string(value) && !types.array(value)) {
|
||||
return formatMessage(rule, rule.errorMessage || message.pattern.mismatch);
|
||||
}
|
||||
|
||||
let min = rule.minLength;
|
||||
let max = rule.maxLength;
|
||||
let val = value.length;
|
||||
|
||||
if (min !== undefined && val < min) {
|
||||
return formatMessage(rule, rule.errorMessage || message['length'].minLength)
|
||||
} else if (max !== undefined && val > max) {
|
||||
return formatMessage(rule, rule.errorMessage || message['length'].maxLength)
|
||||
} else if (min !== undefined && max !== undefined && (val < min || val > max)) {
|
||||
return formatMessage(rule, rule.errorMessage || message['length'].range)
|
||||
}
|
||||
|
||||
return null
|
||||
},
|
||||
|
||||
pattern(rule, value, message) {
|
||||
if (!types['pattern'](rule.pattern, value)) {
|
||||
return formatMessage(rule, rule.errorMessage || message.pattern.mismatch);
|
||||
}
|
||||
|
||||
return null
|
||||
},
|
||||
|
||||
format(rule, value, message) {
|
||||
var customTypes = Object.keys(types);
|
||||
var format = FORMAT_MAPPING[rule.format] ? FORMAT_MAPPING[rule.format] : (rule.format || rule.arrayType);
|
||||
|
||||
if (customTypes.indexOf(format) > -1) {
|
||||
if (!types[format](value)) {
|
||||
return formatMessage(rule, rule.errorMessage || message.typeError);
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
},
|
||||
|
||||
arrayTypeFormat(rule, value, message) {
|
||||
if (!Array.isArray(value)) {
|
||||
return formatMessage(rule, rule.errorMessage || message.typeError);
|
||||
}
|
||||
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
const element = value[i];
|
||||
let formatResult = this.format(rule, element, message)
|
||||
if (formatResult !== null) {
|
||||
return formatResult
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
class SchemaValidator extends RuleValidator {
|
||||
|
||||
constructor(schema, options) {
|
||||
super(SchemaValidator.message);
|
||||
|
||||
this._schema = schema
|
||||
this._options = options || null
|
||||
}
|
||||
|
||||
updateSchema(schema) {
|
||||
this._schema = schema
|
||||
}
|
||||
|
||||
async validate(data, allData) {
|
||||
let result = this._checkFieldInSchema(data)
|
||||
if (!result) {
|
||||
result = await this.invokeValidate(data, false, allData)
|
||||
}
|
||||
return result.length ? result[0] : null
|
||||
}
|
||||
|
||||
async validateAll(data, allData) {
|
||||
let result = this._checkFieldInSchema(data)
|
||||
if (!result) {
|
||||
result = await this.invokeValidate(data, true, allData)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
async validateUpdate(data, allData) {
|
||||
let result = this._checkFieldInSchema(data)
|
||||
if (!result) {
|
||||
result = await this.invokeValidateUpdate(data, false, allData)
|
||||
}
|
||||
return result.length ? result[0] : null
|
||||
}
|
||||
|
||||
async invokeValidate(data, all, allData) {
|
||||
let result = []
|
||||
let schema = this._schema
|
||||
for (let key in schema) {
|
||||
let value = schema[key]
|
||||
let errorMessage = await this.validateRule(key, value, data[key], data, allData)
|
||||
if (errorMessage != null) {
|
||||
result.push({
|
||||
key,
|
||||
errorMessage
|
||||
})
|
||||
if (!all) break
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
async invokeValidateUpdate(data, all, allData) {
|
||||
let result = []
|
||||
for (let key in data) {
|
||||
let errorMessage = await this.validateRule(key, this._schema[key], data[key], data, allData)
|
||||
if (errorMessage != null) {
|
||||
result.push({
|
||||
key,
|
||||
errorMessage
|
||||
})
|
||||
if (!all) break
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
_checkFieldInSchema(data) {
|
||||
var keys = Object.keys(data)
|
||||
var keys2 = Object.keys(this._schema)
|
||||
if (new Set(keys.concat(keys2)).size === keys2.length) {
|
||||
return ''
|
||||
}
|
||||
|
||||
var noExistFields = keys.filter((key) => {
|
||||
return keys2.indexOf(key) < 0;
|
||||
})
|
||||
var errorMessage = formatMessage({
|
||||
field: JSON.stringify(noExistFields)
|
||||
}, SchemaValidator.message.TAG + SchemaValidator.message['defaultInvalid'])
|
||||
return [{
|
||||
key: 'invalid',
|
||||
errorMessage
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
function Message() {
|
||||
return {
|
||||
TAG: "",
|
||||
default: '验证错误',
|
||||
defaultInvalid: '提交的字段{field}在数据库中并不存在',
|
||||
validateFunction: '验证无效',
|
||||
required: '{label}必填',
|
||||
'enum': '{label}超出范围',
|
||||
timestamp: '{label}格式无效',
|
||||
whitespace: '{label}不能为空',
|
||||
typeError: '{label}类型无效',
|
||||
date: {
|
||||
format: '{label}日期{value}格式无效',
|
||||
parse: '{label}日期无法解析,{value}无效',
|
||||
invalid: '{label}日期{value}无效'
|
||||
},
|
||||
length: {
|
||||
minLength: '{label}长度不能少于{minLength}',
|
||||
maxLength: '{label}长度不能超过{maxLength}',
|
||||
range: '{label}必须介于{minLength}和{maxLength}之间'
|
||||
},
|
||||
number: {
|
||||
minimum: '{label}不能小于{minimum}',
|
||||
maximum: '{label}不能大于{maximum}',
|
||||
exclusiveMinimum: '{label}不能小于等于{minimum}',
|
||||
exclusiveMaximum: '{label}不能大于等于{maximum}',
|
||||
range: '{label}必须介于{minimum}and{maximum}之间'
|
||||
},
|
||||
pattern: {
|
||||
mismatch: '{label}格式不匹配'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
SchemaValidator.message = new Message();
|
||||
|
||||
export default SchemaValidator
|
||||
89
uni_modules/uni-forms/package.json
Normal file
89
uni_modules/uni-forms/package.json
Normal file
@@ -0,0 +1,89 @@
|
||||
{
|
||||
"id": "uni-forms",
|
||||
"displayName": "uni-forms 表单",
|
||||
"version": "1.4.13",
|
||||
"description": "由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"表单",
|
||||
"校验",
|
||||
"表单校验",
|
||||
"表单验证"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-scss",
|
||||
"uni-icons"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
23
uni_modules/uni-forms/readme.md
Normal file
23
uni_modules/uni-forms/readme.md
Normal file
@@ -0,0 +1,23 @@
|
||||
|
||||
|
||||
## Forms 表单
|
||||
|
||||
> **组件名：uni-forms**
|
||||
> 代码块： `uForms`、`uni-forms-item`
|
||||
> 关联组件：`uni-forms-item`、`uni-easyinput`、`uni-data-checkbox`、`uni-group`。
|
||||
|
||||
|
||||
uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
|
||||
|
||||
然而几乎每个表单都需要做表单验证，为了方便做表单验证，减少重复开发，`uni ui` 又基于 `<form>`组件封装了 `<uni-forms>`组件，内置了表单验证功能。
|
||||
|
||||
`<uni-forms>` 提供了 `rules`属性来描述校验规则、`<uni-forms-item>`子组件来包裹具体的表单项，以及给原生或三方组件提供了 `binddata()` 来设置表单值。
|
||||
|
||||
每个要校验的表单项，不管input还是checkbox，都必须放在`<uni-forms-item>`组件中，且一个`<uni-forms-item>`组件只能放置一个表单项。
|
||||
|
||||
`<uni-forms-item>`组件内部预留了显示error message的区域，默认是在表单项的底部。
|
||||
|
||||
另外，`<uni-forms>`组件下面的各个表单项，可以通过`<uni-group>`包裹为不同的分组。同一`<uni-group>`下的不同表单项目将聚拢在一起，同其他group保持垂直间距。`<uni-group>`仅影响视觉效果。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-forms)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
@@ -1,3 +1,23 @@
|
||||
## 2.0.10（2024-06-07）
|
||||
- 优化 uni-app x 中，size 属性的类型
|
||||
## 2.0.9（2024-01-12）
|
||||
fix: 修复图标大小默认值错误的问题
|
||||
## 2.0.8（2023-12-14）
|
||||
- 修复 项目未使用 ts 情况下，打包报错的bug
|
||||
## 2.0.7（2023-12-14）
|
||||
- 修复 size 属性为 string 时，不加单位导致尺寸异常的bug
|
||||
## 2.0.6（2023-12-11）
|
||||
- 优化 兼容老版本icon类型，如 top ，bottom 等
|
||||
## 2.0.5（2023-12-11）
|
||||
- 优化 兼容老版本icon类型，如 top ，bottom 等
|
||||
## 2.0.4（2023-12-06）
|
||||
- 优化 uni-app x 下示例项目图标排序
|
||||
## 2.0.3（2023-12-06）
|
||||
- 修复 nvue下引入组件报错的bug
|
||||
## 2.0.2（2023-12-05）
|
||||
-优化 size 属性支持单位
|
||||
## 2.0.1（2023-12-05）
|
||||
- 新增 uni-app x 支持定义图标
|
||||
## 1.3.5（2022-01-24）
|
||||
- 优化 size 属性可以传入不带单位的字符串数值
|
||||
## 1.3.4（2022-01-24）
|
||||
|
||||
91
uni_modules/uni-icons/components/uni-icons/uni-icons.uvue
Normal file
91
uni_modules/uni-icons/components/uni-icons/uni-icons.uvue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<text class="uni-icons" :style="styleObj">
|
||||
<slot>{{unicode}}</slot>
|
||||
</text>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fontData, IconsDataItem } from './uniicons_file'
|
||||
|
||||
/**
|
||||
* Icons 图标
|
||||
* @description 用于展示 icon 图标
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
|
||||
* @property {Number,String} size 图标大小
|
||||
* @property {String} type 图标图案，参考示例
|
||||
* @property {String} color 图标颜色
|
||||
* @property {String} customPrefix 自定义图标
|
||||
* @event {Function} click 点击 Icon 触发事件
|
||||
*/
|
||||
export default {
|
||||
name: "uni-icons",
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 16
|
||||
},
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
unicode() : string {
|
||||
let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type })
|
||||
if (codes !== null) {
|
||||
return codes.unicode
|
||||
}
|
||||
return ''
|
||||
},
|
||||
iconSize() : string {
|
||||
const size = this.size
|
||||
if (typeof size == 'string') {
|
||||
const reg = /^[0-9]*$/g
|
||||
return reg.test(size as string) ? '' + size + 'px' : '' + size;
|
||||
// return '' + this.size
|
||||
}
|
||||
return this.getFontSize(size as number)
|
||||
},
|
||||
styleObj() : UTSJSONObject {
|
||||
if (this.fontFamily !== '') {
|
||||
return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily }
|
||||
}
|
||||
return { color: this.color, fontSize: this.iconSize }
|
||||
}
|
||||
},
|
||||
created() { },
|
||||
methods: {
|
||||
/**
|
||||
* 字体大小
|
||||
*/
|
||||
getFontSize(size : number) : string {
|
||||
return size + 'px';
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@font-face {
|
||||
font-family: UniIconsFontFamily;
|
||||
src: url('./uniicons.ttf');
|
||||
}
|
||||
|
||||
.uni-icons {
|
||||
font-family: UniIconsFontFamily;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
@@ -1,24 +1,28 @@
|
||||
<template>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
|
||||
<text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
|
||||
<text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick">
|
||||
<slot></slot>
|
||||
</text>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from './icons.js';
|
||||
import { fontData } from './uniicons_file_vue.js';
|
||||
|
||||
const getVal = (val) => {
|
||||
const reg = /^[0-9]*$/g
|
||||
return (typeof val === 'number' || reg.test(val) )? val + 'px' : val;
|
||||
}
|
||||
return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val;
|
||||
}
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
var domModule = weex.requireModule('dom');
|
||||
import iconUrl from './uniicons.ttf'
|
||||
domModule.addRule('fontFace', {
|
||||
'fontFamily': "uniicons",
|
||||
'src': "url('"+iconUrl+"')"
|
||||
'src': "url('" + iconUrl + "')"
|
||||
});
|
||||
// #endif
|
||||
|
||||
@@ -34,7 +38,7 @@
|
||||
*/
|
||||
export default {
|
||||
name: 'UniIcons',
|
||||
emits:['click'],
|
||||
emits: ['click'],
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
@@ -48,26 +52,36 @@
|
||||
type: [Number, String],
|
||||
default: 16
|
||||
},
|
||||
customPrefix:{
|
||||
customPrefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: icons.glyphs
|
||||
icons: fontData
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
unicode(){
|
||||
let code = this.icons.find(v=>v.font_class === this.type)
|
||||
if(code){
|
||||
return unescape(`%u${code.unicode}`)
|
||||
computed: {
|
||||
unicode() {
|
||||
let code = this.icons.find(v => v.font_class === this.type)
|
||||
if (code) {
|
||||
return code.unicode
|
||||
}
|
||||
return ''
|
||||
},
|
||||
iconSize(){
|
||||
iconSize() {
|
||||
return getVal(this.size)
|
||||
},
|
||||
styleObj() {
|
||||
if (this.fontFamily !== '') {
|
||||
return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};`
|
||||
}
|
||||
return `color: ${this.color}; font-size: ${this.iconSize};`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -81,9 +95,10 @@
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
@import './uniicons.css';
|
||||
|
||||
@font-face {
|
||||
font-family: uniicons;
|
||||
src: url('./uniicons.ttf') format('truetype');
|
||||
src: url('./uniicons.ttf');
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
@@ -92,5 +107,4 @@
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,12 @@
|
||||
|
||||
.uniui-cart-filled:before {
|
||||
content: "\e6d0";
|
||||
}
|
||||
|
||||
.uniui-gift-filled:before {
|
||||
content: "\e6c4";
|
||||
}
|
||||
|
||||
.uniui-color:before {
|
||||
content: "\e6cf";
|
||||
}
|
||||
@@ -58,10 +67,6 @@
|
||||
content: "\e6c3";
|
||||
}
|
||||
|
||||
.uniui-gift-filled:before {
|
||||
content: "\e6c4";
|
||||
}
|
||||
|
||||
.uniui-fire-filled:before {
|
||||
content: "\e6c5";
|
||||
}
|
||||
@@ -82,6 +87,18 @@
|
||||
content: "\e698";
|
||||
}
|
||||
|
||||
.uniui-arrowthinleft:before {
|
||||
content: "\e6d2";
|
||||
}
|
||||
|
||||
.uniui-arrowthinup:before {
|
||||
content: "\e6d3";
|
||||
}
|
||||
|
||||
.uniui-arrowthindown:before {
|
||||
content: "\e6d4";
|
||||
}
|
||||
|
||||
.uniui-back:before {
|
||||
content: "\e6b9";
|
||||
}
|
||||
@@ -94,55 +111,43 @@
|
||||
content: "\e6bb";
|
||||
}
|
||||
|
||||
.uniui-arrowthinright:before {
|
||||
content: "\e6bb";
|
||||
}
|
||||
|
||||
.uniui-arrow-left:before {
|
||||
content: "\e6bc";
|
||||
}
|
||||
|
||||
.uniui-arrowthinleft:before {
|
||||
content: "\e6bc";
|
||||
}
|
||||
|
||||
.uniui-arrow-up:before {
|
||||
content: "\e6bd";
|
||||
}
|
||||
|
||||
.uniui-arrowthinup:before {
|
||||
content: "\e6bd";
|
||||
}
|
||||
|
||||
.uniui-arrow-down:before {
|
||||
content: "\e6be";
|
||||
}
|
||||
|
||||
.uniui-arrowthindown:before {
|
||||
content: "\e6be";
|
||||
.uniui-arrowthinright:before {
|
||||
content: "\e6d1";
|
||||
}
|
||||
|
||||
.uniui-down:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
|
||||
.uniui-bottom:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
|
||||
.uniui-arrowdown:before {
|
||||
content: "\e6b8";
|
||||
.uniui-arrowright:before {
|
||||
content: "\e6d5";
|
||||
}
|
||||
|
||||
.uniui-right:before {
|
||||
content: "\e6b5";
|
||||
}
|
||||
|
||||
.uniui-arrowright:before {
|
||||
content: "\e6b5";
|
||||
}
|
||||
|
||||
.uniui-top:before {
|
||||
.uniui-up:before {
|
||||
content: "\e6b6";
|
||||
}
|
||||
|
||||
.uniui-arrowup:before {
|
||||
.uniui-top:before {
|
||||
content: "\e6b6";
|
||||
}
|
||||
|
||||
@@ -150,8 +155,8 @@
|
||||
content: "\e6b7";
|
||||
}
|
||||
|
||||
.uniui-arrowleft:before {
|
||||
content: "\e6b7";
|
||||
.uniui-arrowup:before {
|
||||
content: "\e6d6";
|
||||
}
|
||||
|
||||
.uniui-eye:before {
|
||||
@@ -638,10 +643,6 @@
|
||||
content: "\e627";
|
||||
}
|
||||
|
||||
.uniui-cart-filled:before {
|
||||
content: "\e629";
|
||||
}
|
||||
|
||||
.uniui-checkbox:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
||||
Binary file not shown.
664
uni_modules/uni-icons/components/uni-icons/uniicons_file.ts
Normal file
664
uni_modules/uni-icons/components/uni-icons/uniicons_file.ts
Normal file
@@ -0,0 +1,664 @@
|
||||
|
||||
export type IconsData = {
|
||||
id : string
|
||||
name : string
|
||||
font_family : string
|
||||
css_prefix_text : string
|
||||
description : string
|
||||
glyphs : Array<IconsDataItem>
|
||||
}
|
||||
|
||||
export type IconsDataItem = {
|
||||
font_class : string
|
||||
unicode : string
|
||||
}
|
||||
|
||||
|
||||
export const fontData = [
|
||||
{
|
||||
"font_class": "arrow-down",
|
||||
"unicode": "\ue6be"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-left",
|
||||
"unicode": "\ue6bc"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-right",
|
||||
"unicode": "\ue6bb"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-up",
|
||||
"unicode": "\ue6bd"
|
||||
},
|
||||
{
|
||||
"font_class": "auth",
|
||||
"unicode": "\ue6ab"
|
||||
},
|
||||
{
|
||||
"font_class": "auth-filled",
|
||||
"unicode": "\ue6cc"
|
||||
},
|
||||
{
|
||||
"font_class": "back",
|
||||
"unicode": "\ue6b9"
|
||||
},
|
||||
{
|
||||
"font_class": "bars",
|
||||
"unicode": "\ue627"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar",
|
||||
"unicode": "\ue6a0"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar-filled",
|
||||
"unicode": "\ue6c0"
|
||||
},
|
||||
{
|
||||
"font_class": "camera",
|
||||
"unicode": "\ue65a"
|
||||
},
|
||||
{
|
||||
"font_class": "camera-filled",
|
||||
"unicode": "\ue658"
|
||||
},
|
||||
{
|
||||
"font_class": "cart",
|
||||
"unicode": "\ue631"
|
||||
},
|
||||
{
|
||||
"font_class": "cart-filled",
|
||||
"unicode": "\ue6d0"
|
||||
},
|
||||
{
|
||||
"font_class": "chat",
|
||||
"unicode": "\ue65d"
|
||||
},
|
||||
{
|
||||
"font_class": "chat-filled",
|
||||
"unicode": "\ue659"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes",
|
||||
"unicode": "\ue696"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes-filled",
|
||||
"unicode": "\ue692"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble",
|
||||
"unicode": "\ue697"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble-filled",
|
||||
"unicode": "\ue694"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox",
|
||||
"unicode": "\ue62b"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox-filled",
|
||||
"unicode": "\ue62c"
|
||||
},
|
||||
{
|
||||
"font_class": "checkmarkempty",
|
||||
"unicode": "\ue65c"
|
||||
},
|
||||
{
|
||||
"font_class": "circle",
|
||||
"unicode": "\ue65b"
|
||||
},
|
||||
{
|
||||
"font_class": "circle-filled",
|
||||
"unicode": "\ue65e"
|
||||
},
|
||||
{
|
||||
"font_class": "clear",
|
||||
"unicode": "\ue66d"
|
||||
},
|
||||
{
|
||||
"font_class": "close",
|
||||
"unicode": "\ue673"
|
||||
},
|
||||
{
|
||||
"font_class": "closeempty",
|
||||
"unicode": "\ue66c"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download",
|
||||
"unicode": "\ue647"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download-filled",
|
||||
"unicode": "\ue646"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload",
|
||||
"unicode": "\ue645"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload-filled",
|
||||
"unicode": "\ue648"
|
||||
},
|
||||
{
|
||||
"font_class": "color",
|
||||
"unicode": "\ue6cf"
|
||||
},
|
||||
{
|
||||
"font_class": "color-filled",
|
||||
"unicode": "\ue6c9"
|
||||
},
|
||||
{
|
||||
"font_class": "compose",
|
||||
"unicode": "\ue67f"
|
||||
},
|
||||
{
|
||||
"font_class": "contact",
|
||||
"unicode": "\ue693"
|
||||
},
|
||||
{
|
||||
"font_class": "contact-filled",
|
||||
"unicode": "\ue695"
|
||||
},
|
||||
{
|
||||
"font_class": "down",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "bottom",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "download",
|
||||
"unicode": "\ue68d"
|
||||
},
|
||||
{
|
||||
"font_class": "download-filled",
|
||||
"unicode": "\ue681"
|
||||
},
|
||||
{
|
||||
"font_class": "email",
|
||||
"unicode": "\ue69e"
|
||||
},
|
||||
{
|
||||
"font_class": "email-filled",
|
||||
"unicode": "\ue69a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye",
|
||||
"unicode": "\ue651"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-filled",
|
||||
"unicode": "\ue66a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash",
|
||||
"unicode": "\ue6b3"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash-filled",
|
||||
"unicode": "\ue6b4"
|
||||
},
|
||||
{
|
||||
"font_class": "fire",
|
||||
"unicode": "\ue6a1"
|
||||
},
|
||||
{
|
||||
"font_class": "fire-filled",
|
||||
"unicode": "\ue6c5"
|
||||
},
|
||||
{
|
||||
"font_class": "flag",
|
||||
"unicode": "\ue65f"
|
||||
},
|
||||
{
|
||||
"font_class": "flag-filled",
|
||||
"unicode": "\ue660"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add",
|
||||
"unicode": "\ue6a9"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add-filled",
|
||||
"unicode": "\ue6c8"
|
||||
},
|
||||
{
|
||||
"font_class": "font",
|
||||
"unicode": "\ue6a3"
|
||||
},
|
||||
{
|
||||
"font_class": "forward",
|
||||
"unicode": "\ue6ba"
|
||||
},
|
||||
{
|
||||
"font_class": "gear",
|
||||
"unicode": "\ue664"
|
||||
},
|
||||
{
|
||||
"font_class": "gear-filled",
|
||||
"unicode": "\ue661"
|
||||
},
|
||||
{
|
||||
"font_class": "gift",
|
||||
"unicode": "\ue6a4"
|
||||
},
|
||||
{
|
||||
"font_class": "gift-filled",
|
||||
"unicode": "\ue6c4"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down",
|
||||
"unicode": "\ue63d"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down-filled",
|
||||
"unicode": "\ue63c"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up",
|
||||
"unicode": "\ue63f"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up-filled",
|
||||
"unicode": "\ue63e"
|
||||
},
|
||||
{
|
||||
"font_class": "headphones",
|
||||
"unicode": "\ue630"
|
||||
},
|
||||
{
|
||||
"font_class": "heart",
|
||||
"unicode": "\ue639"
|
||||
},
|
||||
{
|
||||
"font_class": "heart-filled",
|
||||
"unicode": "\ue641"
|
||||
},
|
||||
{
|
||||
"font_class": "help",
|
||||
"unicode": "\ue679"
|
||||
},
|
||||
{
|
||||
"font_class": "help-filled",
|
||||
"unicode": "\ue674"
|
||||
},
|
||||
{
|
||||
"font_class": "home",
|
||||
"unicode": "\ue662"
|
||||
},
|
||||
{
|
||||
"font_class": "home-filled",
|
||||
"unicode": "\ue663"
|
||||
},
|
||||
{
|
||||
"font_class": "image",
|
||||
"unicode": "\ue670"
|
||||
},
|
||||
{
|
||||
"font_class": "image-filled",
|
||||
"unicode": "\ue678"
|
||||
},
|
||||
{
|
||||
"font_class": "images",
|
||||
"unicode": "\ue650"
|
||||
},
|
||||
{
|
||||
"font_class": "images-filled",
|
||||
"unicode": "\ue64b"
|
||||
},
|
||||
{
|
||||
"font_class": "info",
|
||||
"unicode": "\ue669"
|
||||
},
|
||||
{
|
||||
"font_class": "info-filled",
|
||||
"unicode": "\ue649"
|
||||
},
|
||||
{
|
||||
"font_class": "left",
|
||||
"unicode": "\ue6b7"
|
||||
},
|
||||
{
|
||||
"font_class": "link",
|
||||
"unicode": "\ue6a5"
|
||||
},
|
||||
{
|
||||
"font_class": "list",
|
||||
"unicode": "\ue644"
|
||||
},
|
||||
{
|
||||
"font_class": "location",
|
||||
"unicode": "\ue6ae"
|
||||
},
|
||||
{
|
||||
"font_class": "location-filled",
|
||||
"unicode": "\ue6af"
|
||||
},
|
||||
{
|
||||
"font_class": "locked",
|
||||
"unicode": "\ue66b"
|
||||
},
|
||||
{
|
||||
"font_class": "locked-filled",
|
||||
"unicode": "\ue668"
|
||||
},
|
||||
{
|
||||
"font_class": "loop",
|
||||
"unicode": "\ue633"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open",
|
||||
"unicode": "\ue643"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open-filled",
|
||||
"unicode": "\ue63a"
|
||||
},
|
||||
{
|
||||
"font_class": "map",
|
||||
"unicode": "\ue667"
|
||||
},
|
||||
{
|
||||
"font_class": "map-filled",
|
||||
"unicode": "\ue666"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin",
|
||||
"unicode": "\ue6ad"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin-ellipse",
|
||||
"unicode": "\ue6ac"
|
||||
},
|
||||
{
|
||||
"font_class": "medal",
|
||||
"unicode": "\ue6a2"
|
||||
},
|
||||
{
|
||||
"font_class": "medal-filled",
|
||||
"unicode": "\ue6c3"
|
||||
},
|
||||
{
|
||||
"font_class": "mic",
|
||||
"unicode": "\ue671"
|
||||
},
|
||||
{
|
||||
"font_class": "mic-filled",
|
||||
"unicode": "\ue677"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff",
|
||||
"unicode": "\ue67e"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff-filled",
|
||||
"unicode": "\ue6b0"
|
||||
},
|
||||
{
|
||||
"font_class": "minus",
|
||||
"unicode": "\ue66f"
|
||||
},
|
||||
{
|
||||
"font_class": "minus-filled",
|
||||
"unicode": "\ue67d"
|
||||
},
|
||||
{
|
||||
"font_class": "more",
|
||||
"unicode": "\ue64d"
|
||||
},
|
||||
{
|
||||
"font_class": "more-filled",
|
||||
"unicode": "\ue64e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate",
|
||||
"unicode": "\ue66e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate-filled",
|
||||
"unicode": "\ue67a"
|
||||
},
|
||||
{
|
||||
"font_class": "notification",
|
||||
"unicode": "\ue6a6"
|
||||
},
|
||||
{
|
||||
"font_class": "notification-filled",
|
||||
"unicode": "\ue6c1"
|
||||
},
|
||||
{
|
||||
"font_class": "paperclip",
|
||||
"unicode": "\ue652"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane",
|
||||
"unicode": "\ue672"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane-filled",
|
||||
"unicode": "\ue675"
|
||||
},
|
||||
{
|
||||
"font_class": "person",
|
||||
"unicode": "\ue699"
|
||||
},
|
||||
{
|
||||
"font_class": "person-filled",
|
||||
"unicode": "\ue69d"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd",
|
||||
"unicode": "\ue69f"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled",
|
||||
"unicode": "\ue698"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled-copy",
|
||||
"unicode": "\ue6d1"
|
||||
},
|
||||
{
|
||||
"font_class": "phone",
|
||||
"unicode": "\ue69c"
|
||||
},
|
||||
{
|
||||
"font_class": "phone-filled",
|
||||
"unicode": "\ue69b"
|
||||
},
|
||||
{
|
||||
"font_class": "plus",
|
||||
"unicode": "\ue676"
|
||||
},
|
||||
{
|
||||
"font_class": "plus-filled",
|
||||
"unicode": "\ue6c7"
|
||||
},
|
||||
{
|
||||
"font_class": "plusempty",
|
||||
"unicode": "\ue67b"
|
||||
},
|
||||
{
|
||||
"font_class": "pulldown",
|
||||
"unicode": "\ue632"
|
||||
},
|
||||
{
|
||||
"font_class": "pyq",
|
||||
"unicode": "\ue682"
|
||||
},
|
||||
{
|
||||
"font_class": "qq",
|
||||
"unicode": "\ue680"
|
||||
},
|
||||
{
|
||||
"font_class": "redo",
|
||||
"unicode": "\ue64a"
|
||||
},
|
||||
{
|
||||
"font_class": "redo-filled",
|
||||
"unicode": "\ue655"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh",
|
||||
"unicode": "\ue657"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh-filled",
|
||||
"unicode": "\ue656"
|
||||
},
|
||||
{
|
||||
"font_class": "refreshempty",
|
||||
"unicode": "\ue6bf"
|
||||
},
|
||||
{
|
||||
"font_class": "reload",
|
||||
"unicode": "\ue6b2"
|
||||
},
|
||||
{
|
||||
"font_class": "right",
|
||||
"unicode": "\ue6b5"
|
||||
},
|
||||
{
|
||||
"font_class": "scan",
|
||||
"unicode": "\ue62a"
|
||||
},
|
||||
{
|
||||
"font_class": "search",
|
||||
"unicode": "\ue654"
|
||||
},
|
||||
{
|
||||
"font_class": "settings",
|
||||
"unicode": "\ue653"
|
||||
},
|
||||
{
|
||||
"font_class": "settings-filled",
|
||||
"unicode": "\ue6ce"
|
||||
},
|
||||
{
|
||||
"font_class": "shop",
|
||||
"unicode": "\ue62f"
|
||||
},
|
||||
{
|
||||
"font_class": "shop-filled",
|
||||
"unicode": "\ue6cd"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle",
|
||||
"unicode": "\ue67c"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle-filled",
|
||||
"unicode": "\ue665"
|
||||
},
|
||||
{
|
||||
"font_class": "sound",
|
||||
"unicode": "\ue684"
|
||||
},
|
||||
{
|
||||
"font_class": "sound-filled",
|
||||
"unicode": "\ue686"
|
||||
},
|
||||
{
|
||||
"font_class": "spinner-cycle",
|
||||
"unicode": "\ue68a"
|
||||
},
|
||||
{
|
||||
"font_class": "staff",
|
||||
"unicode": "\ue6a7"
|
||||
},
|
||||
{
|
||||
"font_class": "staff-filled",
|
||||
"unicode": "\ue6cb"
|
||||
},
|
||||
{
|
||||
"font_class": "star",
|
||||
"unicode": "\ue688"
|
||||
},
|
||||
{
|
||||
"font_class": "star-filled",
|
||||
"unicode": "\ue68f"
|
||||
},
|
||||
{
|
||||
"font_class": "starhalf",
|
||||
"unicode": "\ue683"
|
||||
},
|
||||
{
|
||||
"font_class": "trash",
|
||||
"unicode": "\ue687"
|
||||
},
|
||||
{
|
||||
"font_class": "trash-filled",
|
||||
"unicode": "\ue685"
|
||||
},
|
||||
{
|
||||
"font_class": "tune",
|
||||
"unicode": "\ue6aa"
|
||||
},
|
||||
{
|
||||
"font_class": "tune-filled",
|
||||
"unicode": "\ue6ca"
|
||||
},
|
||||
{
|
||||
"font_class": "undo",
|
||||
"unicode": "\ue64f"
|
||||
},
|
||||
{
|
||||
"font_class": "undo-filled",
|
||||
"unicode": "\ue64c"
|
||||
},
|
||||
{
|
||||
"font_class": "up",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "top",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "upload",
|
||||
"unicode": "\ue690"
|
||||
},
|
||||
{
|
||||
"font_class": "upload-filled",
|
||||
"unicode": "\ue68e"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam",
|
||||
"unicode": "\ue68c"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam-filled",
|
||||
"unicode": "\ue689"
|
||||
},
|
||||
{
|
||||
"font_class": "vip",
|
||||
"unicode": "\ue6a8"
|
||||
},
|
||||
{
|
||||
"font_class": "vip-filled",
|
||||
"unicode": "\ue6c6"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet",
|
||||
"unicode": "\ue6b1"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet-filled",
|
||||
"unicode": "\ue6c2"
|
||||
},
|
||||
{
|
||||
"font_class": "weibo",
|
||||
"unicode": "\ue68b"
|
||||
},
|
||||
{
|
||||
"font_class": "weixin",
|
||||
"unicode": "\ue691"
|
||||
}
|
||||
] as IconsDataItem[]
|
||||
|
||||
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
||||
649
uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js
Normal file
649
uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js
Normal file
@@ -0,0 +1,649 @@
|
||||
|
||||
export const fontData = [
|
||||
{
|
||||
"font_class": "arrow-down",
|
||||
"unicode": "\ue6be"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-left",
|
||||
"unicode": "\ue6bc"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-right",
|
||||
"unicode": "\ue6bb"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-up",
|
||||
"unicode": "\ue6bd"
|
||||
},
|
||||
{
|
||||
"font_class": "auth",
|
||||
"unicode": "\ue6ab"
|
||||
},
|
||||
{
|
||||
"font_class": "auth-filled",
|
||||
"unicode": "\ue6cc"
|
||||
},
|
||||
{
|
||||
"font_class": "back",
|
||||
"unicode": "\ue6b9"
|
||||
},
|
||||
{
|
||||
"font_class": "bars",
|
||||
"unicode": "\ue627"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar",
|
||||
"unicode": "\ue6a0"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar-filled",
|
||||
"unicode": "\ue6c0"
|
||||
},
|
||||
{
|
||||
"font_class": "camera",
|
||||
"unicode": "\ue65a"
|
||||
},
|
||||
{
|
||||
"font_class": "camera-filled",
|
||||
"unicode": "\ue658"
|
||||
},
|
||||
{
|
||||
"font_class": "cart",
|
||||
"unicode": "\ue631"
|
||||
},
|
||||
{
|
||||
"font_class": "cart-filled",
|
||||
"unicode": "\ue6d0"
|
||||
},
|
||||
{
|
||||
"font_class": "chat",
|
||||
"unicode": "\ue65d"
|
||||
},
|
||||
{
|
||||
"font_class": "chat-filled",
|
||||
"unicode": "\ue659"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes",
|
||||
"unicode": "\ue696"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes-filled",
|
||||
"unicode": "\ue692"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble",
|
||||
"unicode": "\ue697"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble-filled",
|
||||
"unicode": "\ue694"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox",
|
||||
"unicode": "\ue62b"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox-filled",
|
||||
"unicode": "\ue62c"
|
||||
},
|
||||
{
|
||||
"font_class": "checkmarkempty",
|
||||
"unicode": "\ue65c"
|
||||
},
|
||||
{
|
||||
"font_class": "circle",
|
||||
"unicode": "\ue65b"
|
||||
},
|
||||
{
|
||||
"font_class": "circle-filled",
|
||||
"unicode": "\ue65e"
|
||||
},
|
||||
{
|
||||
"font_class": "clear",
|
||||
"unicode": "\ue66d"
|
||||
},
|
||||
{
|
||||
"font_class": "close",
|
||||
"unicode": "\ue673"
|
||||
},
|
||||
{
|
||||
"font_class": "closeempty",
|
||||
"unicode": "\ue66c"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download",
|
||||
"unicode": "\ue647"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download-filled",
|
||||
"unicode": "\ue646"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload",
|
||||
"unicode": "\ue645"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload-filled",
|
||||
"unicode": "\ue648"
|
||||
},
|
||||
{
|
||||
"font_class": "color",
|
||||
"unicode": "\ue6cf"
|
||||
},
|
||||
{
|
||||
"font_class": "color-filled",
|
||||
"unicode": "\ue6c9"
|
||||
},
|
||||
{
|
||||
"font_class": "compose",
|
||||
"unicode": "\ue67f"
|
||||
},
|
||||
{
|
||||
"font_class": "contact",
|
||||
"unicode": "\ue693"
|
||||
},
|
||||
{
|
||||
"font_class": "contact-filled",
|
||||
"unicode": "\ue695"
|
||||
},
|
||||
{
|
||||
"font_class": "down",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "bottom",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "download",
|
||||
"unicode": "\ue68d"
|
||||
},
|
||||
{
|
||||
"font_class": "download-filled",
|
||||
"unicode": "\ue681"
|
||||
},
|
||||
{
|
||||
"font_class": "email",
|
||||
"unicode": "\ue69e"
|
||||
},
|
||||
{
|
||||
"font_class": "email-filled",
|
||||
"unicode": "\ue69a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye",
|
||||
"unicode": "\ue651"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-filled",
|
||||
"unicode": "\ue66a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash",
|
||||
"unicode": "\ue6b3"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash-filled",
|
||||
"unicode": "\ue6b4"
|
||||
},
|
||||
{
|
||||
"font_class": "fire",
|
||||
"unicode": "\ue6a1"
|
||||
},
|
||||
{
|
||||
"font_class": "fire-filled",
|
||||
"unicode": "\ue6c5"
|
||||
},
|
||||
{
|
||||
"font_class": "flag",
|
||||
"unicode": "\ue65f"
|
||||
},
|
||||
{
|
||||
"font_class": "flag-filled",
|
||||
"unicode": "\ue660"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add",
|
||||
"unicode": "\ue6a9"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add-filled",
|
||||
"unicode": "\ue6c8"
|
||||
},
|
||||
{
|
||||
"font_class": "font",
|
||||
"unicode": "\ue6a3"
|
||||
},
|
||||
{
|
||||
"font_class": "forward",
|
||||
"unicode": "\ue6ba"
|
||||
},
|
||||
{
|
||||
"font_class": "gear",
|
||||
"unicode": "\ue664"
|
||||
},
|
||||
{
|
||||
"font_class": "gear-filled",
|
||||
"unicode": "\ue661"
|
||||
},
|
||||
{
|
||||
"font_class": "gift",
|
||||
"unicode": "\ue6a4"
|
||||
},
|
||||
{
|
||||
"font_class": "gift-filled",
|
||||
"unicode": "\ue6c4"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down",
|
||||
"unicode": "\ue63d"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down-filled",
|
||||
"unicode": "\ue63c"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up",
|
||||
"unicode": "\ue63f"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up-filled",
|
||||
"unicode": "\ue63e"
|
||||
},
|
||||
{
|
||||
"font_class": "headphones",
|
||||
"unicode": "\ue630"
|
||||
},
|
||||
{
|
||||
"font_class": "heart",
|
||||
"unicode": "\ue639"
|
||||
},
|
||||
{
|
||||
"font_class": "heart-filled",
|
||||
"unicode": "\ue641"
|
||||
},
|
||||
{
|
||||
"font_class": "help",
|
||||
"unicode": "\ue679"
|
||||
},
|
||||
{
|
||||
"font_class": "help-filled",
|
||||
"unicode": "\ue674"
|
||||
},
|
||||
{
|
||||
"font_class": "home",
|
||||
"unicode": "\ue662"
|
||||
},
|
||||
{
|
||||
"font_class": "home-filled",
|
||||
"unicode": "\ue663"
|
||||
},
|
||||
{
|
||||
"font_class": "image",
|
||||
"unicode": "\ue670"
|
||||
},
|
||||
{
|
||||
"font_class": "image-filled",
|
||||
"unicode": "\ue678"
|
||||
},
|
||||
{
|
||||
"font_class": "images",
|
||||
"unicode": "\ue650"
|
||||
},
|
||||
{
|
||||
"font_class": "images-filled",
|
||||
"unicode": "\ue64b"
|
||||
},
|
||||
{
|
||||
"font_class": "info",
|
||||
"unicode": "\ue669"
|
||||
},
|
||||
{
|
||||
"font_class": "info-filled",
|
||||
"unicode": "\ue649"
|
||||
},
|
||||
{
|
||||
"font_class": "left",
|
||||
"unicode": "\ue6b7"
|
||||
},
|
||||
{
|
||||
"font_class": "link",
|
||||
"unicode": "\ue6a5"
|
||||
},
|
||||
{
|
||||
"font_class": "list",
|
||||
"unicode": "\ue644"
|
||||
},
|
||||
{
|
||||
"font_class": "location",
|
||||
"unicode": "\ue6ae"
|
||||
},
|
||||
{
|
||||
"font_class": "location-filled",
|
||||
"unicode": "\ue6af"
|
||||
},
|
||||
{
|
||||
"font_class": "locked",
|
||||
"unicode": "\ue66b"
|
||||
},
|
||||
{
|
||||
"font_class": "locked-filled",
|
||||
"unicode": "\ue668"
|
||||
},
|
||||
{
|
||||
"font_class": "loop",
|
||||
"unicode": "\ue633"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open",
|
||||
"unicode": "\ue643"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open-filled",
|
||||
"unicode": "\ue63a"
|
||||
},
|
||||
{
|
||||
"font_class": "map",
|
||||
"unicode": "\ue667"
|
||||
},
|
||||
{
|
||||
"font_class": "map-filled",
|
||||
"unicode": "\ue666"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin",
|
||||
"unicode": "\ue6ad"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin-ellipse",
|
||||
"unicode": "\ue6ac"
|
||||
},
|
||||
{
|
||||
"font_class": "medal",
|
||||
"unicode": "\ue6a2"
|
||||
},
|
||||
{
|
||||
"font_class": "medal-filled",
|
||||
"unicode": "\ue6c3"
|
||||
},
|
||||
{
|
||||
"font_class": "mic",
|
||||
"unicode": "\ue671"
|
||||
},
|
||||
{
|
||||
"font_class": "mic-filled",
|
||||
"unicode": "\ue677"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff",
|
||||
"unicode": "\ue67e"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff-filled",
|
||||
"unicode": "\ue6b0"
|
||||
},
|
||||
{
|
||||
"font_class": "minus",
|
||||
"unicode": "\ue66f"
|
||||
},
|
||||
{
|
||||
"font_class": "minus-filled",
|
||||
"unicode": "\ue67d"
|
||||
},
|
||||
{
|
||||
"font_class": "more",
|
||||
"unicode": "\ue64d"
|
||||
},
|
||||
{
|
||||
"font_class": "more-filled",
|
||||
"unicode": "\ue64e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate",
|
||||
"unicode": "\ue66e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate-filled",
|
||||
"unicode": "\ue67a"
|
||||
},
|
||||
{
|
||||
"font_class": "notification",
|
||||
"unicode": "\ue6a6"
|
||||
},
|
||||
{
|
||||
"font_class": "notification-filled",
|
||||
"unicode": "\ue6c1"
|
||||
},
|
||||
{
|
||||
"font_class": "paperclip",
|
||||
"unicode": "\ue652"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane",
|
||||
"unicode": "\ue672"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane-filled",
|
||||
"unicode": "\ue675"
|
||||
},
|
||||
{
|
||||
"font_class": "person",
|
||||
"unicode": "\ue699"
|
||||
},
|
||||
{
|
||||
"font_class": "person-filled",
|
||||
"unicode": "\ue69d"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd",
|
||||
"unicode": "\ue69f"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled",
|
||||
"unicode": "\ue698"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled-copy",
|
||||
"unicode": "\ue6d1"
|
||||
},
|
||||
{
|
||||
"font_class": "phone",
|
||||
"unicode": "\ue69c"
|
||||
},
|
||||
{
|
||||
"font_class": "phone-filled",
|
||||
"unicode": "\ue69b"
|
||||
},
|
||||
{
|
||||
"font_class": "plus",
|
||||
"unicode": "\ue676"
|
||||
},
|
||||
{
|
||||
"font_class": "plus-filled",
|
||||
"unicode": "\ue6c7"
|
||||
},
|
||||
{
|
||||
"font_class": "plusempty",
|
||||
"unicode": "\ue67b"
|
||||
},
|
||||
{
|
||||
"font_class": "pulldown",
|
||||
"unicode": "\ue632"
|
||||
},
|
||||
{
|
||||
"font_class": "pyq",
|
||||
"unicode": "\ue682"
|
||||
},
|
||||
{
|
||||
"font_class": "qq",
|
||||
"unicode": "\ue680"
|
||||
},
|
||||
{
|
||||
"font_class": "redo",
|
||||
"unicode": "\ue64a"
|
||||
},
|
||||
{
|
||||
"font_class": "redo-filled",
|
||||
"unicode": "\ue655"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh",
|
||||
"unicode": "\ue657"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh-filled",
|
||||
"unicode": "\ue656"
|
||||
},
|
||||
{
|
||||
"font_class": "refreshempty",
|
||||
"unicode": "\ue6bf"
|
||||
},
|
||||
{
|
||||
"font_class": "reload",
|
||||
"unicode": "\ue6b2"
|
||||
},
|
||||
{
|
||||
"font_class": "right",
|
||||
"unicode": "\ue6b5"
|
||||
},
|
||||
{
|
||||
"font_class": "scan",
|
||||
"unicode": "\ue62a"
|
||||
},
|
||||
{
|
||||
"font_class": "search",
|
||||
"unicode": "\ue654"
|
||||
},
|
||||
{
|
||||
"font_class": "settings",
|
||||
"unicode": "\ue653"
|
||||
},
|
||||
{
|
||||
"font_class": "settings-filled",
|
||||
"unicode": "\ue6ce"
|
||||
},
|
||||
{
|
||||
"font_class": "shop",
|
||||
"unicode": "\ue62f"
|
||||
},
|
||||
{
|
||||
"font_class": "shop-filled",
|
||||
"unicode": "\ue6cd"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle",
|
||||
"unicode": "\ue67c"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle-filled",
|
||||
"unicode": "\ue665"
|
||||
},
|
||||
{
|
||||
"font_class": "sound",
|
||||
"unicode": "\ue684"
|
||||
},
|
||||
{
|
||||
"font_class": "sound-filled",
|
||||
"unicode": "\ue686"
|
||||
},
|
||||
{
|
||||
"font_class": "spinner-cycle",
|
||||
"unicode": "\ue68a"
|
||||
},
|
||||
{
|
||||
"font_class": "staff",
|
||||
"unicode": "\ue6a7"
|
||||
},
|
||||
{
|
||||
"font_class": "staff-filled",
|
||||
"unicode": "\ue6cb"
|
||||
},
|
||||
{
|
||||
"font_class": "star",
|
||||
"unicode": "\ue688"
|
||||
},
|
||||
{
|
||||
"font_class": "star-filled",
|
||||
"unicode": "\ue68f"
|
||||
},
|
||||
{
|
||||
"font_class": "starhalf",
|
||||
"unicode": "\ue683"
|
||||
},
|
||||
{
|
||||
"font_class": "trash",
|
||||
"unicode": "\ue687"
|
||||
},
|
||||
{
|
||||
"font_class": "trash-filled",
|
||||
"unicode": "\ue685"
|
||||
},
|
||||
{
|
||||
"font_class": "tune",
|
||||
"unicode": "\ue6aa"
|
||||
},
|
||||
{
|
||||
"font_class": "tune-filled",
|
||||
"unicode": "\ue6ca"
|
||||
},
|
||||
{
|
||||
"font_class": "undo",
|
||||
"unicode": "\ue64f"
|
||||
},
|
||||
{
|
||||
"font_class": "undo-filled",
|
||||
"unicode": "\ue64c"
|
||||
},
|
||||
{
|
||||
"font_class": "up",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "top",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "upload",
|
||||
"unicode": "\ue690"
|
||||
},
|
||||
{
|
||||
"font_class": "upload-filled",
|
||||
"unicode": "\ue68e"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam",
|
||||
"unicode": "\ue68c"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam-filled",
|
||||
"unicode": "\ue689"
|
||||
},
|
||||
{
|
||||
"font_class": "vip",
|
||||
"unicode": "\ue6a8"
|
||||
},
|
||||
{
|
||||
"font_class": "vip-filled",
|
||||
"unicode": "\ue6c6"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet",
|
||||
"unicode": "\ue6b1"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet-filled",
|
||||
"unicode": "\ue6c2"
|
||||
},
|
||||
{
|
||||
"font_class": "weibo",
|
||||
"unicode": "\ue68b"
|
||||
},
|
||||
{
|
||||
"font_class": "weixin",
|
||||
"unicode": "\ue691"
|
||||
}
|
||||
]
|
||||
|
||||
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"id": "uni-icons",
|
||||
"displayName": "uni-icons 图标",
|
||||
"version": "1.3.5",
|
||||
"version": "2.0.10",
|
||||
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
@@ -16,11 +16,7 @@
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
@@ -37,7 +33,8 @@
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss"],
|
||||
@@ -45,12 +42,14 @@
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
"app-nvue": "y",
|
||||
"app-uvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
@@ -70,11 +69,15 @@
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
"QQ": "y",
|
||||
"钉钉": "y",
|
||||
"快手": "y",
|
||||
"飞书": "y",
|
||||
"京东": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
@@ -83,4 +86,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user