Vue3组件使用

Home.vue测试

<template>
  <div style="margin-bottom: 30px">
    <RouterLink to="/test">通过router跳转到Test.vue页面</RouterLink>|
    <a href="/test">通过a标签跳转到Test.vue页面</a>
  </div>
  <div style="margin-bottom: 30px">
    <el-button type="primary" @click="router.push('/test')">push通过编程跳转</el-button>
    <el-button type="primary" @click="router.replace('/test')">replace通过编程跳转</el-button>
  </div>
  <div style="margin-bottom: 30px">
    <el-button type="primary" @click="router.push('/manager/test?id=1')">路由传参id=1</el-button>
    <el-button type="primary" @click="router.push('/manager/test?id=2&name=小样')">路由传参id=2&name=小样</el-button>
    <el-button type="primary" @click="router.push({path:'/manager/test', query:{id:3,name:'大美'}})">另一种路由传参</el-button>
  </div>
  <div style="margin-bottom: 30px">
    <el-input v-model="data.input1" style="width: 240px" placeholder="请输入内容1" :prefix-icon="Search" /> {{ data.input1}}
    <el-input v-model="data.input2" style="width: 240px" disabled placeholder="请输入内容2"  />
    <el-input style="width: 240px" :suffix-icon="Calendar"></el-input>
    <el-input type="textarea" v-modal="data.describe" style="width: 300px" placeholder="请输入一段描述"></el-input>
  </div>
  <div style="margin-bottom: 30px">
    <el-select
        clearable
        multiple
        v-model="data.value"
        value-key="id"
        placeholder="请选择水果"
        size="large"
        style="width: 240px"
    >
      <el-option
          v-for="item in data.options"
          :key="item.id"
          :label="item.label"
          :value="item.name"
      /></el-select>
  </div>
  <div style="margin: 30px 0">
    <el-radio-group v-model="data.sex">
      <el-radio value="男">男</el-radio>
      <el-radio value="女">女</el-radio>
    </el-radio-group>
    <el-radio-group style="margin-left: 100px" v-model="data.tag" size="large">
      <el-radio-button label="我点赞的内容" value="1" />
      <el-radio-button label="我收藏的内容" value="2" />
      <el-radio-button label="我喜欢的内容" value="3" />
    </el-radio-group>
  </div>
  <div style="margin: 20px 0">
    <el-checkbox-group v-model="data.checkList">
      <el-checkbox v-for="item in data.options" :key="item.id" :label="item.label" :value="item.name" />
    </el-checkbox-group>
    <span style="margin-left: 30px">{{data.checkList}}</span>
  </div>
  <div style="margin: 20px 0">
    <img src="@/assets/logo.svg" style="width: 100px">
    <el-image :src="img" style="width: 100px;margin-left: 100px" :preview-src-list="srcList"></el-image>
  </div>
  <div style="margin: 20px 0">
    <el-carousel style="width: 500px" height="400px">
      <el-carousel-item v-for="item in data.imgs" :key="item">
        <img style="width: 100%;height: 400px" :src="item" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
  <div style="margin: 20px 0">
    <el-date-picker
        v-model="data.date"
        type="date"
        placeholder="请输入日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
    />{{data.date}}
  </div>
  <div style="margin: 20px 0">
    <el-table :data="data.tableData" style="width: 100%" stripe border>
      <el-table-column prop="date" label="日期" width="180" />
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="address" label="地址" />
      <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" cricle @click="edit(scope.row)">
          <el-icon><Edit/></el-icon>
        </el-button>
        <el-button type="danger" cricle @click="del(scope.row.id)">
          <el-icon><Delete/></el-icon>
        </el-button>
      </template>
      </el-table-column>
    </el-table>
  </div>
  <div style="margin: 10px 0">
    <el-pagination
        v-model:current-page="data.currentPage4"
        v-model:page-size="data.pageSize4"
        :page-sizes="[4, 8, 12, 24]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="6"
    />
  </div>
  <el-dialog v-model="data.dialogVisible" title="编辑行对象" width="500">
    <div style="padding: 20px">
      <div style="margin-bottom: 10px" >日期：{{data.row.date}}</div>
      <div style="margin-bottom: 10px" >名称：{{data.row.name}}</div>
      <div>地址：{{data.row.address}}</div>
    </div>
  </el-dialog>
</template>
<script setup>
import {reactive} from "vue";
import {Search,Calendar} from "@element-plus/icons-vue";
import img from "@/assets/logo.svg";
import lun1 from "@/assets/lun1.jpg";
import lun2 from "@/assets/lun2.jpg";
import lun3 from "@/assets/lun3.jpg";
import router from "@/router/index.js";
import request from "@/utils/request.js";
const srcList =[
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
];
const del = (id) => {
  alert("删除id为"+id+"的数据")
};
const edit = (row) => {
  data.row=row;
  data.dialogVisible=true;
};
const data=reactive({
  input1:null,
  input2:'小杨房屋很靠谱',
  describe:'小杨房屋很靠谱小杨房屋很靠谱小杨房屋很靠谱小杨房屋很靠谱小杨房屋很靠谱小杨房屋很靠谱',
  value:'',
  options:[{id:1,label:'苹果',name:'苹果'},{id:2,label:'香蕉',name:'香蕉'},{id:3,label:'橘子',name:'橘子'},{id:4,label:'苹果',name:'苹果'}],
  sex:'女',
  tag:'1',
  checkList:[],
  imgs:[lun1,lun2,lun3],
  date:'',
  currentPage4:'4',
  pageSize4:'5',
  tableData:[
    { id:1,date: '2025-03-03', name: 'Tom', address:'河南信阳'},
    { id:2,date: '2025-03-03', name:'小妹', address:'河南信阳'},
    { id:3,date: '2025-03-10', name:'大美', address:'河南信阳'},
    { id:4,date: '2025-03-10', name:'小帅', address:'河南信阳'},
    { id:5,date: '2025-03-10', name:'小帅', address:'河南信阳'},
    { id:6,date: '2025-03-10', name:'小帅', address:'河南信阳'},
  ],
  dialogVisible:false,
  row:null,
  yonghuList:[],
})
request.get('/huzhu/selectAll').then(res =>{
  console.log(res);//控制台打印
  data.yonghuList=res.data;//res.data是用户的列表，是一个数组
  console.log(data.yonghuList);//控制台打印
})
</script>