|
|
<template>
|
|
|
<view class="relative">
|
|
|
<view class="tm-dropDownMenu absolute fulled" :style="{zIndex:101}">
|
|
|
<view
|
|
|
class="tm-dropDownMenu-bar"
|
|
|
:class="[
|
|
|
!black_tmeme && bgColor != 'white' ? bgColor : black_tmeme && bgColor == 'white' ? 'grey-darken-4' : bgColor,
|
|
|
black_tmeme ? '' : 'shadow-' + bgColor + '-' + shadow,
|
|
|
black_tmeme ? 'bk' : ''
|
|
|
]"
|
|
|
>
|
|
|
<tm-row align="center" justify="center">
|
|
|
<tm-col color="none" justify="center" align="middle" @click="changeIndex(index)" v-for="(item, index) in formartData" :key="index" :width="itemLength + '%'">
|
|
|
<view class="flex-center" :style="{height: height+'rpx',lineHeight:height+'rpx'}">
|
|
|
<text class=" pr-10" :style="{fontSize:fontSize+'rpx'}" :class="[activeIndex == index ? 'text-' + activeColor : 'text-' + unColor]">{{ item.title }}</text>
|
|
|
<tm-icons
|
|
|
style="line-height: 0;"
|
|
|
dense
|
|
|
:color="activeIndex == index ? activeColor : unColor"
|
|
|
size="24"
|
|
|
:name="activeIndex == index ? 'icon-sort-up' : 'icon-sort-down'"
|
|
|
></tm-icons>
|
|
|
</view>
|
|
|
</tm-col>
|
|
|
</tm-row>
|
|
|
</view>
|
|
|
|
|
|
<view v-if="formartData[activeIndex]" class="tm-dropDownMenu-body py-24 " :class="[black_tmeme ? 'grey-darken-5 bk' : 'white', 'shadow-' + shadow]">
|
|
|
<view v-if="formartData[activeIndex]['children']" :style="{maxHeight:maxHeight+'rpx',overflowY: 'auto'}">
|
|
|
<block v-for="(item, index) in formartData[activeIndex].children" :key="index">
|
|
|
<block v-if="item['children']&&rendIdx>=index" >
|
|
|
<view class="pa-24 text-size-s text-weight-b optAniopt" v-if="item['title']">{{ item.title }}</view>
|
|
|
<view class="optAniopt">
|
|
|
<block v-if="item.model == 'checkbox'">
|
|
|
<tm-groupcheckbox>
|
|
|
<block v-for="(item2, index2) in item.children" :key="index2">
|
|
|
<tm-checkbox :disabled="item2['disabled'] || item['disabled'] ? true : false" dense v-model="item2.checked">
|
|
|
<view class="px-10" :class="[item2['disabled'] || item['disabled'] ? 'opacity-6' : '']">
|
|
|
<tm-button
|
|
|
:fllowTheme="false"
|
|
|
:black="black_tmeme"
|
|
|
:theme="item2.checked ? color: (black_tmeme?'grey-darken-3':'grey-lighten-2')"
|
|
|
:font-color="item2.checked ? color : 'grey'"
|
|
|
dense
|
|
|
style="width: auto"
|
|
|
font-size="24"
|
|
|
height="70"
|
|
|
item-class="mx-14 my-10"
|
|
|
plan
|
|
|
block
|
|
|
icon="icon-check-circle"
|
|
|
:shadow="2"
|
|
|
:height="64"
|
|
|
:round="2"
|
|
|
>
|
|
|
{{ item2.title }}
|
|
|
</tm-button>
|
|
|
</view>
|
|
|
</tm-checkbox>
|
|
|
</block>
|
|
|
</tm-groupcheckbox>
|
|
|
</block>
|
|
|
<block v-if="item.model == 'radio'">
|
|
|
<tm-groupradio>
|
|
|
<block v-for="(item2, index2) in item.children" :key="index2">
|
|
|
<tm-radio :disabled="item2['disabled'] || item['disabled'] ? true : false" dense v-model="item2.checked">
|
|
|
<view class="px-10" :class="[item2['disabled'] || item['disabled'] ? 'opacity-6' : '']">
|
|
|
<tm-button
|
|
|
:fllowTheme="false"
|
|
|
:black="black_tmeme"
|
|
|
:theme="item2.checked ? color: (black_tmeme?'grey-darken-3':'grey-lighten-2')"
|
|
|
:font-color="item2.checked ? color : 'grey'"
|
|
|
dense
|
|
|
style="width: auto"
|
|
|
font-size="24"
|
|
|
height="70"
|
|
|
item-class="mx-14 my-10"
|
|
|
plan
|
|
|
block
|
|
|
icon="icon-check-circle"
|
|
|
:shadow="2"
|
|
|
:height="64"
|
|
|
:round="2"
|
|
|
>
|
|
|
{{ item2.title }}
|
|
|
</tm-button>
|
|
|
</view>
|
|
|
</tm-radio>
|
|
|
</block>
|
|
|
</tm-groupradio>
|
|
|
</block>
|
|
|
<block v-if="item.model == 'list'">
|
|
|
<tm-groupradio key="test">
|
|
|
<block v-for="(item2, index2) in item.children" :key="index2">
|
|
|
<tm-radio :inline="false" :disabled="item2['disabled'] || item['disabled'] ? true : false" dense v-model="item2.checked">
|
|
|
<view class="fulled">
|
|
|
|
|
|
<tm-listitem
|
|
|
:disabled="item2['disabled'] || item['disabled'] ? true : false"
|
|
|
:title-color="item2.checked ? color : 'grey-darken-3'"
|
|
|
:rightIconColor="item2.checked ? color : 'grey-lighten-3'"
|
|
|
:margin="[24, 12]"
|
|
|
:title="item2.title"
|
|
|
fontSize="28"
|
|
|
:shadow="0"
|
|
|
:borderBottom="true"
|
|
|
:rightIconSize='30'
|
|
|
:rightIcon="item2.checked ? 'icon-check-circle' : ''"
|
|
|
></tm-listitem>
|
|
|
</view>
|
|
|
</tm-radio>
|
|
|
</block>
|
|
|
</tm-groupradio>
|
|
|
</block>
|
|
|
|
|
|
<block v-if="item.model == 'listCheckbox'">
|
|
|
<tm-groupcheckbox >
|
|
|
<block v-for="(item2, index2) in item.children" :key="index2">
|
|
|
<tm-checkbox :inline="false" :disabled="item2['disabled'] || item['disabled'] ? true : false" dense v-model="item2.checked">
|
|
|
<view class="fulled">
|
|
|
|
|
|
<tm-listitem
|
|
|
:disabled="item2['disabled'] || item['disabled'] ? true : false"
|
|
|
:title-color="item2.checked ? color : 'grey-darken-3'"
|
|
|
:rightIconColor="item2.checked ? color : 'grey-lighten-3'"
|
|
|
:margin="[24, 12]"
|
|
|
:title="item2.title"
|
|
|
fontSize="28"
|
|
|
:shadow="0"
|
|
|
:borderBottom="true"
|
|
|
:rightIconSize='30'
|
|
|
:rightIcon="item2.checked ? 'icon-check-circle' : ''"
|
|
|
></tm-listitem>
|
|
|
</view>
|
|
|
</tm-checkbox>
|
|
|
</block>
|
|
|
</tm-groupcheckbox>
|
|
|
</block>
|
|
|
|
|
|
|
|
|
</view>
|
|
|
</block>
|
|
|
<block v-else>
|
|
|
<block v-if="item.model == 'input'&&rendIdx>=index" >
|
|
|
<view class="pa-24 text-size-s text-weight-b optAniopt" v-if="item['title']">{{ item.title }}</view>
|
|
|
<tm-input
|
|
|
:fllowTheme="fllowTheme"
|
|
|
border-color="grey-lighten-1"
|
|
|
:disabled="chiludis(item)"
|
|
|
:black="black_tmeme"
|
|
|
:color="color"
|
|
|
:border-bottom="false"
|
|
|
:input-type="item.type || 'text'"
|
|
|
:value.sync="item.value"
|
|
|
></tm-input>
|
|
|
</block>
|
|
|
<block v-if="item.model == 'slider'&&rendIdx>=index" >
|
|
|
<view class="pa-24 text-size-s text-weight-b optAniopt" v-if="item['title']">
|
|
|
{{ item.title }}
|
|
|
<text class="px-24 " :class="[`text-${color}`]">
|
|
|
{{ item.value ? item.value : '未设置' }}{{ item.value ? (item['suffix'] ? item.suffix : '') : '' }}
|
|
|
</text>
|
|
|
</view>
|
|
|
<view class="px-42 py-24 optAniopt">
|
|
|
<tm-slider
|
|
|
:fllowTheme="fllowTheme"
|
|
|
:disabled="chiludis(item)"
|
|
|
:black="black_tmeme"
|
|
|
:color="color"
|
|
|
:max="item.max ? item.max : 100"
|
|
|
v-model="item.value"
|
|
|
>
|
|
|
<template v-slot:tips>
|
|
|
{{ item.value }}
|
|
|
</template>
|
|
|
</tm-slider>
|
|
|
</view>
|
|
|
</block>
|
|
|
<block v-if="item.model == 'pickers'&&rendIdx>=index" >
|
|
|
<view class="pa-24 text-size-s text-weight-b optAniopt" v-if="item['title']">
|
|
|
{{ item.title }}
|
|
|
</view>
|
|
|
<view class="optAniopt">
|
|
|
<tm-pickers
|
|
|
:default-value.sync="item.value"
|
|
|
rang-key="title"
|
|
|
:btn-color="color"
|
|
|
:list="item.data"
|
|
|
>
|
|
|
<tm-input :value="pickTostring(item.value)" prefixp-icon="icon-calendaralt-fill" disabled :placeholder="item['placeholder']?item['placeholder']:'请选择'" suffix-icon="icon-sort-down"></tm-input>
|
|
|
</tm-pickers>
|
|
|
</view>
|
|
|
</block>
|
|
|
</block>
|
|
|
</block>
|
|
|
</view>
|
|
|
|
|
|
<view class="flex-between px-32 pt-32">
|
|
|
<tm-button :fllowTheme="fllowTheme" @click="getData" :theme="color" block style="width: 48%;" height="80">确认</tm-button>
|
|
|
<tm-button
|
|
|
:fllowTheme="fllowTheme"
|
|
|
@click="resetinit"
|
|
|
:black="black_tmeme"
|
|
|
block
|
|
|
:theme="color"
|
|
|
:font-color="color"
|
|
|
text
|
|
|
shadow="0"
|
|
|
style="width: 48%;"
|
|
|
height="80"
|
|
|
>
|
|
|
重置
|
|
|
</tm-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view @click="activeIndex=-1" v-if="activeIndex>-1" class="fixed fulled" :style="{height:height_bg+'px',top:vtop+'px',width:barwidth,background:'rgba(0,0,0,0.33)',zIndex:100}">
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
/**
|
|
|
* 下拉选项
|
|
|
* @property {String} color = [] 默认：primary ，主题色下方选项子组件的主题色。
|
|
|
* @property {String} un-color = [] 默认：black ，默认未激活时。bar条上的文字颜色
|
|
|
* @property {String} active-color = [] 默认：primary ，默认激活时。bar条上的文字颜色
|
|
|
* @property {String} bg-color = [] 默认：white ，导航条背景主题色。
|
|
|
* @property {Number} shadow = [] 默认：10 ，导航条的投影。
|
|
|
* @property {Array} list = [] 默认：[] ，数据格式见文档
|
|
|
* @property {Number} maxHeight = [] 默认：650 ，弹出的标签页，最大内容高度，超过自动滚动。
|
|
|
* @property {Number} height = [] 默认：88 ，标签导航的高度
|
|
|
* @property {Number} font-size = [] 默认：28 ，标签导航的文字大小
|
|
|
* @property {Array} default-selected = [] 默认：[] ，默认赋值选中的选项，注意可以是id数组或者对象数组，对象数组情况下必须含id标签符，且是唯一的。
|
|
|
* @property {Boolean} black = [] 默认：false ，暗黑模式。
|
|
|
* @property {Function} change 切换选项页面时触发。
|
|
|
* @property {Function} confirm 点击确认按钮时触发，返回所有选中的项。
|
|
|
* @example <tm-dropDownMenu color="orange" :list="list"></tm-dropDownMenu>
|
|
|
*/
|
|
|
import tmRow from '@/tm-vuetify/components/tm-row/tm-row.vue';
|
|
|
import tmCol from '@/tm-vuetify/components/tm-col/tm-col.vue';
|
|
|
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
|
|
import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
|
|
|
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
|
|
|
import tmGroupcheckbox from '@/tm-vuetify/components/tm-groupcheckbox/tm-groupcheckbox.vue';
|
|
|
import tmCheckbox from '@/tm-vuetify/components/tm-checkbox/tm-checkbox.vue';
|
|
|
|
|
|
import tmGroupradio from '@/tm-vuetify/components/tm-groupradio/tm-groupradio.vue';
|
|
|
import tmRadio from '@/tm-vuetify/components/tm-radio/tm-radio.vue';
|
|
|
import tmSlider from '@/tm-vuetify/components/tm-slider/tm-slider.vue';
|
|
|
import tmListitem from '@/tm-vuetify/components/tm-listitem/tm-listitem.vue';
|
|
|
import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
|
|
|
|
|
|
export default {
|
|
|
components: {tmPickers, tmRow, tmCol, tmButton, tmIcons, tmInput, tmGroupcheckbox, tmCheckbox, tmGroupradio, tmRadio, tmSlider, tmListitem },
|
|
|
name: 'tm-dropDownMenu',
|
|
|
props: {
|
|
|
// 主题色下方选项子组件的主题色
|
|
|
color: {
|
|
|
type: String,
|
|
|
default: 'primary'
|
|
|
},
|
|
|
// 默认未激活时。bar条上的文字颜色
|
|
|
unColor: {
|
|
|
type: String,
|
|
|
default: 'black'
|
|
|
},
|
|
|
// 默认激活时。bar条上的文字颜色
|
|
|
activeColor: {
|
|
|
type: String,
|
|
|
default: 'primary'
|
|
|
},
|
|
|
// 背景颜色。
|
|
|
bgColor: {
|
|
|
type: String,
|
|
|
default: 'white'
|
|
|
},
|
|
|
list: {
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
return [];
|
|
|
}
|
|
|
},
|
|
|
maxHeight:{
|
|
|
type:Number|String,
|
|
|
default:650
|
|
|
},
|
|
|
height:{
|
|
|
type:Number|String,
|
|
|
default:88
|
|
|
},
|
|
|
fontSize:{
|
|
|
type:Number|String,
|
|
|
default:28
|
|
|
},
|
|
|
//菜单的投影。
|
|
|
shadow: {
|
|
|
type: Number | String,
|
|
|
default: 10
|
|
|
},
|
|
|
// 可以是id索引也可以是对象数组,可以混着来。
|
|
|
defaultSelected: {
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
return [];
|
|
|
}
|
|
|
},
|
|
|
black: {
|
|
|
type: Boolean | String,
|
|
|
default: null
|
|
|
},
|
|
|
// 跟随主题色的改变而改变。
|
|
|
fllowTheme: {
|
|
|
type: Boolean | String,
|
|
|
default: true
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
itemLength: function() {
|
|
|
if (this.list.length == 0) return 100;
|
|
|
return 100 / this.list.length;
|
|
|
},
|
|
|
black_tmeme: function() {
|
|
|
if (this.black !== null) return this.black;
|
|
|
return this.$tm.vx.state().tmVuetify.black;
|
|
|
}
|
|
|
},
|
|
|
watch:{
|
|
|
list:{
|
|
|
deep:true,
|
|
|
handler(){
|
|
|
this.$nextTick(function() {
|
|
|
this.formartData = this.chulidata();
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
activeIndex: -1,
|
|
|
formartData: [],
|
|
|
oldList: [],
|
|
|
test: [],
|
|
|
height_bg:0,
|
|
|
vtop:0,
|
|
|
maxLeng:40,//最大渲染级别
|
|
|
rendIdx:0,
|
|
|
barwidth:'100%'
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
this.height_bg = uni.getSystemInfoSync().screenHeight;
|
|
|
},
|
|
|
mounted() {
|
|
|
this.$nextTick(function() {
|
|
|
this.formartData = this.chulidata();
|
|
|
this.oldList = [...this.list]
|
|
|
let t = this;
|
|
|
uni.$tm.sleep(40).then(e=>{
|
|
|
uni.createSelectorQuery().in(this).select('.tm-dropDownMenu').boundingClientRect().exec(function(v){
|
|
|
// #ifdef H5
|
|
|
t.vtop = v[0].top+v[0].height+uni.getSystemInfoSync().windowTop;
|
|
|
// #endif
|
|
|
// #ifndef H5
|
|
|
t.vtop = v[0].top+v[0].height;
|
|
|
console.log(v[0]);
|
|
|
// #endif
|
|
|
t.barwidth = v[0].width+'px'
|
|
|
|
|
|
})
|
|
|
})
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
pickTostring(item){
|
|
|
let p = [];
|
|
|
item.forEach(el=>{
|
|
|
if(typeof(el)=="string"){
|
|
|
p.push(el)
|
|
|
}else if(typeof el == 'object'){
|
|
|
p.push(el.title);
|
|
|
}
|
|
|
})
|
|
|
return p.join("-")
|
|
|
},
|
|
|
chiludis(item) {
|
|
|
return item?.disabled || false;
|
|
|
},
|
|
|
chulidata(list) {
|
|
|
// 处理相关数据格式以保持 一致。
|
|
|
let t = this;
|
|
|
let p = this.$tm.deepClone(list||this.list);
|
|
|
for (let j = 0; j < p.length; j++) {
|
|
|
p[j]['dot'] = 0;
|
|
|
if (p[j]['children']) {
|
|
|
let ic = p[j].children;
|
|
|
if (ic.length > 0) {
|
|
|
for (let k = 0; k < ic.length; k++) {
|
|
|
let children = ic[k]['children'];
|
|
|
if (children) {
|
|
|
if (ic[k]['model'] == 'checkbox'|| ic[k]['model'] == 'listCheckbox' || ic[k]['model'] == 'list' || (ic[k]['model'] == 'radio' && children.length > 0)) {
|
|
|
for (let z = 0; z < children.length; z++) {
|
|
|
let im = children[z];
|
|
|
if (!im.hasOwnProperty('checked')) {
|
|
|
im['checked'] = false;
|
|
|
}
|
|
|
for (let i = 0; i < t.defaultSelected.length; i++) {
|
|
|
let lsitem = t.defaultSelected[i];
|
|
|
if (typeof lsitem === 'object') {
|
|
|
if (lsitem['id'] == im['id']) {
|
|
|
im['checked'] = true;
|
|
|
}
|
|
|
} else {
|
|
|
if (lsitem == im['id']) {
|
|
|
im['checked'] = true;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return p;
|
|
|
},
|
|
|
// 重置只重置当前打开的页面数量，并不重置其它页面数据。
|
|
|
resetinit(index) {
|
|
|
let pd = this.formartData[this.activeIndex];
|
|
|
if (pd['children']) {
|
|
|
let ic = pd.children;
|
|
|
if (ic.length > 0) {
|
|
|
for (let k = 0; k < ic.length; k++) {
|
|
|
let children = ic[k]['children'];
|
|
|
if (children) {
|
|
|
if (ic[k]['model'] == 'checkbox'||ic[k]['model'] == 'listCheckbox'||ic[k]['model'] == 'list' || (ic[k]['model'] == 'radio' && children.length > 0)) {
|
|
|
for (let z = 0; z < children.length; z++) {
|
|
|
let im = children[z];
|
|
|
im['checked'] = false;
|
|
|
}
|
|
|
}
|
|
|
} else {
|
|
|
if (ic[k]['model'] == 'slider') {
|
|
|
ic[k].value = 0;
|
|
|
} else if (ic[k]['model'] == 'input') {
|
|
|
ic[k].value = '';
|
|
|
} else if (ic[k]['model'] == 'pickers') {
|
|
|
ic[k].value = [];
|
|
|
} else if (ic[k]['model'] == 'pickersDate') {
|
|
|
ic[k].value = "";
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
const p = this.chulidata(this.oldList);
|
|
|
this.formartData.splice(this.activeIndex, 1, p[this.activeIndex]);
|
|
|
},
|
|
|
changeIndex(index) {
|
|
|
let t = this;
|
|
|
let itmod = 659;
|
|
|
clearInterval(itmod)
|
|
|
if (this.activeIndex === index) {
|
|
|
this.activeIndex = -1;
|
|
|
|
|
|
} else {
|
|
|
this.activeIndex = index;
|
|
|
|
|
|
}
|
|
|
this.$emit('change', this.activeIndex);
|
|
|
|
|
|
this.rendIdx = 0;
|
|
|
clearInterval(itmod)
|
|
|
itmod = setInterval(function(){
|
|
|
t.rendIdx+=1;
|
|
|
|
|
|
if(t.rendIdx>t.maxLeng||t.activeIndex==-1){
|
|
|
clearInterval(itmod)
|
|
|
}
|
|
|
},10)
|
|
|
},
|
|
|
// 获取选中以及填写的数据。
|
|
|
getData() {
|
|
|
let p = [...this.formartData];
|
|
|
let xz = [];
|
|
|
for (let i = 0; i < p.length; i++) {
|
|
|
if (p[i]['children']) {
|
|
|
for (let j = 0; j < p[i].children.length; j++) {
|
|
|
let ic = p[i].children[j];
|
|
|
let ps = [];
|
|
|
if (ic.model == 'checkbox' || ic.model == 'radio' || ic.model == 'listCheckbox' || ic.model == 'list') {
|
|
|
if (ic['children']) {
|
|
|
for (let k = 0; k < ic.children.length; k++) {
|
|
|
if (ic.children[k].checked === true) {
|
|
|
ps.push(ic.children[k]);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
} else if (ic.model == 'input' || ic.model == 'slider') {
|
|
|
ps.push(ic);
|
|
|
} else if(ic.model == 'pickers'){
|
|
|
ps.push(ic);
|
|
|
}
|
|
|
|
|
|
let pyz = { ...ic };
|
|
|
delete pyz.children;
|
|
|
xz.push({
|
|
|
...pyz,
|
|
|
children: ps
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
this.$emit('confirm', xz);
|
|
|
this.activeIndex = -1;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.tm-dropDownMenu {
|
|
|
position: relative;
|
|
|
.tm-dropDownMenu-bar {
|
|
|
position: relative;
|
|
|
z-index: 303;
|
|
|
}
|
|
|
.tm-dropDownMenu-body {
|
|
|
background-color: rgba(0, 0, 0, 0.35);
|
|
|
min-height: 150upx;
|
|
|
position: absolute;
|
|
|
z-index: 304;
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
.optAniopt{
|
|
|
animation: opt 0.2s linear;
|
|
|
}
|
|
|
@keyframes opt{
|
|
|
0%{opacity: 0;}
|
|
|
100%{opacity: 1;}
|
|
|
}
|
|
|
</style>
|