mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-27 05:00:48 +08:00
487001d697
.demo.md for component demo .demo-entry.md for demo entry .md for common docs
1.6 KiB
1.6 KiB
输入组
<n-input-group>
<n-input :style="{ width: '33%' }" v-model="value1" />
<n-input-number :style="{ width: '33%' }" v-model="value2" />
<n-input :style="{ width: '33%' }" v-model="value3" />
</n-input-group>
<n-input-group>
<n-input-group-label>https://www.</n-input-group-label>
<n-input :style="{ width: '33%' }" v-model="value4" />
<n-input-group-label>.com</n-input-group-label>
</n-input-group>
<n-input-group>
<n-select :style="{ width: '33%' }" v-model="value5" :options="selectOptions" />
<n-cascader :style="{ width: '33%' }" v-model="value6" :options="cascaderOptions" />
<n-select :style="{ width: '33%' }" multiple v-model="value7" :options="selectOptions" />
</n-input-group>
<n-input-group>
<n-button type="primary">搜索</n-button>
<n-input :style="{ width: '50%' }" v-model="value8" />
<n-button type="primary" ghost>搜索</n-button>
</n-input-group>
<n-input-group>
<n-date-picker v-model="value9"/>
<n-time-picker v-model="value10"/>
</n-input-group>
export default {
data () {
return {
value1: null,
value2: null,
value3: null,
value4: null,
value5: 'option',
value6: null,
value7: ['option'],
value8: null,
value9: null,
value10: null,
selectOptions: [{
label: 'option',
value: 'option'
}],
cascaderOptions: [
{
label: 'option-1',
value: 'option-1',
children: [
{
label: 'option-1-1',
value: 'option-1-1'
}
]
}
]
}
}
}
.n-input-group {
margin-bottom: 12px;
}