123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440 |
- <template>
- <view class="uni-select-cy" :style="{ 'z-index': zindex }">
- <view class="uni-select-cy-select" :class="{ active: active }" @click.stop="handleSelect">
- <!-- 禁用mask -->
- <view class="uni-disabled" v-if="disabled"></view>
- <!-- 清空 -->
- <view class="close-icon close-postion" v-if="realValue.length && !active && !disabled && showClearIcon">
- <text @click.stop="handleRemove(null)"></text>
- </view>
- <!-- 显示框 -->
- <view
- class="uni-select-multiple"
- v-show="realValue.length"
- :style="{ display: realValue.length == 0 && showplaceholder ? 'none' : 'flex' }"
- >
- <view class="uni-select-multiple-item" v-for="(item, index) in realValue" :key="index">
- <view class="uni-select-multiple-item-row">{{ item }}</view>
- <view class="close-icon" v-if="showValueClear">
- <text @click.stop="handleRemove(index)"></text>
- </view>
- </view>
- </view>
- <!-- 为空时的显示文案 -->
- <view v-if="realValue.length == 0 && showplaceholder">{{ placeholder }}</view>
- <!-- 禁用图标 -->
- <view class="uni-select-cy-icon" :class="{ disabled: disabled }"><text></text></view>
- </view>
- <!-- 下拉选项 -->
- <scroll-view ref="scrollRef" class="uni-select-cy-options" :scroll-y="true" v-show="active" @scrolltolower="scrolltolower">
- <template>
- <view
- class="uni-select-cy-item"
- :class="{ active: realValue.includes(item[svalue]) }"
- v-for="(item, index) in options"
- :key="index"
- @click.stop="handleChange(index, item)"
- >
- <view class="check-icon"></view>
- <view class="check-title">{{ item[slabel] }}</view>
- </view>
- <view class="select-contain">
- <button class="select-contain-btn" @click="active = false">确定</button>
- </view>
- </template>
- </scroll-view>
- </view>
- </template>
- <script>
- export default {
- name: 'select-cy',
- props: {
- //是否显示全部清空按钮
- showClearIcon: {
- type: Boolean,
- default: false
- },
- //是否显示单个删除
- showValueClear: {
- type: Boolean,
- default: true
- },
- zindex: {
- type: Number,
- default: 999
- },
- //禁用组件
- disabled: {
- type: Boolean,
- default: false
- },
- options: {
- type: Array,
- default() {
- return []
- }
- },
- value: {
- type: Array,
- default() {
- return []
- }
- },
- placeholder: {
- type: String,
- default: '请选择'
- },
- showplaceholder: {
- type: Boolean,
- default: true
- },
- slabel: {
- type: String,
- default: 'label'
- },
- svalue: {
- type: String,
- default: 'value'
- },
- // 是否开启分页
- isPaging: {
- type: Boolean,
- default: false
- },
- },
- data() {
- return {
- active: false, //组件是否激活,
- changevalue: [], //搜索框同步
- realValue: [],
- }
- },
- watch: {
- value: {
- handler(val) {
- console.log('value', val)
- //初始化
- this.init()
- },
- deep: true,
- }
- },
- mounted() {
- this.init()
- },
- methods: {
- close() {
- this.active = false
- },
- init() {
- if (this.value.length > 0) {
- const dataList = this.value.map(i => i.value)
- this.changevalue = this.options.map(item => {
- if (item.value.includes(dataList)) {
- return item.value
- }
- })
- this.realValue = dataList
- } else {
- this.changevalue = []
- this.realValue = []
- }
- },
- scrolltolower() {
- if (this.isPaging) {
- this.$emit('scrolltolower')
- }
- },
- //点击展示选项
- handleSelect() {
- if (this.disabled) return
- this.active = !this.active
- },
- //移除数据
- handleRemove(index) {
- if (index === null) {
- this.realValue = []
- this.changevalue = []
- } else {
- this.realValue.splice(index, 1)
- this.changevalue.splice(index, 1)
- }
- this.$emit('change', this.changevalue, this.realValue)
- },
- //点击组件列
- handleChange(index, item) {
- let arrIndex = this.realValue.indexOf(item[this.svalue])
- if (arrIndex > -1) {
- this.changevalue.splice(arrIndex, 1)
- this.realValue.splice(arrIndex, 1)
- } else {
- this.changevalue.push(item)
- this.realValue.push(item[this.svalue])
- }
- this.$emit('change', this.realValue)
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .uni-select-cy {
- position: relative;
- z-index: 999;
- .uni-select-mask {
- width: 100%;
- height: 100%;
- }
- /* 删除按钮样式*/
- .close-icon {
- height: 100%;
- width: 15px;
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 3;
- cursor: pointer;
- text {
- position: relative;
- background: #fff;
- width: 13px;
- height: 13px;
- border-radius: 50%;
- border: 1px solid #bbb;
- &::before,
- &::after {
- content: "";
- position: absolute;
- left: 20%;
- top: 50%;
- height: 1px;
- width: 60%;
- transform: rotate(45deg);
- background-color: #bbb;
- }
- &::after {
- transform: rotate(-45deg);
- }
- }
- }
- //所有清空的定位
- .close-postion {
- position: absolute;
- right: 35px;
- top: 0;
- height: 100%;
- width: 15px;
- }
- /* 多选盒子 */
- .uni-select-multiple {
- overflow-x: auto;
- display: flex;
- flex: 1;
- width: 0;
- flex-wrap: nowrap;
- .uni-select-multiple-item {
- // background: #bbb;
- margin-right: 5rpx;
- padding: 2rpx 4rpx;
- border-radius: 4rpx;
- color: #333333;
- display: flex;
- flex: 0 0 140rpx;
- .uni-select-multiple-item-row{
- flex: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
- }
- // select部分
- .uni-select-cy-select {
- user-select: none;
- position: relative;
- z-index: 3;
- min-height: 90rpx;
- padding: 0 60rpx 0 20rpx;
- box-sizing: border-box;
- border-radius: 4px;
- border: 1rpx solid #cccccc;
- display: flex;
- align-items: center;
- font-size: 14px;
- color: #999;
- flex-wrap: nowrap;
- .uni-disabled {
- position: absolute;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 19;
- cursor: no-drop;
- background: rgba(255, 255, 255, .5);
- }
- .uni-select-cy-input {
- font-size: 28rpx;
- color: #999;
- display: block;
- width: 96%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- line-height: 30px;
- box-sizing: border-box;
- &.active {
- color: #333;
- }
- }
- .uni-select-cy-icon {
- cursor: pointer;
- position: absolute;
- right: 0;
- top: 0;
- height: 100%;
- width: 30px;
- display: flex;
- align-items: center;
- justify-content: center;
- &::before {
- content: "";
- width: 1px;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- // background-color: #e5e5e5;
- }
- text {
- display: block;
- // width: 0;
- // height: 0;
- // border-width: 12rpx 12rpx 0;
- // border-style: solid;
- // border-color: #bbb transparent transparent;
- transition: .3s;
- }
- text::after {
- content: '\276F';
- }
- &.disabled {
- cursor: no-drop;
- text {
- width: 20rpx;
- height: 20rpx;
- border: 2px solid #ff0000;
- border-radius: 50%;
- transition: .2s;
- position: relative;
- z-index: 999;
- &::after {
- content: "";
- position: absolute;
- top: 50%;
- left: 0;
- width: 100%;
- height: 2px;
- margin-top: -1px;
- background-color: #ff0000;
- transform: rotate(45deg);
- }
- }
- }
- }
- &.active .uni-select-cy-icon {
- text {
- transform: rotate(90deg);
- }
- }
- }
- // options部分
- .uni-select-cy-options {
- user-select: none;
- position: absolute;
- top: calc(100% + 5px);
- left: 0;
- width: 100%;
- height: 400rpx;
- border-radius: 4px;
- border: 1rpx solid #cccccc;
- background: #fff;
- padding: 33rpx 24rpx;
- box-sizing: border-box;
- z-index: 9;
- .uni-select-cy-item {
- box-sizing: border-box;
- cursor: pointer;
- // line-height: 2.5;
- margin-bottom: 25rpx;
- transition: .3s;
- font-size: 26rpx;
- color: #333333;
- display: flex;
- justify-content: space-between;
- .check-icon {
- width: 24rpx;
- height: 24rpx;
- border: 1px solid #CCCCCC;
- margin-top: 6rpx;
- }
- .check-title {
- width: 395rpx;
- }
- &.active {
- .check-icon {
- width: 36rpx;
- height: 36rpx;
- border: none;
- background: url(https://static.caimei365.com/app/img/icon/icon-checked.png) center;
- background-size: contain;
- margin-top: 0;
- border: none;
- }
- // background-color: #f5f7fa &:hover {
- // background-color: #f5f7fa
- // }
- }
- // &:hover {
- // background-color: #f5f5f5;
- // }
- }
- .select-contain {
- padding: 20rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- .select-contain-btn {
- width: 210rpx;
- height: 60rpx;
- background: #FF5B00;
- color: #fff;
- line-height: 60rpx;
- }
- }
- }
- }
- </style>
|