<template>
	<div class="mainBox w100">
    <zgh-header :title="$route.name"></zgh-header>
		<div class="common-top mainBox">

      <zgh-chat-foot v-model="content" v-on:sendHandle="onSend"></zgh-chat-foot>
      <div class="highlight">
        <div class="wp fs14">
          用法：
          <p>1、v-modle绑定值控制显示/隐藏</p>
          <p>2、v-on:sendHandle="" 点击发送按钮触发事件</p>
        </div>
        <pre>
          <code class="hljs language-html">
            {{code | htmlDecode}}
          </code>
        </pre>
        <zgh-table :tbody="tbody"></zgh-table>
      </div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        content:'',
        tbody: [
          {name: 'v-model', explain: '绑定输入框内容', type: 'String', default: ''},
          {name: 'sendHandle', explain: '点击发送按钮触发事件', type: 'Function', default: ''}
        ],
        code: `
         <zgh-chat-foot v-model="content" v-on:sendHandle="onSend"></zgh-chat-foot>
      `
			}
		},
		computed:{

		},
		mounted(){

		},
		methods: {
      onSend(){
        this.$alert.show({
          message: this.content || '输入为空！',
          onShow: () => {
            console.log(this)
          },
          onHide: () => {
            this.$alert.close()
          }
        })
      }
		}
	}
</script>

<style lang="less" scoped>
	@import url("../../assets/config.less");
	a{

		display:block;
		text-align: center;
		.lh(70);
	}
</style>
