uniapp中使用uni-ui组件库
<template>
<view id="my" data-name="王五" data-age="18">my页面</view>
<uni-data-select
:localdata="localdata"
:value="valueGender"
clear
placeholder="请选择性别"
@change="handleChangeGender"
/>
<uni-datetime-picker />
<uni-form>
<uni-form-item label="姓名">
<input v-model="name" type="text" placeholder="请输入姓名" />
</uni-form-item>
<uni-form-item label="年龄">
<input type="number" v-model="age" placeholder="请输入年龄" />
</uni-form-item>
<uni-form-item label="性别">
<radio-group :value="gender" @change="handleGender">
<radio value="11">男</radio>
<radio value="22">女</radio>
<radio value="33">未知</radio>
</radio-group>
</uni-form-item>
<uni-form-item label="爱好">
<checkbox-group :value="hobbies" @change="handleHobbies">
<checkbox value="11">篮球</checkbox>
<checkbox value="22">足球</checkbox>
<checkbox value="33">乒乓球</checkbox>
</checkbox-group>
</uni-form-item>
<uni-form-item label="城市">
<uni-data-select
:localdata="localdataCity"
:value="valueCity"
clear
placeholder="请选择城市"
@change="handleChangeCity"
/>
</uni-form-item>
<uni-form-item label="日期">
<uni-datetime-picker v-model="date" type="date" />
</uni-form-item>
<uni-form-item label="时间">
<uni-datetime-picker v-model="time" type="time" />
</uni-form-item>
<uni-form-item label="滑块">
<slider value="0" @change="sliderChange" show-value />
</uni-form-item>
<uni-form-item label="开关">
<switch @change="handleSwitch" />
</uni-form-item>
<uni-form-item label="文本域">
<textarea v-model="textarea" placeholder="请输入文本" />
</uni-form-item>
<uni-form-item label="图片">
<image src="/static/logo.png" />
</uni-form-item>
<uni-form-item label="视频">
<audio src="/static/mp-weixin/qq提示音.mp3" controls />
</uni-form-item>
<uni-form-item>
<button type="primary" @click="handleClick">提交</button>
</uni-form-item>
</uni-form>
</template>
<script>
export default{
data() {
return {
localdata: [
{text: "男", value: 11},
{text: "女", value: 22},
{text: "未知", value: 33},
],
valueGender: "",
name: "",
age: "",
gender: "",
hobbies: [],
localdataCity: [
{text: "北京", value: 11},
{text: "上海", value: 22},
{text: "广州", value: 33},
],
valueCity: "",
date: "",
time: "",
sliderValue: 0,
checked: false,
textarea: ""
}
},
onLoad() {
},
onPullDownRefresh() {
setTimeout(() => {
uni.stopPullDownRefresh()
}, 1000)
},
mounted() {
},
methods:{
handleSwitch(e) {
this.checked = e.detail.value
},
sliderChange(e) {
this.sliderValue = e.detail.value
},
handleChangeGender(e){
this.value = e
console.log(this.value)
},
handleClick() {
// console.log(this.name, this.age, this.gender, this.hobbies, this.valueCity)
console.log(this.textarea)
},
handleGender(e) {
this.gender = e.target.value
},
handleHobbies(e) {
this.hobbies = e.target.value
},
handleChangeCity(e) {
this.valueCity = e
console.log(this.valueCity)
}
}
}
</script>
<style scoped>
</style>