Ant Design of Vue 浏览器引入Demo

梦里藍天

已于 2022-03-30 08:08:47 修改

阅读量4.4k

点赞数 2

于 2020-10-08 17:26:52 首次发布

How to hatch an egg without an incubator

本文链接：https://blog.csdn.net/ren365880/article/details/108965865

版权

Ant Design 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文展示了如何在Vue项目中使用Ant Design Vue的级联选择器组件，并提供了浏览器直接引入的方式。示例代码包括了模板、脚本部分，以及所需的外部库引用，如Vue.js、Ant Design Vue和jQuery。

摘要由CSDN通过智能技术生成

打包组件引入方式：

<template>
  <a-cascader
    :options="options"
    :default-value="['zhejiang', 'hangzhou', 'xihu']"
    @change="onChange"
  />
</template>
<script>
export default {
  data() {
    return {
      options: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: 'West Lake',
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [
                {
                  value: 'zhonghuamen',
                  label: 'Zhong Hua Men',
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    onChange(value) {
      console.log(value);
    },
  },
};
</script>

浏览器引入方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.10/dist/antd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.10/dist/antd.min.css" rel="stylesheet"
        type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

</head>

<body>
    <div id="root">
        <a-cascader :options="options" :default-value="['zhejiang', 'hangzhou', 'xihu']" @change="onChange" />
    </div>

    <script>

        var vue = new Vue({
            el: '#root',
            data() {
                return {
                    options: [
                        {
                            value: 'zhejiang',
                            label: 'Zhejiang',
                            children: [
                                {
                                    value: 'hangzhou',
                                    label: 'Hangzhou',
                                    children: [
                                        {
                                            value: 'xihu',
                                            label: 'West Lake',
                                        },
                                    ],
                                },
                            ],
                        },
                        {
                            value: 'jiangsu',
                            label: 'Jiangsu',
                            children: [
                                {
                                    value: 'nanjing',
                                    label: 'Nanjing',
                                    children: [
                                        {
                                            value: 'zhonghuamen',
                                            label: 'Zhong Hua Men',
                                        },
                                    ],
                                },
                            ],
                        },
                    ],
                };
            },
            methods: {
                onChange(value) {
                    console.log(value);
                },
            },
        })

    </script>
</body>

</html>