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>
相关推荐
妮妮喔妮1 分钟前
【无标题】
开发语言·前端·javascript
fie88896 分钟前
浅谈几种js设计模式
开发语言·javascript·设计模式
巴巴_羊1 小时前
React Ref使用
前端·javascript·react.js
徊忆羽菲2 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃2 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
coding随想2 小时前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript
難釋懷2 小时前
TypeScript-webpack
javascript·webpack·typescript
Rockson2 小时前
使用Ruby接入实时行情API教程
javascript·python
UI设计和前端开发从业者3 小时前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子3 小时前
Web开发中的文件上传
前端·javascript·面试