liunan #10
|
@ -2,22 +2,17 @@
|
||||||
<el-input
|
<el-input
|
||||||
class="ag_input"
|
class="ag_input"
|
||||||
size="small"
|
size="small"
|
||||||
|
ref="apinputref"
|
||||||
:style="{ width }"
|
:style="{ width }"
|
||||||
v-on="Listeners"
|
v-bind="$attrs"
|
||||||
v-bind="attrs"
|
v-on="$listeners"
|
||||||
|
|
||||||
>
|
>
|
||||||
<slot name="append" slot="append" />
|
<slot v-for="(_,name) in $slots" :name="name" :slot="name"> </slot>
|
||||||
<slot name="prefix" slot="prefix" />
|
|
||||||
<slot name="suffix" slot="suffix" />
|
|
||||||
<slot name="prepend" slot="prepend" />
|
|
||||||
</el-input>
|
</el-input>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/**
|
|
||||||
* WInput
|
|
||||||
* @desc 处理输入的输入框(转大写,不能有中文空格等)
|
|
||||||
*/
|
|
||||||
export default {
|
export default {
|
||||||
name: "agInput",
|
name: "agInput",
|
||||||
props: {
|
props: {
|
||||||
|
@ -30,42 +25,22 @@ export default {
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
attrs() {
|
|
||||||
return {
|
|
||||||
size: "small",
|
|
||||||
clearable: true, // 默认清空
|
|
||||||
...this.$attrs,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
// 所有父级事件
|
|
||||||
Listeners() {
|
|
||||||
return Object.assign(
|
|
||||||
{},
|
|
||||||
// 我们从父级添加所有的监听器
|
|
||||||
this.$listeners,
|
|
||||||
// 然后我们添加自定义监听器,
|
|
||||||
// 或覆写一些监听器的行为
|
|
||||||
{
|
|
||||||
// 这里确保组件配合 `v-model` 的工作
|
|
||||||
input: (value) => {
|
|
||||||
this.$emit("change", this.toUpperCase ? value.toUpperCase() : value);
|
|
||||||
},
|
|
||||||
blur: (e) => {
|
|
||||||
let value = e.target.value
|
|
||||||
.trim()
|
|
||||||
.replace(/\s/g, (match) =>
|
|
||||||
match.charCodeAt(0) === 12288 ? String.fromCharCode(32) : match
|
|
||||||
);
|
|
||||||
|
|
||||||
// 失去焦点自动首位去空格
|
watch:{
|
||||||
this.$emit("change", value);
|
$attrs:function(val){
|
||||||
|
console.log(val,'attrsattrs');
|
||||||
},
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted(){
|
||||||
|
if(this.$refs.apinputref){
|
||||||
|
for(const key in this.$refs.apinputref){
|
||||||
|
if(!this[key]&&key!='value'){
|
||||||
|
this[key]=this.$refs.apinputref[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
);
|
|
||||||
},
|
},
|
||||||
},
|
|
||||||
mounted() {},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -1,11 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="ag-MultifunctionSearch">
|
<div class="ag-MultifunctionSearch">
|
||||||
<ag-select
|
<ag-select
|
||||||
slot="prepend"
|
v-bind="$attrs"
|
||||||
:clearable="false"
|
v-on="listeners"
|
||||||
placeholder="请选择"
|
:value="values&&values[0]"
|
||||||
:value="value[0]"
|
|
||||||
v-bind="config.select"
|
|
||||||
@change="onSelect"
|
@change="onSelect"
|
||||||
class="ag_select_group"
|
class="ag_select_group"
|
||||||
:style="{ width: `${swidth}px` }"
|
:style="{ width: `${swidth}px` }"
|
||||||
|
@ -15,10 +13,12 @@
|
||||||
v-if="!showExtra"
|
v-if="!showExtra"
|
||||||
class="ag_input_group"
|
class="ag_input_group"
|
||||||
placeholder="请输入内容"
|
placeholder="请输入内容"
|
||||||
|
:disabled="$attrs.disabled||imeipopover"
|
||||||
|
v-bind="$attrs"
|
||||||
|
v-on="listeners"
|
||||||
:value="value[1]"
|
:value="value[1]"
|
||||||
:disabled="config.input.disabled||imeipopover"
|
@input="onInputChange"
|
||||||
v-bind="config.input"
|
|
||||||
@change="onInputChange"
|
|
||||||
>
|
>
|
||||||
</ag-input>
|
</ag-input>
|
||||||
<el-popover
|
<el-popover
|
||||||
|
@ -33,10 +33,11 @@
|
||||||
<ag-input
|
<ag-input
|
||||||
class="ag_input_group"
|
class="ag_input_group"
|
||||||
placeholder="请输入内容"
|
placeholder="请输入内容"
|
||||||
:value="value[1]"
|
:disabled="$attrs.disabled||imeipopover"
|
||||||
:disabled="config.input.disabled||imeipopover"
|
v-bind="$attrs"
|
||||||
v-bind="config.input"
|
v-on="listeners"
|
||||||
@change="onInputChange"
|
:value="value&&value[1]"
|
||||||
|
@input="onInputChange"
|
||||||
>
|
>
|
||||||
<template slot="suffix" v-if="showExtra">
|
<template slot="suffix" v-if="showExtra">
|
||||||
<i
|
<i
|
||||||
|
@ -49,9 +50,9 @@
|
||||||
</ag-input>
|
</ag-input>
|
||||||
</template>
|
</template>
|
||||||
<el-input
|
<el-input
|
||||||
v-model="value[1]"
|
|
||||||
type="textarea"
|
type="textarea"
|
||||||
:rows="12"
|
:rows="12"
|
||||||
|
:value="value&&value[1]"
|
||||||
placeholder="一行一项,最多支持200行"
|
placeholder="一行一项,最多支持200行"
|
||||||
resize="none"
|
resize="none"
|
||||||
border="none"
|
border="none"
|
||||||
|
@ -98,7 +99,7 @@ export default {
|
||||||
value: {
|
value: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => {
|
default: () => {
|
||||||
return [null, null];
|
return [null, ''];
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
|
@ -114,28 +115,14 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
values: [null, null],
|
values: [null, ""],
|
||||||
swidth:90,
|
swidth:90,
|
||||||
|
inputValue:"",
|
||||||
selectvalue:"",
|
selectvalue:"",
|
||||||
imeipopover:false
|
imeipopover:false,
|
||||||
|
listeners:{}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
config() {
|
|
||||||
const input = {
|
|
||||||
...this.$attrs
|
|
||||||
};
|
|
||||||
const select = {
|
|
||||||
...this.$attrs,
|
|
||||||
options:this.options
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
input,
|
|
||||||
select,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
},
|
|
||||||
watch: {
|
watch: {
|
||||||
value: {
|
value: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
|
@ -153,12 +140,23 @@ export default {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
mounted(){
|
||||||
|
console.log(this.$listeners,"this.$listeners==");
|
||||||
|
let that=this;
|
||||||
|
let newlist=Object.assign({},this.$listeners);
|
||||||
|
delete newlist.change;
|
||||||
|
delete newlist.input;
|
||||||
|
newlist.blur=function(e){
|
||||||
|
that.$listeners.blur.apply(this,[1,e]);
|
||||||
|
}
|
||||||
|
this.listeners=newlist;
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onSelect(value){
|
onSelect(value){
|
||||||
this.$emit("change", [value, this.value[1]||""]);
|
this.$emit("change", [value, this.value[1]||""]);
|
||||||
},
|
},
|
||||||
onInputChange(value){
|
onInputChange(val){
|
||||||
this.$emit("change", [ this.value[0] ||"",value]);
|
this.$emit("change", [this.values[0] ||"",val]);
|
||||||
},
|
},
|
||||||
getStringWidth(text) {
|
getStringWidth(text) {
|
||||||
let font = "13px";
|
let font = "13px";
|
||||||
|
|
|
@ -4,12 +4,11 @@
|
||||||
class="ag_select"
|
class="ag_select"
|
||||||
:style="{ width: `100%` }"
|
:style="{ width: `100%` }"
|
||||||
:value="selectValue"
|
:value="selectValue"
|
||||||
v-bind="attrs"
|
ref="apselectref"
|
||||||
|
v-bind="$attrs"
|
||||||
v-on="$listeners"
|
v-on="$listeners"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot v-for="(_,name) in $slots" :name="name" :slot="name"> </slot>
|
||||||
<slot name="prefix" slot="prefix" />
|
|
||||||
<slot name="empty" slot="empty" />
|
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in options"
|
v-for="item in options"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
|
@ -43,6 +42,15 @@ export default {
|
||||||
selectValue:""
|
selectValue:""
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
mounted(){
|
||||||
|
if(this.$refs.apselectref){
|
||||||
|
for(const key in this.$refs.apselectref){
|
||||||
|
if(!this[key]&&key!='value'){
|
||||||
|
this[key]=this.$refs.apselectref[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
watch: {
|
watch: {
|
||||||
value: {
|
value: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
|
@ -57,16 +65,6 @@ export default {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
attrs() {
|
|
||||||
return {
|
|
||||||
size: "small",
|
|
||||||
clearable: true,
|
|
||||||
filterable: true,
|
|
||||||
...this.$attrs,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
31
src/App.vue
31
src/App.vue
|
@ -4,13 +4,9 @@
|
||||||
<ag-dialog :visible.sync="abb"> </ag-dialog>
|
<ag-dialog :visible.sync="abb"> </ag-dialog>
|
||||||
<ag-datePicker v-model="date_value" :showTime="true" :range="true" @change="onPicker">
|
<ag-datePicker v-model="date_value" :showTime="true" :range="true" @change="onPicker">
|
||||||
</ag-datePicker>
|
</ag-datePicker>
|
||||||
<ag-input value="value"> </ag-input>
|
<ag-input v-model="inputValue" placeholder="请输入" @change="onInputChange" ref="aginputref">
|
||||||
|
</ag-input>
|
||||||
<ag-select :options="a_options" v-model="value">
|
<ag-select :options="a_options" v-model="value">
|
||||||
<!-- <template slot="prefix">
|
|
||||||
{{
|
|
||||||
(a_options.find((e) => e.value == value) || {}).label
|
|
||||||
}}
|
|
||||||
</template> -->
|
|
||||||
</ag-select>
|
</ag-select>
|
||||||
<ag-NumberRange v-model="values"> </ag-NumberRange>
|
<ag-NumberRange v-model="values"> </ag-NumberRange>
|
||||||
<el-form
|
<el-form
|
||||||
|
@ -39,7 +35,7 @@
|
||||||
:clearable="true"
|
:clearable="true"
|
||||||
:options="a_options"
|
:options="a_options"
|
||||||
@change="onInputinput"
|
@change="onInputinput"
|
||||||
|
@blur="onblur"
|
||||||
>
|
>
|
||||||
</ag-MultifunctionSearch>
|
</ag-MultifunctionSearch>
|
||||||
<agQuery :inputs="inputs" @onSearch="onSearch"/>
|
<agQuery :inputs="inputs" @onSearch="onSearch"/>
|
||||||
|
@ -105,6 +101,7 @@ export default {
|
||||||
rules: {
|
rules: {
|
||||||
pass: [{ validator: validatePass, trigger: "blur" }],
|
pass: [{ validator: validatePass, trigger: "blur" }],
|
||||||
},
|
},
|
||||||
|
inputValue:"",
|
||||||
date_value:null,
|
date_value:null,
|
||||||
value: "选项1",
|
value: "选项1",
|
||||||
a_value: "59584",
|
a_value: "59584",
|
||||||
|
@ -335,16 +332,18 @@ export default {
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
|
||||||
values: {
|
mounted(){
|
||||||
handler(val) {
|
this.$refs.aginputref.value=123;
|
||||||
console.log(val, 238);
|
|
||||||
},
|
|
||||||
deep: true,
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
onblur(val,elem){
|
||||||
|
console.log("onblur",val,elem,this);
|
||||||
|
|
||||||
|
},
|
||||||
|
onInputChange(value){
|
||||||
|
console.log(value,"onSearch");
|
||||||
|
},
|
||||||
onPicker(value){
|
onPicker(value){
|
||||||
this.date_value=value;
|
this.date_value=value;
|
||||||
},
|
},
|
||||||
|
@ -352,7 +351,7 @@ export default {
|
||||||
console.log(values,"onSearch");
|
console.log(values,"onSearch");
|
||||||
},
|
},
|
||||||
onInputinput(value){
|
onInputinput(value){
|
||||||
console.log(value,"oninput");
|
console.log(value,"oninput222");
|
||||||
this.values=value;
|
this.values=value;
|
||||||
},
|
},
|
||||||
change() {
|
change() {
|
||||||
|
|
Loading…
Reference in New Issue