提交 9c0be901 编写于 作者: KK's avatar KK

解决事件冒泡问题 && 格式化组件

上级 955cebc1
...@@ -51,6 +51,7 @@ ...@@ -51,6 +51,7 @@
} }
.select_text { .select_text {
height: 43px; height: 43px;
padding-right: 25px;
line-height: 40px; line-height: 40px;
text-align: right; text-align: right;
color: #969696; color: #969696;
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="app-mobile-select-drop-down"> <div class="app-mobile-select-drop-down">
<div class="cancel-icon" v-if="curvalue"><ion-icon name="close-circle-outline" @click="onClear"></ion-icon></div> <div class="cancel-icon" v-if="curvalue"><ion-icon name="close-circle-outline" @click="onClear"></ion-icon></div>
<div v-if="curvalue== null || curvalue==''" class="ion-select-icon"></div> <div v-if="curvalue== null || curvalue==''" class="ion-select-icon"></div>
<ion-input class="select_text" readonly="true" :value="curvalue" :ref="name+'input'" style="height: 43px;" @ionFocus="openSelect"/> <div class="select_text" @click="openSelect" >{{curvalue}}</div>
<ion-select :selected-text="selectValue" :ref="name+'select'" v-show="false" :disabled="disabled " @ionChange="change" interface="action-sheet" :cancel-text="$t('app.button.cancel')" @ionCancel="cancel"> <ion-select :selected-text="selectValue" :ref="name+'select'" v-show="false" :disabled="disabled " @ionChange="change" interface="action-sheet" :cancel-text="$t('app.button.cancel')" @ionCancel="cancel">
<ion-select-option v-for="option of items" :key="option.value" :value="option.value">{{option.text}}</ion-select-option> <ion-select-option v-for="option of items" :key="option.value" :value="option.value">{{option.text}}</ion-select-option>
</ion-select> </ion-select>
...@@ -199,7 +199,7 @@ export default class AppSelectDropDown extends Vue { ...@@ -199,7 +199,7 @@ export default class AppSelectDropDown extends Vue {
* @type {string} * @type {string}
* @memberof AppSelectDropDown * @memberof AppSelectDropDown
*/ */
public selectValue :any= ""; public selectValue: any = "";
/** /**
...@@ -219,7 +219,7 @@ export default class AppSelectDropDown extends Vue { ...@@ -219,7 +219,7 @@ export default class AppSelectDropDown extends Vue {
*/ */
get curvalue() { get curvalue() {
if (this.value && this.items.length > 0) { // 判断是否拿到表单传来的值、列表项是否加载完成 if (this.value && this.items.length > 0) { // 判断是否拿到表单传来的值、列表项是否加载完成
if (this.valueitem && this.items.every((item:any)=>{return item[this.deKeyField] != this.value })) { if (this.valueitem && this.items.every((item: any) => { return item[this.deKeyField] != this.value })) {
return this.value; return this.value;
} }
} }
...@@ -246,8 +246,8 @@ export default class AppSelectDropDown extends Vue { ...@@ -246,8 +246,8 @@ export default class AppSelectDropDown extends Vue {
@Watch('value') @Watch('value')
public onValueChange(newVal: any, oldVal: any) { public onValueChange(newVal: any, oldVal: any) {
if (oldVal && !newVal) { if (oldVal && !newVal) {
this.$nextTick(()=>{ this.$nextTick(() => {
let select :any = this.$refs[this.name+'select']; let select: any = this.$refs[this.name + 'select'];
if (select) { if (select) {
select.value = null; select.value = null;
} }
...@@ -265,7 +265,7 @@ export default class AppSelectDropDown extends Vue { ...@@ -265,7 +265,7 @@ export default class AppSelectDropDown extends Vue {
this.items.push({ text: newVal, value: value }); this.items.push({ text: newVal, value: value });
} }
this.onSearch(newVal, false); this.onSearch(newVal, false);
this.$store.commit('setSelectStatus',true); this.$store.commit('setSelectStatus', true);
} }
} }
...@@ -276,7 +276,7 @@ export default class AppSelectDropDown extends Vue { ...@@ -276,7 +276,7 @@ export default class AppSelectDropDown extends Vue {
*/ */
public mounted() { public mounted() {
this.onSearch(null, true); this.onSearch(null, true);
this.$store.commit('setSelectStatus',true); this.$store.commit('setSelectStatus', true);
} }
/** /**
...@@ -287,7 +287,7 @@ export default class AppSelectDropDown extends Vue { ...@@ -287,7 +287,7 @@ export default class AppSelectDropDown extends Vue {
this.open = flag; this.open = flag;
if (this.open) { if (this.open) {
this.onSearch(this.curvalue, true); this.onSearch(this.curvalue, true);
this.$store.commit('setSelectStatus',true); this.$store.commit('setSelectStatus', true);
} }
} }
/** /**
...@@ -312,7 +312,7 @@ export default class AppSelectDropDown extends Vue { ...@@ -312,7 +312,7 @@ export default class AppSelectDropDown extends Vue {
this.inputState = false; this.inputState = false;
Object.assign(_param, { query: query }); Object.assign(_param, { query: query });
if (!this.acParams.serviceName || !this.acParams.interfaceName) { if (!this.acParams.serviceName || !this.acParams.interfaceName) {
this.$notice.error(`${this.$t('associated_entity')}` ); this.$notice.error(`${this.$t('associated_entity')}`);
return; return;
} }
const appEntityServiceConstructor = window.appEntityServiceConstructor; const appEntityServiceConstructor = window.appEntityServiceConstructor;
...@@ -323,7 +323,7 @@ export default class AppSelectDropDown extends Vue { ...@@ -323,7 +323,7 @@ export default class AppSelectDropDown extends Vue {
this.items = response.data; this.items = response.data;
this.result(this.items); this.result(this.items);
} else { } else {
this.$notice.error(`${this.$t('error_request')}` ); this.$notice.error(`${this.$t('error_request')}`);
} }
} }
} }
...@@ -369,7 +369,7 @@ export default class AppSelectDropDown extends Vue { ...@@ -369,7 +369,7 @@ export default class AppSelectDropDown extends Vue {
* @memberof AppSelectDropDown * @memberof AppSelectDropDown
*/ */
public onSelect(val: string) { public onSelect(val: string) {
let index = this.items.findIndex((item) => {return item[this.deKeyField] == val} ); let index = this.items.findIndex((item) => { return item[this.deKeyField] == val });
if (index >= 0) { if (index >= 0) {
this.onACSelect(this.items[index]); this.onACSelect(this.items[index]);
} }
...@@ -394,7 +394,7 @@ export default class AppSelectDropDown extends Vue { ...@@ -394,7 +394,7 @@ export default class AppSelectDropDown extends Vue {
this.$emit('formitemvaluechange', { name: this.name, value: '' }); this.$emit('formitemvaluechange', { name: this.name, value: '' });
} }
this.selectValue = null; this.selectValue = null;
let select :any = this.$refs[this.name+'select']; let select: any = this.$refs[this.name + 'select'];
select.value = null; select.value = null;
this.$forceUpdate(); this.$forceUpdate();
} }
...@@ -652,7 +652,7 @@ export default class AppSelectDropDown extends Vue { ...@@ -652,7 +652,7 @@ export default class AppSelectDropDown extends Vue {
return false; return false;
} }
// 导航参数处理 // 导航参数处理
const {context, param} = this.$viewTool.formatNavigateParam( this.navigateContext, this.navigateParam, this.context, this.viewparams, this.data ); const { context, param } = this.$viewTool.formatNavigateParam(this.navigateContext, this.navigateParam, this.context, this.viewparams, this.data);
arg.context = context; arg.context = context;
arg.param = param; arg.param = param;
return true; return true;
...@@ -764,7 +764,7 @@ export default class AppSelectDropDown extends Vue { ...@@ -764,7 +764,7 @@ export default class AppSelectDropDown extends Vue {
* @memberof AppSelect * @memberof AppSelect
*/ */
public change(value: any) { public change(value: any) {
this.$store.commit('setSelectStatus',true); this.$store.commit('setSelectStatus', true);
this.curvalue = value.detail.value; this.curvalue = value.detail.value;
} }
...@@ -774,8 +774,8 @@ export default class AppSelectDropDown extends Vue { ...@@ -774,8 +774,8 @@ export default class AppSelectDropDown extends Vue {
* @type {*} * @type {*}
* @memberof AppSelect * @memberof AppSelect
*/ */
public cancel(){ public cancel() {
this.$store.commit('setSelectStatus',true); this.$store.commit('setSelectStatus', true);
} }
/** /**
...@@ -793,14 +793,14 @@ export default class AppSelectDropDown extends Vue { ...@@ -793,14 +793,14 @@ export default class AppSelectDropDown extends Vue {
* @type {*} * @type {*}
* @memberof AppSelectDropDown * @memberof AppSelectDropDown
*/ */
public openSelect(){ public openSelect() {
this.onSearch(null); this.onSearch(null);
this.$store.commit('setSelectStatus',true); this.$store.commit('setSelectStatus', true);
let select :any= this.$refs[this.name+'select']; let select: any = this.$refs[this.name + 'select'];
if(select){ if (select) {
setTimeout(() => { setTimeout(() => {
select.open(); select.open();
this.$store.commit('setSelectStatus',false); this.$store.commit('setSelectStatus', false);
}, 1); }, 1);
} }
} }
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册