uniapp中使用uni-ui组件库

  1. src目录下新建components目录
  2. 从uni-ui引入对应的组件目录,如下图
  3. 直接使用组件,demo
javascript 复制代码
<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>
相关推荐
HuYi_code7 分钟前
WeChat 小程序下载文件实现
微信小程序·uni-app
whyfail42 分钟前
React v19.2版本
前端·javascript·react.js
00后程序员张1 小时前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
慧慧吖@1 小时前
react基础
前端·javascript·react.js
浪裡遊1 小时前
MUI组件库与主题系统全面指南
开发语言·前端·javascript·vue.js·react.js·前端框架·node.js
2501_915921431 小时前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
软件技术NINI2 小时前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI2 小时前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
Mintopia2 小时前
🛡️ 对抗性攻击与防御:WebAI模型的安全加固技术
前端·javascript·aigc
自律版Zz3 小时前
手写 Promise.resolve:从使用场景到实现的完整推导
前端·javascript