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

Logo

前往低代码交流专区

更多推荐