|
|
@ -1,22 +1,29 @@ |
|
|
|
<template> |
|
|
|
<view class="main"> |
|
|
|
<view class="input" :style="disabled ? 'background-color:#f5f7fa' : ''"> |
|
|
|
<input @click="showModal" v-model="_value" :style="disabled ? 'color:#c0c4cc' : ''" :placeholder="placeholder" disabled /> |
|
|
|
<u-icon v-if="clearable && !disabled && showClearable" @click="empty" name="close-circle-fill" color="#C0C4CC" size="32"></u-icon> |
|
|
|
<view :style="disabled ? 'background-color:#f5f7fa' : ''" class="input"> |
|
|
|
<input |
|
|
|
:placeholder="placeholder" |
|
|
|
:style="disabled ? 'color:#c0c4cc' : ''" |
|
|
|
@click="showModal" |
|
|
|
class="text-sm" |
|
|
|
disabled |
|
|
|
v-model="_value" |
|
|
|
/> |
|
|
|
<u-icon @click="empty" color="#C0C4CC" name="close-circle-fill" size="32" v-if="clearable && !disabled && showClearable"></u-icon> |
|
|
|
</view> |
|
|
|
<view class="select-modal" :class="isShowModal ? 'show' : ''" @tap="hideModal"> |
|
|
|
<view class="select-dialog" @tap.stop="" :style="{ backgroundColor: bgColor }"> |
|
|
|
<view :class="isShowModal ? 'show' : ''" @tap="hideModal" class="select-modal"> |
|
|
|
<view :style="{ backgroundColor: bgColor }" @tap.stop class="select-dialog"> |
|
|
|
<view class="select-bar bg-white"> |
|
|
|
<view class="action text-gray" @tap="cancelClick">{{ cancelText }}</view> |
|
|
|
<view class="action text-blue" @tap="confirmClick">{{ confirmText }}</view> |
|
|
|
<view @tap="cancelClick" class="action text-gray">{{ cancelText }}</view> |
|
|
|
<view @tap="confirmClick" class="action text-blue">{{ confirmText }}</view> |
|
|
|
</view> |
|
|
|
<view class="select-content"> |
|
|
|
<view |
|
|
|
class="select-item" |
|
|
|
v-for="(item, index) in list" |
|
|
|
:key="index" |
|
|
|
:style="valueIndexOf(item) ? 'color:' + selectColor + ';background-color:' + selectBgColor + ';' : 'color:' + color + ';'" |
|
|
|
@click="select(item)" |
|
|
|
class="select-item" |
|
|
|
v-for="(item, index) in list" |
|
|
|
> |
|
|
|
<view class="title">{{ getLabelKeyValue(item) }}</view> |
|
|
|
<u-icon name="checkbox-mark" v-if="valueIndexOf(item)"></u-icon> |
|
|
|