Parcourir la source

单多选搜索组件优化

master
yxq il y a 2 semaines
Parent
révision
04c562bdb8
2 fichiers modifiés avec 39 ajouts et 33 suppressions
  1. +32
    -25
      monitorMobile/components/selectSearch.vue
  2. +7
    -8
      monitorMobile/pages/login.vue

+ 32
- 25
monitorMobile/components/selectSearch.vue Voir le fichier

@@ -9,20 +9,21 @@
{{popupTitle}}
</view>
<view v-if="filterable" style="padding: 0rpx 30rpx 30rpx 30rpx;">
<u-search height="90rpx" :inputStyle="{fontSize:'30rpx'}" v-model="searchText" :placeholder="searchPlaceholder" shape="square"
:showAction="false"></u-search>
<u-search height="90rpx" :inputStyle="{fontSize:'30rpx'}" v-model="searchText"
:placeholder="searchPlaceholder" shape="square" :showAction="false"></u-search>
</view>
<u-radio-group v-if="!multiple" v-model="value_" iconPlacement="right" placement="column" borderBottom>
<u-radio labelSize="30rpx" v-show="item.label.includes(searchText)" v-for="(item,index) in options" :key="index"
:label="item.label" :name="item.value"></u-radio>
<u-radio labelSize="30rpx" v-show="item.label.includes(searchText)" v-for="(item,index) in options"
:key="index" :label="item.label" :name="item.value"></u-radio>
</u-radio-group>
<u-checkbox-group v-else v-model="value_" iconPlacement="right" placement="column" borderBottom>
<u-checkbox labelSize="30rpx" v-show="item.label.includes(searchText)" v-for="(item, index) in options" :key="index"
:label="item.label" :name="item.value">
<u-checkbox labelSize="30rpx" v-show="item.label.includes(searchText)"
v-for="(item, index) in options" :key="index" :label="item.label" :name="item.value">
</u-checkbox>
</u-checkbox-group>
<view style="padding: 36rpx 50rpx">
<u-button @click="cofirm" type="primary" style="border-radius: 45rpx;height: 90rpx;font-weight: 700;font-size: 32rpx;"
<u-button @click="cofirm" type="primary"
style="border-radius: 45rpx;height: 90rpx;font-weight: 700;font-size: 32rpx;"
text="确定"></u-button>
</view>
</view>
@@ -86,13 +87,19 @@
};
},
mounted() {
if (this.multiple) this.value_ = []
this.value_ = JSON.parse(JSON.stringify(this.value))
if (!this.multiple) {
let obj = this.options.find(e1 => e1.value == this.value)
if (obj) this.title_ = obj.label
let obj = this.options.find(e1 => e1.value == this.value_)
if (obj) {
this.title_ = obj.label
this.$emit("update:title", this.title_)
}else{
this.$emit("update:title", '')
}
} else {
let arr = this.options.filter(e1 => this.value.includes(e1.value))
let arr = this.options.filter(e1 => this.value_.includes(e1.value))
this.cellValue = arr.map(e => e.label)
this.$emit("update:title", this.cellValue)
}
},
methods: {
@@ -100,15 +107,7 @@
this.show = false
},
open() {
if (this.multiple) this.value_ = []
if (!this.multiple) {
let obj = this.options.find(e1 => e1.value == this.value)
if (obj) this.title_ = obj.label
} else {
let arr = this.options.filter(e1 => this.value.includes(e1.value))
this.cellValue = arr.map(e => e.label)
}
this.value_ = this.value
this.value_ = JSON.parse(JSON.stringify(this.value))
this.searchText = ''
this.show = true
},
@@ -117,10 +116,16 @@
this.$emit("change", this.value_)
if (!this.multiple) {
let obj = this.options.find(e1 => e1.value == this.value_)
if (obj) this.title_ = obj.label
if (obj) {
this.title_ = obj.label
this.$emit("update:title", this.title_ )
}else{
this.$emit("update:title", '')
}
} else {
let arr = this.options.filter(e1 => this.value_.includes(e1.value))
this.cellValue = arr.map(e => e.label)
this.$emit("update:title", this.cellValue)
}
this.close()
},
@@ -136,18 +141,20 @@
line-height: 100rpx;
}

.u-checkbox-group,.u-radio-group {
.u-checkbox-group,
.u-radio-group {
width: 92%;
height: 780rpx;
overflow-y: auto;
padding: 0 30rpx;
box-shadow: inset 0 0 20rpx rgba(0, 0, 0, 0.08);

.u-radio,.u-checkbox {
.u-radio,
.u-checkbox {
height: 98rpx;
box-sizing: border-box;
padding-bottom: 0rpx!important;
margin-top: 0rpx!important;
padding-bottom: 0rpx !important;
margin-top: 0rpx !important;
}
}



+ 7
- 8
monitorMobile/pages/login.vue Voir le fichier

@@ -11,14 +11,13 @@
账号登录
</view>
<u--form labelPosition="left" :model="form" labelWidth="30rpx" :rules="rules" ref="uForm">
<u-form-item prop="name">
<u--input v-model="form.name" border="none" placeholder="请输入账号"
<u-form-item prop="account">
<u--input v-model="form.account" border="none" placeholder="请输入账号"
:customStyle="{backgroundColor:'#F5F5F5',height:'98rpx',borderRadius:'20rpx',padding:'0rpx 30rpx'}"></u--input>
</u-form-item>
<u-form-item prop="pass">
<u--input v-model="form.pass" :type="passType" border="none" placeholder="请输入密码"
<u-form-item prop="password">
<u--input v-model="form.password" :type="passType" border="none" placeholder="请输入密码"
:customStyle="{backgroundColor:'#F5F5F5',height:'98rpx',borderRadius:'20rpx',padding:'0rpx 30rpx'}">
<!-- <i slot="suffix" class="icon-style" :class="elIcon" autocomplete="auto" @click="flag = !flag" /> -->
<view slot="suffix">
<u-icon v-show="passType=='text'" name="eye" color="#777777" size="38rpx"
@click="passType='password'"></u-icon>
@@ -42,13 +41,13 @@
data() {
return {
form: {
name: '',
pass: '',
account: '',
password: '',
},
passType: 'password',
isLoading: false,
rules: {
name: [{
account: [{
required: true,
message: '请输入账号',
trigger: ['blur', 'change']


Chargement…
Annuler
Enregistrer