Button 按钮 ​

<template>
  <p>基本使用</p>
  <div>
    <c-button>北京</c-button>
    <c-button type='primary'>上海</c-button>
    <c-button type='success'>深圳</c-button>
    <c-button type='warning'>河南</c-button>
    <c-button type='danger'>合肥</c-button>
    <c-button type='info'>河北</c-button>
    <c-button type='text'>安徽</c-button>
  </div>

  <p>大小 size</p>
  <div>
    <c-button type='success' size='large'>北京</c-button>
    <c-button type='warning'>上海</c-button>
    <c-button type='danger' size='small'>广东</c-button>
  </div>

  <p>禁用</p>
  <div>
    <c-button type='success' disabled>北京</c-button>
  </div>

  <p>圆角按钮</p>
  <div>
    <c-button type='success' round>北京</c-button>
    <c-button type='danger' size='small' round>广东</c-button>
  </div>

  <p>圆形按钮 与 icon 插槽</p>
  <div>
    <c-button type='success' circle>北</c-button>

    <c-button type='primary' circle>
      <template #icon>
        <svg t='1649322922975' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'
             p-id='3628' width='16' height='16'>
          <path
              d='M943.273421 506.259252C906.84065 320.247768 724.900901 185.233772 510.685052 185.233772c-214.228129 0-396.154575 135.01502-432.589392 321.025481-0.529049 2.765997-0.529049 5.611811 0 8.376785C114.530476 700.66901 296.457946 835.685054 510.685052 835.685054c84.754313 0 166.926824-21.296025 237.682307-61.551868 10.854209-6.196119 14.542204-19.829628 8.197706-30.479175-6.341429-10.599406-20.225647-14.158465-31.172977-8.006348-63.754023 36.307927-138.010237 55.516408-214.709083 55.516408-190.771905 0-352.71932-117.805056-386.970402-280.715403 34.250058-162.89909 196.22101-280.690844 386.970402-280.690844 190.771905 0 352.71932 117.791753 386.969379 280.690844-12.098549 57.384965-41.084721 111.433952-84.026742 156.599617-8.574283 8.997931-8.032954 23.089881 1.174756 31.464619 9.184173 8.356318 23.608697 7.872295 32.207539-1.147126 49.846268-52.396347 83.111906-115.577319 96.265484-182.739974C943.813726 511.859807 943.813726 509.026272 943.273421 506.259252z'
              p-id='3629' fill='#ffffff'></path>
          <path
              d='M328.909032 515.482311c0 100.308567 81.792864 181.669596 182.689832 181.669596 100.872409 0 182.665273-81.362053 182.665273-181.669596 0.001023-100.307543-81.791841-181.634804-182.665273-181.634804l0 0C410.701896 333.847507 328.909032 415.174768 328.909032 515.482311zM648.616494 515.482311c0 75.237565-61.337997 136.257314-137.01763 136.257314l0 0c-75.67861 0-137.042189-61.018725-137.042189-136.257314 0-75.211982 61.362556-136.231731 137.042189-136.231731C587.277474 379.25058 648.616494 440.270329 648.616494 515.482311z'
              p-id='3630' fill='#ffffff'></path>
        </svg>
      </template>
    </c-button>
  </div>

  <p>朴素按钮</p>
  <div>
    <c-button type='primary' plain>上海</c-button>
    <c-button type='success' plain>深圳</c-button>
    <c-button type='warning' plain>河南</c-button>
    <c-button type='danger' plain>合肥</c-button>
    <c-button type='info' plain>河北</c-button>
  </div>
</template>

<script>
import {defineComponent} from 'vue'

export default defineComponent({
  setup() {
    return {
      msg: 'Button 按钮'
    }
  }
})
</script>

<style>
.ccui-button {
  margin-right: 10px;
}
</style>