forked from opentiny/tiny-vue
70 lines
1.4 KiB
Vue
70 lines
1.4 KiB
Vue
<template>
|
|
<div class="tiny-mobile-mini-picker-demo mini-picker-wrap">
|
|
<div class="page__hd">
|
|
<h1 class="page__title">MiniPicker</h1>
|
|
<p class="page__desc">单列选择器</p>
|
|
</div>
|
|
<tiny-form label-width="60px">
|
|
<tiny-form-item label="名字">
|
|
<tiny-input v-model="val" @focus="fn" placeholder="请选择" type="form" readonly vertical></tiny-input>
|
|
</tiny-form-item>
|
|
</tiny-form>
|
|
<tiny-mini-picker
|
|
@confirm="getVal"
|
|
title="我是基本选择器"
|
|
:columns="columns1"
|
|
:visible="boxVisibility"
|
|
@update:visible="boxVisibility = $event"
|
|
>
|
|
<template #toolbar>
|
|
<div>toolbar 插槽</div>
|
|
</template>
|
|
</tiny-mini-picker>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="jsx">
|
|
import { Form, FormItem, Input, MiniPicker } from '@opentiny/vue'
|
|
|
|
export default {
|
|
components: {
|
|
TinyMiniPicker: MiniPicker,
|
|
TinyForm: Form,
|
|
TinyFormItem: FormItem,
|
|
TinyInput: Input
|
|
},
|
|
data() {
|
|
return {
|
|
boxVisibility: false,
|
|
columns1: ['小花', '小草', '小叶', '小树', '小星', '小月'],
|
|
val: ''
|
|
}
|
|
},
|
|
methods: {
|
|
fn() {
|
|
this.boxVisibility = true
|
|
},
|
|
getVal(val) {
|
|
this.val = val
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.page__hd {
|
|
padding: 40px;
|
|
}
|
|
.page__title {
|
|
font-weight: 400;
|
|
font-size: 21px;
|
|
text-align: left;
|
|
}
|
|
.page__desc {
|
|
margin-top: 5px;
|
|
color: #888;
|
|
font-size: 14px;
|
|
text-align: left;
|
|
}
|
|
</style>
|