This commit is contained in:
ln1778
parent
297e10d70c
commit
7606e5c3eb
|
|
@ -1,23 +1,18 @@
|
|||
<template>
|
||||
<el-input
|
||||
class="ag_input"
|
||||
size="small"
|
||||
:style="{ width }"
|
||||
v-on="Listeners"
|
||||
v-bind="attrs"
|
||||
size="small"
|
||||
ref="apinputref"
|
||||
:style="{ width }"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
|
||||
>
|
||||
<slot name="append" slot="append" />
|
||||
<slot name="prefix" slot="prefix" />
|
||||
<slot name="suffix" slot="suffix" />
|
||||
<slot name="prepend" slot="prepend" />
|
||||
<slot v-for="(_,name) in $slots" :name="name" :slot="name"> </slot>
|
||||
</el-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* WInput
|
||||
* @desc 处理输入的输入框(转大写，不能有中文空格等)
|
||||
*/
|
||||
<script>
|
||||
export default {
|
||||
name: "agInput",
|
||||
props: {
|
||||
|
|
@ -30,42 +25,22 @@ export default {
|
|||
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
|
||||
);
|
||||
|
||||
// 失去焦点自动首位去空格
|
||||
this.$emit("change", value);
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
watch:{
|
||||
$attrs:function(val){
|
||||
console.log(val,'attrsattrs');
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
mounted(){
|
||||
if(this.$refs.apinputref){
|
||||
for(const key in this.$refs.apinputref){
|
||||
if(!this[key]&&key!='value'){
|
||||
this[key]=this.$refs.apinputref[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
<template>
|
||||
<div class="ag-MultifunctionSearch">
|
||||
<ag-select
|
||||
slot="prepend"
|
||||
:clearable="false"
|
||||
placeholder="请选择"
|
||||
:value="value[0]"
|
||||
v-bind="config.select"
|
||||
<ag-select
|
||||
v-bind="$attrs"
|
||||
v-on="listeners"
|
||||
:value="values&&values[0]"
|
||||
@change="onSelect"
|
||||
class="ag_select_group"
|
||||
:style="{ width: `${swidth}px` }"
|
||||
>
|
||||
</ag-select>
|
||||
</ag-select>
|
||||
<ag-input
|
||||
v-if="!showExtra"
|
||||
class="ag_input_group"
|
||||
placeholder="请输入内容"
|
||||
class="ag_input_group"
|
||||
placeholder="请输入内容"
|
||||
:disabled="$attrs.disabled||imeipopover"
|
||||
v-bind="$attrs"
|
||||
v-on="listeners"
|
||||
:value="value[1]"
|
||||
:disabled="config.input.disabled||imeipopover"
|
||||
v-bind="config.input"
|
||||
@change="onInputChange"
|
||||
@input="onInputChange"
|
||||
|
||||
>
|
||||
</ag-input>
|
||||
<el-popover
|
||||
|
|
@ -32,11 +32,12 @@
|
|||
<template slot="reference">
|
||||
<ag-input
|
||||
class="ag_input_group"
|
||||
placeholder="请输入内容"
|
||||
:value="value[1]"
|
||||
:disabled="config.input.disabled||imeipopover"
|
||||
v-bind="config.input"
|
||||
@change="onInputChange"
|
||||
placeholder="请输入内容"
|
||||
:disabled="$attrs.disabled||imeipopover"
|
||||
v-bind="$attrs"
|
||||
v-on="listeners"
|
||||
:value="value&&value[1]"
|
||||
@input="onInputChange"
|
||||
>
|
||||
<template slot="suffix" v-if="showExtra">
|
||||
<i
|
||||
|
|
@ -48,10 +49,10 @@
|
|||
</template>
|
||||
</ag-input>
|
||||
</template>
|
||||
<el-input
|
||||
v-model="value[1]"
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="12"
|
||||
:value="value&&value[1]"
|
||||
placeholder="一行一项，最多支持200行"
|
||||
resize="none"
|
||||
border="none"
|
||||
|
|
@ -98,7 +99,7 @@ export default {
|
|||
value: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [null, null];
|
||||
return [null, ''];
|
||||
},
|
||||
},
|
||||
options: {
|
||||
|
|
@ -114,35 +115,21 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
values: [null, null],
|
||||
values: [null, ""],
|
||||
swidth:90,
|
||||
inputValue:"",
|
||||
selectvalue:"",
|
||||
imeipopover:false
|
||||
imeipopover:false,
|
||||
listeners:{}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
config() {
|
||||
const input = {
|
||||
...this.$attrs
|
||||
};
|
||||
const select = {
|
||||
...this.$attrs,
|
||||
options:this.options
|
||||
};
|
||||
return {
|
||||
input,
|
||||
select,
|
||||
};
|
||||
},
|
||||
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(newVal) {
|
||||
handler(newVal) {
|
||||
if (!Array.isArray(newVal)) {
|
||||
throw new Error("请传入数组");
|
||||
}
|
||||
let newselectValue=newVal[0];
|
||||
let newselectValue=newVal[0];
|
||||
const find=this.options.find((f)=>f.value==newselectValue);
|
||||
if(find){
|
||||
let fontwidth=this.getStringWidth(find?.label);
|
||||
|
|
@ -153,12 +140,23 @@ export default {
|
|||
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: {
|
||||
onSelect(value){
|
||||
this.$emit("change", [value, this.value[1]||""]);
|
||||
},
|
||||
onInputChange(value){
|
||||
this.$emit("change", [ this.value[0] ||"",value]);
|
||||
onInputChange(val){
|
||||
this.$emit("change", [this.values[0] ||"",val]);
|
||||
},
|
||||
getStringWidth(text) {
|
||||
let font = "13px";
|
||||
|
|
|
|||
|
|
@ -4,12 +4,11 @@
|
|||
class="ag_select"
|
||||
:style="{ width: `100%` }"
|
||||
:value="selectValue"
|
||||
v-bind="attrs"
|
||||
ref="apselectref"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<slot />
|
||||
<slot name="prefix" slot="prefix" />
|
||||
<slot name="empty" slot="empty" />
|
||||
>
|
||||
<slot v-for="(_,name) in $slots" :name="name" :slot="name"> </slot>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
|
|
@ -43,6 +42,15 @@ export default {
|
|||
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: {
|
||||
value: {
|
||||
handler(newVal) {
|
||||
|
|
@ -56,17 +64,7 @@ export default {
|
|||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
attrs() {
|
||||
return {
|
||||
size: "small",
|
||||
clearable: true,
|
||||
filterable: true,
|
||||
...this.$attrs,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
};
|
||||
|
|
|
|||
33
src/App.vue
33
src/App.vue
|
|
@ -4,13 +4,9 @@
|
|||
<ag-dialog :visible.sync="abb"> </ag-dialog>
|
||||
<ag-datePicker v-model="date_value" :showTime="true" :range="true" @change="onPicker">
|
||||
</ag-datePicker>
|
||||
<ag-input value="value"> </ag-input>
|
||||
<ag-select :options="a_options" v-model="value">
|
||||
<!-- <template slot="prefix">
|
||||
{{
|
||||
(a_options.find((e) => e.value == value) || {}).label
|
||||
}}
|
||||
</template> -->
|
||||
<ag-input v-model="inputValue" placeholder="请输入" @change="onInputChange" ref="aginputref">
|
||||
</ag-input>
|
||||
<ag-select :options="a_options" v-model="value">
|
||||
</ag-select>
|
||||
<ag-NumberRange v-model="values"> </ag-NumberRange>
|
||||
<el-form
|
||||
|
|
@ -39,7 +35,7 @@
|
|||
:clearable="true"
|
||||
:options="a_options"
|
||||
@change="onInputinput"
|
||||
|
||||
@blur="onblur"
|
||||
>
|
||||
</ag-MultifunctionSearch>
|
||||
<agQuery :inputs="inputs" @onSearch="onSearch"/>
|
||||
|
|
@ -105,6 +101,7 @@ export default {
|
|||
rules: {
|
||||
pass: [{ validator: validatePass, trigger: "blur" }],
|
||||
},
|
||||
inputValue:"",
|
||||
date_value:null,
|
||||
value: "选项1",
|
||||
a_value: "59584",
|
||||
|
|
@ -335,16 +332,18 @@ export default {
|
|||
],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
values: {
|
||||
handler(val) {
|
||||
console.log(val, 238);
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
|
||||
mounted(){
|
||||
this.$refs.aginputref.value=123;
|
||||
},
|
||||
methods: {
|
||||
onblur(val,elem){
|
||||
console.log("onblur",val,elem,this);
|
||||
|
||||
},
|
||||
onInputChange(value){
|
||||
console.log(value,"onSearch");
|
||||
},
|
||||
onPicker(value){
|
||||
this.date_value=value;
|
||||
},
|
||||
|
|
@ -352,7 +351,7 @@ export default {
|
|||
console.log(values,"onSearch");
|
||||
},
|
||||
onInputinput(value){
|
||||
console.log(value,"oninput");
|
||||
console.log(value,"oninput222");
|
||||
this.values=value;
|
||||
},
|
||||
change() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue