Solo  当前访客:0 开始使用

布丁与画家的博客

努力改变一小部分人解决问题的方式

Vue引入Ant-Design组件库 并且使用JSX编写

2019-08-20 07:22:54 iwh718
0  评论    0  浏览

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

yarn global add @vue/cli

null

创建项目

vue create antd-demo

null

安装ant-design

yarn add ant-design-vue

null

跑起来

yarn serve

yarn build

null

开始准备Ant的引入

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

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

null

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

 import {Button, Icon, Row, Col, Divider} from 'ant-design-vue';

  Vue.use(Button).use(Icon).use(Row).use(Col).use(Divider);

null

然后就可以使用JSX了。

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

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

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

<script type="text/jsx">

null

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

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

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

<script type="text/jsx">
    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 (
                <div class="scroll-box">
                    <a-divider>按钮使用</a-divider>
                    <a-button type="primary">Button</a-button>
                    <a-divider>图标使用</a-divider>
                    <a-icon type="dribbble" style="color:red" spin/>

                    <a-divider>栅格布局</a-divider>
                    <a-row>
                        <a-col xs={4} md={8}>这是第1个</a-col>
                        <a-col xs={4} md={8}>这是第2个</a-col>
                        <a-col xs={4} md={8}>这是第3个</a-col>

                    </a-row>
                    <a-divider>固钉</a-divider>
                    <a-affix>固定</a-affix>
                    <a-divider>下拉菜单</a-divider>
                    <a-dropdown-button onClick={this.dropDownClick.bind(this)} trigger={['contextmenu']}> 右键显示
                        <a-menu slot="overlay">
                            <a-menu-item key="1" onClick={this.dropDownClick.bind(this, 1)}>
                                <a-icon type="user"/>
                                1st menu item
                            </a-menu-item>
                            <a-menu-item key="2" onClick={this.dropDownClick.bind(this, 2)}>
                                <a-icon type="user"/>
                                2nd menu item
                            </a-menu-item>
                            <a-menu-item key="3" onClick={this.dropDownClick.bind(this, 3)}>
                                <a-icon type="user"/>
                                3rd item
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown-button>
                    <a-dropdown-button onClick={this.dropDownClick.bind(this)}> 悬浮显示
                        <a-menu slot="overlay">
                            <a-menu-item key="1" onClick={this.dropDownClick.bind(this, 1)}>
                                <a-icon type="user"/>
                                1st menu item
                            </a-menu-item>
                            <a-menu-item key="2" onClick={this.dropDownClick.bind(this, 2)}>
                                <a-icon type="user"/>
                                2nd menu item
                            </a-menu-item>
                            <a-menu-item key="3" onClick={this.dropDownClick.bind(this, 3)}>
                                <a-icon type="user"/>
                                3rd item
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown-button>
                    <a-dropdown-button onClick={this.dropDownClick.bind(this)} trigger={['click']}> 点击显示
                        <a-menu slot="overlay">
                            <a-menu-item key="1" onClick={this.dropDownClick.bind(this, 1)}>
                                <a-icon type="user"/>
                                1st menu item
                            </a-menu-item>
                            <a-menu-item key="2" onClick={this.dropDownClick.bind(this, 2)}>
                                <a-icon type="user"/>
                                2nd menu item
                            </a-menu-item>
                            <a-menu-item key="3" onClick={this.dropDownClick.bind(this, 3)}>
                                <a-icon type="user"/>
                                3rd item
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown-button>
                    <a-divider>锚点菜单</a-divider>
                    <a-dropdown>
                        <a className="ant-dropdown-link" href="#">
                            悬浮预览菜单 <a-icon type="down"/>
                        </a>
                        <a-menu slot="overlay">
                            <a-menu-item>
                                <a href="javascript:;">1st menu item</a>
                            </a-menu-item>
                            <a-menu-item>
                                <a href="javascript:;">2nd menu item</a>
                            </a-menu-item>
                            <a-menu-item>
                                <a href="javascript:;">3rd menu item</a>
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown>

                    <a-divider>侧边栏</a-divider>
                    <a-button onClick={this.controllerDrawer.bind(this)}>侧边栏控制</a-button>
                    <a-drawer

                        title="我是侧边标题"
                        placement="right"
                        closable={true}
                        onClose={this.controllerDrawer.bind(this)}
                        visible={this.showDrawer}>
                        <div>这里是侧边栏内部内容!</div>
                    </a-drawer>

                    <a-divider>全局提示</a-divider>

                    {

                        [0, 1, 2, 3].map((row, idx) => {
                            return (
                                <a-button
                                    onClick={this.openGlobalTips.bind(this, row)}>{this.globalTips[row]}</a-button>
                            )
                        })
                    }
                    <a-divider>模态框</a-divider>
                    <a-button onClick={this.basic_modal_open.bind(this)}>打开基本模态框</a-button>

                    <a-modal
                        confirmLoading={this.modal_loading_flag}
                        title="Basic Modal"
                        v-model={this.basic_modal_flag}
                        onOk={this.basic_modal_ok.bind(this)}
                    >
                        <p>Some contents...</p>
                        <p>Some contents...</p>
                        <p>Some contents...</p>
                    </a-modal>

                    <a-divider>全局通知</a-divider>
                    <a-button onClick={this.submit_nitify.bind(this)}>通知1</a-button>
                    <a-divider>气泡确认</a-divider>
                    <a-popconfirm title="你确定吗?" confirm="confirm" cancel="cancel" okText="Yes" cancelText="No">
                        <a href="#">点击删除</a>
                    </a-popconfirm>
                    <a-divider>加载</a-divider>

                    <a-spin></a-spin>
                    <a-divider>···</a-divider>
                    <a-spin>
                        <div>
                            这里是内容区!
                        </div>
                    </a-spin>

                    <a-back-top/>


                   <div  class = "footer">
                       <a-divider>这里是底线</a-divider>
                   </div>


        </div>
        )
        },
        data() {
            return {
                modal_loading_flag: false,
                basic_modal_flag: false,
                globalTips: [
                    '普通提示',
                    '加载提示',
                    '警告提示',
                    '错误提示'
                ],
                showDrawer: false,
                menu: {
                    template: "<a-menu><a-menu-item>001</a-menu-item></a-menu>"
                }
            }
        },
        methods: {
            //发送通知
            submit_nitify(type) {
                console.log(type)
                this.$notification.open({
                    message: '这是一条通知!',
                    description: '这是描述内容!.',
                    icon: <a-icon type="smile" style="color: #108ee9"/>,
                    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: {}
    }
</script>

<style scoped>
    .scroll-box {
        height: 1500px;
    }
    .footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;


    }
    .footer div{

        padd-top: 50px;;

    }
    
</style>

null

null

看一下效果:

null

null

null


标题:Vue引入Ant-Design组件库 并且使用JSX编写
作者:iwh718
地址:看看我的CSDN

web站点:骇客猫科技资讯



今日诗词
QQ交流群:914105779

标签

友链

存档

TOP