fix: 同步 longbow-select 组件

This commit is contained in:
Argo Zhang 2019-12-04 19:55:24 +08:00
parent a881196dfc
commit c65c75ac69
No known key found for this signature in database
GPG Key ID: 152E398953DDF19F
3 changed files with 23 additions and 8 deletions

View File

@ -75,7 +75,7 @@
// 新控件 <div class="form-select"> // 新控件 <div class="form-select">
this.$ctl = $(lgbSelect.Template).insertBefore(this.$element); this.$ctl = $(lgbSelect.Template).insertBefore(this.$element);
if ($input.attr('data-toggle') === 'lgbSelect') { if ($input.attr('data-toggle') === 'lgbSelect') {
this.$input = $input.addClass("form-select-input").attr("aria-haspopup", "true").attr("aria-expanded", "false").attr("data-toggle", "dropdown"); this.$input = $input.addClass("form-select-input").attr("aria-haspopup", "true").attr("aria-expanded", "false").attr("data-toggle", "dropdown").attr("readonly", true);
} }
else { else {
this.$input = $('<input type="text" readonly="readonly" class="form-control form-select-input" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"/>'); this.$input = $('<input type="text" readonly="readonly" class="form-control form-select-input" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"/>');

View File

@ -50,6 +50,10 @@
cursor: not-allowed; cursor: not-allowed;
} }
.form-select.is-disabled .form-select-append {
color: #c0c4cc;
}
.form-select-input { .form-select-input {
color: #606266; color: #606266;
outline: none; outline: none;

View File

@ -75,7 +75,7 @@
// 新控件 <div class="form-select"> // 新控件 <div class="form-select">
this.$ctl = $(lgbSelect.Template).insertBefore(this.$element); this.$ctl = $(lgbSelect.Template).insertBefore(this.$element);
if ($input.attr('data-toggle') === 'lgbSelect') { if ($input.attr('data-toggle') === 'lgbSelect') {
this.$input = $input.addClass("form-select-input").attr("aria-haspopup", "true").attr("aria-expanded", "false").attr("data-toggle", "dropdown"); this.$input = $input.addClass("form-select-input").attr("aria-haspopup", "true").attr("aria-expanded", "false").attr("data-toggle", "dropdown").attr("readonly", true);
} }
else { else {
this.$input = $('<input type="text" readonly="readonly" class="form-control form-select-input" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"/>'); this.$input = $('<input type="text" readonly="readonly" class="form-control form-select-input" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"/>');
@ -114,11 +114,17 @@
// save attributes // save attributes
var attrs = []; var attrs = [];
["id", "data-default-val"].forEach(function (v, index) { ["id", "name", "class", "data-valid", "data-default-val"].forEach(function (v, index) {
var value = that.$element.attr(v); var value = that.$element.attr(v);
if (value !== undefined) attrs.push({ name: v, value: value }); if (value !== undefined) attrs.push({ name: v, value: value });
}); });
var disabled = this.$element.prop('disabled');
// set disabled property
if (disabled) {
this.disabled();
}
// replace element select -> input hidden // replace element select -> input hidden
this.$element.remove(); this.$element.remove();
this.$element = $('<input type="hidden" data-toggle="lgbSelect" />').val(that.val()).insertBefore(this.$input); this.$element = $('<input type="hidden" data-toggle="lgbSelect" />').val(that.val()).insertBefore(this.$input);
@ -139,12 +145,15 @@
this.$input.removeAttr('disabled'); this.$input.removeAttr('disabled');
}; };
_proto.reset = function (value) { _proto.reset = function (value, init) {
var that = this; var that = this;
// keep old value // keep old value
var oldValue = this.$input.attr('value'); var oldValue = this.$input.attr('value');
// default select value
if (init == undefined) init = true;
// warning: must use attr('value') method instead of val(). otherwise the others input html element will filled by first element value. // warning: must use attr('value') method instead of val(). otherwise the others input html element will filled by first element value.
// see https://gitee.com/LongbowEnterprise/longbow-select/issues/IZ3BR?from=project-issue // see https://gitee.com/LongbowEnterprise/longbow-select/issues/IZ3BR?from=project-issue
this.$input.attr('value', '').removeClass('is-valid is-invalid'); this.$input.attr('value', '').removeClass('is-valid is-invalid');
@ -153,10 +162,12 @@
$.each(value, function (index) { $.each(value, function (index) {
var $item = $('<a class="dropdown-item" href="#" data-val="' + this.value + '">' + this.text + '</a>'); var $item = $('<a class="dropdown-item" href="#" data-val="' + this.value + '">' + this.text + '</a>');
that.$menus.append($item); that.$menus.append($item);
if (this.selected === true || this.value === oldValue || index === 0 || this.value === that.$element.attr('data-default-val')) { if (init) {
that.$input.attr('value', this.text); if (this.selected === true || this.value === oldValue || index === 0 || this.value === that.$element.attr('data-default-val')) {
that.$element.val(this.value).attr('data-text', this.text); that.$input.attr('value', this.text);
$activeItem = $item; that.$element.val(this.value).attr('data-text', this.text);
$activeItem = $item;
}
} }
}); });
if ($activeItem !== null) $activeItem.addClass('active'); if ($activeItem !== null) $activeItem.addClass('active');