DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-mpui/learun-ui-ali/banner.vue

<template>
  <view
    v-if="type === 'default'"
    :class="[hexColor ? '' : 'bg-' + color, fixed ? 'banner-fixed' : '', className]"
    :style="rootStyle"
    class="cu-bar cu-banner"
  >
    <view @click="clickLeft" class="action"><slot name="left"></slot></view>

    <view @click="clickCenter" class="content">
      <slot></slot>
      {{ title }}
    </view>

    <view @click="clickRight" class="action"><slot name="right"></slot></view>
  </view>

  <view
    v-else-if="type === 'search'"
    :class="[hexColor ? '' : 'bg-' + color, fixed ? 'banner-fixed' : '', className]"
    :style="rootStyle"
    class="cu-bar search cu-banner"
  >
    <slot name="left"></slot>
    <view class="search-form" :class="[fill ? 'radius' : 'round']" :style="inputStyle">
      <slot name="searchInput">
        <text class="cuIcon-search"></text>
        <input
          @input="searchTextChange"
          @focus="$emit('inputFocus', $event)"
          :placeholder-style="placeholderStyle"
          :adjust-position="false"
          :placeholder="placeholder"
          :value="value"
          :focus="focus"
          confirm-type="search"
          type="text"
          ref="bannerInput"
        />
      </slot>
    </view>
    <view v-if="!noSearchButton" class="action">
      <slot name="searchButton">
        <template v-if="fill">
          <view @click="searchClick">搜索</view>
        </template>
        <button v-else @click="searchClick" class="cu-btn bg-green shadow-blur round">搜索</button>
      </slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'l-banner',

  props: {
    type: { default: 'default' },
    color: { default: 'white' },
    hexColor: {},
    inputStyle: {},
    fill: {},
    title: {},
    value: {},
    placeholder: { default: '搜索图片、文章、视频' },
    noSearchButton: {},
    placeholderStyle: {},
    fixed: {},
    noshadow: {},
    focus: {}
  },

  methods: {
    searchTextChange(e) {
      this.$emit('input', e.detail.value)
      this.$emit('change', e.detail.value)
    },

    clickLeft(e) {
      this.$emit('clickLeft', e)
    },

    clickRight(e) {
      this.$emit('clickRight', e)
    },

    clickCenter(e) {
      this.$emit('clickCenter', e)
    },

    searchClick(F) {
      this.$emit('searchClick')
    },

    inputFocus() {
      this.$refs.bannerInput.focus()
    }
  },

  computed: {
    rootStyle() {
      return this.type === 'default'
        ? this.getStyle({
            backgroundColor: this.hexColor,
            boxShadow: this.noshadow ? null : '0 1rpx 6rpx rgba(0, 0, 0, 0.1)'
          })
        : this.getStyle({
            backgroundColor: this.hexColor,
            boxShadow: this.noshadow ? null : '0 1rpx 6rpx rgba(0, 0, 0, 0.1)'
          })
    }
  }
}
</script>

<style scoped>
.banner-fixed {
  position: fixed;
  width: 100%;
  top: var(--window-top);
  z-index: 1024;
}
</style>