forked from opentiny/tiny-vue
275 lines
7.1 KiB
Vue
275 lines
7.1 KiB
Vue
<template>
|
||
<div class="demo-form">
|
||
<h3 class="title">是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch></h3>
|
||
<tiny-form :disabled="formDisabled" label-width="150px">
|
||
<tiny-form-item label="Input">
|
||
<tiny-input v-model="createData.user"></tiny-input>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="Select">
|
||
<tiny-select v-model="createData.select" placeholder="请选择">
|
||
<tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
|
||
</tiny-option>
|
||
</tiny-select>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="Numeric">
|
||
<tiny-numeric v-model="createData.quantity"></tiny-numeric>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="Switch">
|
||
<tiny-switch v-model="createData.sw"></tiny-switch>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="Radio">
|
||
<tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
|
||
<tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="Checkbox">
|
||
<tiny-checkbox v-model="createData.checked"> 复选框 </tiny-checkbox>
|
||
<tiny-checkbox v-model="createData.checked2"> 复选框2 </tiny-checkbox>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="CheckboxGroup">
|
||
<tiny-checkbox-group v-model="createData.groupChecked">
|
||
<tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
|
||
<tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
|
||
</tiny-checkbox-group>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="Datepicker">
|
||
<tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="TimePicker">
|
||
<tiny-time-picker
|
||
v-model="createData.timePicker"
|
||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||
placeholder="任意时间点"
|
||
></tiny-time-picker>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="Droptime">
|
||
<tiny-drop-times v-model="createData.dropTimes"></tiny-drop-times>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="Tooltip">
|
||
<tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
|
||
<tiny-input v-model="createData.input" placeholder="click"></tiny-input>
|
||
</tiny-tooltip>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="Textarea">
|
||
<tiny-input v-model="createData.textarea" type="textarea" maxlength="15"> </tiny-input>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="Autocomplete">
|
||
<tiny-autocomplete
|
||
v-model="createData.autocomplete"
|
||
placeholder="请输入内容"
|
||
:fetch-suggestions="querySearch"
|
||
></tiny-autocomplete>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="ButtonGroup">
|
||
<tiny-button-group :data="groupData"></tiny-button-group>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="Cascader">
|
||
<tiny-cascader :options="options" :props="{ emitPath: false }"></tiny-cascader>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="IpAddress">
|
||
<tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="Link">
|
||
<tiny-link>默认链接</tiny-link>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="PopEditor">
|
||
<tiny-popeditor
|
||
v-model="createData.popEditor"
|
||
placeholder="请选择"
|
||
:grid-op="gridOp"
|
||
text-field="name"
|
||
value-field="id"
|
||
></tiny-popeditor>
|
||
</tiny-form-item>
|
||
<tiny-form-item label="Slider">
|
||
<tiny-slider v-model="createData.slider"></tiny-slider>
|
||
</tiny-form-item>
|
||
</tiny-form>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from 'vue'
|
||
import {
|
||
Form as TinyForm,
|
||
FormItem as TinyFormItem,
|
||
Switch as TinySwitch,
|
||
Checkbox as TinyCheckbox,
|
||
Numeric as TinyNumeric,
|
||
Radio as TinyRadio,
|
||
DatePicker as TinyDatePicker,
|
||
DropTimes as TinyDropTimes,
|
||
Tooltip as TinyTooltip,
|
||
Input as TinyInput,
|
||
Button as TinyButton,
|
||
Autocomplete as TinyAutocomplete,
|
||
ButtonGroup as TinyButtonGroup,
|
||
Cascader as TinyCascader,
|
||
CheckboxGroup as TinyCheckboxGroup,
|
||
IpAddress as TinyIpAddress,
|
||
Link as TinyLink,
|
||
Popeditor as TinyPopeditor,
|
||
Select as TinySelect,
|
||
Option as TinyOption,
|
||
Slider as TinySlider,
|
||
TimePicker as TinyTimePicker
|
||
} from '@opentiny/vue'
|
||
|
||
const createData = reactive({
|
||
checked: false,
|
||
checked2: true,
|
||
quantity: 0,
|
||
sw: false,
|
||
sex: '1',
|
||
datepicker: '',
|
||
textarea: '',
|
||
dropTimes: '',
|
||
input: '',
|
||
autocomplete: '',
|
||
groupChecked: ['复选框1'],
|
||
ipAddress: '192.168.0.1',
|
||
popEditor: '',
|
||
select: '',
|
||
slider: 28,
|
||
timePicker: new Date(2016, 9, 10, 18, 40),
|
||
timeSelect: ''
|
||
})
|
||
const formDisabled = ref(false)
|
||
const restaurants = ref([
|
||
{
|
||
value: 'GFD科技YX公司',
|
||
address: '福州'
|
||
},
|
||
{
|
||
value: 'WWWW科技YX公司',
|
||
address: '深圳福田区'
|
||
},
|
||
{
|
||
value: 'RFV有限责任公司',
|
||
address: '中山市'
|
||
}
|
||
])
|
||
const selectOptions = ref([
|
||
{
|
||
value: '选项1',
|
||
label: '黄金糕'
|
||
},
|
||
{
|
||
value: '选项2',
|
||
label: '双皮奶'
|
||
},
|
||
{
|
||
value: '选项3',
|
||
label: '蚵仔煎'
|
||
}
|
||
])
|
||
const groupData = ref([
|
||
{ text: 'Button1', value: 1 },
|
||
{ text: 'Button2', value: 2 },
|
||
{ text: 'Button3', value: 3 }
|
||
])
|
||
const gridOp = ref({
|
||
columns: [
|
||
{
|
||
field: 'id',
|
||
title: 'ID',
|
||
width: 40
|
||
},
|
||
{
|
||
field: 'name',
|
||
title: '名称',
|
||
showOverflow: 'tooltip'
|
||
},
|
||
{
|
||
field: 'province',
|
||
title: '省份',
|
||
width: 80
|
||
},
|
||
{
|
||
field: 'city',
|
||
title: '城市',
|
||
width: 80
|
||
}
|
||
],
|
||
data: [
|
||
{
|
||
id: '1',
|
||
name: 'GFD科技YX公司',
|
||
city: '福州',
|
||
province: '福建'
|
||
},
|
||
{
|
||
id: '2',
|
||
name: 'WWW科技YX公司',
|
||
city: '深圳',
|
||
province: '广东'
|
||
},
|
||
{
|
||
id: '3',
|
||
name: 'RFV有限责任公司',
|
||
city: '中山',
|
||
province: '广东'
|
||
}
|
||
]
|
||
})
|
||
const options = ref([
|
||
{
|
||
value: 'zhinan',
|
||
label: '指南',
|
||
children: [
|
||
{
|
||
value: 'anzhuang',
|
||
label: '安装',
|
||
children: [
|
||
{
|
||
value: 'xiangmudengji',
|
||
label: '项目登记'
|
||
},
|
||
{
|
||
value: 'huanjingzhunbei',
|
||
label: '环境准备'
|
||
},
|
||
{
|
||
value: 'anzhuangcli',
|
||
label: '安装 CLI'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
value: 'kaifa',
|
||
label: '开发',
|
||
children: [
|
||
{
|
||
value: 'yinruzujian',
|
||
label: '引入组件'
|
||
},
|
||
{
|
||
value: 'monishuju',
|
||
label: '模拟数据'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
])
|
||
|
||
function querySearch(queryString, cb) {
|
||
cb(queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value)
|
||
}
|
||
|
||
function createFilter(queryString) {
|
||
return (restaurant) => restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.demo-form {
|
||
width: 480px;
|
||
}
|
||
|
||
.title {
|
||
margin-bottom: 30px;
|
||
margin-left: 100px;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|