tiny-vue/examples/sites/demos/mobile/app/minipicker/toolbar.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>