第一步：
先下载 uview UI 框架
详见 项目 引入 uView_vue引入uview_qq_2524963996的博客-CSDN博客【代码】 项目 引入 uView。_vue引入uviewhttps://blog.csdn.net/qq_44161703/article/details/131168976?spm=1001.2014.3001.5501
第二步：
可以直接粘贴使用（只不过要修改一下样式根据自己的需要）
有 （输入框，Picker 选择器，Radio 单选框，Checkbox 复选框，Textarea 文本域，Overlay 遮罩层 ，Popup 弹出层，Switch 开关选择器，Tabs 标签， DatetimePicker 选择器，加载中...， Button 按钮）里面有详细的说明
<template>
<view class="">
<!-- 输入框 -->
<u--input maxlength="50" placeholder="请输入内容" v-model="inputValue"></u--input>
<!-- 输入框 end -->
<!-- Picker 选择器 -->
<view @click="show = true">
<u--input disabled class="active" placeholder="请选择内容" v-model="showValue"></u--input>
<u-picker @cancel="show = false" @confirm="confirmValue" :show="show" :columns="columns"></u-picker>
</view>
<!-- Picker 选择器end-->
<!-- Radio 单选框 -->
<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
<u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name"></u-radio>
</u-radio-group>
<!-- Radio 单选框end -->
<!-- Checkbox 复选框 -->
<view>
<u-checkbox-group iconPlacement="left" v-model="checkboxValue1" placement="column" @change="checkboxChange">
<u-checkbox :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in checkboxList1" :key="index" :label="item.name" :name="item.name"></u-checkbox>
</u-checkbox-group>
</view>
<!-- Checkbox 复选框end -->
<!-- Textarea 文本域 height autoHeight maxlength -->
<u--textarea height="100" autoHeight maxlength="1000" count v-model="value1" placeholder="请输入内容"></u--textarea>
<!-- Textarea 文本域 height autoHeight maxlength end -->
<!-- Overlay 遮罩层 @click="show = false"-->
<u-overlay :show="overlayShow">
<view class="warp">
<view class="rect" @tap.stop="overlayShow = false">关闭</view>
</view>
</u-overlay>
<view class="" @click="overlayShow = true">打开遮罩</view>
<!-- Overlay 遮罩层end -->
<!-- Popup 弹出层 round mode="top"-->
<view>
<u-popup safeAreaInsetBottom closeable :round="10" :show="popupShow" @close="close" @open="open">
<view class="heght">
<text>出淤泥而不染，濯清涟而不妖</text>
</view>
</u-popup>
<u-button @click="popupShow = true">打开</u-button>
</view>
<!-- Popup 弹出层 end-->
<!-- Switch 开关选择器 asyncChange-->
<view class="">
<u-switch asyncChange v-model="switchCalue" @change="change"></u-switch>
</view>
<!-- Switch 开关选择器end -->
<!-- Button 按钮 :plain="true"（细边） disabled icon="map" loading loadingText="加载中"-->
<view class="">
<u-button :plain="true" icon="map" shape="circle" type="primary" text="确定"></u-button>
<u-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
<!-- -->
</view>
<!-- Button 按钮 end -->
<!-- Tabs 标签 -->
<view class="">
<u-tabs
:list="list4"
lineWidth="30"
lineColor="#f56c6c"
:activeStyle="{
color: '#303133',
fontWeight: 'bold',
transform: 'scale(1.05)'
}"
:inactiveStyle="{
color: '#606266',
transform: 'scale(1)'
}"
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
></u-tabs>
</view>
<!-- Tabs 标签end -->
<!-- DatetimePicker 选择器 mode="date"-->
<view class="">
<view class="col-6" @click="pickerShowTime = true">
<u--input class="active" disabled placeholder="请选择日期" :value="formatDate(tasktime)" suffixIcon="calendar" suffixIconStyle="color: #909399"></u--input>
<u-datetime-picker
:min-date="Number(new Date('2021-01-01'))"
:max-date="Number(new Date('2035-01-01'))"
:show="pickerShowTime"
:formatter="formatter"
v-model="tasktime"
@cancel="cancel"
mode="datetime"
@confirm="confirm"
></u-datetime-picker>
</view>
</view>
<!-- DatetimePicker 选择器end -->
<!-- 加载中... vertical可以指定文字和图标是否垂直排列-->
<view class="">
<u-overlay :show="loadingShow">
<view class="warp">
<view class="rect1">
<u-loading-icon vertical color="white" textColor="white" text="加载中..." textSize="14"></u-loading-icon>
</view>
</view>
</u-overlay>
<view class="" @click="loadingShow = true">打开遮罩加载中...</view>
</view>
<!-- 加载中... end-->
</view>
</template>
<script>
export default {
components: {},
data() {
return {
// 输入框
inputValue: '',
// Textarea 文本域
value1: '',
// Picker 选择器
show: false,
columns: [['中国', '美国', '日本']],
showValue: '',
showValueIndex: '',
// Picker 选择器 end
// Radio 单选框
radiolist1: [
{
name: '苹果',
disabled: false
},
{
name: '香蕉',
disabled: false
},
{
name: '橙子',
disabled: false
},
{
name: '榴莲',
disabled: false
}
],
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
radiovalue1: '苹果',
// Radio 单选框 end
// Checkbox 复选框
checkboxValue1: ['苹果', '香蕉'],
// 基本案列数据
checkboxList1: [
{
name: '苹果',
disabled: false
},
{
name: '香蕉',
disabled: false
},
{
name: '橙子',
disabled: false
}
],
// Checkbox 复选框end
// Overlay 遮罩层
overlayShow: false,
// Overlay 遮罩层end
// Popup 弹出层
popupShow: false,
// Popup 弹出层end
// Switch 开关选择器
switchCalue: false,
// Switch 开关选择器end
// Tabs 标签
list4: [
{
name: '关注'
},
{
name: '推荐',
badge: {
isDot: true
}
},
{
name: '电影'
},
{
name: '科技'
},
{
name: '音乐'
},
{
name: '美食'
},
{
name: '文化'
},
{
name: '财经'
},
{
name: '手工'
}
],
// Tabs 标签 end
// DatetimePicker 选择器
pickerShowTime: false,
tasktime: Number(new Date()),
// DatetimePicker 选择器end
// 加载中...
loadingShow: false
// 加载中...end
};
},
methods: {
// Picker 选择器
confirmValue(e) {
// 需要传给后端 根据需要
this.showValueIndex = e.indexs[0] + 1;
this.showValue = e.value[0];
this.show = false;
},
// Picker 选择器 end
// Radio 单选框
groupChange(e) {
console.log(e);
},
// Radio 单选框end
// Checkbox 复选框
checkboxChange(n) {
console.log('change', n);
},
// Checkbox 复选框end
// Popup 弹出层
open() {
// console.log('open');
this.popupShow = true;
},
close() {
this.popupShow = false;
// console.log('close');
},
// Popup 弹出层 end
// 异步控制弹窗 Switch 开关选择器
change(e) {
uni.showModal({
content: e ? '确定要打开吗' : '确定要关闭吗',
success: (res) => {
if (res.confirm) {
this.switchCalue = e;
}
}
});
},
// 异步控制弹窗 Switch 开关选择器end
// DatetimePicker 选择器
// 确定
confirm(e) {
this.tasktime = e.value;
this.pickerShowTime = false;
},
// 取消
cancel() {
this.pickerShowTime = false;
},
formatDate(data) {
let date = new Date(data);
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
month = month > 9 ? month : '0' + month;
day = day < 10 ? '0' + day : day;
hours = hours > 9 ? hours : '0' + hours;
minutes = minutes > 9 ? minutes : '0' + minutes;
seconds = seconds > 9 ? seconds : '0' + seconds;
// 格式调整
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
formatter(type, value) {
const typeMap = {
year: '年',
month: '月',
day: '日',
hour: '时',
minute: '分',
second: '秒'
};
return typeMap[type] ? `${value}${typeMap[type]}` : value;
}
// DatetimePicker 选择器end
}
};
</script>
<style scoped lang="less">
// Picker 选择器
.active {
background-color: #fff !important;
}
// Picker 选择器 end
// Overlay 遮罩层
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rect {
width: 120px;
height: 120px;
background-color: #fff;
}
// Overlay 遮罩层end
// Popup 弹出层
.heght {
height: 80vh;
}
// Popup 弹出层end
</style>
以上就是 常用的框啦！
