<template>
	<div class="mainBox w100">
		<zgh-header :title="$route.name"></zgh-header>
		<div class="common-top mainBox">
      <div class="wp">
        <zgh-input class="mgT10" v-model="value" cls="pdL30" placeholder="请输入内容" style="border:1px solid #eee;">
          <i class="iconfont iconL pdL5" slot="icon">&#xe60a;</i>
        </zgh-input>
        <zgh-input class="mgT10 mgB10" v-model="value" cls="pdR30" placeholder="请输入内容" style="border:1px solid #eee;">
          <i class="iconfont iconR pdR5" slot="icon">&#xe60a;</i>
        </zgh-input>
        <zgh-input v-model="value" class="m-fs26 bge radius34" cls="textC">
          <span class="iconfont absoluteCC color9 m-fs26" slot="placeholder">
            <i class="iconfont middle m-fs34 color9">&#xe60a;</i>
            输入搜索...
          </span>
        </zgh-input>
      </div>

      <div class="highlight">
        <div class="wp fs14">
          用法：
          <p>1、v-modle绑定值输入值</p>
          <p>2、slot="icon" 左右两边的icon</p>
          <p>3、cls 给input 新增自定义样式的class</p>
          <p>4、placeholder 输入框的提示文字（与slot="placeholder"选其一）</p>
          <p>5、slot="placeholder" 输入框的提示文字</p>
        </div>
        <pre>
          <code class="hljs language-html">
            {{code | htmlDecode}}
          </code>
        </pre>
      </div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        value:'',
        code: `
         <zgh-input v-model="value" class="m-fs26 bge radius34" cls="textC">
          <i class="iconfont iconR pdR5" slot="icon">&#xe60a;</i>
          <span class="iconfont absoluteCC color9 m-fs26" slot="placeholder">
            <i class="iconfont middle m-fs34 color9">&#xe60a;</i>
            输入搜索...
          </span>
        </zgh-input>
      `
			}
		},
		computed:{

		},
		mounted(){

		},
		methods: {

		}
	}
</script>

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