javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Docs(input): update input docs (#512)

Browse Source 
* docs[input]: update input docs to composition api

* fix: bugs

* fix: fix some bugs in new input docs

* fix: single quote replace double quote

Co-authored-by: rotten <rotten@rottendeMacBook-Pro.local>
This commit is contained in:
滑威
2020-11-03 11:46:43 +08:00
committed by GitHub
parent 5e9c237d19
commit 5a688e0217
4 changed files with 1295 additions and 882 deletions
Download Patch File Download Diff File Expand all files Collapse all files

422
website/docs/en-US/input.md
View File

@@ -19,13 +19,14 @@ Do not support `v-model` modifiers.
<el-input placeholder="Please input" v-model="input"></el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input: ''
input: ref('')
}
}
}
})
</script>
```
:::
@@ -42,13 +43,14 @@ export default {
</el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input: ''
input: ref('')
}
}
}
})
</script>
```
:::
@@ -65,13 +67,14 @@ export default {
</el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input: ''
input: ref('')
}
}
}
})
</script>
```
:::
@@ -84,13 +87,14 @@ export default {
<el-input placeholder="Please input password" v-model="input" show-password></el-input>
<script>
export default {
data() {
return {
input: ''
}
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input: ref('')
}
}
})
</script>
```
:::
@@ -119,12 +123,16 @@ Add an icon to indicate input type.
<el-input
placeholder="Pick a date"
v-model="input3">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
<template v-slot:suffix>
<i class="el-input__icon el-icon-date"></i>
</template>
</el-input>
<el-input
placeholder="Type something"
v-model="input4">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
<template v-slot:prefix>
<i class="el-input__icon el-icon-search"></i>
</template>
</el-input>
</div>
@@ -136,16 +144,17 @@ Add an icon to indicate input type.
</style>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input1: '',
input2: '',
input3: '',
input4: ''
input1: ref(''),
input2: ref(''),
input3: ref(''),
input4: ref('')
}
}
}
})
</script>
```
:::
@@ -165,13 +174,14 @@ Resizable for entering multiple lines of text information. Add attribute `type="
</el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
textarea: ''
textarea: ref('')
}
}
}
})
</script>
```
:::
@@ -198,14 +208,15 @@ Setting the `autosize` prop for a textarea type of Input makes the height to aut
</el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
textarea1: '',
textarea2: ''
textarea1: ref(''),
textarea2: ref('')
}
}
}
})
</script>
```
:::
@@ -219,22 +230,26 @@ Prepend or append an element, generally a label or a button.
```html
<div>
<el-input placeholder="Please input" v-model="input1">
<template slot="prepend">Http://</template>
<template v-slot:prepend>Http://</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="Please input" v-model="input2">
<template slot="append">.com</template>
<template v-slot:append>.com</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="Please input" v-model="input3" class="input-with-select">
<el-select v-model="select" slot="prepend" placeholder="Select">
<el-option label="Restaurant" value="1"></el-option>
<el-option label="Order No." value="2"></el-option>
<el-option label="Tel" value="3"></el-option>
</el-select>
<el-button slot="append" icon="el-icon-search"></el-button>
<template v-slot:prepend>
<el-select v-model="select" placeholder="Select">
<el-option label="Restaurant" value="1"></el-option>
<el-option label="Order No." value="2"></el-option>
<el-option label="Tel" value="3"></el-option>
</el-select>
</template>
<template v-slot:append>
<el-button icon="el-icon-search"></el-button>
</template>
</el-input>
</div>
@@ -247,16 +262,17 @@ Prepend or append an element, generally a label or a button.
}
</style>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input1: '',
input2: '',
input3: '',
select: ''
input1: ref(''),
input2: ref(''),
input3: ref(''),
select: ref('')
}
}
}
})
</script>
```
:::
@@ -288,16 +304,17 @@ export default {
</div>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input1: '',
input2: '',
input3: '',
input4: ''
input1: ref(''),
input2: ref(''),
input3: ref(''),
input4: ref('')
}
}
}
})
</script>
```
:::
@@ -332,45 +349,53 @@ You can get some recommended tips based on the current input.
</el-col>
</el-row>
<script>
export default {
data() {
return {
links: [],
state1: '',
state2: ''
};
},
methods: {
querySearch(queryString, cb) {
var links = this.links;
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
setup() {
const restaurants = ref([]);
const querySearch = (queryString, cb) => {
var results = queryString
? restaurants.value.filter(createFilter(queryString))
: restaurants.value;
// call callback function to return suggestions
cb(results);
},
createFilter(queryString) {
return (link) => {
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
},
handleSelect(item) {
console.log(item);
}
},
mounted() {
this.links = this.loadAll();
}
}
};
const createFilter = (queryString) => {
return (restaurant) => {
return (
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
0
);
};
};
const loadAll = () => {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
};
const handleSelect = (item) => {
console.log(item);
};
onMounted(() => {
restaurants.value = loadAll();
});
return {
restaurants,
state1: ref(''),
state2: ref(''),
querySearch,
createFilter,
loadAll,
handleSelect,
};
},
});
</script>
```
:::
@@ -386,19 +411,18 @@ Customize how suggestions are displayed.
v-model="state"
:fetch-suggestions="querySearch"
placeholder="Please input"
@select="handleSelect">
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClick">
</i>
<template slot-scope="{ item }">
@select="handleSelect"
>
<template v-slot:suffix>
<i class="el-icon-edit el-input__icon" @click="handleIconClick"></i>
</template>
<template v-slot="{ item }">
<div class="value">{{ item.value }}</div>
<span class="link">{{ item.link }}</span>
</template>
</el-autocomplete>
<style>
<style lang="scss">
.my-autocomplete {
li {
line-height: normal;
@@ -417,47 +441,60 @@ Customize how suggestions are displayed.
</style>
<script>
export default {
data() {
return {
links: [],
state: ''
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
setup() {
const links = ref([]);
const querySearch = (queryString, cb) => {
var results = queryString
? links.value.filter(createFilter(queryString))
: links.value;
// call callback function to return suggestion objects
cb(results);
};
const createFilter = (queryString) => {
return (restaurant) => {
return (
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
0
);
};
},
methods: {
querySearch(queryString, cb) {
var links = this.links;
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
// call callback function to return suggestion objects
cb(results);
},
createFilter(queryString) {
return (link) => {
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
},
handleSelect(item) {
console.log(item);
},
handleIconClick(ev) {
console.log(ev);
}
},
mounted() {
this.links = this.loadAll();
}
}
};
const loadAll = () => {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
};
const handleSelect = (item) => {
console.log(item);
};
const handleIconClick = (ev) => {
console.log(ev);
};
onMounted(() => {
links.value = loadAll();
});
return {
links,
state: ref(''),
querySearch,
createFilter,
loadAll,
handleSelect,
handleIconClick,
};
},
});
</script>
```
:::
@@ -475,48 +512,56 @@ Search data from server-side.
@select="handleSelect"
></el-autocomplete>
<script>
export default {
data() {
return {
links: [],
state: '',
timeout: null
};
},
methods: {
loadAll() {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
},
querySearchAsync(queryString, cb) {
var links = this.links;
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
setup() {
const links = ref([]);
const loadAll = () => {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
};
let timeout;
const querySearchAsync = (queryString, cb) => {
var results = queryString
? links.value.filter(createFilter(queryString))
: links.value;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
},
createFilter(queryString) {
return (link) => {
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect(item) {
console.log(item);
}
},
mounted() {
this.links = this.loadAll();
}
};
clearTimeout(timeout);
timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
};
const createFilter = (queryString) => {
return (restaurant) => {
return (
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
0
);
};
};
const handleSelect = (item) => {
console.log(item);
};
onMounted(() => {
links.value = loadAll();
});
return {
links,
state: ref(''),
querySearchAsync,
createFilter,
loadAll,
handleSelect
};
},
});
</script>
```
:::
@@ -545,14 +590,15 @@ Search data from server-side.
</el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
text: '',
textarea: ''
text: ref(''),
textarea: ref('')
}
}
}
})
</script>
```
:::

424
website/docs/es/input.md
View File

@@ -18,13 +18,14 @@ No admite modificadores `v-model`.
<el-input placeholder="Please input" v-model="input"></el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input: ''
input: ref('')
}
}
}
})
</script>
```
@@ -42,13 +43,14 @@ export default {
</el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input: ''
input: ref('')
}
}
}
})
</script>
```
@@ -66,13 +68,14 @@ export default {
</el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input: ''
input: ref('')
}
}
}
})
</script>
```
:::
@@ -85,13 +88,14 @@ export default {
<el-input placeholder="Please input password" v-model="input" show-password></el-input>
<script>
export default {
data() {
return {
input: ''
}
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input: ref('')
}
}
})
</script>
```
:::
@@ -121,12 +125,16 @@ Añada un icono para indicar el tipo de Input.
<el-input
placeholder="Pick a date"
v-model="input3">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
<template v-slot:suffix>
<i class="el-input__icon el-icon-date"></i>
</template>
</el-input>
<el-input
placeholder="Type something"
v-model="input4">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
<template v-slot:prefix>
<i class="el-input__icon el-icon-search"></i>
</template>
</el-input>
</div>
@@ -138,16 +146,17 @@ Añada un icono para indicar el tipo de Input.
</style>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input1: '',
input2: '',
input3: '',
input4: ''
input1: ref(''),
input2: ref(''),
input3: ref(''),
input4: ref('')
}
}
}
})
</script>
```
@@ -168,13 +177,14 @@ Redimensiona para introducir varias líneas de información de texto. Agregue el
</el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
textarea: ''
textarea: ref('')
}
}
}
})
</script>
```
@@ -202,14 +212,15 @@ El ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se
</el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
textarea1: '',
textarea2: ''
textarea1: ref(''),
textarea2: ref('')
}
}
}
})
</script>
```
@@ -224,22 +235,26 @@ Añade un elemento antes o después del input, generalmente una etiqueta o un bo
```html
<div>
<el-input placeholder="Please input" v-model="input1">
<template slot="prepend">Http://</template>
<template v-slot:prepend>Http://</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="Please input" v-model="input2">
<template slot="append">.com</template>
<template v-slot:append>.com</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="Please input" v-model="input3" class="input-with-select">
<el-select v-model="select" slot="prepend" placeholder="Select">
<el-option label="Restaurant" value="1"></el-option>
<el-option label="Order No." value="2"></el-option>
<el-option label="Tel" value="3"></el-option>
</el-select>
<el-button slot="append" icon="el-icon-search"></el-button>
<template v-slot:prepend>
<el-select v-model="select" placeholder="Select">
<el-option label="Restaurant" value="1"></el-option>
<el-option label="Order No." value="2"></el-option>
<el-option label="Tel" value="3"></el-option>
</el-select>
</template>
<template v-slot:append>
<el-button icon="el-icon-search"></el-button>
</template>
</el-input>
</div>
@@ -252,16 +267,17 @@ Añade un elemento antes o después del input, generalmente una etiqueta o un bo
}
</style>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input1: '',
input2: '',
input3: '',
select: ''
input1: ref(''),
input2: ref(''),
input3: ref(''),
select: ref('')
}
}
}
})
</script>
```
@@ -295,16 +311,17 @@ export default {
</div>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input1: '',
input2: '',
input3: '',
input4: ''
input1: ref(''),
input2: ref(''),
input3: ref(''),
input4: ref('')
}
}
}
})
</script>
```
@@ -341,45 +358,53 @@ Puede obtener algunas sugerencias basadas en la entrada actual.
</el-col>
</el-row>
<script>
export default {
data() {
return {
links: [],
state1: '',
state2: ''
};
},
methods: {
querySearch(queryString, cb) {
var links = this.links;
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
setup() {
const restaurants = ref([]);
const querySearch = (queryString, cb) => {
var results = queryString
? restaurants.value.filter(createFilter(queryString))
: restaurants.value;
// call callback function to return suggestions
cb(results);
},
createFilter(queryString) {
return (link) => {
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
},
handleSelect(item) {
console.log(item);
}
},
mounted() {
this.links = this.loadAll();
}
}
};
const createFilter = (queryString) => {
return (restaurant) => {
return (
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
0
);
};
};
const loadAll = () => {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
};
const handleSelect = (item) => {
console.log(item);
};
onMounted(() => {
restaurants.value = loadAll();
});
return {
restaurants,
state1: ref(''),
state2: ref(''),
querySearch,
createFilter,
loadAll,
handleSelect,
};
},
});
</script>
```
@@ -397,19 +422,18 @@ Personalice cómo se muestran las sugerencias.
v-model="state"
:fetch-suggestions="querySearch"
placeholder="Please input"
@select="handleSelect">
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClick">
</i>
<template slot-scope="{ item }">
@select="handleSelect"
>
<template v-slot:suffix>
<i class="el-icon-edit el-input__icon" @click="handleIconClick"></i>
</template>
<template v-slot="{ item }">
<div class="value">{{ item.value }}</div>
<span class="link">{{ item.link }}</span>
</template>
</el-autocomplete>
<style>
<style lang="scss">
.my-autocomplete {
li {
line-height: normal;
@@ -428,47 +452,59 @@ Personalice cómo se muestran las sugerencias.
</style>
<script>
export default {
data() {
return {
links: [],
state: ''
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
setup() {
const links = ref([]);
const querySearch = (queryString, cb) => {
var results = queryString
? links.value.filter(createFilter(queryString))
: links.value;
// call callback function to return suggestion objects
cb(results);
};
const createFilter = (queryString) => {
return (restaurant) => {
return (
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
0
);
};
},
methods: {
querySearch(queryString, cb) {
var links = this.links;
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
// call callback function to return suggestion objects
cb(results);
},
createFilter(queryString) {
return (link) => {
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
},
handleSelect(item) {
console.log(item);
},
handleIconClick(ev) {
console.log(ev);
}
},
mounted() {
this.links = this.loadAll();
}
}
};
const loadAll = () => {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
};
const handleSelect = (item) => {
console.log(item);
};
const handleIconClick = (ev) => {
console.log(ev);
};
onMounted(() => {
links.value = loadAll();
});
return {
links,
state: ref(''),
querySearch,
createFilter,
loadAll,
handleSelect,
handleIconClick,
};
},
});
</script>
```
@@ -487,49 +523,58 @@ Búsqueda de datos desde el servidor.
placeholder="Please input"
@select="handleSelect"
></el-autocomplete>
<script>
export default {
data() {
return {
links: [],
state: '',
timeout: null
};
},
methods: {
loadAll() {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
},
querySearchAsync(queryString, cb) {
var links = this.links;
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
},
createFilter(queryString) {
return (link) => {
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect(item) {
console.log(item);
}
},
mounted() {
this.links = this.loadAll();
}
};
<script>
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
setup() {
const links = ref([]);
const loadAll = () => {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
};
let timeout;
const querySearchAsync = (queryString, cb) => {
var results = queryString
? links.value.filter(createFilter(queryString))
: links.value;
clearTimeout(timeout);
timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
};
const createFilter = (queryString) => {
return (restaurant) => {
return (
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
0
);
};
};
const handleSelect = (item) => {
console.log(item);
};
onMounted(() => {
links.value = loadAll();
});
return {
links,
state: ref(''),
querySearchAsync,
createFilter,
loadAll,
handleSelect,
};
},
});
</script>
```
@@ -559,14 +604,15 @@ Búsqueda de datos desde el servidor.
</el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
text: '',
textarea: ''
text: ref(''),
textarea: ref('')
}
}
}
})
</script>
```
:::

422
website/docs/fr-FR/input.md
View File

@@ -18,13 +18,14 @@ Les modificateurs de `v-model` ne sont pas supportés.
<el-input placeholder="Entrez quelque chose" v-model="input"></el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input: ''
input: ref('')
}
}
}
})
</script>
```
:::
@@ -41,13 +42,14 @@ export default {
</el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input: ''
input: ref('')
}
}
}
})
</script>
```
:::
@@ -64,13 +66,14 @@ export default {
</el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input: ''
input: ref('')
}
}
}
})
</script>
```
:::
@@ -83,13 +86,14 @@ export default {
<el-input placeholder="Entrez votre mot de passe" v-model="input" show-password></el-input>
<script>
export default {
data() {
return {
input: ''
}
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input: ref('')
}
}
})
</script>
```
:::
@@ -118,12 +122,16 @@ Ajoutez une icône pour indiquer le type d'input.
<el-input
placeholder="Entrez une date"
v-model="input3">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
<template v-slot:suffix>
<i class="el-input__icon el-icon-date"></i>
</template>
</el-input>
<el-input
placeholder="Entrez du texte"
v-model="input4">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
<template v-slot:prefix>
<i class="el-input__icon el-icon-search"></i>
</template>
</el-input>
</div>
@@ -135,16 +143,17 @@ Ajoutez une icône pour indiquer le type d'input.
</style>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input1: '',
input2: '',
input3: '',
input4: ''
input1: ref(''),
input2: ref(''),
input3: ref(''),
input4: ref('')
}
}
}
})
</script>
```
:::
@@ -164,13 +173,14 @@ Une zone de texte de taille réglable à la souris pour écrire plusieurs lignes
</el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
textarea: ''
textarea: ref('')
}
}
}
})
</script>
```
:::
@@ -197,14 +207,15 @@ Configurer la propriété `autosize` pour une zone de texte permet de rendre la
</el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
textarea1: '',
textarea2: ''
textarea1: ref(''),
textarea2: ref('')
}
}
}
})
</script>
```
:::
@@ -218,22 +229,26 @@ Ajouter un élément avant ou après l'input, généralement du texte ou un bout
```html
<div>
<el-input placeholder="Entrez quelque chose" v-model="input1">
<template slot="prepend">Http://</template>
<template v-slot:prepend>Http://</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="Entrez quelque chose" v-model="input2">
<template slot="append">.com</template>
<template v-slot:append>.com</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="Entrez quelque chose" v-model="input3" class="input-with-select">
<el-select v-model="select" slot="prepend" placeholder="Choisir">
<el-option label="Restaurant" value="1"></el-option>
<el-option label="Num. Commande" value="2"></el-option>
<el-option label="Tel" value="3"></el-option>
</el-select>
<el-button slot="append" icon="el-icon-search"></el-button>
<template v-slot:prepend>
<el-select v-model="select" placeholder="Choisir">
<el-option label="Restaurant" value="1"></el-option>
<el-option label="Num. Commande" value="2"></el-option>
<el-option label="Tel" value="3"></el-option>
</el-select>
</template>
<template v-slot:append>
<el-button icon="el-icon-search"></el-button>
</template>
</el-input>
</div>
@@ -245,17 +260,19 @@ Ajouter un élément avant ou après l'input, généralement du texte ou un bout
background-color: #fff;
}
</style>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input1: '',
input2: '',
input3: '',
select: ''
input1: ref(''),
input2: ref(''),
input3: ref(''),
select: ref('')
}
}
}
})
</script>
```
:::
@@ -287,16 +304,17 @@ export default {
</div>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
input1: '',
input2: '',
input3: '',
input4: ''
input1: ref(''),
input2: ref(''),
input3: ref(''),
input4: ref('')
}
}
}
})
</script>
```
:::
@@ -331,45 +349,53 @@ Vous pouvez obtenir de l'aide ou des suggestions basées sur ce que vous entrez.
</el-col>
</el-row>
<script>
export default {
data() {
return {
links: [],
state1: '',
state2: ''
};
},
methods: {
querySearch(queryString, cb) {
var links = this.links;
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
setup() {
const links = ref([]);
const querySearch = (queryString, cb) => {
var results = queryString
? links.value.filter(createFilter(queryString))
: links.value;
// call callback function to return suggestions
cb(results);
},
createFilter(queryString) {
return (link) => {
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
},
handleSelect(item) {
console.log(item);
}
},
mounted() {
this.links = this.loadAll();
}
}
};
const createFilter = (queryString) => {
return (restaurant) => {
return (
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
0
);
};
};
const loadAll = () => {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
};
const handleSelect = (item) => {
console.log(item);
};
onMounted(() => {
links.value = loadAll();
});
return {
links,
state1: ref(''),
state2: ref(''),
querySearch,
createFilter,
loadAll,
handleSelect,
};
},
});
</script>
```
:::
@@ -386,18 +412,16 @@ Vous pouvez personnaliser la manière dont les suggestions sont affichées.
:fetch-suggestions="querySearch"
placeholder="Entrez quelque chose"
@select="handleSelect">
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClick">
</i>
<template slot-scope="{ item }">
<template v-slot:suffix>
<i class="el-icon-edit el-input__icon" @click="handleIconClick"></i>
</template>
<template v-slot="{ item }">
<div class="value">{{ item.value }}</div>
<span class="link">{{ item.link }}</span>
</template>
</el-autocomplete>
<style>
<style lang="scss">
.my-autocomplete {
li {
line-height: normal;
@@ -416,47 +440,59 @@ Vous pouvez personnaliser la manière dont les suggestions sont affichées.
</style>
<script>
export default {
data() {
return {
links: [],
state: ''
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
setup() {
const links = ref([]);
const querySearch = (queryString, cb) => {
var results = queryString
? links.value.filter(createFilter(queryString))
: links.value;
// call callback function to return suggestion objects
cb(results);
};
const createFilter = (queryString) => {
return (restaurant) => {
return (
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
0
);
};
},
methods: {
querySearch(queryString, cb) {
var links = this.links;
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
// call callback function to return suggestion objects
cb(results);
},
createFilter(queryString) {
return (link) => {
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
},
handleSelect(item) {
console.log(item);
},
handleIconClick(ev) {
console.log(ev);
}
},
mounted() {
this.links = this.loadAll();
}
}
};
const loadAll = () => {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
};
const handleSelect = (item) => {
console.log(item);
};
const handleIconClick = (ev) => {
console.log(ev);
};
onMounted(() => {
links.value = loadAll();
});
return {
links,
state: ref(''),
querySearch,
createFilter,
loadAll,
handleSelect,
handleIconClick,
};
},
});
</script>
```
:::
@@ -473,49 +509,58 @@ Vous pouvez aller chercher des infos de suggestions sur un serveur distant.
placeholder="Entrez quelque chose"
@select="handleSelect"
></el-autocomplete>
<script>
export default {
data() {
return {
links: [],
state: '',
timeout: null
};
},
methods: {
loadAll() {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
},
querySearchAsync(queryString, cb) {
var links = this.links;
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
},
createFilter(queryString) {
return (link) => {
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect(item) {
console.log(item);
}
},
mounted() {
this.links = this.loadAll();
}
};
<script>
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
setup() {
const links = ref([]);
const loadAll = () => {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
};
let timeout;
const querySearchAsync = (queryString, cb) => {
var results = queryString
? links.value.filter(createFilter(queryString))
: links.value;
clearTimeout(timeout);
timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
};
const createFilter = (queryString) => {
return (restaurant) => {
return (
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
0
);
};
};
const handleSelect = (item) => {
console.log(item);
};
onMounted(() => {
links.value = loadAll();
});
return {
links,
state: ref(''),
querySearchAsync,
createFilter,
loadAll,
handleSelect,
};
},
});
</script>
```
:::
@@ -544,14 +589,15 @@ Vous pouvez aller chercher des infos de suggestions sur un serveur distant.
</el-input>
<script>
export default {
data() {
import { defineComponent, ref } from 'vue'
export default defineComponent ({
setup() {
return {
text: '',
textarea: ''
text: ref(''),
textarea: ref('')
}
}
}
})
</script>
```
:::

909
website/docs/zh-CN/input.md
View File

File diff suppressed because it is too large Load Diff