123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321 |
- <template>
- <view>
- <view class="u-dropdown-select" :class="{ 'active': showOptions }" @touchstart="touchStart">
- <view class="u-dropdown-label">{{ label || placeholder }}</view>
- <van-icon name="arrow-down" />
- </view>
- <view v-if="showOptions" class="u-dropdown-select-mask" :style="{ 'top': offsetTop +'px' }" @click="showOptions = false"></view>
- <view v-if="showOptions" class="u-dropdown-panel" :style="{ 'top': offsetTop +'px' }">
- <view v-if="tabs.length" class="u-dropdown-tabs">
- <u-tabs :active.sync="tabActive" :tabs="tabs" tab-style="tag" @change="tabChange"/>
- </view>
- <view class="u-dropdown-options">
- <template v-if="list.length">
- <template v-for="(item, index) in list">
- <view class="u-dropdown-option" :class="{ 'active': item.active }" @click="clickOption(item, list, index)">
- <view>{{ item.label }}</view>
- <van-icon class="van-icon" name="arrow" />
- </view>
- </template>
- </template>
- <van-empty v-else class="van-empty" description="没有数据"/>
- </view>
- <view class="u-dropdown-action">
- <van-button type="info" class="button-info" block @click="reset">重置</van-button>
- <van-button type="primary" class="button-primary" block @click="confirm">确定</van-button>
- </view>
- </view>
- </view>
- </template>
- <script>
- import UTabs from '@/components/common/u-tabs/index.vue'
-
- export default {
- options: {
- styleIsolation: 'shared'
- },
- components: {
- UTabs
- },
- props: {
- placeholder: String,
- options: Array,
- dataApi: Function,
- dataParams: Object,
- value: [String, Number]
- },
-
- watch: {
- options() {
- this.initComponent()
- }
- },
- data() {
- return {
- showOptions: false,
- offsetTop: 0,
- tabActive: 3,
- tabs: [],
- list: [],
- label: ''
- }
- },
- created() {
- this.initComponent()
- console.log('value:' + this.value)
- },
- mounted() {
-
- },
- methods: {
- initComponent() {
- if (this.options) {
- this.setOptions(this.options)
- }
- if (this.value) {
- this.setLabel(this.value)
- }
- if (this.dataApi) {
- this.dataApi(this.dataParams || {}).then(res => {
- this.setOptions(res.data)
- })
- }
- },
- tabChange(e) {
- this.list = this.tabs[e.detail.index].children
- },
- setOptions(options) {
- if (options) {
- if (!options.length) {
- this.tabs = []
- this.list = []
- } else if (!options[0].children || options[0].children.length === 0) {
- this.tabs = []
- this.list = options.map(v => {
- if (v.value === this.value) {
- v.active = true
- } else {
- v.active = false
- }
- return v
- })
- } else {
- this.tabs = options.map(v => {
- return {
- label: v.label,
- value: v.value,
- children: v.children || []
- }
- })
- this.list = this.tabs[0].children.map(v => {
- if (v.value === this.value) {
- v.active = true
- } else {
- v.active = false
- }
- return v
- })
- this.tabActive = this.tabs[0].value
- }
- }
- },
- setLabel(value) {
- const option = this.getSelectOption(value)
- if (option) {
- if (option.tab) {
- this.label = option.tab.label + ' / ' + option.item.label
- } else {
- this.label = option.label
- }
- } else {
- this.label = ''
- }
- },
- reset() {
- this.cleanListActive()
- this.label = ''
- this.showOptions = false
- this.$emit('input', null)
- this.$emit('change', {
- detail: {
- value: null
- }
- })
- },
- confirm() {
- this.showOptions = false
- let val = null
- const option = this.getSelectOption()
- if (option) {
- this.setLabel()
- if (option.tab) {
- val = option.item.value
- } else {
- val = option.value
- }
- this.$emit('input', val)
- }
- this.$emit('change', {
- detail: {
- value: val
- }
- })
- },
- getSelectOption(value) {
- if (this.tabs.length) {
- for (const tab of this.tabs) {
- for (const item of tab.children) {
- if (item.active || item.value === value) {
- return {
- tab: tab,
- item: item
- }
- }
- }
- }
- } else {
- for (const item of this.list) {
- if (item.active || item.value === value) {
- return item
- }
- }
- }
- },
- cleanListActive() {
- if (this.tabs && this.tabs.length) {
- for (const tab of this.tabs) {
- tab.children.forEach(item => {
- this.$set(item, 'active', false)
- })
- }
- }
- this.list.forEach(item => {
- this.$set(item, 'active', false)
- })
-
-
-
-
-
-
- },
- clickOption(item, list, index) {
- this.cleanListActive()
- this.$set(item, 'active', true)
- this.$set(list, index, item)
- },
- touchStart() {
- this.showOptions = !this.showOptions
- const query = uni.createSelectorQuery().in(this)
- query.select('.u-dropdown-select').boundingClientRect(data => {
- if (data) {
- this.offsetTop = data.top + data.height
-
- console.log('offsetTop:', data.top);
- }
- }).exec()
- console.log(this.showOptions)
- if (this.showOptions) {
- this.$emit('dropdown')
- }
- },
- showDropdown() {
- this.showOptions = true
- },
- hideDropdown() {
- this.showOptions = false
- }
- }
- }
- </script>
- <style lang="scss">
- .u-dropdown-tabs{
- padding: 10rpx 0;
- margin-top: 20rpx;
- }
- .van-empty{
- --image-width: 160rpx;
- --image-height: 160rpx;
- }
- .u-dropdown-select{
- @include display-flex-between;
- min-width: 211rpx;
- height: 50rpx;
- padding: 0 10rpx;
- border: $borderLight;
- border-radius: 8rpx;
- background-color: #FFFFFF;
- border-radius: 8rpx;
- border: 1rpx solid #D9D9D9;
- &.active{
- background-color: $buttonPrimaryColor;
- border-color: $buttonPrimaryColor;
- color: white;
- }
- .van-icon{
- font-size: 15rpx;
- }
- }
- .u-dropdown-label{
- max-width: 100%;
- @include text-ellipsis;
- font-size: $fontSize2;
- }
- .u-dropdown-tabs{
- --tabs-line-height: 44px;
- --tabs-card-height: 30px;
- --tabs-bottom-bar-height: 0rpx;
- --tab-active-text-color: #E57519;
- }
- .u-dropdown-panel{
- position: fixed;
- left: 0;
- top: 0;
- display: block;
- width: 100%;
- z-index: 9999;
- background-color: white;
- }
- .u-dropdown-options{
- min-height: 100rpx;
- max-height: 400rpx;
- padding: 20rpx;
- overflow-y: auto;
- }
- .u-dropdown-option{
- line-height: 50rpx;
- @include display-flex-between;
- font-size: $fontSize3;
- &.active{
- color: $buttonPrimaryColor;
- }
- }
- .u-dropdown-action{
- display: grid;
- grid-template-columns: 1fr 1fr;
- .van-button{
- border-radius: 0rpx;
- height: 80rpx;
- font-size: $fontSize3;
- }
- }
- .van-empty__description{
- font-size: $fontSize3;
- margin-top: 0rpx;
- }
- .button-info{
- --button-info-background-color: black;
- --button-info-border-color: black;
- --button-info-color: white;
- }
- .u-dropdown-select-mask{
- position: fixed;
- display: block;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 9998;
- background-color: rgba(0, 0, 0, 0.5);
- }
- </style>
|