naive-ui/demo/documentation/components/transfer/enUS/basic.md

51 lines
991 B
Markdown
Raw Normal View History

2019-10-25 12:59:50 +08:00
# Basic
```html
<n-transfer
ref="transfer"
v-model="value"
:options="options"
/>
<n-button @click="regenOptions">
Regen Options
</n-button>
<n-button @click="regenValues">
Regen Values
</n-button>
<pre class="n-doc-section__inspect">{{ JSON.stringify(value) }}</pre>
<pre class="n-doc-section__inspect">{{ $refs.transfer ? $refs.transfer._data : null }}</pre>
```
```js
let prefix = null
function genOptions () {
prefix = Math.random().toString(36).slice(2, 5)
return Array.apply(null, { length: 20 }).map((v, i) => ({
label: prefix + 'Option' + i,
value: prefix + i,
disabled: i % 3 === 0
}))
}
function genValues () {
return Array.apply(null, { length: 5 }).map((v, i) => prefix + i)
}
export default {
data () {
return {
options: genOptions(),
value: genValues()
}
},
mounted () {
},
methods: {
regenOptions () {
this.options = genOptions()
},
regenValues () {
this.value = genValues()
}
}
}
```