Ant-Design-Vue 基础测试

AddDemo 代码1:

<template> 
 <div>
    <a-input    
    v-model:value="Num1"
    /> <a-input      
      v-model:value="Num2" /><br />
    <label>Sum:{{SumNum}}</label>
    <br />
    <label>Sub:{{CalSub}}</label>
  </div>
</template>
<script>
// import AButton from 'ant-design-vue/lib/button'
import AInput from 'ant-design-vue/lib/input'
// import 'ant-design-vue/lib/button/style/css'
import 'ant-design-vue/lib/input/style/css'
export default {
  name:'AddDemo2',
  components:{
    AInput
  },
  data() {
    return {
      Num1: 0,
      Num2: 0,
      SubNum: 0
    }
  },
  computed: {
    SumNum: {
      get() {
        const sum = parseFloat(this.Num1) + parseFloat(this.Num2)
        return sum
      }
    },
      CalSub() {
      return this.Num1 - this.Num2
    }
  }
}
</script>

 AddDemo代码2:

<template>
  <div class="addarea">
    <a-typography-title :level="3">加法测试</a-typography-title>
    <a-divider />
    <div class="midarea">
     <a-space>
    <a-input-number v-model:value="Num1" placeholder="请输入数值1" />
    +<a-input-number v-model:value="Num2" placeholder="请输入数值2" />=<label>{{SumNum}}</label>
     </a-space> 
    </div>
    <a-divider />
    <a-button type="primary" @click="CalSum">CalSum</a-button>
  </div>
</template>
<script>
// import { Button as AButton,InputNumber as AInputNumber } from 'ant-design-vue'
// import 'ant-design-vue/dist/antd.css'
export default {
    name:"AntAddDemo",
    // components:{
    //     AButton,AInputNumber
    // },
  // eslint-disable-next-line space-before-function-paren
  data() {
    return {
      Num1: 0,
      Num2: 0,
      SumNum: 0
    }
  },
  methods: {
    // eslint-disable-next-line space-before-function-paren
    CalSum() {
      // eslint-disable-next-line no-undef
      this.SumNum = this.Num1 + this.Num2
    }
  }
}
</script>
<style lang="scss" scoped>
.addarea{    
    padding-top: 50px;
    margin-left:20%;
    margin-right:20%;
    height: 400px;
    border: 1px solid rgb(21, 5, 238);
    background-color: rgb(224, 221, 221);
    display: flex;
    flex-direction: column;
    align-items: center;
    .midarea{
      width: 100%;  
      display: flex;
      justify-content: center;
      // background-color: darkslategray;
    }
  }
</style>

 Ant Icon:

<template>
<div class="icon-list">
  <user-outlined :style="styleObj"/>
  <QuestionCircleTwoTone :style="styleObj" spin/>
</div>
</template>
<script>
import {UserOutlined,QuestionCircleTwoTone } from '@ant-design/icons-vue';
export default {
    name:"AntDemo",
    components:{
        UserOutlined,QuestionCircleTwoTone
    },
    data(){
      return {
        styleObj:{
          fontSize:'50px'
        }

      }
    }    
}
</script>

Layout:

<template>
  <a-layout class="layout">
    <a-layout-header>
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        v-model:selectedKeys="selectedKeys"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">nav 1</a-menu-item>
        <a-menu-item key="2">nav 2</a-menu-item>
        <a-menu-item key="3">nav 3</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout-content style="padding: 0 50px">
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item>Home</a-breadcrumb-item>
        <a-breadcrumb-item>List</a-breadcrumb-item>
        <a-breadcrumb-item>App</a-breadcrumb-item>
      </a-breadcrumb>
      <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">Content</div>
    </a-layout-content>
    <a-layout-footer style="text-align: center">
      Ant Design ©2018 Created by Ant UED
    </a-layout-footer>
  </a-layout>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    return {
      selectedKeys: ref(['2']),
    };
  },
});
</script>
<style>
.site-layout-content {
  min-height: 280px;
  padding: 24px;
  background: #fff;
}
#components-layout-demo-top .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl #components-layout-demo-top .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

[data-theme='dark'] .site-layout-content {
  background: #141414;
}
</style>