当前位置：首页 > news >正文

uniapp中使用uni-ui组件库

news 来源：原创 2024/9/20 9:38:22

src目录下新建components目录
从uni-ui引入对应的组件目录，如下图
直接使用组件，demo

<template><view id="my" data-name="王五" data-age="18">my页面</view><uni-data-select :localdata="localdata":value="valueGender"clearplaceholder="请选择性别"@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"clearplaceholder="请选择城市"@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 = econsole.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 = econsole.log(this.valueCity)}}
}
</script><style scoped></style>