Vue引入Ant

2023-08-07 15:29| 来源: 网络整理| 查看: 265

先使用Vue-cli3脚手架创建项目

yarn global add @vue/cli

创建项目

vue create antd-demo

安装ant-design

yarn add ant-design-vue

跑起来

yarn serve yarn build

开始准备Ant的引入

引入样式表：App.vue就可以了

import 'ant-design-vue/dist/antd.css'

按需引入：记得使用Vue.use安装

import {Button, Icon, Row, Col, Divider} from 'ant-design-vue'； Vue.use(Button).use(Icon).use(Row).use(Col).use(Divider);

然后就可以使用JSX了。

由于之前一直使用React，最好使的就是JSX语法了，Vue里推崇template模板写法，很不习惯，但是模板语法提供的语法糖：v-指定在JSX里都不可以用了。尤其是v-model ，需要我们自己去实现管理，暂时忽略。

Vue也提供了render函数进行渲染，和React一样，我们想编写JSX，发现Ws里不识别了，因为现在的后缀是xx.Vue不是xx.jsx

可以做这么做：这样就可以在Render的return里写html了。

下面是一个很长的antDemo，使用的是JSx写法，其中自定事件要注意：没有v-on和@ 我们需要遵循驼峰写法，如 @click 在JSx只要写成 onClick 自定义的 close事件要写成 onClose 一般都是加个on。

而属性也没有v-bind 和: 需要换成 {this.xx},JSX会识别的，有React经验的应该很熟悉，至于循环我使用的是map函数遍历。

而if可以使用三元运算来解决。

import Vue from 'vue' import {Button, Icon, Row, Col, Divider, Affix, Dropdown, Menu, Drawer, Modal, Popconfirm, Spin, BackTop ,Table } from 'ant-design-vue' import ACol from "ant-design-vue/es/grid/Col"; import ARow from "ant-design-vue/es/grid/Row"; Vue.use(Button).use(Icon).use(Row).use(Col).use(Divider).use(Affix).use(Dropdown).use(Menu).use(Drawer).use(Modal).use(Popconfirm).use(Spin) .use(BackTop).use(Table); export default { name: "demo", render() { return ( 按钮使用 Button 图标使用栅格布局这是第1个这是第2个这是第3个固钉固定下拉菜单右键显示 1st menu item 2nd menu item 3rd item 悬浮显示 1st menu item 2nd menu item 3rd item 点击显示 1st menu item 2nd menu item 3rd item 锚点菜单悬浮预览菜单 1st menu item 2nd menu item 3rd menu item 侧边栏侧边栏控制这里是侧边栏内部内容！全局提示 { [0, 1, 2, 3].map((row, idx) => { return ( {this.globalTips[row]} ) }) } 模态框打开基本模态框

Some contents...

全局通知通知1 气泡确认点击删除加载 ··· 这里是内容区！这里是底线 ) }, data() { return { modal_loading_flag: false, basic_modal_flag: false, globalTips: [ '普通提示', '加载提示', '警告提示', '错误提示' ], showDrawer: false, menu: { template: "001" } } }, methods: { //发送通知 submit_nitify(type) { console.log(type) this.$notification.open({ message: '这是一条通知!', description: '这是描述内容！.', icon: , onClick: () => { console.log('你点击了通知'); }, }); }, //打开modal basic_modal_open() { console.log('打开Modal'); this.basic_modal_flag = !this.basic_modal_flag }, //提交modal basic_modal_ok() { this.modal_loading_flag = true; setTimeout(() => { this.basic_modal_flag = !this.basic_modal_flag this.$message.info("提交完成！") }, 1500) }, //全局提示 openGlobalTips(e) { console.log(e) switch (e) { case 0 : this.$message.info("这是一条普通的全局提示！") break; case 1 : let task = this.$message.loading("这是一条加载提示！", 0) setTimeout(task, 1000) break; case 2 : this.$message.warn("这是一条警告提示！") break; case 3 : this.$message.error("这是一条错误提示！") break; case 4 : break; default: break; } }, controllerDrawer() { this.showDrawer = !this.showDrawer }, dropDownClick(e) { console.log('点击下拉菜单' + e) } }, components: {} } .scroll-box { height: 1500px; } .footer{ position: fixed; bottom: 0; width: 100%; left: 0; } .footer div{ padd-top: 50px;; }

看一下效果：

【本文地址】

公司简介

联系我们