# 分组标题 TitleGroup

<template>
  <div style="margin: 0 auto;">
     <h3>分组标题 </h3>
     <title-group
        :title='title'
        :tilteTextAlign='textAlign'
     >
         <a-row>
            <a-col :span="6" >单行文本</a-col>
            <a-col :span="18" >
                <a-input placeholder="Basic usage" />
            </a-col>
        </a-row>
     </title-group>
     <a-row :style="{marginTop:'20px'}">
            <a-col :span="6" >title对齐方式</a-col>
            <a-col :span="18" >
                <a-radio-group name="radioGroup" v-model="textAlign" @change="handleTextAlign" >
                    <a-radio :value="'left'">左对齐</a-radio>
                    <a-radio :value="'center'">居中</a-radio>
                    <a-radio :value="'right'">右对齐</a-radio>
                </a-radio-group>
            </a-col>
        </a-row>
        <a-row :style="{marginTop:'20px'}">
            <a-col :span="6" >title长度</a-col>
            <a-col :span="18" >
                <a-radio-group name="radioGroup" v-model="titleLang" @change="handleTitle" >
                    <a-radio :value="'low'">短标题</a-radio>
                    <a-radio :value="'middle'">中长标题</a-radio>
                    <a-radio :value="'lang'">长标题</a-radio>
                </a-radio-group>
            </a-col>
        </a-row>
  </div>
</template>
<!-- <script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import TitleGroup from '../index.vue';
import {Row,Col,Input,Radio} from '@lateinos/antd-vue';

@Component({
  name: 'TitleGroupDemo',
  components: {
    TitleGroup,
    AInput:Input ,
    ARow:Row,
    ACol:Col,
    ARadioGroup:Radio.Group,
    ARadio:Radio,
  }
})
export default class TitleGroupDemo extends Vue {
  title :string = "常用条件在事件处理程序的数据逻辑，而中们可以式是方式是：方法只有纯粹的数据逻辑，而中们可以式是方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。";

   textAlign:string = 'left';
   titleLang:string = "low";

    handleTextAlign(e){
        this.textAlign = e.target.value
    }

    handleTitle(e){
        const val = e.target.value;
        this.titleLang = val;
        if(val == 'low'){
            this.title = "常用条件"
        }else if(val == "middle"){
            this.title  = "常用条件在事件处理程序的数据逻辑，而中们可以式是方式是：方法只有纯粹的数据逻辑，而中们可以式是方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。";
        }else if(val == "lang"){
            this.title  = "常用条件在事件处理程序的数据逻辑，而中们可以式是方式是：方法只有纯粹的数据件在事件处理程序的数据逻辑，而中们可以式是方式是：方法只有纯粹的数据件在事件处理程序的数据逻辑，而中们可以式是方式是：方法只有纯粹的数据件在事件处理程序的数据逻辑，而中们可以式是方式是：方法只有纯粹的数据逻辑，而中们可以式是方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。";
        }
    }
}

</script> -->