uniapp中使用uni-ui组件库

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

<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>

原文地址：https://blog.csdn.net/weixin_42289273/article/details/140357898

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！