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>
相关推荐
liangshanbo12156 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
_院长大人_8 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD8 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
要加油哦~9 小时前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
Q_Q5110082859 小时前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
阿珊和她的猫10 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
爱看书的小沐10 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
qq_3985865411 小时前
Threejs入门学习笔记
javascript·笔记·学习
2501_9160074711 小时前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview