mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-06 12:17:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(select): composition api (#1108)

Browse Source
This commit is contained in:
songjianet 2021-09-07 00:33:24 +08:00 committed by GitHub
parent b345b224af
commit 55fac9473d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 106 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/select/demos/enUS/remote-multiple.demo.md
View File

@ -17,6 +17,8 @@ Async example for multiple select.
``` ```
```js ```js
import { defineComponent, ref } from 'vue'
const options = [ const options = [
{ {
label: 'Drive My Car', label: 'Drive My Car',
@ -68,24 +70,29 @@ const options = [
} }
] ]
export default { export default defineComponent({
data () { setup () {
const loadingRef = ref(false)
const optionsRef = ref([])
return { return {
selectedValues: null, selectedValues: ref(null),
loading: false, loading: loadingRef,
options: [], options: optionsRef,
handleSearch: (query) => { handleSearch: (query) => {
if (!query.length) { if (!query.length) {
this.options = [] optionsRef.value = []
return return
} }
this.loading = true loadingRef.value = true
window.setTimeout(() => { window.setTimeout(() => {
this.options = options.filter((item) => ~item.label.indexOf(query)) optionsRef.value = options.filter(
this.loading = false (item) => ~item.label.indexOf(query)
)
loadingRef.value = false
}, 1000) }, 1000)
} }
} }
} }
} })
``` ```

27
src/select/demos/enUS/remote.demo.md
View File

@ -16,6 +16,8 @@ Async example for single select.
``` ```
```js ```js
import { defineComponent, ref } from 'vue'
const options = [ const options = [
{ {
label: 'Drive My Car', label: 'Drive My Car',
@ -67,24 +69,29 @@ const options = [
} }
] ]
export default { export default defineComponent({
data () { setup () {
const loadingRef = ref(false)
const optionsRef = ref([])
return { return {
value: null, value: ref(null),
loading: false, loading: loadingRef,
options: [], options: optionsRef,
handleSearch: (query) => { handleSearch: (query) => {
if (!query.length) { if (!query.length) {
this.options = [] optionsRef.value = []
return return
} }
this.loading = true loadingRef.value = true
window.setTimeout(() => { window.setTimeout(() => {
this.options = options.filter((item) => ~item.label.indexOf(query)) optionsRef.value = options.filter(
this.loading = false (item) => ~item.label.indexOf(query)
)
loadingRef.value = false
}, 1000) }, 1000)
} }
} }
} }
} })
``` ```

35
src/select/demos/enUS/scroll-event.demo.md
View File

@ -16,14 +16,19 @@ My colleague said he want use scroll status to async load options.
``` ```
```js ```js
export default { import { defineComponent, ref } from 'vue'
data () {
export default defineComponent({
setup () {
const scrollContentHeightRef = ref(null)
const scrollContainerHeightRef = ref(null)
const scrollContainerScrollTopRef = ref(null)
return { return {
value: null, value: ref(null),
array: null, scrollContentHeight: scrollContentHeightRef,
scrollContentHeight: null, scrollContainerHeight: scrollContainerHeightRef,
scrollContainerHeight: null, scrollContainerScrollTop: scrollContainerScrollTopRef,
scrollContainerScrollTop: null,
options: [ options: [
{ {
label: 'Drive My Car', label: 'Drive My Car',
@ -73,15 +78,13 @@ export default {
label: 'Wait', label: 'Wait',
value: 'song12' value: 'song12'
} }
] ],
} handleScroll (e) {
}, scrollContentHeightRef.value = e.target.firstElementChild.offsetHeight
methods: { scrollContainerScrollTopRef.value = e.target.scrollTop
handleScroll (e) { scrollContainerHeightRef.value = e.target.offsetHeight
this.scrollContentHeight = e.target.firstElementChild.offsetHeight }
this.scrollContainerScrollTop = e.target.scrollTop
this.scrollContainerHeight = e.target.offsetHeight
} }
} }
} })
``` ```

27
src/select/demos/zhCN/remote-multiple.demo.md
View File

@ -17,6 +17,8 @@
``` ```
```js ```js
import { defineComponent, ref } from 'vue'
const options = [ const options = [
{ {
label: 'Drive My Car', label: 'Drive My Car',
@ -68,24 +70,29 @@ const options = [
} }
] ]
export default { export default defineComponent({
data () { setup () {
const loadingRef = ref(false)
const optionsRef = ref([])
return { return {
selectedValues: null, selectedValues: ref(null),
loading: false, loading: loadingRef,
options: [], options: optionsRef,
handleSearch: (query) => { handleSearch: (query) => {
if (!query.length) { if (!query.length) {
this.options = [] optionsRef.value = []
return return
} }
this.loading = true loadingRef.value = true
window.setTimeout(() => { window.setTimeout(() => {
this.options = options.filter((item) => ~item.label.indexOf(query)) optionsRef.value = options.filter(
this.loading = false (item) => ~item.label.indexOf(query)
)
loadingRef.value = false
}, 1000) }, 1000)
} }
} }
} }
} })
``` ```

27
src/select/demos/zhCN/remote.demo.md
View File

@ -16,6 +16,8 @@
``` ```
```js ```js
import { defineComponent, ref } from 'vue'
const options = [ const options = [
{ {
label: 'Drive My Car', label: 'Drive My Car',
@ -67,24 +69,29 @@ const options = [
} }
] ]
export default { export default defineComponent({
data () { setup () {
const loadingRef = ref(false)
const optionsRef = ref([])
return { return {
value: null, value: ref(null),
loading: false, loading: loadingRef,
options: [], options: optionsRef,
handleSearch: (query) => { handleSearch: (query) => {
if (!query.length) { if (!query.length) {
this.options = [] optionsRef.value = []
return return
} }
this.loading = true loadingRef.value = true
window.setTimeout(() => { window.setTimeout(() => {
this.options = options.filter((item) => ~item.label.indexOf(query)) optionsRef.value = options.filter(
this.loading = false (item) => ~item.label.indexOf(query)
)
loadingRef.value = false
}, 1000) }, 1000)
} }
} }
} }
} })
``` ```

35
src/select/demos/zhCN/scroll-event.demo.md
View File

@ -16,14 +16,19 @@
``` ```
```js ```js
export default { import { defineComponent, ref } from 'vue'
data () {
export default defineComponent({
setup () {
const scrollContentHeightRef = ref(null)
const scrollContainerHeightRef = ref(null)
const scrollContainerScrollTopRef = ref(null)
return { return {
value: null, value: ref(null),
array: null, scrollContentHeight: scrollContentHeightRef,
scrollContentHeight: null, scrollContainerHeight: scrollContainerHeightRef,
scrollContainerHeight: null, scrollContainerScrollTop: scrollContainerScrollTopRef,
scrollContainerScrollTop: null,
options: [ options: [
{ {
label: 'Drive My Car', label: 'Drive My Car',
@ -73,15 +78,13 @@ export default {
label: 'Wait', label: 'Wait',
value: 'song12' value: 'song12'
} }
] ],
} handleScroll (e) {
}, scrollContentHeightRef.value = e.target.firstElementChild.offsetHeight
methods: { scrollContainerScrollTopRef.value = e.target.scrollTop
handleScroll (e) { scrollContainerHeightRef.value = e.target.offsetHeight
this.scrollContentHeight = e.target.firstElementChild.offsetHeight }
this.scrollContainerScrollTop = e.target.scrollTop
this.scrollContainerHeight = e.target.offsetHeight
} }
} }
} })
``` ```