vue2vue3项目-antd

置顶 已于 2023-08-30 16:00:55 修改
阅读量2.7k 收藏 4
点赞数 2
文章标签： vue.js javascript 前端框架 anti-design-vue vue
于 2023-02-20 11:05:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58431406/article/details/129120286
版权

 vue适用版本：npm i --save ant-design-vue

Ant Design VueAn enterprise-class UI components based on Ant Design and Vueicon-default.png?t=N7T8https://1x.antdv.com/components/button-cn采用 React 封装的 Ant Design：npm install antd --save

组件总览 - Ant Designantd 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。除了官方组件，我们也提供了社区精选组件作为必要的补充，另外如果您是内网用户，欢迎尝试使用 TechUI。icon-default.png?t=N7T8https://ant.design/components/overview-cn/

vue2项目-引入antd：

前提必须安装过：npm install -g @vue/cli

创建vue项目：vue create +项目名，选择vue2进行创建

进入项目：cd+项目名

安装vue-router： npm install vue-router@3.5.3 --save

安装ant-design-vue： npm install ant-design-vue --save

在main.js文件中配置路由和antd：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false
Vue.use(Antd)
Vue.use(router)
new Vue({
    el: '#app',
    render: h => h(App),
    router,
}).$mount('#app')

app.vue里引入router-view进行路由管理：

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App',
}
</script>
<style>
</style>

在src文件夹下新建一个router文件夹，里面放一个index.js文件：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
    routes: [{
            path: "/",
            name: "HelloWorld",
            component: () =>
                import('../components/HelloWorld.vue'),
            meta: {
                title: "主页",
            }
        }]
})
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push(to) {
    return VueRouterPush.call(this, to).catch(err => err)
}

vue2项目搭建layout案例：

<template>
  <a-layout id="components-layout-demo-top-side-2" style="min-height: 100vh;">
    <a-layout-header class="header">
      <div class="text">后台管理系统</div>
      <a-icon
        @click="toggleCollapse"
        :collapse="isCollapse"
        style="fontSize: 20px; color: #fff; margin: auto 20px;"
        type="unordered-list"
      />
      <a-menu
        theme="dark"
        v-for="mp in menus"
        :key="mp.path"
        mode="horizontal"
        :default-selected-keys="[$route.path]"
        :style="{ lineHeight: '64px' }"
        router
      >
        <a-menu-item
          v-if="!mp.children"
          :key="mp.path"
          @click="handleMenuClick(mp.path)"
          :data-path="mp.path"
        >
          {{ mp.name }}
        </a-menu-item>
      </a-menu>
      <a-icon
        style="
          fontSize: 45px;
          color: #fff;
          position: fixed;
          right: 30px;
          top: 8px;
        "
        type="user"
      />
    </a-layout-header>
    <a-layout>
      <a-layout-sider
        :width="isCollapse ? '55px' : '200px'"
        style="background: #fff;"
      >
        <a-menu mode="inline" :default-selected-keys="[$route.path]">
          <template v-for="m in menus">
            <template v-if="!m.children">
              <a-menu-item
                :key="m.path"
                :to="m.path"
                :data-path="m.path"
                @click="handleMenuClick(m.path)"
              >
                <a-icon type="user" />
                {{ m.name }}
              </a-menu-item>
            </template>
            <template v-else>
              <a-sub-menu :key="m.path">
                <span slot="title">
                  <a-icon type="user" />
                  {{ m.name }}
                </span>
                <a-menu-item
                  v-for="mc in m.children"
                  :key="mc.path"
                  :to="mc.path"
                  :data-path="mc.path"
                  @click="handleMenuClick(mc.path)"
                >
                  <a-icon type="user" />
                  {{ mc.name }}
                </a-menu-item>
              </a-sub-menu>
            </template>
          </template>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px;">
        <a-breadcrumb style="margin: 16px 0;">
          <a-breadcrumb-item>{{ $route.meta.title }}</a-breadcrumb-item>
        </a-breadcrumb>
        <a-layout-content
          :style="{
            background: '#fff',
            padding: '24px',
            margin: 0,
            minHeight: '280px',
          }"
        >
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      isCollapse: false,
      menus: [
        {
          name: '首页',
          id: 0,
          path: '/sysMenu',
        },
        {
          name: '系统管理',
          id: 1,
          children: [
            {
              name: '系统配置',
              id: 3,
              path: '/sysSetting',
            },
            {
              name: '菜单管理',
              id: 4,
              path: '/4',
            },
          ],
        },
        {
          name: '用户管理',
          id: 2,
          children: [
            {
              name: '用户列表',
              id: 5,
              path: '/userList',
            },
          ],
        },
      ],
    }
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    handleMenuClick(path) {
      console.log(path, 'path')
      if (path !== this.$route.path) {
        this.$router.push(path)
      }
    },
  },
}
</script>
<style scoped>
.ant-layout-header {
  display: flex;
  padding: 0;
}
.text {
  color: aliceblue;
  width: 170px;
  line-height: 33.99px;
  text-align: center;
  margin: 15px;
  background: rgb(24, 34, 77);
}
</style>

 vue3项目-引入antd： 

前提必须安装过：npm install -g @vue/cli

创建vue项目：vue create +项目名，选择vue3进行创建

进入项目：cd+项目名

安装vue-router： npm install vue-router --save

安装ant-design-vue： npm install ant-design-vue --save

在main.js中配置路由和组件：

import { createApp } from 'vue'
import App from './App.vue'
import router from'./router';
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';
import * as Icons from '@ant-design/icons-vue'
const app = createApp(App)
app.use(router)
app.use(Antd)
app.mount('#app')
app.config.globalProperties.$icons = Icons
for (const key in Icons) {
    app.component(key, Icons[key])
}

 app.vue

<template>
  <router-view />
</template>
<script>
export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
</style>

在src文件夹下新建一个router文件夹，里面放一个index.js文件：

import { createRouter, createWebHashHistory} from "vue-router";
const router = createRouter({
    history: createWebHashHistory(),
    routes: [{
            path: '/',
            name: 'myLogin',
            component: () =>
                import ('../views/myLogin.vue')
        },
        {
            path: '/myHome',
            redirect: '/sysMenu',
            name: '首页',
            component: () =>
                import ('../views/myHome.vue'),
            children: [{
                    path: '/sysMenu',
                    name: '首页',
                    meta: { title: "首页" },
                    component: () =>
                        import ('../views/sysMenu.vue')
                },
                {
                    path: '/sysSetting',
                    name: '系统设置',
                    meta: { title: "系统管理/系统设置" },
                    component: () =>
                        import ('../views/sysSetting.vue')
                },
                {
                    path: '/userList',
                    name: '用户列表',
                    meta: { title: "用户列表" },
                    component: () =>
                        import ('../views/userList.vue')
                },
                {
                    path: '/myComponent',
                    name: 'vue3组件',
                    meta: { title: "vue3组件" },
                    component: () =>
                        import ('../views/myComponent.vue')
                }
            ]
        },

    ]
})
export default router

 vue3项目搭建layout案例：

<template>
  <a-layout id="components-layout-demo-top-side-2" style="min-height: 100vh;">
    <a-layout-header class="header">
      <div v-if="!isCollapse" class="text">后台管理系统</div>
      <component :is="$icons['BarsOutlined']" />
      <bars-outlined
        @click="toggleCollapse"
        :collapse="isCollapse"
        style="fontsize: 20px; color: #fff; margin: auto 20px;"
        type="unordered-list"
      />
      <a-menu
        theme="dark"
        v-for="m in staterow.menusrow"
        :key="m.id"
        mode="horizontal"
        :selectedKeys="[$route.path]"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item :key="m.path">
          <router-link :to="m.path" :key="m.path">{{ m.name }}</router-link>
        </a-menu-item>
      </a-menu>
      <component :is="$icons['UserOutlined']" />
      <user-outlined
        style="
          fontSize: 45px;
          color: #fff;
          position: fixed;
          right: 30px;
          top: 8px;
        "
        type="user"
      />
    </a-layout-header>
    <a-layout>
      <a-layout-sider
        :width="isCollapse ? '55px' : '200px'"
        style="background: #fff; height: 100vh;"
      >
        <a-menu
          mode="inline"
          :selectedKeys="[$route.path]"
          v-for="m in state.menus"
          :key="m.path"
        >
          <a-menu-item v-if="!m.children" :key="m.path">
            <component :is="$icons['AppstoreOutlined']" />
            <span>{{ m.name }}</span>
            <router-link :to="m.path" :key="m.path"></router-link>
          </a-menu-item>
          <a-sub-menu v-if="m.children" :key="m.path">
            <template #title>
              <component :is="$icons['UserOutlined']" />
              <span>{{ m.name }}</span>
            </template>
            <a-menu-item v-for="mc in m.children" :key="mc.path">
              <component :is="$icons['FileDoneOutlined']" />
              <span>{{ mc.name }}</span>
              <router-link :to="mc.path" :key="mc.path"></router-link>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px;">
        <a-breadcrumb style="margin: 16px 0;">
          <a-breadcrumb-item>{{ $route.meta.title }}</a-breadcrumb-item>
        </a-breadcrumb>
        <a-layout-content
          :style="{
            background: '#fff',
            padding: '24px',
            margin: 0,
            minHeight: '280px',
          }"
        >
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import { reactive, ref } from 'vue'
export default {
  setup() {
    const state = reactive({
      menus: [
        {
          name: '首页',
          id: 1,
          path: '/sysMenu',
        },
        {
          name: '系统管理',
          id: 2,
          children: [
            {
              name: '系统配置',
              id: 3,
              path: '/sysSetting',
            },
            {
              name: '菜单管理',
              id: 4,
              path: '/4',
            },
          ],
        },
      ],
    })
    const staterow = reactive({
      menusrow: [
        {
          name: '用户列表',
          id: 5,
          path: '/userList',
        },
        {
          name: 'vue3组件',
          id: 6,
          path: '/myComponent',
        },
      ],
    })
    const isCollapse = ref(false)
    const toggleCollapse = () => {
      isCollapse.value = !isCollapse.value
    }
    return {
      state,
      staterow,
      isCollapse,
      toggleCollapse,
    }
  },
}
</script>
<style scoped>
.ant-layout-header {
  display: flex;
  padding: 0;
}
.text {
  color: aliceblue;
  width: 170px;
  line-height: 33.99px;
  text-align: center;
  margin: 15px;
  background: rgb(24, 34, 77);
}
</style>

增删改查案例：

点击新增编辑显示表单,编辑页面拿到row数据，并且添加表单效验

vue2写法：

<template>
    <div>
        <div class="sousuo">
            <a-input style="width:400px" addonBefore="http://" defaultValue="mysite" />
            <a-button style="margin-right: 20px;" type="primary">搜索</a-button>
            <a-button type="primary" @click="addsyse('add')">新增</a-button>
        </div>
        <a-table :dataSource="dataSource" bordered :columns="columns">
            <template slot="action" slot-scope="text, record">
                <span>
                    <a href="javascript:" @click="addsyse('edit',record)"> 编辑 </a>
                    <a-divider type="vertical" />
                    <a href="javascript:" @click="addsyse('dele')"> 删除 </a>
                </span>
            </template>
        </a-table>
        <AddSyseting v-if="addcom" ref="sysetting" @refreshDataList="articleList"></AddSyseting>
    </div>
</template>
<script>
import AddSyseting from './addSyseting'
export default {
    name: 'sysSetting',
    components: {
        AddSyseting,
    },
    data() {
        return {
            addcom: false,
            dataSource: [
                {
                    key: 1,
                    name: 'John Brown sr.',
                    age: 60,
                    address: 'New York No. 1 Lake Park',
                    children: [
                        {
                            key: 11,
                            name: 'John Brown',
                            age: 42,
                            address: 'New York No. 2 Lake Park',
                        },
                        {
                            key: 12,
                            name: 'John Brown jr.',
                            age: 30,
                            address: 'New York No. 3 Lake Park',
                            children: [
                                {
                                    key: 121,
                                    name: 'Jimmy Brown',
                                    age: 16,
                                    address: 'New York No. 3 Lake Park',
                                },
                            ],
                        },
                        {
                            key: 13,
                            name: 'Jim Green sr.',
                            age: 72,
                            address: 'London No. 1 Lake Park',
                            children: [
                                {
                                    key: 131,
                                    name: 'Jim Green',
                                    age: 42,
                                    address: 'London No. 2 Lake Park',
                                    children: [
                                        {
                                            key: 1311,
                                            name: 'Jim Green jr.',
                                            age: 25,
                                            address: 'London No. 3 Lake Park',
                                        },
                                        {
                                            key: 1312,
                                            name: 'Jimmy Green sr.',
                                            age: 18,
                                            address: 'London No. 4 Lake Park',
                                        },
                                    ],
                                },
                            ],
                        },
                    ],
                },
                {
                    key: 2,
                    name: 'Joe Black',
                    age: 32,
                    address: 'Sydney No. 1 Lake Park',
                },
            ],

            columns: [
                {
                    title: 'Name',
                    dataIndex: 'name',
                    key: 'name',
                },
                {
                    title: 'Age',
                    dataIndex: 'age',
                    key: 'age',
                    width: '12%',
                },
                {
                    title: 'Address',
                    dataIndex: 'address',
                    width: '30%',
                    key: 'address',
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    scopedSlots: { customRender: 'action' }
                }
            ]
        }
    },
    methods: {
        addsyse(type, item) {
            if (type == "add") {
                this.addcom = true;
                this.$nextTick(() => {
                    this.$refs.sysetting.init(type);
                });
            }
            if (type == "edit") {
                this.addcom = true;
                this.$nextTick(() => {
                    this.$refs.sysetting.init(type, item);
                });
            }
            if (type == "dele") {
                console.log("你点击了删除");
            }
        },
        articleList() {
            console.log("我是父组件传给子组件的方法");
        },
    }
}
</script>

<template>
    <div>
        <a-modal :title="title" :visible="visible" @ok="handleOk" @cancel="handleCancel">
            <a-form-model :labelCol="{ span:6 }" :style="{ maxWidth: 600 }" :wrapperCol="{ span: 16 }" :model="form" :rules="rulesRs" ref="ruleForm">
                <a-row>
                    <a-col>
                        <a-form-model-item label="输入框" prop="username">
                            <a-input v-model="form.username" placeholder="姓名"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col>
                        <a-form-model-item label="多选框" prop="chebox" :autoLink="false">
                            <a-checkbox-group v-model="form.chebox" :options="options" @change="check"></a-checkbox-group>
                        </a-form-model-item>
                    </a-col>
                    <a-col>
                        <a-form-model-item label="禁用">
                            <a-input disabled></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col>
                        <a-form-model-item label="开关" prop="checkedval">
                            <a-switch :checked="form.checkedval" @change="chaswitch"></a-switch>
                        </a-form-model-item>
                    </a-col>
                    <a-col>
                        <a-form-model-item label="选择器" prop="ruselect">
                            <a-space>
                                <a-select style="width:300px" v-model="form.ruselect" @change="chaselect" :options="opselect" />
                            </a-space>
                        </a-form-model-item>
                    </a-col>
                    <a-col>
                        <a-form-model-item label="单选" prop="radioval">
                            <a-radio-group @change="chaRadio" :value="form.radioval">
                                <a-radio value="1">A</a-radio>
                                <a-radio value="2">B</a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                    <a-col>
                        <a-form-model-item label="树形" prop="treevalue">
                            <a-treeSelect showSearch :value="form.treevalue" bordered allowClear treeDefaultExpandAll @change="chatreeselect" :treeData="treeData" />
                        </a-form-model-item>
                    </a-col>
                    <a-col>
                        <a-form-model-item label="时间">
                            <a-calendar v-model="form.rucalendar" @change="chacalendar" />
                        </a-form-model-item>
                    </a-col>
                    <a-col>
                        <a-form-model-item label="上传">
                            <a-upload name="avatar" listType="picture-card" className="avatar-uploader" :showUploadList="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="chaUpload">
                                <img :src="form.imageUrl" style="width: '200px' " />
                            </a-upload>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </a-modal>
    </div>
</template>
<script>
export default {
    name: 'addsysSeting',
    data() {
        return {
            visible: false,
            type: "",
            title: "",
            form: {
                username: "",
                chebox: [],
                checkedval: null,
                radioval: "",
                treevalue: "",
                rucalendar: ""
            },
            rulesRs: {
                username: [
                    {
                        required: true,
                        message: '请输入姓名',
                        trigger: 'change'
                    }
                ],
                chebox: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                checkedval: [
                    {
                        required: true,
                        message: '请选择开关状态',
                        trigger: 'change'
                    }
                ],
                ruselect: [
                    {
                        required: true,
                        message: '请选择ruselect',
                        trigger: 'change'
                    }
                ],
                radioval: [
                    {
                        required: true,
                        message: '请选择单选radioval',
                        trigger: 'change'
                    }
                ],
                treevalue: [
                    {
                        required: true,
                        message: '请选择树选择',
                        trigger: 'change'
                    }
                ]
            },
            options: [
                { label: 'Apple', value: 'Apple' },
                { label: 'Pear', value: 'Pear' },
                { label: 'Orange', value: 'Orange' },
            ],
            opselect: [{ value: 'jack', label: 'Jack' },
            { value: 'lucy', label: 'Lucy' },
            { value: 'Yiminghe', label: 'yiminghe' },
            {                value: 'disabled', label: 'Disabled',
                disabled: true            },],
            treeData: [
                {
                    value: 'parent 1',
                    title: 'parent 1',
                    children: [
                        {
                            value: 'parent 1-0',
                            title: 'parent 1-0',
                            children: [
                                {
                                    value: 'leaf1',
                                    title: 'leaf1',
                                },
                                {
                                    value: 'leaf2',
                                    title: 'leaf2',
                                },
                            ],
                        },
                        {
                            value: 'parent 1-1',
                            title: 'parent 1-1',
                            children: [
                                {
                                    value: 'leaf3',
                                    title: <b style={{ color: '#08c' }}>leaf3</b>,
                                },
                            ],
                        },
                    ],
                },
            ],
        }
    },
    methods: {
        init(type, item) {
            this.visible = true;
            this.title = "新增"
            this.type = type;
            if (type == "edit") {
                this.title = "编辑"
                console.log(item, "item");
            }
        },
        handleOk() {
            this.$refs.ruleForm.validate(valid => {
                if (!valid) return false; // 校验未全部通过，结束当前提交
                if (valid) {
                    console.log(this.form, "校验全部通过提交给后端");
                }
            });
        },
        handleCancel() {
            console.log("点击了取消");
            this.visible = false;
        },
        check(e) {
            this.form.chebox = e
            console.log(this.form.chebox, "多选框选中的");
        },
        chaswitch(checked) {
            this.form.checkedval = checked
            console.log(this.form.checkedval, "开关选中的");
        },
        chaselect(e) {
            this.form.ruselect = e
            console.log(this.form.ruselect, "选择器选中的");
        },
        chaRadio(e) {
            this.form.radioval = e.target.value
            console.log(this.form.radioval, "单选选中的");
        },
        chatreeselect(e) {
            this.form.treevalue = e
            console.log(this.form.treevalue, "树选择选中的");
        },
        chacalendar(value) {
            this.form.rucalendar = value.format('YYYY-MM-DD')
            console.log(this.form.rucalendar, "选中的时间");
        },
        chaUpload(e) {
            this.form.imageUrl = e
            console.log(this.form.imageUrl, "上传照片");
        },
    }
}
</script>

vue3写法：

<template>
    <div class="sousuo">
        <a-input style="width:400px" addonBefore="http://" defaultValue="mysite" />
        <a-button style="margin-right: 20px;" type="primary">搜索</a-button>
        <a-button type="primary" @click="addsyse('add')">新增</a-button>
    </div>
    <AddSyseting v-if="addcom" ref="sysetting"></AddSyseting>
    <a-table :dataSource="dataSource" bordered :columns="columns">
        <template v-slot:bodyCell="{column,record}">
            <template v-if="column.dataIndex==='operation'">
                <span>
                    <a href="javascript:" @click="addsyse('edit',record)"> 编辑 </a>
                    <a-divider type="vertical" />
                    <a href="javascript:"> 删除 </a>
                </span>
            </template>
        </template>
    </a-table>
</template>
<script setup>
//ref函数创建响应式数据
//nextTick将回调推迟到下一个 DOM 更新周期之后执行
//onMounted()在组件被挂载完成后执行
//getCurrentInstance 获取到组件实例
import { ref, nextTick, onMounted, getCurrentInstance } from "vue";
import AddSyseting from "@/views/addSyseting.vue";
const addcom = ref(false);
let currentInstance = ''
onMounted(() => {
    currentInstance = getCurrentInstance()
})
const addsyse = (type, item) => {
    if (type == "add") {
        addcom.value = true;
        nextTick(() => {
            currentInstance.ctx.$refs.sysetting.alertMessage(type)
        })
    }
    if (type == "edit") {
        addcom.value = true;
        nextTick(() => {
            currentInstance.ctx.$refs.sysetting.alertMessage(type, item)
        })
    }
}
const dataSource = [
    {
        key: 1,
        name: 'John Brown sr.',
        age: 60,
        address: 'New York No. 1 Lake Park',
        children: [
            {
                key: 11,
                name: 'John Brown',
                age: 42,
                address: 'New York No. 2 Lake Park',
            },
            {
                key: 12,
                name: 'John Brown jr.',
                age: 30,
                address: 'New York No. 3 Lake Park',
                children: [
                    {
                        key: 121,
                        name: 'Jimmy Brown',
                        age: 16,
                        address: 'New York No. 3 Lake Park',
                    },
                ],
            },
            {
                key: 13,
                name: 'Jim Green sr.',
                age: 72,
                address: 'London No. 1 Lake Park',
                children: [
                    {
                        key: 131,
                        name: 'Jim Green',
                        age: 42,
                        address: 'London No. 2 Lake Park',
                        children: [
                            {
                                key: 1311,
                                name: 'Jim Green jr.',
                                age: 25,
                                address: 'London No. 3 Lake Park',
                            },
                            {
                                key: 1312,
                                name: 'Jimmy Green sr.',
                                age: 18,
                                address: 'London No. 4 Lake Park',
                            },
                        ],
                    },
                ],
            },
        ],
    },
    {
        key: 2,
        name: 'Joe Black',
        age: 32,
        address: 'Sydney No. 1 Lake Park',
    },
]

const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        width: '12%',
    },
    {
        title: 'Address',
        dataIndex: 'address',
        width: '30%',
        key: 'address',
    },
    {
        title: '操作',
        dataIndex: 'operation',
    }
]
</script>
<style scoped>
.sousuo {
  display: flex;
}
</style>

<template>
   <a-modal width="85%" :title="title" :visible="visible" @ok="handleOk" @cancel="handleCancel">
      <a-form ref="formRef" :model="form" :rules="rules" @keyup.enter="handleOk">
         <a-form-item label="输入框" name="username">
            <a-input v-model:value="form.username" size="middle" placeholder="姓名"></a-input>
         </a-form-item>
         <a-form-item label="多选框" name="rucheckbox">
            <a-checkbox-group v-model:value="form.rucheckbox" :options="options" @change="check"></a-checkbox-group>
         </a-form-item>
         <a-form-item label="禁用">
            <a-input disabled size="middle"></a-input>
         </a-form-item>
         <a-form-item label="开关" name="ruswitch">
            <a-switch :checked="form.ruswitch" @change="chaswitch"></a-switch>
         </a-form-item>
         <a-form-item label="选择器" name="ruselect">
            <a-space wrap>
               <a-select v-model:value="form.ruselect" style="width: 350px" @change="chaselect" :options="opselect" />
            </a-space>
         </a-form-item>
         <a-form-item label="单选" name="ruradio">
            <a-radio-group @change="chaRadio" :value="form.ruradio">
               <a-radio value="1">A</a-radio>
               <a-radio value="2">B</a-radio>
            </a-radio-group>
         </a-form-item>
         <a-form-item label="树选择" name="rutree">
            <a-treeSelect showSearch style="width: 350px;" :value="form.rutree" bordered allowClear treeDefaultExpandAll @change="chatreeselect" :treeData="treeData" />
         </a-form-item>
         <a-form-item label="日历">
            <a-calendar @change="chacalendar" />
         </a-form-item>
         <a-form-item label="上传" name="rupload">
            <a-upload name="avatar" listType="picture-card" className="avatar-uploader" :showUploadList="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="chaUpload">
               <img :src="form.rupload" style="width: '200px' " />
            </a-upload>
         </a-form-item>
      </a-form>
   </a-modal>
</template>
<script setup>
//ref函数创建响应式数据
//reactive创建响应式复杂数据
import { ref, reactive, defineExpose } from "vue";
const visible = ref(false);
const title = ref()
function data_form() {
   const form = reactive({
      username: undefined,
      rucheckbox: [],
      ruswitch: undefined,
      ruselect: [],
      ruradio: undefined,
      rutree: "",
      rupload: ""
   })
   return form
}
const form = data_form()
const rules = reactive({
   username: [
      {
         required: true,
         message: '请输入姓名',
         trigger: 'change'
      }
   ],
   rucheckbox: [
      {
         required: true,
         message: '请选择',
         trigger: 'change'
      }
   ],
   ruswitch: [
      {
         required: true,
         message: '请选择状态',
         trigger: 'change'
      }
   ],
   ruselect: [
      {
         required: true,
         message: '请选择',
         trigger: 'change'
      }
   ],
   ruradio: [
      {
         required: true,
         message: '请选择',
         trigger: 'change'
      }
   ],
   rutree: [
      {
         required: true,
         message: '请选择',
         trigger: 'change'
      }
   ],
   rupload: [
      {
         required: true,
         message: '请上传',
         trigger: 'change'
      }
   ],
})
const formRef = ref()
const alertMessage = (type, item) => {
   visible.value = true;
   title.value = "新增"
   if (type == "edit") {
      title.value = "编辑"
      console.log(item, "item");
   }
}
// 通过defineExpose向外暴露获取到父组件那边的alertMessage方法
defineExpose({
   alertMessage
})
function handleOk() {
   console.log("点击了确定");
   formRef.value.validate().then(() => {
      console.log(form, "需要提交给后端的form表单数据");
      visible.value = false;
   })
}
function handleCancel() {
   console.log("点击了取消");
   visible.value = false;
}
const options = [
   { label: 'Apple', value: 'Apple' },
   { label: 'Pear', value: 'Pear' },
   { label: 'Orange', value: 'Orange' },
];
const check = (e) => {
   form.rucheckbox = e
   console.log(form.rucheckbox, "多选框选中的");
}
const chaswitch = (checked) => {
   form.ruswitch = checked
   console.log(form.ruswitch, "开关状态");
}
const opselect = [{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
{   value: 'disabled', label: 'Disabled',
   disabled: true},]
const chaselect = (e) => {
   form.ruselect = e
   console.log(form.ruselect, "选择器选中的");
}
const chaRadio = (e) => {
   form.ruradio = e.target.value
   console.log(form.ruradio, "单选选中的");
}
const treeData = [
   {
      value: 'parent 1',
      title: 'parent 1',
      children: [
         {
            value: 'parent 1-0',
            title: 'parent 1-0',
            children: [
               {
                  value: 'leaf1',
                  title: 'leaf1',
               },
               {
                  value: 'leaf2',
                  title: 'leaf2',
               },
            ],
         },
         {
            value: 'parent 1-1',
            title: 'parent 1-1',
            children: [
               {
                  value: 'leaf3',
                  title: <b style={{ color: '#08c' }}>leaf3</b>,
               },
            ],
         },
      ],
   },
];
const chatreeselect = (e) => {
   form.rutree = e
   console.log(form.rutree, "树选择选中的");
}
const chacalendar = (value) => {
   console.log(value.format('YYYY-MM-DD'), "选中的时间");
}
const chaUpload = (e) => {
   form.rupload = e
   console.log(form.rupload, "上传照片");
}
</script>

vue3中效验也可以直接绑定在form-item标签中：

 <a-form-item label="绑定rules" name="name" :rules="[{required:true,message:'请输入姓名'}]">
            <a-input v-model:value="form.name" size="middle" placeholder="姓名"></a-input>
</a-form-item>

小付-小付
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于ThinkPhp6+Vue+ElementUI低代码开发平台
西里古里的博客
02-23 7963
一款 PHP 语言基于ThinkPhp6、Vue、ElementUI等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前框架已集成了完整的RBAC权限架构和常规基础模块，前端Vue端支持多主题切换，可以根据自己喜欢的风格选择想一个的主题，实现了个性化呈现的需求；
Ant Design Vue使用（vue2）
weixin_74285634的博客
07-13 2557
【代码】antd下载配置及使用，下面是一个简单的button按钮使用案例：直接输入以下代码，在页面中就可以看到一个按钮了。
Ant-design-vue开源项目介绍、应用场景、组件有哪些
最新发布
日常笔记/总结/系列知识梳理
06-14 2326
Ant-design-vue 是一个基于 Ant Design 规范和 Vue.js 的企业级 UI 组件库。它旨在帮助开发者构建设计优雅、体验流畅的企业级应用。Ant-design-vue 是由 Ant Design 团队和 Vue.js 社区共同开发的。它结合了 Ant Design 的设计理念和 Vue.js 的技术栈优势，旨在为 Vue.js 开发者提供一套完整、易用、高质量的 UI 组件库。通过 Ant-design-vue，开发者可以更加高效、快速地构建出符合企业级应用需求的前端界面。
ant-design-vue：基础使用
snowball的博客
10-26 1万+
一、环境介绍vue3+ts+ant-design-vue二、安装使用2.1、安装脚手架工具 2.2、创建一个demo项目2.2.1、创建项目2.2.2、 安装成功：2.2.3、 项目目录及启动项目：2.2.4、启动成功2.2.5、查看最新稳定版vue版本发布 | Vue.js 由于脚手架安装的项目是3.0版本，这里我们升级到最新稳定版2.2.6、升级vue版本 升级后： 2.3、安装ant-design-vue如果提示网络原有安装失败，cnpm 中引入 2.5、页面代码使用ant-design-vu
vue3+ant design vue+ts实战【ant-design-vue组件库引入】
热门推荐
XSL_HR的博客
10-19 1万+
一个好项目的编写不仅需要完美的逻辑，以及相应的技术，同时也需要一个设计规范的高质量UI组件库。本期文章将会详细讲解Ant Design Vue组件库的安装、引入和使用。
vue2 + antd 封装动态表单组件（二）
guizi0809的博客
07-11 1457
vue2 + antd 封装动态表单组件
搭建Vue版Ant Design Pro后台管理系统
老杜的博客
02-13 6329
基于Vue实现的Ant Design Pro的后台管理系统模板
antd-mobile-vue:antd-mobile的vue实现
05-17
如有问题可添加个人微信（wuhao1200），欢迎共同交流该项目原本为公司内部项目，现放到github上开源，发布个时候项目名称改为antd-mobile-vueantd-mobile-vue基于 Vue 的组件库，代码由antd-mobile转为Vue版本，目前...
vue3-antd-admin.rar
10-25
这个"vue3-antd-admin.rar"项目是基于Vue3构建的管理后台系统模板，使用了TypeScript进行类型检查，以及Ant Design Vue（antd）作为UI组件库，提供了丰富的组件和统一的设计风格。 TypeScript 是JavaScript的一个超...
vue-antd-mobile
05-13
vue-antd-mobileAnt Design mobile of Vue实现基于组件库样式使用Install 安装正在开发中...This module is still working in progress right now, so it is just for placeholder.Usage 使用Develop 开发build 打包...
vue-antd-admin:基于vue3 + antd + JavaScript的后台系统
03-11
vue-antd-admin欢迎使用vue-antd-admin，这是一个基于vue3.0 + antd2.0.0 + vuex4.0 + vue-router4.0的适合新手学习的项目，后台全部采用了composition API的写法，作者也只是个刚出学校的初级菜鸟前端，在vue3的...
antd-vue-admin:该项目采用ant-design-vue作为UI框架，配备管理系统常用功能集成
05-06
antd-vue-admin 安装项目依赖 yarn or npm install 编译启动 yarn dev 编译打包 yarn build 测试代码 yarn test:unit 代码格式化 yarn lint -- --fix Customize configuration See .
antd-mobile-vue3.0:适用于vue 3.0的ant mobile
04-06
本项目是在本人之前移植的antd-mobile-vue的基础上使用vue3+vite2进行了改造，目前绝大部分组件都可以正常使用如有问题可添加个人微信（wuhao1200），欢迎共同交流antd-mobile-vue基于 Vue3 的组件库，代码由antd-...
Vue+antd前端篇——项目构建+路由守卫+请求拦截+VUEX
jacky
08-10 1752
前言 前几天和大家说要分享下前后端开发的经验，今天他来了！因为最近工作比较忙，内容也比较多需要分开几篇来讲，分享的内容不会有太深的理论东西，都是比较实用且简单易懂。作为第一篇分享先以前端开始，从项目创建到搭建基础架构，这块内容会比较多，所以会分开两篇或三篇，希望想学的朋友多些耐心哈，因为我也是抽时间一点点写，所以更新不会特别快，大概一周更新一到两篇吧，希望各位同学多多担待！ CODING... 第一步，我们首先需要安装下环境，具体就不阐述了，这里需要注意一个点就是构建项目时有个区别需要讲一下，大牛请忽
vue2.x使用ant design vue记录
????鱼干～
11-11 1936
vue2.x使用ant design vue记录(清除指定prop校验、使用阿里iconfont的svg图标、监听iframe内部事件、重置data()、h5禁止浏览器下拉刷新以及左右滑动、判断图片是否无效链接、文件链接转文件流下载解决谷歌默认预览文件的问题、防抖函数)
vue2.x+antd-vue搭建后管项目
洋茄子炒鸡蛋的博客
04-28 2598
vue2.x+ant-design-vue快速搭建一个后台管理系统架子
antd-vue使用心得
wangrong111222的博客
10-18 2251
1， less的loader 报错 增加vue.config.js module.exports = { css: { loaderOptions: { less: { javascriptEnabled: true } } }, } 2， 按需加载 在babel中加入插件antd 配置 安装babel-plugin-import { "plugins"...
【前端】vue3 接入antdv表单校验
weixin_41979605的博客
08-22 1381
这个很简单，直接写一个自定义校验方法就行了。然后校验规则里面即可，(就是用这个方法，然后debug出上面的mode未设置的问题，因为自定义方法里面的value一直是undifine,-。-)return Promise.reject("用户昵称长度应小于5个字符");} else {} else {return Promise.reject("请输入用户昵称");
vue2.0引入antd
qq_38810813的博客
01-25 3406
在创建项目的时候一定要记得是vue2.0 不要选择3.0 不然会跟官网的代码对不上 = = 害～ 主要文件main.js 的配置问题 我截了几个重点的地方 import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import Antd from 'ant-design-vue'; import { Button } from 'ant-desi.
vue-antd-jeecg
07-08
Vue-antd-jeecg 是一个基于 Vue.js 和 Ant Design Vue 的前端开发框架，用于快速构建企业级中后台应用。它提供了丰富的组件和模板，可以帮助开发者快速搭建界面，并且集成了 Jeecg-Boot 后端框架，方便进行前后端的联调和数据交互。它具有响应式设计、可扩展性强、代码生成器等特点，可以大大提高开发效率。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值