vue制作的组件ContentHead，TableSeach

<div>ContentHead.vue</div>
    <template>
        <div class="content-head">
            <div class="content-head-title">
                <span v-if="hasBack" class="backicon" @click="handleBack">
                    <pay-icon-arrow-left/>
                </span>
                <span >
                    {{title}}
                </span>
            </div>
            <pay-tooltip v-show="hasTooltip" :content="tooltip" position="bottom">
                <i class="fa fa-question-circle" aria-hidden="true"></i>
            </pay-tooltip>    
            <div class="content-head-tools">
                <slot name="right"></slot>
            </div>
        </div>
        
    </template>
    <script>
        export default{
          props:{
              title:{
                  type:String
              },
              hasBack:{
                  type:Boolean,
                  default:false
              },
              backUrl:{
                  type:String
              },
              hasTooltip:{
                  type:Boolean,
                  default: false,
              },
              tooltip:{
                  type:String,
                  default:""
              }
              
          },
          methods:{
              handleBack(){
                  if(this.backUrl){
                      this.$router.push(this.backUrl);
                  }else{
                      this.$router.go(-1)
                  }
              }
          }
        
        }
    </script>

<div>TableSeach.vue</div>
    <template>
        <div :class="{'search-line':line}" class="form clearfix">
            <pay-select v-model="selectedField" :width="160" placeholder="请选择" class="fl">
                <pay-option v-for="option in options" :key="option.value" :value="option.value" :choosed-text="option.text">{{option.text}}</pay-option>
            </pay-select>
            <pay-input v-model="keyword_cache" :placeholder="searchPlaceholder" class="fl" @keydown.enter="submitSearch"/>
        <pay-button primary class="fl" @click="submitSearch"><pay-icon-search/></pay-button>
        
        </div>
    </template>
    <script>
        import trim from 'lodash/trim';
        export default{
            props:{
                options:{
                    type:Array,
                    default(){
                        return [];
                    }
                },
                placeholder:String,
                keyword:String,
                searchField:String,
                inline:Boolean
            },
            data(){
                return {
                    selectedField:'',
                    keyword_cache:'',
                }
            },
            computed:{
                searchPlaceholder(){
                    return this.placeholder||"输入文本";
                }
            },
            watch:{
                selectedField(val){
                    this.$emit('update:searchfield',val);
                },
                searchField(val){
                    this.selectedfiel=val;
                },
                keyword(val){
                    this.keyword_cache=val;
                }
            },
            mounted(){
                this.selectedField=this.searchField;
                this.keyword_cache=this.keyword;
            },
            methods:{
                submitSearch(){
                    this.$emit('update:keyword',trim(this.keyword_cache));
                    this.$emit("onSubmit")
                }
            }
        }
    </script>
    
    <div> Confirm.vue</div>
    <template>
        <pay-modal :open.sync="isOpen" :title="title" :size="size" scrollable>
            <div class="content  text-center" v-if="content">
                {{content}}
            </div>
            <div class="info  text-center" v-if="info">
                {{info}}
            </div>
            <slot v-esle name="content"></slot>
            <div slot="footer">
                <pay-button v-loading="submiting" class="btn-with-minwidth" primary @click="confirm">
                    {{confirmText}}
                </pay-button>
                <pay-button  class="btn-with-minwidth" primary @click="cancel">
                    {{cancelText}}
                </pay-button>
            </div>
        </pay-modal>
    </template>
    <script>
        export default{
            props:{
                cancelText:{
                    type:String,
                    default:'取消'
                },
                confirmText:{
                    type:String,
                    default:'确定'
                },
                title:{
                    type:String,
                    default:'提示'
                },
                content:{
                    type:String,
                    
                },
                info:{
                    type:String,
                    
                },
                size:{
                    type:String,
                    
                },
                isOpen:{
                    type:Boolean,
                    default:false
                },
                submiting:{
                    type:Boolean,
                    default:false
                }
            },
            data(){
                return{}
            },
            methods:{
                confirm(){
                    this.$emit('onConfim');
                },
                cancel(){
                    this.$emit('onCancel');
                }
            }
        }
    </script>
    
    <div>monaco编辑器</div>