JC96821
4 years ago
490 changed files with 6928 additions and 19830 deletions
@ -1,242 +0,0 @@ |
|||
<template> |
|||
<view class="dropdown-list-wapper u-flex u-flex-1"> |
|||
<view |
|||
v-for="(drop, index) in dropdownListFromFather" |
|||
:key="drop.name" |
|||
:show="drop.show" |
|||
class="u-selected-class u-dropdown-list" |
|||
:style="{ zIndex: zIndex + 1 }" |
|||
> |
|||
<slot name="selectionbox"> |
|||
<view |
|||
:style="{ height: top + 'rpx' }" |
|||
class="drop-item u-flex u-justify-center" |
|||
@click="handleDropClick(drop)" |
|||
> |
|||
<text :style="{ color: drop.show ? activeColor : '#999' }"> |
|||
{{ getTitle(drop.options) }} |
|||
</text> |
|||
<view |
|||
class="u-animation" |
|||
:class="[drop.show ? 'u-animation-show' : '']" |
|||
> |
|||
<u-icon |
|||
v-if="drop.show" |
|||
name="arrow-up-fill" |
|||
:size="18" |
|||
:color="activeColor" |
|||
></u-icon> |
|||
<u-icon v-else name="arrow-down-fill" :size="18"></u-icon> |
|||
</view> |
|||
</view> |
|||
</slot> |
|||
<view |
|||
class="u-dropdown-view" |
|||
:class="[drop.show ? 'u-dropdownlist-show' : '']" |
|||
:style="{ |
|||
background: bgcolor, |
|||
height: drop.show ? 'auto' : 0, |
|||
top: top + 'rpx' |
|||
}" |
|||
> |
|||
<slot name="dropdownbox"> |
|||
<view class="u-selected-list"> |
|||
<view |
|||
class="select-item u-flex u-align-center u-border-bottom u-align-between" |
|||
:style="{ color: select.select ? activeColor : '#666666' }" |
|||
@tap="handleSelected(select, drop.options)" |
|||
v-for="(select, n) in drop.options" |
|||
:key="n" |
|||
> |
|||
<text>{{ select.text }}</text> |
|||
<u-icon |
|||
v-if="select.select" |
|||
class="select-icon" |
|||
:color="activeColor" |
|||
size="35" |
|||
name="checkmark" |
|||
></u-icon> |
|||
</view> |
|||
</view> |
|||
</slot> |
|||
</view> |
|||
</view> |
|||
<u-mask |
|||
duration="100" |
|||
:show="dropdownShow" |
|||
@click="closeMask" |
|||
:z-index="zIndex" |
|||
></u-mask> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
const dropdownOption1 = [ |
|||
{ id: 0, text: '类型', value: '', select: false }, |
|||
{ id: 1, text: '全场券', value: 1, select: false }, |
|||
{ id: 2, text: '品类券', value: 2, select: false }, |
|||
{ id: 3, text: '单品券', value: 3, select: false }, |
|||
{ id: 4, text: '业务券', value: 4, select: false } |
|||
] |
|||
const dropdownOption2 = [ |
|||
{ id: 5, text: '状态', value: '', select: false }, |
|||
{ id: 6, text: '可使用', value: 1, select: false }, |
|||
{ id: 7, text: '已过期', value: 2, select: false } |
|||
] |
|||
const dropdownOption3 = [ |
|||
{ id: 8, text: '优惠力度', value: '', select: false }, |
|||
{ id: 9, text: '满100-20', value: 1, select: false }, |
|||
{ id: 10, text: '满100-50', value: 2, select: false } |
|||
] |
|||
|
|||
export default { |
|||
props: { |
|||
// 下拉框数据 |
|||
dropdownList: { |
|||
type: Array, |
|||
default: () => [ |
|||
{ show: false, options: dropdownOption1 }, |
|||
{ show: false, options: dropdownOption2 }, |
|||
{ show: false, options: dropdownOption3 } |
|||
], |
|||
required: true, |
|||
validator: value => |
|||
value.every(item => Array.isArray(item.options) && item.options.length) |
|||
}, |
|||
//背景颜色 |
|||
bgcolor: { |
|||
type: String, |
|||
default: 'none' |
|||
}, |
|||
//top rpx 选择框高度也用这个值 |
|||
top: { |
|||
type: Number, |
|||
default: 90 |
|||
}, |
|||
// 菜单标题和选项的选中态颜色 |
|||
activeColor: { |
|||
type: String, |
|||
default: '#e7141a' |
|||
}, |
|||
// mask和下拉列表的z-index |
|||
zIndex: { |
|||
type: [String, Number], |
|||
default: 21 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
dropdownShow: false, |
|||
dropdownListFromFather: this.dropdownList |
|||
} |
|||
}, |
|||
computed: {}, |
|||
methods: { |
|||
getTitle(item = []) { |
|||
const obj = item.find(v => v.select) || {} |
|||
if (obj.select) { |
|||
return obj.text |
|||
} else { |
|||
if (item[0]) { |
|||
item[0].select = true |
|||
return item[0].text |
|||
} |
|||
} |
|||
return '' |
|||
}, |
|||
handleDropClick(item) { |
|||
if (item.show) { |
|||
item.show = false |
|||
this.dropdownShow = false |
|||
return |
|||
} |
|||
this.dropdownListFromFather.map(item => { |
|||
item.show = false |
|||
}) |
|||
const t = setTimeout(() => { |
|||
item.show = true |
|||
this.dropdownShow = true |
|||
clearTimeout(t) |
|||
}, 100) |
|||
}, |
|||
closeMask() { |
|||
this.dropdownShow = false |
|||
this.dropdownListFromFather.map(item => { |
|||
item.show = false |
|||
}) |
|||
}, |
|||
handleSelected(select, options) { |
|||
options.map(item => { |
|||
item.select = false |
|||
}) |
|||
select.select = true |
|||
this.closeMask() |
|||
// 返回选中对象和下拉列表数组 |
|||
this.$emit('change', select, options) |
|||
} |
|||
}, |
|||
watch: { |
|||
dropdownList: { |
|||
handler(v) { |
|||
this.dropdownListFromFather = v |
|||
}, |
|||
deep: true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../libs/css/style.components.scss"; |
|||
.dropdown-list-wapper { |
|||
position: relative; |
|||
} |
|||
.u-dropdown-view { |
|||
width: 100%; |
|||
overflow: hidden; |
|||
position: absolute; |
|||
z-index: 9999; |
|||
left: 0; |
|||
right: 0; |
|||
/* opacity: 0; */ |
|||
visibility: hidden; |
|||
transition: height 0.5s ease-in-out; |
|||
.u-selected-list { |
|||
background-color: #fff; |
|||
.select-item { |
|||
color: #666666; |
|||
font-size: 28rpx; |
|||
padding: 30rpx 54rpx 30rpx 30rpx; |
|||
margin-left: 30rpx; |
|||
} |
|||
.select-item.selectActive { |
|||
color: #e7141a; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.u-dropdownlist-show { |
|||
/* opacity: 1; */ |
|||
visibility: visible; |
|||
} |
|||
.u-dropdown-list { |
|||
flex: 1; |
|||
// z-index: 22; |
|||
background: #fff; |
|||
position: static; |
|||
} |
|||
.drop-item { |
|||
justify-content: center; |
|||
color: #999999; |
|||
font-size: 30rpx; |
|||
> text { |
|||
margin-right: 10rpx; |
|||
} |
|||
/deep/ { |
|||
.uicon { |
|||
position: relative; |
|||
top: -2rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because one or more lines are too long
@ -1,3 +1,7 @@ |
|||
.demo { |
|||
|
|||
// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错 |
|||
@mixin vue-flex($direction: row) { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
flex-direction: $direction; |
|||
/* #endif */ |
|||
} |
|||
@ -1,38 +1,5 @@ |
|||
var array = require('./array.wxs'); |
|||
var object = require('./object.wxs'); |
|||
var PREFIX = 'van-'; |
|||
|
|||
function join(name, mods) { |
|||
name = PREFIX + name; |
|||
mods = mods.map(function(mod) { |
|||
return name + '--' + mod; |
|||
}); |
|||
mods.unshift(name); |
|||
return mods.join(' '); |
|||
} |
|||
|
|||
function traversing(mods, conf) { |
|||
if (!conf) { |
|||
return; |
|||
} |
|||
|
|||
if (typeof conf === 'string' || typeof conf === 'number') { |
|||
mods.push(conf); |
|||
} else if (array.isArray(conf)) { |
|||
conf.forEach(function(item) { |
|||
traversing(mods, item); |
|||
}); |
|||
} else if (typeof conf === 'object') { |
|||
object.keys(conf).forEach(function(key) { |
|||
conf[key] && mods.push(key); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
function bem(name, conf) { |
|||
var mods = []; |
|||
traversing(mods, conf); |
|||
return join(name, mods); |
|||
|
|||
} |
|||
|
|||
module.exports.bem = bem; |
|||
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,139 +1 @@ |
|||
/* eslint-disable */ |
|||
var provinceData = [{ |
|||
"label": "北京市", |
|||
"value": "11" |
|||
}, |
|||
{ |
|||
"label": "天津市", |
|||
"value": "12" |
|||
}, |
|||
{ |
|||
"label": "河北省", |
|||
"value": "13" |
|||
}, |
|||
{ |
|||
"label": "山西省", |
|||
"value": "14" |
|||
}, |
|||
{ |
|||
"label": "内蒙古自治区", |
|||
"value": "15" |
|||
}, |
|||
{ |
|||
"label": "辽宁省", |
|||
"value": "21" |
|||
}, |
|||
{ |
|||
"label": "吉林省", |
|||
"value": "22" |
|||
}, |
|||
{ |
|||
"label": "黑龙江省", |
|||
"value": "23" |
|||
}, |
|||
{ |
|||
"label": "上海市", |
|||
"value": "31" |
|||
}, |
|||
{ |
|||
"label": "江苏省", |
|||
"value": "32" |
|||
}, |
|||
{ |
|||
"label": "浙江省", |
|||
"value": "33" |
|||
}, |
|||
{ |
|||
"label": "安徽省", |
|||
"value": "34" |
|||
}, |
|||
{ |
|||
"label": "福建省", |
|||
"value": "35" |
|||
}, |
|||
{ |
|||
"label": "江西省", |
|||
"value": "36" |
|||
}, |
|||
{ |
|||
"label": "山东省", |
|||
"value": "37" |
|||
}, |
|||
{ |
|||
"label": "河南省", |
|||
"value": "41" |
|||
}, |
|||
{ |
|||
"label": "湖北省", |
|||
"value": "42" |
|||
}, |
|||
{ |
|||
"label": "湖南省", |
|||
"value": "43" |
|||
}, |
|||
{ |
|||
"label": "广东省", |
|||
"value": "44" |
|||
}, |
|||
{ |
|||
"label": "广西壮族自治区", |
|||
"value": "45" |
|||
}, |
|||
{ |
|||
"label": "海南省", |
|||
"value": "46" |
|||
}, |
|||
{ |
|||
"label": "重庆市", |
|||
"value": "50" |
|||
}, |
|||
{ |
|||
"label": "四川省", |
|||
"value": "51" |
|||
}, |
|||
{ |
|||
"label": "贵州省", |
|||
"value": "52" |
|||
}, |
|||
{ |
|||
"label": "云南省", |
|||
"value": "53" |
|||
}, |
|||
{ |
|||
"label": "西藏自治区", |
|||
"value": "54" |
|||
}, |
|||
{ |
|||
"label": "陕西省", |
|||
"value": "61" |
|||
}, |
|||
{ |
|||
"label": "甘肃省", |
|||
"value": "62" |
|||
}, |
|||
{ |
|||
"label": "青海省", |
|||
"value": "63" |
|||
}, |
|||
{ |
|||
"label": "宁夏回族自治区", |
|||
"value": "64" |
|||
}, |
|||
{ |
|||
"label": "新疆维吾尔自治区", |
|||
"value": "65" |
|||
}, |
|||
{ |
|||
"label": "台湾", |
|||
"value": "66" |
|||
}, |
|||
{ |
|||
"label": "香港", |
|||
"value": "67" |
|||
}, |
|||
{ |
|||
"label": "澳门", |
|||
"value": "68" |
|||
} |
|||
] |
|||
export default provinceData; |
|||
var provinceData=[{"label":"北京市","value":"11"},{"label":"天津市","value":"12"},{"label":"河北省","value":"13"},{"label":"山西省","value":"14"},{"label":"内蒙古自治区","value":"15"},{"label":"辽宁省","value":"21"},{"label":"吉林省","value":"22"},{"label":"黑龙江省","value":"23"},{"label":"上海市","value":"31"},{"label":"江苏省","value":"32"},{"label":"浙江省","value":"33"},{"label":"安徽省","value":"34"},{"label":"福建省","value":"35"},{"label":"江西省","value":"36"},{"label":"山东省","value":"37"},{"label":"河南省","value":"41"},{"label":"湖北省","value":"42"},{"label":"湖南省","value":"43"},{"label":"广东省","value":"44"},{"label":"广西壮族自治区","value":"45"},{"label":"海南省","value":"46"},{"label":"重庆市","value":"50"},{"label":"四川省","value":"51"},{"label":"贵州省","value":"52"},{"label":"云南省","value":"53"},{"label":"西藏自治区","value":"54"},{"label":"陕西省","value":"61"},{"label":"甘肃省","value":"62"},{"label":"青海省","value":"63"},{"label":"宁夏回族自治区","value":"64"},{"label":"新疆维吾尔自治区","value":"65"},{"label":"台湾","value":"66"},{"label":"香港","value":"67"},{"label":"澳门","value":"68"}];export default provinceData; |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue