HBuilderX.vue文件 以及 表单，导航栏的组件使用
<template> ui设计 所有的有关界面的都卸载这个里面<view> 子标签 所有的标签都写在这个里面，写在<template>里面，可以嵌套，但不可以写两个<script> js业务代码 所有有关业务代码的都写在这个里面<style> css 样式 界面的大小，颜色，以及所有相关的样式都写在这里<uni-nav-bar>
·
vue文件基本界面
注: 所有标签都是成对出现 结构为 <标签名></标签名> 或者<标签名 />
<template> ui设计 所有的有关界面的都写在这个里面
<view> 子标签 所有的标签都写在这个里面，写在<template>里面，可以嵌套，但不可以写两个
<script> js业务代码 所有有关业务代码的都写在这个里面
expoer default 所有代码都写在这个代码块里
data() 所有有管数据的都写在这个代码块
methods: 所有方法都写在这个代码块
import(引用) 名称 form 路径(你要使用的文件的路径)
components 把名称 定义为主键,可以在<template> <view> 子标签里被使用
<style> css 样式 界面的大小，颜色，以及所有相关的样式都写在这里
使用 . + 名称 来定义 通过class 属性调用
<uni-nav-bar > 自定义导航栏
background-color 背景颜色
color 字体颜色
title 标题
<uni-nav-bar background-color=#d3233b color="#FFFFFF" title="睿智法务" ></uni-nav-bar><input> 输入框
type 类型
placeholder 文本框里的提示文字
singleline 单行模式
class css样式调用
<input v-model="userData.phone" type="number" placeholder="请输入手机号" :singleline="true" class="input_str"/><button> 按钮
type 类型
size 大小
@click 点击事件
<button type="primary" size="mini" @click="doLogin" >登录</button> <uni-popup>弹出层
type 弹出方式
ref
<uni-popup ref="popup" type="dialog"><uni-popup-dialog > 对话框
mode 对话框模式
title 标题
content 对话框内容，mode为base模式下生效
duration
before-close 是否拦截按钮事件,如为true，则不会关闭对话框，关闭需要手动执行 uni-popup 的 close 方法
@close 点击事件,点击dialog取消按钮触发
@confirm 点击事件,点击dialog确定按钮触发
<uni-popup-dialog mode="base" title="通知" content="手机号或密码错误" :duration="2000" :before-close="true" @close="close" @confirm="close"></uni-popup-dialog> open(){
this.$refs.popup.open()
},
close() {
this.$refs.popup.close()
}<uni-group>分组
tiile 标题
border 模式
top 上填充
<uni-group title="系统用户管理:用户管理" top="10" mode="card"><uni-table> 表格
<uni-table type="selection" :border="true"><uni-tr> 行
align="cengter" 居中
<uni-tr>
<uni-th align="center">昵称</uni-th>
<uni-th align="center">手机号</uni-th>
<uni-th align="center">状态</uni-th>
<uni-th align="center">操作</uni-th>
</uni-tr><uni-td >列
<uni-tr v-for="user in userList" >
<uni-td >{{user.nickname}}</uni-td>
<uni-td >{{user.phone}}</uni-td>
<uni-td align="center">
<text v-if="user.isactive==1">已激活</text>
<text style="color: red;" v-if="user.isactive==2" >已停用</text>
</uni-td>
<uni-td align="center">
<button class="uni-button" size="mini" type="primary"
@click="modify(user.id)">修改</button>
<button class="uni-button" size="mini" type="warn"
@click="deleteUser(user.id)" style="margin-left:15rpx;">删除</button>
</uni-td>
</uni-tr>v-for="user in userList" 循坏
v-if="user.isactive==1" 判断
<uni-tr v-for="user in userList" >
<uni-td >{{user.nickname}}</uni-td>
<uni-td >{{user.phone}}</uni-td>
<uni-td align="center">
<text v-if="user.isactive==1">已激活</text>
<text style="color: red;" v-if="user.isactive==2" >已停用</text>
</uni-td><uni-pagination> 分页器
current 页码
pageSize 每页显示的数据条数
total 数据总条数
<uni-pagination :current="pageIndex" :pageSize="pageSize" :total="pageTotle" @change="pageChange" /><uni-drawer > 抽屉
ref
mode(left) 模式 在左侧打开抽屉
mask-click 点击事件是否打开 true 表示打开
<uni-drawer ref="showLeft" mode="left" :mask-click="true">mask 是否显示遮罩
<uni-list> 列表
<uni-list -item> 列表子组件
title 标题
showArrow 是否显示箭头图标 true 表示确定显示
clickable 列表点击事件 true 表示可以点击触发事件
<uni-list>
<uni-list-item @click="jump(1)" title="用户管理" :showArrow="true" :clickable="true"></uni-list-item>
<uni-list-item @click="jump(2)" title="角色管理" :showArrow="true" :clickable="true"></uni-list-item>
<uni-list-item @click="jump(3)" title="资源管理" :showArrow="true" :clickable="true"></uni-list-item>
</uni-list>@click 点击事件 点击触发方法
jump(flag){
if(flag==1){
uni.redirectTo({
url: '../user/user'
});
}else if(flag==2){
console.log("跳转到角色管理");
}else if(flag==2){
console.log("跳转到资源管理");
}
}<scroll-view style="height: 100%;" scroll-y="true">
可滚动视图区域。用于区域滚动。
scrolly-y 允许纵向滚动
<uni-collapse ref="collapse" >
折叠面板
<uni-collapse-item title="系统管理" :showArrow="true">
折叠面板 子组件
<template>
<view >
<!--标题栏-->
<uni-nav-bar background-color=#d3233b color="#FFFFFF" title="睿智法务后台管理系统" leftText="功能列表" @clickLeft="showDrawer" rightText="系统退出" @clickRight="exitLogin"></uni-nav-bar>
<!--抽屉-->
<uni-drawer ref="showLeft" mode="left" :mask-click="true">
<scroll-view style="height: 100%;" scroll-y="true">
<uni-collapse ref="collapse" >
<uni-collapse-item title="系统管理" :showArrow="true">
<uni-list>
<uni-list-item @click="jump(1)" title="用户管理" :showArrow="true" :clickable="true"></uni-list-item>
<uni-list-item @click="jump(2)" title="角色管理" :showArrow="true" :clickable="true"></uni-list-item>
<uni-list-item @click="jump(3)" title="资源管理" :showArrow="true" :clickable="true"></uni-list-item>
</uni-list>
</uni-collapse-item>
</uni-collapse>
</scroll-view>
</uni-drawer>
</view>
</template>@clickLeft="showDrawer" 左侧按钮点击事件 触发方法
leftText="功能列表" 左侧按钮文本
rightText="系统退出" 右侧按钮文本
@clickRight="exitLogin" 右侧按钮点击事件 触发方法
<uni-nav-bar background-color=#d3233b color="#FFFFFF" title="睿智法务后台管理系统" leftText="功能列表" @clickLeft="showDrawer" rightText="系统退出" @clickRight="exitLogin"></uni-nav-bar> /*打开功能列表*/
showDrawer(){
this.showDrawer();
},
/*退出登录*/
exitLogin(){
uni.redirectTo({
url: '../login/login'
});
},onShow() 方法 在页面加载的时候用的方法
onShow() {
this.requsetUserList();
},uni.request({ 代码块 }) 网络请求后台接口时使用的方法
url : 请求后台接口的路径
success 请求成功后的回调函数
uni.request({
url: 'http://localhost:8070/user/getAll/'+this.pageIndex+'/'+this.pageSize, //仅为示例，并非真实接口地址。
success: (res) => {
console.log(res.data);
this.userList=res.data.data;
this.pageTotle=res.data.rows;
}
}); uni.redirectTo({ 代码块}) 页面与页面之间的请求
url 页面的路径
uni.redirectTo({
url: '../user/updateUser?id='+id
});页面与页面直接通url 路径传递参数
路径 ? 参数= +{拼接符} 参数(方法传递过来的参数)
modify(id){
uni.redirectTo({
url: '../user/updateUser?id='+id
});
},onLoad(opthions){} 页面传递过来的参数用这个方法接收
通过参数opthions 可以点出来页面传递过来的参数
onLoad(opthions){
var id=opthions.id;//获取上个页面传过来的参数
console.log("页面传参:id="+id)
this.id=opthions.id
},
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)