feat: 首次提交

This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions

View File

@ -0,0 +1,436 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司手机号 18 6140 72 54 9身份证尾号5A07X5专用请尊重知识产权勿私下传播违者追究法律责任-->
<template>
<view class="fui-data__tag-wrap" :style="{marginBottom:'-'+gap+'rpx'}">
<!-- #ifndef APP-NVUE -->
<view class="fui-data__tag-item" :class="{'fui-data__tag-disable':item.disable}"
:style="{width:width?width+'rpx':'auto',height:height?height+'rpx':'auto',paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,borderRadius:radius+'rpx',marginRight:gap+'rpx',marginBottom:gap+'rpx',background:item.selected?activeBgColor:background,borderColor:item.selected?(borderColor || primaryColor):(defaultBorderColor || background)}"
v-for="(item,index) in dataList" :key="index">
<view class="fui-data__tag-inner" @tap.stop="handleClick(index)">
<text class="fui-dt__icon"
:style="{color:markColor || primaryColor,fontSize:markSize+'rpx',lineHeight:markSize+'rpx'}"
v-if="mark && item.selected">{{icon}}</text>
</view>
<text class="fui-data__tag-text"
:style="{fontSize:size+'rpx',color:item.selected?(activeColor || primaryColor):color}">{{item.text}}</text>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-data__tag-item" :class="{'fui-data__tag-disable':item.disable}"
:style="{width:width?width+'rpx':'auto',height:height?height+'rpx':'auto',paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,borderRadius:radius+'rpx',marginRight:gap+'rpx',marginBottom:gap+'rpx',background:item.selected?activeBgColor:background,borderColor:item.selected?(borderColor || primaryColor):defaultBorderColor || background}"
v-for="(item,index) in dataList" :key="index" @tap.stop="handleClick(index)">
<text class="fui-dt__icon"
:style="{color:markColor || primaryColor,fontSize:markSize+'rpx',lineHeight:markSize+'rpx'}"
v-if="mark && item.selected">{{icon}}</text>
<text class="fui-data__tag-text"
:style="{fontSize:size+'rpx',lineHeight:size+'rpx',color:item.selected?(activeColor || primaryColor):color}">{{item.text}}</text>
</view>
<!-- #endif -->
</view>
</template>
<script>
// #ifdef APP-NVUE
var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
'fontFamily': 'fuitag',
'src': "url('data:font/truetype;charset=utf-8;base64,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')"
});
// #endif
export default {
name: "fui-data-tag",
emits: ['change', 'input', 'update:modelValue'],
props: {
options: {
type: Array,
default () {
return []
}
},
// #ifdef VUE3
modelValue: {
type: [Array, String, Number],
default () {
return []
}
},
// #endif
value: {
type: [Array, String, Number],
default () {
return []
}
},
multiple: {
type: Boolean,
default: false
},
//最小选择数仅单选有效可选值仅0、1
min: {
type: [Number, String],
default: 1
},
//最小选择数,仅多选有效
multipleMin: {
type: [Number, String],
default: 0
},
//最大选择数
max: {
type: [Number, String],
default: -1
},
width: {
type: [Number, String],
default: 0
},
height: {
type: [Number, String],
default: 0
},
padding: {
type: Array,
default () {
return ['16rpx', '32rpx']
}
},
gap: {
type: [Number, String],
default: 20
},
radius: {
type: [Number, String],
default: 6
},
size: {
type: [Number, String],
default: 24
},
color: {
type: String,
default: '#333'
},
activeColor: {
type: String,
default: ''
},
background: {
type: String,
default: '#fff'
},
activeBgColor: {
type: String,
default: '#fff'
},
//默认边框颜色
defaultBorderColor: {
type: String,
default: ''
},
borderColor: {
type: String,
default: ''
},
//设为true时圆角值不建议设过大
mark: {
type: Boolean,
default: false
},
markSize: {
type: [Number, String],
default: 52
},
markColor: {
type: String,
default: ''
}
},
watch: {
options(vals) {
this.initData(vals)
},
// #ifdef VUE3
modelValue(vals) {
this.modelChange(vals)
},
// #endif
value(vals) {
this.modelChange(vals)
}
},
created() {
this.initData(this.options)
},
computed: {
primaryColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.primary) || '#465CFF';
}
},
data() {
return {
icon: '\ue600',
dataList: [],
val: '',
vals: []
};
},
methods: {
initData(vals) {
vals = JSON.parse(JSON.stringify(vals))
if (vals && vals.length > 0) {
if (typeof vals[0] !== 'object') {
vals = vals.map((item, index) => {
return {
text: item,
value: item,
selected: false
}
})
} else {
vals.map((item, index) => {
item.selected = false
if (item.value === undefined) {
item.value = item.text
}
})
}
this.dataList = vals;
// #ifdef VUE3
this.modelChange(this.modelValue)
// #endif
// #ifndef VUE3
this.modelChange(this.value)
// #endif
}
},
emitsChange(e) {
this.$emit('change', e)
this.$emit('input', e.detail.value)
// #ifdef VUE3
this.$emit("update:modelValue", e.detail.value);
// #endif
},
radioChange(index, model) {
const min = Number(this.min)
if (this.val === model.value && min > 0) return;
let val = '';
let i = index;
let entity = {}
this.dataList.forEach((item, idx) => {
if (idx === index) {
const bool = this.val === item.value && min <= 0
val = bool ? '' : item.value
i = bool ? -1 : index
entity = bool ? {} : item
item.selected = bool ? false : true
} else {
item.selected = false
}
})
this.val = val
let e = {
detail: {
index: i,
value: val,
item: entity
}
}
this.emitsChange(e)
},
toast(title) {
uni.showToast({
title: title,
icon: 'none'
})
},
checkboxChange(index, model) {
const min = Number(this.multipleMin)
const max = Number(this.max)
let vals = this.vals
let i = vals.indexOf(model.value)
if (vals.length <= min && i !== -1) {
this.toast(`至少选择${min}个选项`)
return
}
const isAllIndex = this.dataList.findIndex(item => item.isAll)
let item = this.dataList[index]
if (isAllIndex !== -1) {
if (model.isAll) {
item.selected = i !== -1 ? false : true
if (item.selected) {
vals = [model.value]
} else {
vals.splice(i, 1)
}
this.dataList.forEach((item, idx) => {
if (index !== idx) {
item.selected = false
}
})
} else {
if (vals.length >= max && max !== -1 && i === -1) {
this.toast(`最多只能选择${max}个选项`)
return
}
let entity = this.dataList[isAllIndex]
const allI = vals.indexOf(entity.value)
if (allI !== -1) {
entity.selected = false;
vals.splice(allI, 1)
}
this.dataList.forEach((item, idx) => {
if (index === idx) {
item.selected = i !== -1 ? false : true
if (item.selected) {
vals.push(item.value)
} else {
vals.splice(i, 1)
}
}
})
}
} else {
if (vals.length >= max && max !== -1 && i === -1) {
this.toast(`最多只能选择${max}个选项`)
return
}
item.selected = i !== -1 ? false : true
if (item.selected) {
vals.push(item.value)
} else {
vals.splice(i, 1)
}
}
this.vals = vals
const entity = this.dataList.filter(item => vals.indexOf(item.value) != -1)
let e = {
detail: {
value: vals,
item: entity
}
}
this.emitsChange(e)
},
modelChange(vals) {
if (this.multiple) {
this.dataList.forEach(item => {
if (vals.includes(item.value)) {
item.selected = true;
} else {
item.selected = false
}
})
this.vals = vals
} else {
this.dataList.forEach(item => {
if (vals == item.value) {
item.selected = true;
} else {
item.selected = false
}
})
this.val = vals
}
},
handleClick(index) {
let item = this.dataList[index]
if (item.disable) return;
if (this.multiple) {
this.checkboxChange(index, item)
} else {
this.radioChange(index, item)
}
}
}
}
</script>
<style scoped>
/* #ifndef APP-NVUE */
/* 头条小程序组件内如果不能引入字体,则需要在父级页面引入字体文件*/
@font-face {
font-family: fuitag;
src: url(data:font/ttf;base64,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) format("truetype");
}
/* #endif */
.fui-dt__icon {
font-family: fuitag;
text-decoration: none;
text-align: center;
position: absolute;
right: -4rpx;
bottom: -6rpx;
}
.fui-data__tag-wrap {
/* #ifndef APP-NVUE */
max-width: 100%;
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.fui-data__tag-item {
/* #ifndef APP-NVUE */
display: inline-flex;
white-space: nowrap;
box-sizing: border-box;
transform: translateZ(0);
/* #endif */
border-width: 1px;
flex-direction: row;
align-items: center;
justify-content: center;
text-overflow: ellipsis;
/* #ifdef APP-NVUE */
overflow: hidden;
/* #endif */
border-style: solid;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
position: relative;
}
.fui-data__tag-inner {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow: hidden;
/* #ifndef APP-NVUE */
z-index: 1;
/* #endif */
}
.fui-data__tag-text {
/* #ifndef APP-NVUE */
display: block;
white-space: nowrap;
overflow: hidden;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
/* #endif */
flex: 1;
text-align: center;
text-overflow: ellipsis;
font-weight: normal;
}
.fui-data__tag-disable {
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
opacity: .5;
}
</style>