用户中心和采购计划完善
This commit is contained in:
砂糖
@@ -1,3 +1,11 @@
|
||||
## 1.1.0（2025-08-19）
|
||||
- 新增 插槽 selected empty option
|
||||
- 新增 mutiple 属性,支持多选功能
|
||||
- 新增 wrap 属性,支持选中的文字超过一行显示
|
||||
- 新增 align 属性,支持修改选中的文字显示的位置
|
||||
- 新增 hideRight 属性,支持隐藏右侧所有按钮
|
||||
- 新增 mode 属性,支持修改边框样式
|
||||
- 新增 事件 open close clear
|
||||
## 1.0.10（2025-04-14）
|
||||
- 修复 清除按钮不展示问题
|
||||
## 1.0.9（2025-03-26）
|
||||
|
||||
@@ -2,30 +2,59 @@
|
||||
<view class="uni-stat__select">
|
||||
<span v-if="label" class="uni-label-text hide-on-phone">{{label + '：'}}</span>
|
||||
<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
|
||||
<view class="uni-select" :class="{'uni-select--disabled':disabled}">
|
||||
<view class="uni-select__input-box" @click="toggleSelector">
|
||||
<view v-if="current" class="uni-select__input-text">{{textShow}}</view>
|
||||
<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
|
||||
<view key="clear-button" v-if="current && clear && !disabled" @click.stop="clearVal">
|
||||
<view class="uni-select" :class="{'uni-select--disabled':disabled, 'uni-select--wrap': shouldWrap , 'border-default': mode == 'default','border-bottom': mode == 'underline'}">
|
||||
<view class="uni-select__input-box" @click="toggleSelector" :class="{'uni-select__input-box--wrap': shouldWrap}">
|
||||
<view v-if="slotSelected" class="slot-content padding-top-bottom" :class="{'uni-select__input-text--wrap': shouldWrap}">
|
||||
<slot name="selected" :selectedItems="getSelectedItems()"></slot>
|
||||
</view>
|
||||
<template v-else>
|
||||
<view v-if="textShow" class="uni-select__input-text" :class="{'uni-select__input-text--wrap': shouldWrap}">
|
||||
<view class="padding-top-bottom" :class="'align-'+align">{{textShow}}</view>
|
||||
</view>
|
||||
<view v-else class="uni-select__input-text uni-select__input-placeholder" :class="'align-'+align">{{typePlaceholder}}</view>
|
||||
</template>
|
||||
<view key="clear-button" v-if="!hideRight && shouldShowClear && clear && !disabled" @click.stop="clearVal">
|
||||
<uni-icons type="clear" color="#c0c4cc" size="24" />
|
||||
</view>
|
||||
<view key="arrow-button" v-else>
|
||||
<view key="arrow-button" v-else-if="!hideRight">
|
||||
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
|
||||
<view class="uni-select__selector" :style="getOffsetByPlacement" v-if="showSelector">
|
||||
<view :class="placement=='bottom'?'uni-popper__arrow_bottom':'uni-popper__arrow_top'"></view>
|
||||
<scroll-view scroll-y="true" class="uni-select__selector-scroll">
|
||||
<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
|
||||
<text>{{emptyTips}}</text>
|
||||
</view>
|
||||
<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
|
||||
@click="change(item)">
|
||||
<text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="uni-select__selector" :style="getOffsetByPlacement" v-if="showSelector">
|
||||
<view :class="placement=='bottom'?'uni-popper__arrow_bottom':'uni-popper__arrow_top'"></view>
|
||||
<scroll-view scroll-y="true" class="uni-select__selector-scroll">
|
||||
<template v-if="slotEmpty && mixinDatacomResData.length === 0">
|
||||
<view class="uni-select__selector-empty">
|
||||
<slot name="empty" :empty="emptyTips"></slot>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view v-if="mixinDatacomResData.length === 0" class="uni-select__selector-empty">
|
||||
<text>{{emptyTips}}</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="slotOption">
|
||||
<view v-for="(itemData,index) in mixinDatacomResData" :key="index" @click="change(itemData)">
|
||||
<slot name="option" :item="itemData" :itemSelected="multiple? getCurrentValues().includes(itemData.value):getCurrentValues() == itemData.value"></slot>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view v-if="!multiple && mixinDatacomResData.length > 0" class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
|
||||
@click="change(item)">
|
||||
<text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
|
||||
</view>
|
||||
<view v-if="multiple && mixinDatacomResData.length > 0" >
|
||||
<checkbox-group @change="checkBoxChange">
|
||||
<label class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index" >
|
||||
<checkbox :value="index+''" :checked="getCurrentValues().includes(item.value)" :disabled="item.disable"></checkbox>
|
||||
<view :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</template>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -36,22 +65,56 @@
|
||||
* DataChecklist 数据选择器
|
||||
* @description 通过数据渲染的下拉框组件
|
||||
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
|
||||
* @property {String} value 默认值
|
||||
* @property {String|Array} value 默认值，多选时为数组
|
||||
* @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
|
||||
* @property {Boolean} clear 是否可以清空已选项
|
||||
* @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
|
||||
* @property {String} label 左侧标题
|
||||
* @property {String} placeholder 输入框的提示文字
|
||||
* @property {Boolean} disabled 是否禁用
|
||||
* @property {Boolean} multiple 是否多选模式
|
||||
* @property {Boolean} wrap 是否允许选中文本换行显示
|
||||
* @property {String} placement 弹出位置
|
||||
* @value top 顶部弹出
|
||||
* @value bottom 底部弹出（default)
|
||||
* @property {String} align 选择文字的位置
|
||||
* @value left 显示左侧
|
||||
* @value center 显示中间
|
||||
* @value right 显示 右侧
|
||||
* @property {Boolean} hideRight 是否隐藏右侧按钮
|
||||
* @property {String} mode 边框样式
|
||||
* @value default 四周边框
|
||||
* @value underline 下边框
|
||||
* @value none 无边框
|
||||
* @event {Function} change 选中发生变化触发
|
||||
* @event {Function} open 选择框开启时触发
|
||||
* @event {Function} close 选择框关闭时触发
|
||||
* @event {Function} clear 点击清除按钮之后触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "uni-data-select",
|
||||
mixins: [uniCloud.mixinDatacom || {}],
|
||||
emits: [
|
||||
'open',
|
||||
'close',
|
||||
'update:modelValue',
|
||||
'input',
|
||||
'clear',
|
||||
'change'
|
||||
],
|
||||
model: {
|
||||
prop: 'modelValue',
|
||||
event: 'update:modelValue'
|
||||
},
|
||||
options: {
|
||||
// #ifdef MP-TOUTIAO
|
||||
virtualHost: false,
|
||||
// #endif
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true
|
||||
// #endif
|
||||
},
|
||||
props: {
|
||||
localdata: {
|
||||
type: Array,
|
||||
@@ -60,11 +123,11 @@
|
||||
}
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
type: [String, Number, Array],
|
||||
default: ''
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
type: [String, Number, Array],
|
||||
default: ''
|
||||
},
|
||||
label: {
|
||||
@@ -99,7 +162,27 @@
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
}
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
wrap: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
align:{
|
||||
type: String,
|
||||
default: "left"
|
||||
},
|
||||
hideRight: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
mode:{
|
||||
type: String,
|
||||
default: 'default'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -133,17 +216,35 @@
|
||||
common
|
||||
},
|
||||
valueCom() {
|
||||
// #ifdef VUE3
|
||||
return this.modelValue;
|
||||
// #endif
|
||||
// #ifndef VUE3
|
||||
return this.value;
|
||||
// #endif
|
||||
if (this.value === '') return this.modelValue
|
||||
if (this.modelValue === '') return this.value
|
||||
return this.value
|
||||
},
|
||||
textShow() {
|
||||
// 长文本显示
|
||||
let text = this.current;
|
||||
return text;
|
||||
if (this.multiple) {
|
||||
const currentValues = this.getCurrentValues();
|
||||
if (Array.isArray(currentValues) && currentValues.length > 0) {
|
||||
const selectedItems = this.mixinDatacomResData.filter(item => currentValues.includes(item.value));
|
||||
return selectedItems.map(item => this.formatItemName(item)).join(', ');
|
||||
} else {
|
||||
return ''; // 空数组时返回空字符串，显示占位符
|
||||
}
|
||||
} else {
|
||||
return this.current;
|
||||
}
|
||||
},
|
||||
shouldShowClear() {
|
||||
if (this.multiple) {
|
||||
const currentValues = this.getCurrentValues();
|
||||
return Array.isArray(currentValues) && currentValues.length > 0;
|
||||
} else {
|
||||
return !!this.current;
|
||||
}
|
||||
},
|
||||
shouldWrap() {
|
||||
// 只有在多选模式、开启换行、且有内容时才应用换行样式
|
||||
return this.multiple && this.wrap && !!this.textShow;
|
||||
},
|
||||
getOffsetByPlacement() {
|
||||
switch (this.placement) {
|
||||
@@ -152,10 +253,38 @@
|
||||
case 'bottom':
|
||||
return "top:calc(100% + 12px);";
|
||||
}
|
||||
},
|
||||
slotSelected(){
|
||||
// #ifdef VUE2
|
||||
return this.$scopedSlots ? this.$scopedSlots.selected : false
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
return this.$slots ? this.$slots.selected : false
|
||||
// #endif
|
||||
},
|
||||
slotEmpty(){
|
||||
// #ifdef VUE2
|
||||
return this.$scopedSlots ? this.$scopedSlots.empty : false
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
return this.$slots ? this.$slots.empty : false
|
||||
// #endif
|
||||
},
|
||||
slotOption(){
|
||||
// #ifdef VUE2
|
||||
return this.$scopedSlots ? this.$scopedSlots.option : false
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
return this.$slots ? this.$slots.option : false
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
showSelector:{
|
||||
handler(val,old){
|
||||
val ? this.$emit('open') : this.$emit('close')
|
||||
}
|
||||
},
|
||||
localdata: {
|
||||
immediate: true,
|
||||
handler(val, old) {
|
||||
@@ -175,9 +304,20 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
getSelectedItems() {
|
||||
const currentValues = this.getCurrentValues();
|
||||
let _minxData = this.mixinDatacomResData
|
||||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||
_minxData = JSON.parse(JSON.stringify(this.mixinDatacomResData))
|
||||
// #endif
|
||||
if (this.multiple) {
|
||||
return _minxData.filter(item => currentValues.includes(item.value)) || [];
|
||||
} else {
|
||||
return _minxData.filter(item => item.value === currentValues) || [];
|
||||
}
|
||||
},
|
||||
debounce(fn, time = 100) {
|
||||
let timer = null
|
||||
return function(...args) {
|
||||
@@ -187,6 +327,23 @@
|
||||
}, time)
|
||||
}
|
||||
},
|
||||
// 检查项目是否已选中
|
||||
isSelected(item) {
|
||||
if (this.multiple) {
|
||||
const currentValues = this.getCurrentValues();
|
||||
return Array.isArray(currentValues) && currentValues.includes(item.value);
|
||||
} else {
|
||||
return this.getCurrentValues() === item.value;
|
||||
}
|
||||
},
|
||||
// 获取当前选中的值
|
||||
getCurrentValues() {
|
||||
if (this.multiple) {
|
||||
return Array.isArray(this.valueCom) ? this.valueCom : (this.valueCom ? [this.valueCom] : []);
|
||||
} else {
|
||||
return this.valueCom;
|
||||
}
|
||||
},
|
||||
// 执行数据库查询
|
||||
query() {
|
||||
this.mixinDatacomEasyGet();
|
||||
@@ -198,7 +355,7 @@
|
||||
}
|
||||
},
|
||||
initDefVal() {
|
||||
let defValue = ''
|
||||
let defValue = this.multiple ? [] : ''
|
||||
if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
|
||||
defValue = this.valueCom
|
||||
} else {
|
||||
@@ -209,48 +366,105 @@
|
||||
if (strogeValue || strogeValue === 0) {
|
||||
defValue = strogeValue
|
||||
} else {
|
||||
let defItem = ''
|
||||
let defItem = this.multiple ? [] : ''
|
||||
if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
|
||||
defItem = this.mixinDatacomResData[this.defItem - 1].value
|
||||
defItem = this.multiple ? [this.mixinDatacomResData[this.defItem - 1].value] : this.mixinDatacomResData[this.defItem - 1].value
|
||||
}
|
||||
defValue = defItem
|
||||
}
|
||||
if (defValue || defValue === 0) {
|
||||
if (defValue || defValue === 0 || (this.multiple && Array.isArray(defValue) && defValue.length > 0)) {
|
||||
this.emit(defValue)
|
||||
}
|
||||
}
|
||||
const def = this.mixinDatacomResData.find(item => item.value === defValue)
|
||||
this.current = def ? this.formatItemName(def) : ''
|
||||
|
||||
if (this.multiple) {
|
||||
const selectedValues = Array.isArray(defValue) ? defValue : (defValue ? [defValue] : []);
|
||||
const selectedItems = this.mixinDatacomResData.filter(item => selectedValues.includes(item.value));
|
||||
this.current = selectedItems.map(item => this.formatItemName(item));
|
||||
} else {
|
||||
const def = this.mixinDatacomResData.find(item => item.value === defValue)
|
||||
this.current = def ? this.formatItemName(def) : ''
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {[String, Number]} value
|
||||
* @param {[String, Number, Array]} value
|
||||
* 判断用户给的 value 是否同时为禁用状态
|
||||
*/
|
||||
isDisabled(value) {
|
||||
let isDisabled = false;
|
||||
|
||||
this.mixinDatacomResData.forEach(item => {
|
||||
if (item.value === value) {
|
||||
isDisabled = item.disable
|
||||
}
|
||||
})
|
||||
|
||||
return isDisabled;
|
||||
if (Array.isArray(value)) {
|
||||
// 对于数组，如果任意一个值被禁用，则认为整体被禁用
|
||||
return value.some(val => {
|
||||
return this.mixinDatacomResData.some(item => item.value === val && item.disable);
|
||||
});
|
||||
} else {
|
||||
let isDisabled = false;
|
||||
this.mixinDatacomResData.forEach(item => {
|
||||
if (item.value === value) {
|
||||
isDisabled = item.disable
|
||||
}
|
||||
})
|
||||
return isDisabled;
|
||||
}
|
||||
},
|
||||
|
||||
clearVal() {
|
||||
this.emit('')
|
||||
this.current = ''
|
||||
const emptyValue = this.multiple ? [] : '';
|
||||
this.emit(emptyValue)
|
||||
this.current = this.multiple ? [] : ''
|
||||
if (this.collection) {
|
||||
this.removeCache()
|
||||
}
|
||||
this.$emit('clear')
|
||||
},
|
||||
checkBoxChange(res){
|
||||
let range = res.detail.value
|
||||
|
||||
let currentValues = range && range.length > 0? range.map((item)=>{
|
||||
const index = parseInt(item, 10);
|
||||
|
||||
if (isNaN(index)) {
|
||||
console.error(`无效索引: ${item}`);
|
||||
}
|
||||
|
||||
if (index < 0 || index >= this.mixinDatacomResData.length) {
|
||||
console.error(`索引越界: ${index}`);
|
||||
}
|
||||
|
||||
return this.mixinDatacomResData[index].value;
|
||||
}) : []
|
||||
const selectedItems = this.mixinDatacomResData.filter(dataItem => currentValues.includes(dataItem.value));
|
||||
this.current = selectedItems.map(dataItem => this.formatItemName(dataItem));
|
||||
|
||||
this.emit(currentValues);
|
||||
},
|
||||
change(item) {
|
||||
if (!item.disable) {
|
||||
this.showSelector = false
|
||||
this.current = this.formatItemName(item)
|
||||
this.emit(item.value)
|
||||
if (this.multiple) {
|
||||
// 多选模式
|
||||
let currentValues = this.getCurrentValues();
|
||||
if (!Array.isArray(currentValues)) {
|
||||
currentValues = currentValues ? [currentValues] : [];
|
||||
}
|
||||
|
||||
const itemValue = item.value;
|
||||
const index = currentValues.indexOf(itemValue);
|
||||
|
||||
if (index > -1) {
|
||||
currentValues.splice(index, 1);
|
||||
} else {
|
||||
currentValues.push(itemValue);
|
||||
}
|
||||
|
||||
const selectedItems = this.mixinDatacomResData.filter(dataItem => currentValues.includes(dataItem.value));
|
||||
this.current = selectedItems.map(dataItem => this.formatItemName(dataItem));
|
||||
|
||||
this.emit(currentValues);
|
||||
} else {
|
||||
// 单选模式
|
||||
this.showSelector = false
|
||||
this.current = this.formatItemName(item)
|
||||
this.emit(item.value)
|
||||
}
|
||||
}
|
||||
},
|
||||
emit(val) {
|
||||
@@ -328,6 +542,11 @@
|
||||
$uni-main-color: #333 !default;
|
||||
$uni-secondary-color: #909399 !default;
|
||||
$uni-border-3: #e5e5e5;
|
||||
$uni-primary: #2979ff !default;
|
||||
$uni-success: #4cd964 !default;
|
||||
$uni-warning: #f0ad4e !default;
|
||||
$uni-error: #dd524d !default;
|
||||
$uni-info: #909399 !default;
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
@media screen and (max-width: 500px) {
|
||||
@@ -369,9 +588,16 @@
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
border-bottom: solid 1px $uni-border-3;
|
||||
}
|
||||
|
||||
.border-default {
|
||||
border: 1px solid $uni-border-3;
|
||||
}
|
||||
|
||||
.uni-select {
|
||||
font-size: 14px;
|
||||
border: 1px solid $uni-border-3;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
padding: 0 5px;
|
||||
@@ -383,15 +609,20 @@
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-bottom: solid 1px $uni-border-3;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
height: 35px;
|
||||
min-height: 35px;
|
||||
|
||||
&--disabled {
|
||||
background-color: #f5f7fa;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&--wrap {
|
||||
height: auto;
|
||||
min-height: 35px;
|
||||
// align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-select__label {
|
||||
@@ -403,7 +634,7 @@
|
||||
}
|
||||
|
||||
.uni-select__input-box {
|
||||
height: 35px;
|
||||
// height: 35px;
|
||||
width: 0px;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
@@ -412,6 +643,24 @@
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
&--wrap {
|
||||
.uni-select__input-text {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.padding-top-bottom {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.slot-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-select__input {
|
||||
@@ -463,15 +712,18 @@
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
line-height: 35px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
/* border-bottom: solid 1px $uni-border-3; */
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
.uni-select__selector-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
|
||||
|
||||
.uni-select__selector-item-check {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.uni-select__selector-empty:last-child,
|
||||
@@ -490,15 +742,14 @@
|
||||
.uni-popper__arrow_bottom,
|
||||
.uni-popper__arrow_bottom::after,
|
||||
.uni-popper__arrow_top,
|
||||
.uni-popper__arrow_top::after,
|
||||
{
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
.uni-popper__arrow_top::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
.uni-popper__arrow_bottom {
|
||||
@@ -544,11 +795,22 @@
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
&--wrap {
|
||||
white-space: normal;
|
||||
text-overflow: initial;
|
||||
-o-text-overflow: initial;
|
||||
overflow: visible;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
// line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-select__input-placeholder {
|
||||
color: $uni-base-color;
|
||||
font-size: 12px;
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
.uni-select--mask {
|
||||
@@ -559,4 +821,17 @@
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"id": "uni-data-select",
|
||||
"displayName": "uni-data-select 下拉框选择器",
|
||||
"version": "1.0.10",
|
||||
"version": "1.1.0",
|
||||
"description": "通过数据驱动的下拉框选择器",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
@@ -12,12 +12,14 @@
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.1"
|
||||
"HBuilderX": "^3.1.1",
|
||||
"uni-app": "^4.45",
|
||||
"uni-app-x": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
@@ -35,54 +37,70 @@
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
"type": "component-vue",
|
||||
"darkmode": "x",
|
||||
"i18n": "x",
|
||||
"widescreen": "x"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-load-more"],
|
||||
"dependencies": [
|
||||
"uni-load-more"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
"tcb": "√",
|
||||
"aliyun": "√",
|
||||
"alipay": "√"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "n",
|
||||
"app-harmony": "u",
|
||||
"app-uvue": "u"
|
||||
"uni-app": {
|
||||
"vue": {
|
||||
"vue2": "√",
|
||||
"vue3": "√"
|
||||
},
|
||||
"web": {
|
||||
"safari": "√",
|
||||
"chrome": "√"
|
||||
},
|
||||
"app": {
|
||||
"vue": "√",
|
||||
"nvue": "-",
|
||||
"android": "√",
|
||||
"ios": "√",
|
||||
"harmony": "√"
|
||||
},
|
||||
"mp": {
|
||||
"weixin": "√",
|
||||
"alipay": "√",
|
||||
"toutiao": "√",
|
||||
"baidu": "-",
|
||||
"kuaishou": "-",
|
||||
"jd": "-",
|
||||
"harmony": "-",
|
||||
"qq": "-",
|
||||
"lark": "-"
|
||||
},
|
||||
"quickapp": {
|
||||
"huawei": "-",
|
||||
"union": "-"
|
||||
}
|
||||
},
|
||||
"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",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
"uni-app-x": {
|
||||
"web": {
|
||||
"safari": "-",
|
||||
"chrome": "-"
|
||||
},
|
||||
"app": {
|
||||
"android": "-",
|
||||
"ios": "-",
|
||||
"harmony": "-"
|
||||
},
|
||||
"mp": {
|
||||
"weixin": "-"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
25
uni_modules/uni-fab/changelog.md
Normal file
25
uni_modules/uni-fab/changelog.md
Normal file
@@ -0,0 +1,25 @@
|
||||
## 1.2.6（2024-10-12）
|
||||
- 修复 微信小程序中的getSystemInfo警告
|
||||
## 1.2.5（2023-03-29）
|
||||
- 新增 pattern.icon 属性，可自定义图标
|
||||
## 1.2.4（2022-09-07）
|
||||
小程序端由于 style 使用了对象导致报错，[详情](https://ask.dcloud.net.cn/question/152790?item_id=211778&rf=false)
|
||||
## 1.2.3（2022-09-05）
|
||||
- 修复 nvue 环境下，具有 tabBar 时，fab 组件下部位置无法正常获取 --window-bottom 的bug，详见：[https://ask.dcloud.net.cn/question/110638?notification_id=826310](https://ask.dcloud.net.cn/question/110638?notification_id=826310)
|
||||
## 1.2.2（2021-12-29）
|
||||
- 更新 组件依赖
|
||||
## 1.2.1（2021-11-19）
|
||||
- 修复 阴影颜色不正确的bug
|
||||
## 1.2.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-fab](https://uniapp.dcloud.io/component/uniui/uni-fab)
|
||||
## 1.1.1（2021-11-09）
|
||||
- 新增 提供组件设计资源，组件样式调整
|
||||
## 1.1.0（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.0.7（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.0.6（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
- 优化 按钮背景色调整
|
||||
- 优化 兼容pc端
|
||||
491
uni_modules/uni-fab/components/uni-fab/uni-fab.vue
Normal file
491
uni_modules/uni-fab/components/uni-fab/uni-fab.vue
Normal file
@@ -0,0 +1,491 @@
|
||||
<template>
|
||||
<view class="uni-cursor-point">
|
||||
<view v-if="popMenu && (leftBottom||rightBottom||leftTop||rightTop) && content.length > 0" :class="{
|
||||
'uni-fab--leftBottom': leftBottom,
|
||||
'uni-fab--rightBottom': rightBottom,
|
||||
'uni-fab--leftTop': leftTop,
|
||||
'uni-fab--rightTop': rightTop
|
||||
}" class="uni-fab"
|
||||
:style="nvueBottom"
|
||||
>
|
||||
<view :class="{
|
||||
'uni-fab__content--left': horizontal === 'left',
|
||||
'uni-fab__content--right': horizontal === 'right',
|
||||
'uni-fab__content--flexDirection': direction === 'vertical',
|
||||
'uni-fab__content--flexDirectionStart': flexDirectionStart,
|
||||
'uni-fab__content--flexDirectionEnd': flexDirectionEnd,
|
||||
'uni-fab__content--other-platform': !isAndroidNvue
|
||||
}" :style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }"
|
||||
class="uni-fab__content" elevation="5">
|
||||
<view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" />
|
||||
<view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }"
|
||||
class="uni-fab__item" @click="_onItemClick(index, item)">
|
||||
<image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image"
|
||||
mode="aspectFit" />
|
||||
<text class="uni-fab__item-text"
|
||||
:style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text>
|
||||
</view>
|
||||
<view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" />
|
||||
</view>
|
||||
</view>
|
||||
<view :class="{
|
||||
'uni-fab__circle--leftBottom': leftBottom,
|
||||
'uni-fab__circle--rightBottom': rightBottom,
|
||||
'uni-fab__circle--leftTop': leftTop,
|
||||
'uni-fab__circle--rightTop': rightTop,
|
||||
'uni-fab__content--other-platform': !isAndroidNvue
|
||||
}" class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': styles.buttonColor, 'bottom': nvueBottom }" @click="_onClick">
|
||||
<uni-icons class="fab-circle-icon" :type="styles.icon" :color="styles.iconColor" size="32"
|
||||
:class="{'uni-fab__plus--active': isShow && content.length > 0}"></uni-icons>
|
||||
<!-- <view class="fab-circle-v" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view>
|
||||
<view class="fab-circle-h" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let platform = 'other'
|
||||
// #ifdef APP-NVUE
|
||||
platform = uni.getSystemInfoSync().platform
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* Fab 悬浮按钮
|
||||
* @description 点击可展开一个图形按钮菜单
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=144
|
||||
* @property {Object} pattern 可选样式配置项
|
||||
* @property {Object} horizontal = [left | right] 水平对齐方式
|
||||
* @value left 左对齐
|
||||
* @value right 右对齐
|
||||
* @property {Object} vertical = [bottom | top] 垂直对齐方式
|
||||
* @value bottom 下对齐
|
||||
* @value top 上对齐
|
||||
* @property {Object} direction = [horizontal | vertical] 展开菜单显示方式
|
||||
* @value horizontal 水平显示
|
||||
* @value vertical 垂直显示
|
||||
* @property {Array} content 展开菜单内容配置项
|
||||
* @property {Boolean} popMenu 是否使用弹出菜单
|
||||
* @event {Function} trigger 展开菜单点击事件，返回点击信息
|
||||
* @event {Function} fabClick 悬浮按钮点击事件
|
||||
*/
|
||||
export default {
|
||||
name: 'UniFab',
|
||||
emits: ['fabClick', 'trigger'],
|
||||
props: {
|
||||
pattern: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
horizontal: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
vertical: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'horizontal'
|
||||
},
|
||||
content: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
popMenu: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fabShow: false,
|
||||
isShow: false,
|
||||
isAndroidNvue: platform === 'android',
|
||||
styles: {
|
||||
color: '#3c3e49',
|
||||
selectedColor: '#007AFF',
|
||||
backgroundColor: '#fff',
|
||||
buttonColor: '#007AFF',
|
||||
iconColor: '#fff',
|
||||
icon: 'plusempty'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
contentWidth(e) {
|
||||
return (this.content.length + 1) * 55 + 15 + 'px'
|
||||
},
|
||||
contentWidthMin() {
|
||||
return '55px'
|
||||
},
|
||||
// 动态计算宽度
|
||||
boxWidth() {
|
||||
return this.getPosition(3, 'horizontal')
|
||||
},
|
||||
// 动态计算高度
|
||||
boxHeight() {
|
||||
return this.getPosition(3, 'vertical')
|
||||
},
|
||||
// 计算左下位置
|
||||
leftBottom() {
|
||||
return this.getPosition(0, 'left', 'bottom')
|
||||
},
|
||||
// 计算右下位置
|
||||
rightBottom() {
|
||||
return this.getPosition(0, 'right', 'bottom')
|
||||
},
|
||||
// 计算左上位置
|
||||
leftTop() {
|
||||
return this.getPosition(0, 'left', 'top')
|
||||
},
|
||||
rightTop() {
|
||||
return this.getPosition(0, 'right', 'top')
|
||||
},
|
||||
flexDirectionStart() {
|
||||
return this.getPosition(1, 'vertical', 'top')
|
||||
},
|
||||
flexDirectionEnd() {
|
||||
return this.getPosition(1, 'vertical', 'bottom')
|
||||
},
|
||||
horizontalLeft() {
|
||||
return this.getPosition(2, 'horizontal', 'left')
|
||||
},
|
||||
horizontalRight() {
|
||||
return this.getPosition(2, 'horizontal', 'right')
|
||||
},
|
||||
// 计算 nvue bottom
|
||||
nvueBottom() {
|
||||
// #ifdef APP-NVUE
|
||||
const safeBottom = uni.getSystemInfoSync().windowBottom;
|
||||
return 30 + safeBottom
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
return 30
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
pattern: {
|
||||
handler(val, oldVal) {
|
||||
this.styles = Object.assign({}, this.styles, val)
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.isShow = this.show
|
||||
if (this.top === 0) {
|
||||
this.fabShow = true
|
||||
}
|
||||
// 初始化样式
|
||||
this.styles = Object.assign({}, this.styles, this.pattern)
|
||||
},
|
||||
methods: {
|
||||
_onClick() {
|
||||
this.$emit('fabClick')
|
||||
if (!this.popMenu) {
|
||||
return
|
||||
}
|
||||
this.isShow = !this.isShow
|
||||
},
|
||||
open() {
|
||||
this.isShow = true
|
||||
},
|
||||
close() {
|
||||
this.isShow = false
|
||||
},
|
||||
/**
|
||||
* 按钮点击事件
|
||||
*/
|
||||
_onItemClick(index, item) {
|
||||
if (!this.isShow) {
|
||||
return
|
||||
}
|
||||
this.$emit('trigger', {
|
||||
index,
|
||||
item
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取 位置信息
|
||||
*/
|
||||
getPosition(types, paramA, paramB) {
|
||||
if (types === 0) {
|
||||
return this.horizontal === paramA && this.vertical === paramB
|
||||
} else if (types === 1) {
|
||||
return this.direction === paramA && this.vertical === paramB
|
||||
} else if (types === 2) {
|
||||
return this.direction === paramA && this.horizontal === paramB
|
||||
} else {
|
||||
return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
$uni-shadow-base:0 1px 5px 2px rgba($color: #000000, $alpha: 0.3) !default;
|
||||
|
||||
.uni-fab {
|
||||
position: fixed;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
border-radius: 45px;
|
||||
box-shadow: $uni-shadow-base;
|
||||
}
|
||||
|
||||
.uni-cursor-point {
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-fab--active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-fab--leftBottom {
|
||||
left: 15px;
|
||||
bottom: 30px;
|
||||
/* #ifdef H5 */
|
||||
left: calc(15px + var(--window-left));
|
||||
bottom: calc(30px + var(--window-bottom));
|
||||
/* #endif */
|
||||
// padding: 10px;
|
||||
}
|
||||
|
||||
.uni-fab--leftTop {
|
||||
left: 15px;
|
||||
top: 30px;
|
||||
/* #ifdef H5 */
|
||||
left: calc(15px + var(--window-left));
|
||||
top: calc(30px + var(--window-top));
|
||||
/* #endif */
|
||||
// padding: 10px;
|
||||
}
|
||||
|
||||
.uni-fab--rightBottom {
|
||||
right: 15px;
|
||||
bottom: 30px;
|
||||
/* #ifdef H5 */
|
||||
right: calc(15px + var(--window-right));
|
||||
bottom: calc(30px + var(--window-bottom));
|
||||
/* #endif */
|
||||
// padding: 10px;
|
||||
}
|
||||
|
||||
.uni-fab--rightTop {
|
||||
right: 15px;
|
||||
top: 30px;
|
||||
/* #ifdef H5 */
|
||||
right: calc(15px + var(--window-right));
|
||||
top: calc(30px + var(--window-top));
|
||||
/* #endif */
|
||||
// padding: 10px;
|
||||
}
|
||||
|
||||
.uni-fab__circle {
|
||||
position: fixed;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
background-color: #3c3e49;
|
||||
border-radius: 45px;
|
||||
z-index: 11;
|
||||
// box-shadow: $uni-shadow-base;
|
||||
}
|
||||
|
||||
.uni-fab__circle--leftBottom {
|
||||
left: 15px;
|
||||
bottom: 30px;
|
||||
/* #ifdef H5 */
|
||||
left: calc(15px + var(--window-left));
|
||||
bottom: calc(30px + var(--window-bottom));
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-fab__circle--leftTop {
|
||||
left: 15px;
|
||||
top: 30px;
|
||||
/* #ifdef H5 */
|
||||
left: calc(15px + var(--window-left));
|
||||
top: calc(30px + var(--window-top));
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-fab__circle--rightBottom {
|
||||
right: 15px;
|
||||
bottom: 30px;
|
||||
/* #ifdef H5 */
|
||||
right: calc(15px + var(--window-right));
|
||||
bottom: calc(30px + var(--window-bottom));
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-fab__circle--rightTop {
|
||||
right: 15px;
|
||||
top: 30px;
|
||||
/* #ifdef H5 */
|
||||
right: calc(15px + var(--window-right));
|
||||
top: calc(30px + var(--window-top));
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-fab__circle--left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.uni-fab__circle--right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.uni-fab__circle--top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.uni-fab__circle--bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.uni-fab__plus {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// .fab-circle-v {
|
||||
// position: absolute;
|
||||
// width: 2px;
|
||||
// height: 24px;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// /* #ifndef APP-NVUE */
|
||||
// margin: auto;
|
||||
// /* #endif */
|
||||
// background-color: white;
|
||||
// transform: rotate(0deg);
|
||||
// transition: transform 0.3s;
|
||||
// }
|
||||
|
||||
// .fab-circle-h {
|
||||
// position: absolute;
|
||||
// width: 24px;
|
||||
// height: 2px;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// /* #ifndef APP-NVUE */
|
||||
// margin: auto;
|
||||
// /* #endif */
|
||||
// background-color: white;
|
||||
// transform: rotate(0deg);
|
||||
// transition: transform 0.3s;
|
||||
// }
|
||||
|
||||
.fab-circle-icon {
|
||||
transform: rotate(0deg);
|
||||
transition: transform 0.3s;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.uni-fab__plus--active {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
.uni-fab__content {
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
border-radius: 55px;
|
||||
overflow: hidden;
|
||||
transition-property: width, height;
|
||||
transition-duration: 0.2s;
|
||||
width: 55px;
|
||||
border-color: #DDDDDD;
|
||||
border-width: 1rpx;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.uni-fab__content--other-platform {
|
||||
border-width: 0px;
|
||||
box-shadow: $uni-shadow-base;
|
||||
}
|
||||
|
||||
.uni-fab__content--left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.uni-fab__content--right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.uni-fab__content--flexDirection {
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.uni-fab__content--flexDirectionStart {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.uni-fab__content--flexDirectionEnd {
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.uni-fab__item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.uni-fab__item--active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-fab__item-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.uni-fab__item-text {
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.uni-fab__item--first {
|
||||
width: 55px;
|
||||
}
|
||||
</style>
|
||||
85
uni_modules/uni-fab/package.json
Normal file
85
uni_modules/uni-fab/package.json
Normal file
@@ -0,0 +1,85 @@
|
||||
{
|
||||
"id": "uni-fab",
|
||||
"displayName": "uni-fab 悬浮按钮",
|
||||
"version": "1.2.6",
|
||||
"description": "悬浮按钮 fab button ，点击可展开一个图标按钮菜单。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"按钮",
|
||||
"悬浮按钮",
|
||||
"fab"
|
||||
],
|
||||
"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"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
9
uni_modules/uni-fab/readme.md
Normal file
9
uni_modules/uni-fab/readme.md
Normal file
@@ -0,0 +1,9 @@
|
||||
## Fab 悬浮按钮
|
||||
> **组件名：uni-fab**
|
||||
> 代码块： `uFab`
|
||||
|
||||
|
||||
点击可展开一个图形按钮菜单
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-fab)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
@@ -1,3 +1,5 @@
|
||||
## 2.0.12（2025-08-26）
|
||||
- 优化 uni-app x 下 size 类型问题
|
||||
## 2.0.11（2025-08-18）
|
||||
- 修复 图标点击事件返回
|
||||
## 2.0.9（2024-01-12）
|
||||
|
||||
@@ -29,8 +29,8 @@
|
||||
default: '#333333'
|
||||
},
|
||||
size: {
|
||||
type: Object,
|
||||
default: 16
|
||||
type: [Number, String],
|
||||
default: 16
|
||||
},
|
||||
fontFamily: {
|
||||
type: String,
|
||||
@@ -51,9 +51,9 @@
|
||||
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
|
||||
const reg = /^[0-9]*$/g
|
||||
return reg.test(size as string) ? '' + size + 'px' : '' + size;
|
||||
// return '' + this.size
|
||||
}
|
||||
return this.getFontSize(size as number)
|
||||
},
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"id": "uni-icons",
|
||||
"displayName": "uni-icons 图标",
|
||||
"version": "2.0.11",
|
||||
"version": "2.0.12",
|
||||
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
@@ -64,7 +64,7 @@
|
||||
},
|
||||
"app": {
|
||||
"vue": "√",
|
||||
"nvue": "√",
|
||||
"nvue": "-",
|
||||
"android": {
|
||||
"extVersion": "",
|
||||
"minVersion": "29"
|
||||
|
||||
Reference in New Issue
Block a user